/* ==========================================================================
   Cartelería · hoja de estilos única
   --------------------------------------------------------------------------
   Las secciones 01 a 04 son copia de sentidodigital.com.ar
   (D:\sentidodigital_web\web\assets\css): mismas fuentes, tokens y base, para
   que la web se vea como parte del sitio. Si cambia allá, copiarlas de nuevo.
   De 05 en adelante es propio de esta web.
   ========================================================================== */

/* ==========================================================================
   01 · Tipografías
   --------------------------------------------------------------------------
   Fuentes variables auto-hospedadas (no dependemos de Google Fonts).
   - Antonio         400–700 → títulos (condensada del manual de marca)
   - Hanken Grotesk  300–700 → cuerpo
   Ambas se eligieron midiendo el ancho normalizado de las letras contra el
   mockup: Antonio coincide al 0% y Hanken Grotesk al 2%.

   ⚠ POR QUÉ ESTE ARCHIVO NO ESTÁ EN /parts
   Es el único parcial con url(). El navegador resuelve las rutas relativas
   respecto del archivo CSS que las contiene, así que desde /parts habría que
   escribir '../../fonts/…' — y eso se rompería al inlinearlo en main.min.css,
   que vive en /assets/css. Dejándolo acá, '../fonts/…' apunta bien en los dos
   escenarios: con build y sin build.
   ========================================================================== */

/* Antonio — latin-ext */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/antonio-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Antonio — latin */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/antonio-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Fallbacks de Antonio con métricas ajustadas
   --------------------------------------------------------------------------
   Antonio es condensada: mientras se descarga, el texto se dibuja con la
   fuente del sistema, que es bastante más ancha, los títulos ocupan más
   renglones y la página SALTA cuando llega la real (eso mide el CLS).

   Medido sobre los títulos reales del sitio (mayúsculas, peso 700, que es
   como se usa esta fuente): a igual cuerpo, Antonio ocupa el 80,2 % del ancho
   de Arial Narrow, el 71,3 % de Roboto (Android) y el 65,7 % de Arial. Con
   size-adjust cada fallback se achica a esa proporción, así ocupa el mismo
   espacio que Antonio y al intercambiarse no se mueve nada.

   Van tres caras porque size-adjust es distinto para cada fuente y hay que
   saber cuál se usó; el orden de --font-display elige la primera disponible.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Antonio fallback narrow';
  src: local('Arial Narrow'), local('Helvetica Neue Condensed'), local('Liberation Sans Narrow');
  size-adjust: 80.2%;
}

@font-face {
  font-family: 'Antonio fallback android';
  src: local('Roboto'), local('Roboto Regular');
  size-adjust: 71.3%;
}

@font-face {
  /* Liberation Sans y Nimbus Sans son métricamente iguales a Arial, así que
     comparten el mismo ajuste; están en casi cualquier Linux. */
  font-family: 'Antonio fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Nimbus Sans');
  size-adjust: 65.7%;
}

/* Hanken Grotesk — latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk — latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   02 · Design tokens
   --------------------------------------------------------------------------
   Única fuente de verdad de colores, tipografía y espaciado.
   Los colores marcados como "oficiales" salen tal cual de guia_de_estilo.png.
   ========================================================================== */

:root {

  /* --- Paleta oficial (guia_de_estilo.png) ------------------------------ */
  --c-blanco:      #FFFFFF;   /* color principal          */
  --c-gris-claro:  #D9D9D9;   /* color principal          */
  --c-azul:        #041F3D;   /* color secundario         */
  --c-negro:       #141414;   /* neutro                   */
  --c-amarillo:    #FFC301;   /* acento                   */
  --c-gris-medio:  #999999;   /* neutro (estado disabled) */

  /* --- Derivados, muestreados del mockup -------------------------------- */
  --c-azul-900:    #020618;   /* footer                          */
  --c-azul-700:    #0A2F55;   /* hover de superficies azules     */
  --c-amarillo-600:#E5AE00;   /* hover del acento                */
  --c-gris-card:   #EDEDED;   /* tarjeta del formulario          */
  --c-gris-input:  #F9FAFB;   /* fondo de inputs                 */
  --c-menta:       #E3FFF9;   /* tarjeta de WhatsApp             */
  /* Verde de WhatsApp oscurecido: con el #2EDB71 original el texto blanco
     quedaba en 1,83:1 de contraste (WCAG pide 4,5:1). Este llega a 4,78:1
     y mantiene la combinación verde + blanco de la marca. */
  --c-verde:       #0F8440;   /* botón de WhatsApp               */
  --c-verde-600:   #0C6F36;   /* hover del botón de WhatsApp     */

  /* --- Roles semánticos ------------------------------------------------- */
  --texto:            var(--c-azul);
  --texto-cuerpo:     var(--c-negro);
  --texto-suave:      #5A6472;
  --texto-invertido:  var(--c-blanco);
  --superficie:       var(--c-blanco);
  --borde:            #E2E5E9;
  --foco:             var(--c-amarillo);

  /* --- Tipografía ------------------------------------------------------- */
  /* Los 'Antonio fallback*' están en fonts.css: son la fuente del sistema con
     las métricas ajustadas al ancho de Antonio, para que al cargar la real no
     se mueva la página. */
  --font-display: 'Antonio', 'Antonio fallback narrow', 'Antonio fallback android', 'Antonio fallback', sans-serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /*
   * Escala fluida: mínimo en mobile, máximo a 1440px (el ancho del mockup).
   * Los máximos NO son inventados: salen de medir en disenioweb.png la altura
   * de mayúscula y el ancho de cada bloque de texto, y de despejar el
   * font-size con las métricas reales de Antonio (cap = 0.86em) y
   * Hanken Grotesk (cap = 0.70em).
   */
  --fs-hero:     clamp(2.25rem, 1.05rem + 5.3vw, 3.75rem);    /* 36 → 60 */
  --fs-h2-xl:    clamp(2rem,    1.05rem + 4.2vw, 3.4375rem);  /* 32 → 55 */
  --fs-h2:       clamp(1.75rem, 1.2rem + 2.4vw, 2.625rem);    /* 28 → 42 */
  --fs-h3:       clamp(1.375rem, 1.15rem + 1vw, 1.75rem);     /* 22 → 28 */
  --fs-h4:       clamp(1.25rem, 1.08rem + 0.75vw, 1.625rem);   /* 20 → 26 */
  --fs-lead:     clamp(1.125rem, 0.85rem + 1.2vw, 1.75rem);   /* 18 → 28 */
  --fs-lead-lg:  clamp(1.25rem, 0.95rem + 1.3vw, 1.875rem);   /* 20 → 30 */
  /* La parte baja de la escala se subió un escalón respecto de lo medido en
     el mockup: a 12–15px los textos de tarjeta resultaban ilegibles en
     pantalla real. Prioriza la lectura por sobre la fidelidad exacta. */
  /* Texto que tiene que leerse, no escanearse: párrafos que son el contenido
     principal de su bloque. Antes era un clamp suelto dentro de una sección. */
  --fs-body-lg:  clamp(1.0625rem, 1rem + .3vw, 1.1875rem);    /* 17 → 19 */
  --fs-body:     1.0625rem;                                   /* 17      */
  --fs-sm:       1rem;                                        /* 16      */
  --fs-xs:       0.9375rem;                                   /* 15      */
  --fs-2xs:      0.75rem;                                     /* 12      */

  --lh-tight:  1.06;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.6;

  /* --- Espaciado -------------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;

  /* Padding vertical estándar de una sección. */
  --sp-seccion: clamp(3rem, 1.5rem + 6vw, 5.5rem);

  /* --- Layout ----------------------------------------------------------- */
  --ancho-contenido: 1200px;   /* mide 1200px en el mockup de 1440px */
  --padding-lateral: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  --alto-header:     100px;

  /* --- Formas y sombras ------------------------------------------------- */
  --radio-sm:  6px;
  --radio-md:  10px;
  --radio-lg:  16px;
  --radio-xl:  22px;
  --radio-pill: 999px;

  --sombra-sm:  0 2px 6px rgba(4, 31, 61, .08);
  --sombra-md:  0 8px 24px rgba(4, 31, 61, .10);
  --sombra-lg:  0 18px 48px rgba(4, 31, 61, .16);
  --sombra-btn: 0 4px 14px rgba(4, 31, 61, .18);

  /* Sombra dura de los titulares sobre foto (hero y precios). Es un
     desplazamiento abajo-derecha con poco desenfoque, como en el mockup. */
  --sombra-titulo: 3px 3px 3px rgba(0, 0, 0, .9);

  /* Velo azul sobre las imágenes de servicios. Se desvanece al pasar el mouse. */
  --velo-imagen: rgba(4, 31, 61, .58);
  --velo-imagen-saturacion: .5;

  /* --- Movimiento ------------------------------------------------------- */
  --trans-rapida: 140ms ease;
  --trans-media:  240ms cubic-bezier(.4, 0, .2, 1);
  --trans-lenta:  380ms cubic-bezier(.4, 0, .2, 1);

  /* --- Capas ------------------------------------------------------------
     El velo va POR DEBAJO del header: como el panel del menú vive dentro
     del header (que crea contexto de apilado con --z-header), un velo con
     z-index mayor lo taparía. --z-menu y --z-toggle se comparan entre sí
     dentro de ese contexto. */
  --z-overlay:  90;
  --z-header:  100;
  --z-menu:    110;
  --z-toggle:  120;
}

/* El header es sticky: reservamos su alto al saltar a un ancla. */
html {
  scroll-padding-top: calc(var(--alto-header) + 1rem);
}

/* ==========================================================================
   03 · Reset
   Normalización mínima y moderna. Sin opiniones de diseño.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Evita el scroll horizontal que provoca el panel del menú mobile cuando
     está cerrado (fixed + translateX(100%)). Usamos `clip` y no `hidden`
     porque `hidden` rompería el position:sticky del header. */
  overflow-x: clip;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}

/* Respeta la preferencia del sistema de reducir animaciones. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   04 · Base
   Tipografía por defecto y elementos globales.
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--texto-cuerpo);
  background-color: var(--superficie);
}

/* --- Títulos --------------------------------------------------------------
   Todos usan la condensada del manual de marca. El texto se escribe en
   mayúscula/minúscula normal en el HTML y se transforma por CSS: así los
   lectores de pantalla y el SEO reciben el texto correctamente escrito.
   ------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--texto);
  text-transform: uppercase;
  letter-spacing: .005em;
}

h1 { font-size: var(--fs-hero); font-weight: 700; line-height: var(--lh-tight); }

/* Los títulos de sección van en 700, no en 600: medidos contra el mockup,
   a 600 quedaban 15% más finos. Los h3/h4 sí coinciden a 600. */
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  line-height: var(--lh-loose);
}

strong, b {
  font-weight: 600;
}

/* --- Enlaces -------------------------------------------------------------- */

a {
  transition: color var(--trans-rapida);
}

a:hover {
  color: var(--c-amarillo-600);
}

/* --- Foco visible ---------------------------------------------------------
   Imprescindible para navegación con teclado. Se usa el amarillo de marca.
   ------------------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Selección de texto --------------------------------------------------- */

::selection {
  background-color: var(--c-amarillo);
  color: var(--c-azul);
}

/* --- Utilidad de accesibilidad -------------------------------------------- */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace "saltar al contenido", visible sólo al tabular. */
.saltar-contenido {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  font-weight: 600;
  color: var(--c-azul);
  background-color: var(--c-amarillo);
  border-radius: var(--radio-sm);
  transition: top var(--trans-rapida);
}

.saltar-contenido:focus {
  top: var(--sp-4);
  color: var(--c-azul);
}

/* ==========================================================================
   06 · Botones
   --------------------------------------------------------------------------
   Las seis variantes definidas en guia_de_estilo.png:
     .btn--acento      amarillo sólido, texto azul
     .btn--azul        azul sólido, texto amarillo
     .btn--gris        gris claro, texto azul
     .btn--blanco      blanco con borde, texto azul
     .btn--disabled    gris medio, texto amarillo
     .btn--contorno    fondo transparente, borde y texto amarillo
   Extra del mockup:
     .btn--whatsapp    verde de WhatsApp, texto blanco
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition:
    background-color var(--trans-rapida),
    border-color var(--trans-rapida),
    color var(--trans-rapida),
    transform var(--trans-rapida),
    box-shadow var(--trans-rapida);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn__icono {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* Botones que ocupan todo el ancho disponible. */
.btn--bloque {
  width: 100%;
}

/* Versión en mayúsculas y con tracking, como en el manual de marca. */
.btn--caps {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* --- Variantes ------------------------------------------------------------ */

.btn--acento {
  color: var(--c-azul);
  background-color: var(--c-amarillo);
  box-shadow: var(--sombra-btn);
}

.btn--acento:hover {
  color: var(--c-azul);
  background-color: var(--c-amarillo-600);
}

.btn--azul {
  color: var(--c-amarillo);
  background-color: var(--c-azul);
}

.btn--azul:hover {
  color: var(--c-amarillo);
  background-color: var(--c-azul-700);
}

.btn--gris {
  color: var(--c-azul);
  background-color: var(--c-gris-claro);
}

.btn--gris:hover {
  color: var(--c-azul);
  background-color: #C9C9C9;
}

.btn--blanco {
  color: var(--c-azul);
  background-color: var(--c-blanco);
  border-color: var(--borde);
}

.btn--blanco:hover {
  color: var(--c-azul);
  border-color: var(--c-amarillo);
}

.btn--contorno {
  color: var(--c-amarillo);
  background-color: transparent;
  border-color: var(--c-amarillo);
}

.btn--contorno:hover {
  color: var(--c-azul);
  background-color: var(--c-amarillo);
}

.btn--whatsapp {
  color: var(--c-blanco);
  background-color: var(--c-verde);
  box-shadow: 0 4px 14px rgba(15, 132, 64, .32);
}

.btn--whatsapp:hover {
  color: var(--c-blanco);
  background-color: var(--c-verde-600);
}

/* --- Estado deshabilitado ------------------------------------------------- */

.btn--disabled,
.btn:disabled,
.btn[aria-disabled='true'] {
  color: var(--c-amarillo);
  background-color: var(--c-gris-medio);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   09 · Formularios
   ========================================================================== */

.campo {
  display: block;
  margin-bottom: var(--sp-5);
}

.campo__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--c-azul);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.campo__control {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-azul);
  background-color: var(--c-gris-input);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.campo__control::placeholder {
  color: #9AA3AE;
}

.campo__control:hover {
  border-color: #CBD2DA;
}

.campo__control:focus {
  outline: none;
  border-color: var(--c-amarillo);
  box-shadow: 0 0 0 3px rgba(255, 195, 1, .28);
}

textarea.campo__control {
  min-height: 120px;
  resize: vertical;
  line-height: var(--lh-loose);
}

/* Mensaje de error por campo (lo escribe el JS de validación). */
.campo__error {
  display: none;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: #C0392B;
}

.campo.tiene-error .campo__control {
  border-color: #C0392B;
  background-color: #FFF6F5;
}

.campo.tiene-error .campo__error {
  display: block;
}

/* --- Honeypot antispam ----------------------------------------------------
   Campo invisible para humanos. Si viene completo, el envío se descarta.
   No usamos display:none (algunos bots lo detectan) ni left:-9999px (genera
   scroll horizontal): lo recortamos con clip-path, que no afecta al layout.
   ------------------------------------------------------------------------ */

.trampa {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* ==========================================================================
   05 · Estructura de la web (propio)
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
  background-color: #F4F6F8;
}

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-contenido) + var(--padding-lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--padding-lateral);
}

/* --- Header: la barra azul del sitio, más baja porque es una herramienta --- */

.header {
  background-color: var(--c-azul);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 72px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.marca__pin {
  width: auto;
  height: 40px;
  flex: none;
}

.marca__nombre {
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.5rem);
  font-weight: 600;
  color: var(--c-blanco);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.marca__producto {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.85rem + .7vw, 1.25rem);
  font-weight: 600;
  color: var(--c-amarillo);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.marca:hover .marca__nombre { color: var(--c-blanco); }

.cuenta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}

.cuenta__nombre {
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--c-gris-claro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuenta__salir {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-amarillo);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cuenta__salir:hover { color: var(--c-blanco); }

/* En un celular angosto el nombre del comercio no entra junto a la marca. */
@media (max-width: 560px) {
  .marca__nombre,
  .cuenta__nombre { display: none; }
}

/* --- Contenido y pie ------------------------------------------------------ */

.principal {
  flex: 1;
  padding-block: var(--sp-7) var(--sp-9);
}

.principal--angosta .contenedor {
  max-width: calc(30rem + var(--padding-lateral) * 2);
}

.principal--media .contenedor {
  max-width: calc(54rem + var(--padding-lateral) * 2);
}

.pie {
  padding-block: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-gris-claro);
  background-color: var(--c-azul-900);
}

.pie__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.pie a:hover { color: var(--c-amarillo); }

/* ==========================================================================
   06 · Componentes (propio)
   ========================================================================== */

/* --- Tarjeta: formularios de ingreso y asistentes ------------------------- */

.tarjeta {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--c-blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
}

.tarjeta__titulo {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.tarjeta__bajada {
  margin-bottom: var(--sp-6);
  color: var(--texto-suave);
}

.tarjeta__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.tarjeta__nota {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

.tarjeta__nota a,
.casilla a { text-decoration: underline; }

/* Botón con aspecto de enlace (acciones secundarias dentro de un form). */
.enlace {
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-azul);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enlace:hover { color: var(--c-amarillo-600); }

/* Campo de código: grande y espaciado, se lee fácil y se tipea sin errores. */
.campo__control--codigo {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-align: center;
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
}

.casilla input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  flex: none;
  accent-color: var(--c-azul);
}

/* --- Avisos --------------------------------------------------------------- */

.aviso {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  border-left: 4px solid;
  border-radius: var(--radio-sm);
}

.aviso--ok    { color: #0C5A2E; background-color: #E6F6EC; border-color: var(--c-verde); }
.aviso--aviso { color: #6B4E00; background-color: #FFF6D6; border-color: var(--c-amarillo); }
.aviso--error { color: #8A1F14; background-color: #FDECEA; border-color: #C0392B; }

/* --- Encabezado de página del panel --------------------------------------- */

.encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.encabezado__titulo {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}

/* --- Estado vacío --------------------------------------------------------- */

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
  background-color: var(--c-blanco);
  border: 2px dashed var(--borde);
  border-radius: var(--radio-lg);
}

.vacio__imagen { opacity: .8; }

.vacio__titulo { font-size: var(--fs-h3); }

/* --- Lista de pantallas --------------------------------------------------- */

.pantallas {
  display: grid;
  gap: var(--sp-4);
}

.pantalla {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--c-blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}

.pantalla__nombre {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.pantalla__detalle {
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

.etiqueta {
  flex: none;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-radius: var(--radio-pill);
}

.etiqueta--ok     { color: #0C5A2E; background-color: #E6F6EC; }
.etiqueta--aviso  { color: #6B4E00; background-color: #FFF6D6; }
.etiqueta--error  { color: #8A1F14; background-color: #FDECEA; }
.etiqueta--neutro { color: var(--texto-suave); background-color: var(--c-gris-card); }

/* --- Pasos del asistente -------------------------------------------------- */

.pasos {
  display: grid;
  gap: var(--sp-4);
  margin-block: var(--sp-6);
}

.pasos__item {
  display: flex;
  gap: var(--sp-4);
}

.pasos__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-azul);
  background-color: var(--c-amarillo);
  border-radius: 50%;
}

.pasos__titulo {
  margin-bottom: 2px;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: var(--lh-snug);
  text-transform: none;
}

.pasos p {
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

/* --- Elegir con qué se suma una pantalla ---------------------------------- */

.opciones {
  display: grid;
  gap: var(--sp-4);
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  color: inherit;
  text-decoration: none;
  background-color: var(--c-blanco);
  border: 2px solid var(--borde);
  border-radius: var(--radio-md);
  transition: border-color .15s, box-shadow .15s;
}

.opcion:hover,
.opcion:focus-visible {
  border-color: var(--c-amarillo);
  box-shadow: var(--sombra-sm);
}

.opcion__icono { flex: none; }

.opcion__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  height: 100%;
}

.opcion__titulo {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--texto);
}

.opcion__detalle {
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

.opcion__marca {
  align-self: flex-start;
  margin-top: auto;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-azul);
  background-color: #FFF6D6;
  border-radius: var(--radio-pill);
}

.ayuda {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
  background-color: var(--c-gris-input);
  border-radius: var(--radio-md);
}

.ayuda__titulo {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
}

.ayuda a { text-decoration: underline; }

.volver {
  display: inline-block;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--texto-suave);
}

.volver:hover { color: var(--c-azul); }

/* --- Pedido de dispositivos ----------------------------------------------- */

.pedido {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-xs);
  background-color: var(--c-gris-input);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
}

.pedido__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.pedido__total {
  padding-top: var(--sp-3);
  font-weight: 600;
  border-top: 1px solid var(--borde);
}

.pedido__importe {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--c-azul);
}

.pedido__montos {
  display: grid;
  justify-items: end;
  gap: var(--sp-2);
}

.pedido__unitario {
  font-size: var(--fs-2xs);
  font-style: italic;
  font-weight: 600;
  color: var(--texto-suave);
}

.pedido__nota {
  font-size: var(--fs-2xs);
  color: var(--texto-suave);
}

.contador {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.contador__btn {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-azul);
  background-color: var(--c-blanco);
  border: 1px solid var(--borde);
  border-radius: 50%;
  cursor: pointer;
}

.contador__btn:hover:not(:disabled) { border-color: var(--c-amarillo); }

.contador__btn:disabled {
  opacity: .4;
  cursor: default;
}

.contador__valor {
  min-width: 2ch;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  color: var(--c-azul);
}

.pedido__descuento {
  font-weight: 600;
  color: var(--c-verde);
}

/* Más del tope: en lugar del total, el aviso de precio a medida. */
.pedido [hidden] { display: none; }

.pedido__medida {
  padding-top: var(--sp-3);
  font-weight: 600;
  color: var(--c-azul);
  border-top: 1px solid var(--borde);
}

.pedido__pregunta {
  display: grid;
  gap: 2px;
  font-weight: 600;
}

.pedido__ayuda {
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--texto-suave);
}

/* En la compu, las dos opciones lado a lado y de la misma altura. */
@media (min-width: 48rem) {
  .opciones { grid-template-columns: 1fr 1fr; }
}

/* La etiqueta va al pie de la tarjeta: con margin-top auto se separa del texto. */
.opcion__detalle { margin-bottom: var(--sp-2); }

/* Ubicación del comercio, al pie del pedido. */
.pedido__ubicacion {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--borde);
}

.pedido__campos {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 30rem) {
  .pedido__campos { grid-template-columns: 1fr 1fr; }
}

.pedido .campo { margin-bottom: 0; }

.campo__opcional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-suave);
}

.pedido .campo__control {
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--c-blanco);
}

/* Botón por defecto del pedido (ver agregar-pantalla.php): existe pero no se ve. */
.solo-envio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Pedido del dispositivo: en la compu, los pasos a la izquierda y el pedido a
   la derecha, para que entre todo sin bajar. */
@media (min-width: 48rem) {
  .columnas {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--sp-7, 2.5rem);
    align-items: start;
  }

  .columnas .pasos { margin-block: 0; }
}

/* La provincia ocupa todo el ancho ("Ciudad de Buenos Aires" no entra a la mitad). */
.pedido__campos .campo:first-child { grid-column: 1 / -1; }

/* Recuadro gris claro para el formulario de la columna derecha. */
.recuadro {
  padding: var(--sp-5);
  background-color: var(--c-gris-input);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
}

.recuadro .campo__control { background-color: var(--c-blanco); }

.recuadro .tarjeta__nota { margin-top: var(--sp-4); }

/* Ficha del Player, como el resultado de la tienda en el sitio (prueba.css). */
.app-ficha {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background-color: var(--c-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
}

.app-ficha__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  background-color: var(--c-azul);
  border-radius: 12px;
}

.app-ficha__datos {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--texto-suave);
}

.app-ficha__datos strong {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-azul);
}

.app-ficha__datos a {
  font-weight: 600;
  color: var(--c-azul);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Contraste: banda azul y paneles de acción oscuros
   ========================================================================== */

/* Detrás de la tarjeta blanca, todo el fondo es la foto bajo el azul del
   header, como en el hero del sitio. Sólo en las páginas de tarjeta (ingreso y
   asistentes): en "Mis pantallas" el título va directo sobre el fondo. */
.principal--angosta,
.principal--media {
  position: relative;
  isolation: isolate;
}

/* Una pantalla de menú real (la del hero del sitio) bajo un velo azul: se
   adivina qué es sin competir con la tarjeta. */
.principal--angosta::before,
.principal--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(4, 31, 61, .86), rgba(4, 31, 61, .86)),
    url("../img/fondo-cafeteria.webp") center / cover no-repeat;
}

.principal--angosta .tarjeta,
.principal--media .tarjeta {
  box-shadow: var(--sombra-lg);
}

/* Opciones del primer paso: el ícono en un tile azul, como la ficha de la app. */
.opcion__icono {
  box-sizing: content-box;
  padding: 10px;
  background-color: #FFF6D6;
  border-radius: 12px;
}

/* ==========================================================================
   Menú del panel y biblioteca
   ========================================================================== */

/* --- Menú: Pantallas / Biblioteca, en la barra azul ----------------------- */

.menu {
  display: flex;
  gap: var(--sp-5);
  margin-right: auto;
  margin-left: var(--sp-7);
}

.menu__link {
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-gris-claro);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.menu__link:hover { color: var(--c-blanco); }

.menu__link.es-activo {
  color: var(--c-blanco);
  border-bottom-color: var(--c-amarillo);
}

@media (max-width: 720px) {
  .menu {
    gap: var(--sp-4);
    margin-left: var(--sp-4);
  }
}

.encabezado__bajada {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

/* --- Espacio usado ------------------------------------------------------ */

.espacio {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.espacio__barra {
  flex: 1;
  max-width: 320px;
  height: 8px;
  overflow: hidden;
  appearance: none;
  background-color: var(--borde);
  border: 0;
  border-radius: var(--radio-pill);
}

.espacio__barra::-webkit-progress-bar { background-color: var(--borde); }
.espacio__barra::-webkit-progress-value { background-color: var(--c-azul); }
.espacio__barra::-moz-progress-bar { background-color: var(--c-azul); }

.espacio__texto {
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

/* --- Zona para soltar archivos ------------------------------------------ */

.soltar {
  position: relative;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  /* Amarilla de entrada: es lo principal de la página */
  background-color: #FFFBEA;
  border: 2px dashed var(--c-amarillo);
  border-radius: var(--radio-lg);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.soltar:hover,
.soltar.es-arrastrando {
  background-color: #FFF1BF;
  border-style: solid;
}

/* El input queda accesible (lo abre el botón "Subir archivos"), pero no se ve */
.soltar__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.soltar__titulo {
  font-weight: 700;
  color: var(--c-azul);
}

.soltar__detalle {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

.soltar__sinjs {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: #8A1F14;
}

.soltar.con-js .soltar__sinjs { display: none; }

/* --- Subidas en curso --------------------------------------------------- */

.subidas {
  display: grid;
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}

.subidas:empty { display: none; }

.subida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  background-color: var(--c-blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}

.subida__nombre {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.subida__barra {
  width: 100%;
  height: 6px;
  accent-color: var(--c-azul);
}

.subida__estado {
  grid-column: 1 / -1;
  color: var(--texto-suave);
}

.subida.es-ok .subida__estado { color: #0C5A2E; }
.subida.es-error .subida__estado { color: #8A1F14; }

/* --- Grilla de archivos ------------------------------------------------- */

.biblioteca__vacia {
  margin-top: var(--sp-6);
  text-align: center;
  color: var(--texto-suave);
}

.biblioteca {
  display: grid;
  /* 150px: en el celular entran dos por fila */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: start;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.archivo {
  display: grid;
  gap: 2px;
  padding-bottom: var(--sp-3);
  overflow: hidden;
  background-color: var(--c-blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}

.archivo > :not(.archivo__vista) { padding-inline: var(--sp-3); }

.archivo__vista {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--sp-2);
  background-color: var(--c-azul);
}

.archivo__vista img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.archivo__tipo {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  padding: 2px var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--c-blanco);
  background-color: rgba(4, 31, 61, .8);
  border-radius: var(--radio-sm);
}

.archivo__nombre {
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--texto);
}

.archivo__datos {
  font-size: var(--fs-2xs);
  color: var(--texto-suave);
}

.archivo form { margin-top: var(--sp-1); }

.archivo__borrar {
  font-size: var(--fs-2xs);
  color: #8A1F14;
}

.archivo__vista { cursor: zoom-in; }

/* --- Vista previa de un archivo ----------------------------------------- */

.vista-previa {
  /* El reset deja todo en margin 0: el <dialog> se centra con auto */
  margin: auto;
  width: min(960px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: hidden;
  color: var(--c-blanco);
  background-color: var(--c-azul-900);
  border: 0;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
}

.vista-previa::backdrop { background-color: rgba(2, 6, 24, .75); }

.vista-previa__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}

.vista-previa__nombre {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vista-previa__cerrar {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-blanco);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  cursor: pointer;
}

.vista-previa__cerrar:hover { border-color: var(--c-amarillo); }

.vista-previa__contenido {
  display: grid;
  place-items: center;
  background-color: #000;
}

.vista-previa__contenido img,
.vista-previa__contenido video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 7rem);
}

/* ==========================================================================
   Pantalla y su lista de reproducción
   ========================================================================== */

.btn--contorno-azul {
  color: var(--c-azul);
  background-color: transparent;
  border: 2px solid var(--c-azul);
}

.btn--contorno-azul:hover {
  color: var(--c-blanco);
  background-color: var(--c-azul);
}

.editor {
  padding: var(--sp-5);
  background-color: var(--c-blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}

.editor__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.editor__titulo {
  margin-right: auto;
  font-size: var(--fs-h4);
}

.editor__cambios {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: #6B4E00;
  background-color: #FFF6D6;
  border-radius: var(--radio-pill);
}

/* Vacía, como la zona de subida de Biblioteca: amarilla, para que se vea por dónde empezar */
.editor__vacia {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--texto-suave);
  background-color: #FFFBEA;
  border: 2px dashed var(--c-amarillo);
  border-radius: var(--radio-md);
}
.editor__vacia[hidden] { display: none; }
.editor__vacia-titulo { font-weight: 700; color: var(--c-azul); }
.editor__vacia-detalle { margin-top: var(--sp-1); font-size: var(--fs-xs); }
.editor__vacia-subir { margin-top: var(--sp-4); }

.editor__ayuda {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--texto-suave);
}

.lista {
  display: grid;
  gap: var(--sp-2);
  counter-reset: item;
}

.item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--c-gris-input);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  counter-increment: item;
}

.item.es-arrastrado { opacity: .4; }

.item__mover {
  flex: none;
  color: var(--c-gris-medio);
  letter-spacing: -.2em;
  cursor: grab;
}

/* El número de orden, antes de la miniatura */
.item__mover::after {
  content: counter(item);
  display: inline-block;
  min-width: 1.75em;
  margin-left: var(--sp-2);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-azul);
}

.item__vista {
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background-color: var(--c-azul);
  border-radius: var(--radio-sm);
}

.item__texto {
  display: grid;
  min-width: 0;
  margin-right: auto;
}

.item__nombre {
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item__tipo {
  font-size: var(--fs-2xs);
  color: var(--texto-suave);
}

.item__duracion {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--texto-suave);
}

.item__duracion input {
  width: 4.5rem;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  text-align: right;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}

.item__duracion--fija {
  min-width: 6rem;
  justify-content: flex-end;
  font-weight: 600;
}

.item__acciones {
  display: flex;
  flex: none;
  gap: var(--sp-1);
}

.item__boton {
  width: 2rem;
  height: 2rem;
  font-weight: 700;
  color: var(--c-azul);
  background-color: var(--c-blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  cursor: pointer;
}

.item__boton:hover { border-color: var(--c-azul); }
.item__boton--quitar { color: #8A1F14; }

@media (max-width: 640px) {
  .item { flex-wrap: wrap; }
  .item__texto { flex-basis: calc(100% - 140px); }
  .item__acciones { margin-left: auto; }
}

/* --- Elegir de la biblioteca ------------------------------------------- */

.elegir {
  margin: auto;
  width: min(880px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
}

.elegir::backdrop { background-color: rgba(2, 6, 24, .6); }

.elegir__barra,
.elegir__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.elegir__titulo { font-size: var(--fs-h4); }

.elegir__cerrar {
  color: var(--c-azul);
  border-color: var(--borde);
}

.elegir__vacia {
  padding: 0 var(--sp-5) var(--sp-6);
  color: var(--texto-suave);
}

.elegir__vacia a { text-decoration: underline; }

.elegir__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
  max-height: 60vh;
  padding: 0 var(--sp-5);
  overflow-y: auto;
}

.elegir__pie { justify-content: flex-end; }

.elegible {
  position: relative;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border: 2px solid var(--borde);
  border-radius: var(--radio-md);
  cursor: pointer;
}

.elegible:has(input:checked) {
  background-color: #FFFBEA;
  border-color: var(--c-amarillo);
}

.elegible input {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--c-azul);
}

.elegible img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background-color: var(--c-azul);
  border-radius: var(--radio-sm);
}

.elegible__nombre {
  overflow: hidden;
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* En "Mis pantallas" cada pantalla lleva a su lista */
.pantalla--enlace {
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s;
}

.pantalla--enlace:hover { box-shadow: var(--sombra-md); }

.pantalla__lista {
  margin-left: auto;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--c-azul);
}

/* --- Biblioteca: en qué pantallas está y "Mandar a pantallas" ------------ */

.archivo__uso {
  font-size: var(--fs-2xs);
  color: var(--texto-suave);
}

.archivo__uso.es-usado {
  font-weight: 700;
  color: #0C5A2E;
}

.mandar { margin-top: var(--sp-2); }

.mandar__abrir {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--c-azul);
  cursor: pointer;
}

.mandar form {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  background-color: var(--c-gris-input);
  border-radius: var(--radio-sm);
}

.mandar__pantalla {
  margin-bottom: 0;
  font-size: var(--fs-2xs);
}

.mandar__enviar {
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-2xs);
}

/* El pie y el aviso de vacía se muestran u ocultan según haya archivos (lista.js) */
.elegir [hidden] { display: none; }

/* Elemento oculto: queda en la lista, en gris, y el TV no lo muestra */
.item.es-oculto { background-color: var(--c-blanco); border-style: dashed; }
.item.es-oculto .item__vista,
.item.es-oculto .item__texto,
.item.es-oculto .item__duracion { opacity: .45; }
.item__oculto { display: none; font-weight: 700; color: #6B4E00; }
.item.es-oculto .item__oculto { display: inline; }
.item__boton--ojo { display: inline-grid; place-items: center; }
.item__tachado { display: none; }
.item.es-oculto .item__tachado { display: inline; }
.item.es-oculto .item__boton--ojo { color: #6B4E00; border-color: var(--c-amarillo); background-color: #FFF6D6; }

/* --- Cómo está colgado el TV -------------------------------------------- */

.orientacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: 0 0 var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--borde);
}

/* Es un ajuste que se toca una vez: chico, para que lo principal sea la lista */
.orientacion__titulo {
  float: left;   /* el legend de un fieldset no entra al flex si no flota */
  width: 100%;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.orientacion__opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--texto-suave);
  background-color: var(--c-blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}

.orientacion__opcion:hover { border-color: var(--c-azul); color: var(--c-azul); }

.orientacion__opcion:has(input:checked) {
  color: var(--c-azul);
  background-color: #FFFBEA;
  border-color: var(--c-amarillo);
}

/* El radio no se ve (lo marca el recuadro), pero sigue andando con teclado */
.orientacion__opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.orientacion__opcion:has(input:focus-visible) { outline: 2px solid var(--c-azul); outline-offset: 2px; }

/* Un TV chiquito dibujado con CSS: acostado o parado */
.orientacion__tv {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.orientacion__tv--vertical_derecha,
.orientacion__tv--vertical_izquierda {
  width: 13px;
  height: 20px;
}

/* La marca amarilla es la base del TV: muestra para qué lado se giró */
.orientacion__tv::after {
  content: "";
  position: absolute;
  background-color: var(--c-amarillo);
}

.orientacion__tv--horizontal::after { left: 4px; right: 4px; bottom: -5px; height: 2px; }
.orientacion__tv--vertical_derecha::after { top: 4px; bottom: 4px; left: -5px; width: 2px; }
.orientacion__tv--vertical_izquierda::after { top: 4px; bottom: 4px; right: -5px; width: 2px; }
.orientacion__tv--invertida::after { left: 4px; right: 4px; top: -5px; height: 2px; }

.orientacion__ayuda {
  width: 100%;
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--texto-suave);
}

/* --- Staff: lista de clientes y aviso de "estás en la cuenta de…" -------- */

.buscador {
  display: flex;
  gap: var(--sp-2);
}

.buscador .campo__control { min-width: 0; width: 260px; }

.actuando {
  color: #6B4E00;
  background-color: #FFF6D6;
  border-bottom: 3px solid var(--c-amarillo);
}

.actuando__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-3);
  font-size: var(--fs-xs);
}

.actuando__salir {
  padding: var(--sp-1) var(--sp-3);
  font: inherit;
  font-weight: 600;
  color: #6B4E00;
  background: none;
  border: 2px solid currentColor;
  border-radius: var(--radio-sm);
  cursor: pointer;
}

.actuando__salir:hover { background-color: var(--c-amarillo); }

/* Staff: el código de cada TV y el recuadro de soporte en la pantalla */

.pantalla__codigo {
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--fs-2xs);
  color: var(--c-azul);
}

.soporte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background-color: #FFF6D6;
  border-left: 4px solid var(--c-amarillo);
  border-radius: var(--radio-sm);
}

.soporte__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  font-size: var(--fs-xs);
}

.soporte__datos dt { font-size: var(--fs-2xs); color: var(--texto-suave); }
.soporte__datos dd { margin: 0; font-weight: 600; }

.soporte form { display: flex; align-items: center; gap: var(--sp-3); }

/* --- Pagos ---------------------------------------------------------------- */

.abono {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  margin-bottom: var(--sp-6);
  padding: var(--sp-6);
  background-color: var(--c-blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}

.abono__estado { display: grid; gap: var(--sp-2); justify-items: start; }
.abono__vence { font-size: var(--fs-xs); }
.abono__monto { display: grid; gap: var(--sp-1); }
.abono__cantidad { font-size: var(--fs-xs); color: var(--texto-suave); }

.abono__total {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--c-azul);
}

.abono__botones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.abono__ayuda { font-size: var(--fs-2xs); color: var(--texto-suave); }

/* El recuadro de staff, apilado: formularios y la tabla de pagos */
.soporte--columna { display: grid; justify-content: stretch; }

.soporte__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  text-transform: uppercase;
}

.soporte__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
}

.soporte__form .campo { margin: 0; }
.soporte__ancho { flex: 1 1 260px; }
.soporte__ayuda { font-size: var(--fs-2xs); color: var(--texto-suave); }

.soporte__tabla {
  width: 100%;
  font-size: var(--fs-2xs);
  border-collapse: collapse;
}

.soporte__tabla th { text-align: left; color: var(--texto-suave); font-weight: 600; }
.soporte__tabla th, .soporte__tabla td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid rgba(0,0,0,.08); }
.soporte__scroll { overflow-x: auto; }

/* Ficha del cliente (staff) */
.ficha { justify-items: stretch; }
.cliente__link { color: inherit; text-decoration: none; }
.cliente__link:hover { text-decoration: underline; }

/* Pagos del cliente: tabla del monto y elección del medio */
.abono__tabla {
  width: 100%;
  max-width: 560px;
  font-size: var(--fs-xs);
  border-collapse: collapse;
}

.abono__tabla th {
  padding: var(--sp-2) 0;
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--texto-suave);
  border-bottom: 2px solid var(--borde);
}

.abono__tabla td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--borde); }
.abono__tabla th:last-child, .abono__importe { text-align: right; }

.abono__importe {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--c-azul);
}

.medios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  width: 100%;
  max-width: 560px;
  margin: 0;
  padding: 0;
  border: 0;
}

.medios__titulo {
  float: left;   /* igual que .orientacion__titulo: si no flota, no entra al flex */
  width: 100%;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.medios__opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--sp-2);
  flex: 1 1 220px;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  border: 2px solid var(--borde);
  border-radius: var(--radio-md);
  cursor: pointer;
}

.medios__opcion input { accent-color: var(--c-azul); }
.medios__detalle { grid-column: 2; font-size: var(--fs-2xs); font-weight: 400; color: var(--texto-suave); }

.medios__opcion:has(input:checked) {
  background-color: #FFFBEA;
  border-color: var(--c-amarillo);
}

/* El botón de pago aparece recién cuando se elige su medio */
.medios__pagar { display: none; width: 100%; justify-content: center; }
.medios:has(input[value="mercadopago"]:checked) .medios__pagar--mercadopago,
.medios:has(input[value="paypal"]:checked) .medios__pagar--paypal { display: flex; }
.abono__tabla--historial { max-width: none; }
.abono__tabla--historial th:last-child { text-align: left; }
.abono > .soporte__scroll { width: 100%; }
.abono__tabla--historial th, .abono__tabla--historial td { padding-right: var(--sp-4); }

/* Detalle por pantalla y pago */
.abono > .soporte__scroll { max-width: 640px; }
.abono__tabla--detalle { max-width: none; }
.abono__tabla--detalle th:nth-child(2) { text-align: right; }
.abono__tabla--detalle td, .abono__tabla--detalle th { padding-right: var(--sp-3); }
.abono__tabla--detalle tfoot th { padding-top: var(--sp-3); font-size: var(--fs-xs); color: var(--texto); text-transform: none; border: 0; }
.abono__importe--total { font-size: var(--fs-h3); }
.abono__accion { text-align: right; white-space: nowrap; }
.abono__accion .enlace { font-size: var(--fs-2xs); }
.abono__tabla tr.es-baja td:first-child { color: var(--texto-suave); }
.abono__tabla tr.es-baja .etiqueta { margin-left: var(--sp-2); }
.medios__pagar--paypal { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.medios__pagar--paypal > .btn--acento { align-self: stretch; }
.abono__tabla--detalle td.abono__importe { font-family: inherit; font-size: var(--fs-xs); color: var(--texto); }
.abono__tabla--detalle tfoot .abono__importe--total { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--c-azul); }

/* --- Cobranza (staff) ----------------------------------------------------- */

.cobranza__mes { display: flex; align-items: center; gap: var(--sp-3); }
.cobranza__mes .btn { padding-inline: var(--sp-3); }

.cobranza__resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.cobranza__dato {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--c-blanco);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}

.cobranza__dato span { font-size: var(--fs-2xs); color: var(--texto-suave); }
.cobranza__dato strong { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--c-azul); }
.cobranza__dato--debe strong { color: #C0392B; }

.cobranza__filtros { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.cobranza__filtro {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  border: 2px solid var(--borde);
  border-radius: 999px;
}

.cobranza__filtro.es-activo { background-color: #FFFBEA; border-color: var(--c-amarillo); }

.cobranza {
  width: 100%;
  font-size: var(--fs-xs);
  background-color: var(--c-blanco);
  border-collapse: collapse;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
}

.cobranza th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--texto-suave);
  border-bottom: 2px solid var(--borde);
}

.cobranza td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--borde); vertical-align: top; }
.cobranza__sub { display: block; font-size: var(--fs-2xs); color: var(--texto-suave); }

/* Los que deben, en rojo */
.cobranza tr.es-deudor td { background-color: #FDECEA; }
.cobranza tr.es-deudor td:first-child { box-shadow: inset 4px 0 0 #C0392B; }
.cobranza tr.es-deudor .cliente__link { color: #8A1F14; font-weight: 600; }
.cliente__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-left: auto; }

/* Suspender por falta de pago */
.btn--peligro { color: #fff; background-color: #C0392B; border-color: #C0392B; }
.btn--peligro:hover { background-color: #962D22; border-color: #962D22; }
.btn--chico { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-2xs); }
.ficha__suspender { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cobranza__accion { text-align: right; white-space: nowrap; vertical-align: middle; }

/* Cartel de abono por vencer / vencido */
.aviso--vence { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); font-weight: 600; }

/* Plantillas de Canva (Biblioteca) */
.canva {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
  justify-content: space-between;
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: linear-gradient(120deg, #EEFBFC 0%, #F3EEFF 100%);
  border: 1px solid #DCD0FF;
  border-left: 5px solid #7D2AE8;
  border-radius: var(--radio-lg);
}
.canva__texto { flex: 1 1 320px; }
.canva__titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  color: var(--c-azul);
}
/* Los colores de Canva: se reconoce, sin robarle el lugar a la subida */
.canva__marca {
  padding: 2px var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: none;
  color: #fff;
  background: linear-gradient(120deg, #00C4CC, #7D2AE8);
  border-radius: 999px;
}
.canva__pasos { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--texto-suave); }
.canva__lista { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.canva__abrir { color: #fff; background-color: #7D2AE8; border-color: #7D2AE8; }
.canva__abrir:hover { color: #fff; background-color: #5A32FA; border-color: #5A32FA; }
.canva__pedir { margin-bottom: var(--sp-4); font-size: var(--fs-xs); color: var(--texto-suave); }

/* Diálogo de confirmación (app.js: dialogo), en lugar del confirm() del navegador */
.dialogo {
  width: min(500px, calc(100vw - 32px));
  margin: auto;
  padding: var(--sp-6);
  color: var(--texto);
  background-color: var(--c-blanco);
  border: 0;
  border-top: 5px solid var(--c-amarillo);
  border-radius: var(--radio-lg);
  box-shadow: 0 24px 60px rgba(2, 6, 24, .35);
}
.dialogo::backdrop { background-color: rgba(2, 6, 24, .6); }
.dialogo[open] { animation: dialogo-entra .15s ease-out; }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dialogo__titulo { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.15; text-transform: uppercase; color: var(--c-azul); }
.dialogo__texto { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--texto-suave); }
.dialogo__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-6); }

/* --- Mis pantallas en tarjetas, con la vista previa de lo que muestran ---- */
.pantallas--tarjetas { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); }
.pantallas--tarjetas .pantalla {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.pantallas--tarjetas .pantalla:hover { transform: translateY(-2px); }
.pantalla__portada {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background-color: var(--c-azul);
}
.pantalla__portada img { width: 100%; height: 100%; object-fit: cover; }
.pantalla__portada--vertical img { width: auto; height: 100%; aspect-ratio: 9 / 16; }
.pantalla__portada.es-vacia { background-color: #FFFBEA; border-bottom: 2px dashed var(--c-amarillo); }
.pantalla__agregar { font-size: var(--fs-xs); font-weight: 700; color: var(--c-azul); }
.pantalla--enlace:hover .pantalla__agregar { text-decoration: underline; }
.pantalla__estado { position: absolute; top: var(--sp-3); left: var(--sp-3); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
/* En línea: un punto verde que late */
.pantalla__estado.etiqueta--ok { display: inline-flex; align-items: center; gap: 6px; }
.pantalla__estado.etiqueta--ok::before {
  content: "";
  width: 7px;
  height: 7px;
  background-color: #1E9E55;
  border-radius: 50%;
  animation: late 1.8s ease-out infinite;
}
@keyframes late {
  0% { box-shadow: 0 0 0 0 rgba(30, 158, 85, .6); }
  100% { box-shadow: 0 0 0 7px rgba(30, 158, 85, 0); }
}
.pantalla__cuerpo { display: flex; flex: 1; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.pantalla__pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }
.pantallas--tarjetas .pantalla__lista { margin-left: 0; }

/* El nombre de la pantalla, igual que en Mis pantallas */
.abono__pantalla { font-family: var(--font-display); font-size: var(--fs-h5, 1.125rem); letter-spacing: .02em; text-transform: uppercase; color: var(--c-azul); }

/* --- Pedir diseño (cliente) ---------------------------------------------- */
.pedir {
  padding: var(--sp-6);
  background-color: var(--c-blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}
.pedir__grupo { margin: 0 0 var(--sp-5); padding: 0; border: 0; }
.pedir__titulo {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-azul);
}
.pedir__tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.pedir__tipo {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  border: 2px solid var(--borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.pedir__tipo:hover { border-color: var(--c-azul); }
.pedir__tipo:has(input:checked) { background-color: #FFFBEA; border-color: var(--c-amarillo); }
.pedir__tipo:has(input:focus-visible) { outline: 2px solid var(--c-azul); outline-offset: 2px; }
.pedir__tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pedir__tipo-nombre { font-weight: 700; color: var(--c-azul); }
.pedir__tipo-detalle { font-size: var(--fs-2xs); color: var(--texto-suave); }
.pedir__formatos { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pedir__formatos .orientacion__opcion { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.pedir__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--sp-5); }
.pedir__ayuda { display: block; margin-top: var(--sp-1); font-size: var(--fs-2xs); color: var(--texto-suave); }
.pedir__archivos {
  display: block;
  margin-bottom: var(--sp-5);
  padding: var(--sp-5);
  background-color: #FFFBEA;
  border: 2px dashed var(--c-amarillo);
  border-radius: var(--radio-md);
}
.pedir__archivos-titulo { font-weight: 700; color: var(--c-azul); }
.pedir__archivos input { display: block; width: 100%; margin-top: var(--sp-3); font-size: var(--fs-xs); }
.pedir__archivos input::file-selector-button {
  margin-right: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  font: inherit;
  font-weight: 600;
  color: var(--c-amarillo);
  background-color: var(--c-azul);
  border: 0;
  border-radius: var(--radio-sm);
  cursor: pointer;
}
.pedir__enviar { min-width: 220px; }
.pedir__lista-titulo { margin: var(--sp-7) 0 var(--sp-4); font-size: var(--fs-h4); }
.pedidos { display: grid; gap: var(--sp-3); }
.pedidos__item { padding: var(--sp-4) var(--sp-5); background-color: var(--c-blanco); border-radius: var(--radio-md); box-shadow: var(--sombra-sm); }
.pedidos__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); color: var(--c-azul); }
.pedidos__texto { margin-top: var(--sp-2); font-size: var(--fs-xs); }
.pedidos__datos { margin-top: var(--sp-1); font-size: var(--fs-2xs); color: var(--texto-suave); }
.pedidos__nota { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); background-color: #F3EEFF; border-left: 3px solid #7D2AE8; border-radius: var(--radio-sm); }
.pedidos__ver { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; }

/* --- Pedidos (staff) ------------------------------------------------------ */
.menu__cuenta {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 4px;
  padding: 0 5px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.4em;
  text-align: center;
  color: var(--c-azul);
  background-color: var(--c-amarillo);
  border-radius: 999px;
}
.pedido-ficha { display: grid; justify-items: start; gap: var(--sp-4); }
.pedido-ficha__texto { max-width: 70ch; font-size: var(--fs-sm); line-height: var(--lh-loose); }
.pedido-ficha__archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); width: 100%; }
.pedido-ficha__archivo { display: grid; gap: 2px; min-width: 0; }
.pedido-ficha__vista {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--c-gris-card);
  border-radius: var(--radio-sm);
}
.pedido-ficha__vista img { width: 100%; height: 100%; object-fit: contain; }
.pedido-ficha__ext { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--c-azul); }
.pedido-ficha__nombre { overflow: hidden; font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pedido-ficha__datos { font-size: var(--fs-2xs); color: var(--texto-suave); }

/* Entrega de un pedido: staff la sube en la ficha, el cliente la ve en su pedido */
.entrega { display: grid; justify-items: start; gap: var(--sp-3); }
.entrega .subidas { width: 100%; }
.entrega__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); width: 100%; }
.entrega__item { display: grid; gap: 2px; min-width: 0; }
.pedidos__entrega { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.pedidos__pieza { margin: 0; }
.pedidos__pieza video,
.pedidos__pieza img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background-color: var(--c-azul); border-radius: var(--radio-sm); }
.pedidos__pieza figcaption { margin-top: 4px; overflow: hidden; font-size: var(--fs-2xs); color: var(--texto-suave); white-space: nowrap; text-overflow: ellipsis; }
.pedidos__mandar { margin-top: var(--sp-3); }

/* Respuesta del cliente a lo entregado */
.pedidos__cambio { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); background-color: #FFF6D6; border-left: 3px solid var(--c-amarillo); border-radius: var(--radio-sm); }
.pedidos__respuesta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--borde); }
.pedidos__pregunta { flex-basis: 100%; font-weight: 700; color: var(--c-azul); }
.pedidos__cambios > summary { list-style: none; }
.pedidos__cambios > summary::-webkit-details-marker { display: none; }
.pedidos__cambios[open] { flex-basis: 100%; }
.pedidos__cambios[open] > summary { margin-bottom: var(--sp-3); }
.pedidos__plantilla { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: linear-gradient(120deg, #EEFBFC 0%, #F3EEFF 100%); border: 1px solid #DCD0FF; border-radius: var(--radio-md); font-size: var(--fs-xs); }
.respuesta { display: grid; gap: var(--sp-3); }
.respuesta__cambio { padding: var(--sp-3) var(--sp-4); background-color: #FFF6D6; border-left: 3px solid var(--c-amarillo); border-radius: var(--radio-sm); }
.respuesta__fecha { font-size: var(--fs-2xs); font-weight: 700; color: #6B4E00; }
.pedidos__revisar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); color: inherit; text-decoration: none; }

/* --- Monitoreo (staff) ---------------------------------------------------- */
.menu__cuenta--alerta { color: #fff; background-color: #C0392B; }
.monitoreo__alertas { display: flex; flex-wrap: wrap; gap: 4px; }
.monitoreo tr.es-problema td:first-child { box-shadow: inset 4px 0 0 #C0392B; }
.monitoreo__nombre { font-weight: 600; }
.monitoreo__sub { display: block; font-size: var(--fs-2xs); color: var(--texto-suave); }
.monitoreo-caja__datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3) var(--sp-5); margin: 0; }
.monitoreo-caja__datos dt { font-size: var(--fs-2xs); color: var(--texto-suave); }
.monitoreo-caja__datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.monitoreo-caja__grafico { width: 100%; height: auto; }
.monitoreo-caja__grafico .barra { fill: var(--c-azul); }
.monitoreo-caja__grafico .barra--alta { fill: #C0392B; }
.monitoreo-caja__grafico .limite { stroke: #C0392B; stroke-dasharray: 4 4; }
.monitoreo-caja__grafico text { font-size: 10px; fill: var(--texto-suave); }
.monitoreo .t-ok, .monitoreo-caja .t-ok { color: #0C5A2E; }
.monitoreo .t-leve, .monitoreo-caja .t-leve { color: #8A6100; font-weight: 600; }
.monitoreo .t-alta, .monitoreo-caja .t-alta { color: #C0392B; font-weight: 700; }
.monitoreo .dim, .monitoreo-caja .dim { color: var(--texto-suave); }
.monitoreo .sinsenal { color: #C0392B; font-weight: 700; }
.monitoreo-caja__arranco { font-weight: 700; color: var(--c-azul); }
.caja-alta > summary { cursor: pointer; list-style: none; }
.caja-alta > summary::-webkit-details-marker { display: none; }
.caja-alta[open] > summary { margin-bottom: var(--sp-3); }
.caja-alta { margin-bottom: var(--sp-4); }
.caja-cuenta { margin: var(--sp-3) 0 var(--sp-4); }
.caja-cuenta > summary { cursor: pointer; color: var(--texto-suave); font-size: var(--fs-2xs); }
.caja-cuenta[open] > summary { margin-bottom: var(--sp-3); }