/* =====================================================================
   Hoja de recogida de datos — estilos
   Sistema: carbón cálido + rojo señal (acento) sobre papel cálido.
   Tipografía: Archivo (titulares) / IBM Plex Sans (texto) / Plex Mono (cifras).
   ===================================================================== */

:root {
  /* Identidad de la MARCA de telefonía mostrada en el formulario y el PDF
     de una hoja concreta (hoy siempre Fibritel — será dinámica por marca
     en la Fase 4). Las pantallas de la propia PLATAFORMA (login, panel de
     admin, panel de oficina) nunca usan estas variables — ver
     [data-tema="plataforma"] más abajo y "Marca: somos intermediarios
     multimarca" en PLAN-MULTIOFICINA.md. */
  --tinta: #24191A;
  --texto: #1F1A1A;
  --suave: #6B5E5E;
  --linea: #DBD0CE;
  --fondo: #F5F1F0;
  --papel: #FFFFFF;
  --senal: #C1121F;
  --senal-clara: #E8776B;
  --senal-oscuro: #9E0F19;
  --sombra-boton: rgba(193, 18, 31, .9);
  --foco: rgba(232, 119, 107, .18);
  --acento-oscuro: #E8776B;
  --sobre-oscuro-atenuado: rgba(255, 255, 255, .6);
  --alerta: #B45309;

  --radio: 10px;
  --sombra: 0 1px 2px rgba(36, 25, 26, .06), 0 8px 24px -18px rgba(36, 25, 26, .45);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --cuerpo: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --numeros: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* =====================================================================
   Identidad de PULSAR — la plataforma en sí (login general, login por
   oficina, panel de administrador, panel de oficina). Nunca la marca de
   telefonía que se vende a través de ella: esas pantallas (form.html, el
   PDF) siguen usando las variables de arriba sin este atributo.

   Nombre/eslogan/logo centralizados en public/identidad-plataforma.js;
   la paleta, en este único bloque — cambiar cualquiera de los dos no
   exige tocar ningún otro archivo.

   Contraste comprobado (fórmula WCAG, mínimo exigido 4,5:1) para cada
   combinación real de texto/fondo que usan estas pantallas:
     texto sobre fondo claro (#171C2B / #F8F9FC ......... 16,1:1
     suave sobre fondo claro (#616A80 / #F8F9FC) ......... 5,1:1
     acento sobre fondo claro (#3F5488 / #F8F9FC) ........ 7,0:1
     blanco sobre acento -- botones (#FFF / #3F5488) ..... 7,4:1
     blanco sobre chrome -- barra (#FFF / #2A3A68) ....... 11,0:1
     dorado sobre chrome (#F2C94C / #2A3A68) .............. 7,0:1
     dorado sobre superficie (#F2C94C / #35477A) .......... 5,7:1
   El dorado dado (#F2C94C) SOLO se usa sobre chrome/superficie oscuros
   -- sobre blanco da ~1,6:1, ilegible, tal como advertiste.
   El "texto sobre oscuro atenuado" propuesto (#96A0C0) NO llega a 4,5:1
   ni sobre chrome (4,25:1) ni sobre superficie (3,47:1) -- en vez de
   aclarar el texto, se oscureció el efecto: blanco muy translúcido
   (70%), que sí llega (6,3:1 y 5,4:1). Ver el mensaje de respuesta para
   el detalle completo. */
[data-tema="plataforma"] {
  --tinta: #2A3A68;              /* chrome: barra y login */
  --texto: #171C2B;
  --suave: #616A80;
  --linea: #DFE3EC;
  --fondo: #F8F9FC;
  --papel: #FFFFFF;
  --senal: #3F5488;              /* acento sobre fondo claro: botones, enlaces, foco */
  --senal-clara: #3F5488;
  --senal-oscuro: #24304F;
  --sombra-boton: rgba(63, 84, 136, .5);
  --foco: rgba(63, 84, 136, .22);
  --acento-oscuro: #F2C94C;      /* dorado — SOLO sobre --tinta o --pulsar-superficie, nunca sobre fondo claro */
  --sobre-oscuro-atenuado: rgba(255, 255, 255, .7);
  --alerta: #B45309;

  --pulsar-superficie: #35477A;
  --pulsar-borde-oscuro: #4B5C93;

  /* Tarjeta de login -- azul, no blanca, para que el dorado funcione como
     acento dentro de ella (ver la nota de contraste en la seccion de
     abajo). Solo se usan dentro de .acceso; el resto de tarjetas del
     sistema (paneles, modales) se quedan en --papel blanco. */
  --acceso-fondo: #3D5187;
  --acceso-borde: #55689F;
  --acceso-campo-fondo: #2A3A68;
  --acceso-eyebrow: #F7D97A;
  --acceso-atenuado: rgba(255, 255, 255, .75);
  --acceso-boton-fondo: #F2C94C;
  --acceso-boton-fondo-hover: #E3BE47;
  --acceso-boton-texto: #1E2A4A;
  --acceso-boton-sombra: rgba(242, 201, 76, .45);
  --acceso-foco: rgba(242, 201, 76, .38);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------- Marca / logo ------------------------- */

.logo { display: block; height: 40px; width: auto; border-radius: 6px; flex-shrink: 0; }
/* Misma especificidad que [hidden] del UA stylesheet -- autor gana sin
   esto, igual que ya paso con .capa (ver "Sesión caducada" en el plan). Solo
   hace falta desde que logoCabecera empieza oculto en form.html hasta que
   se elige marca (Fase 4) -- antes ningun .logo llevaba hidden. */
.logo[hidden] { display: none; }

/* ------------------------- Acceso ------------------------- */

.pagina-acceso {
  background: linear-gradient(168deg, #170F10 0%, #24191A 55%, #4A2224 100%);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
/* Fondo de la PAGINA (no de la tarjeta): plano, el mismo --fondo claro que
   el resto de pantallas de la plataforma -- ya no un degradado oscuro. */
[data-tema="plataforma"].pagina-acceso {
  background: var(--fondo);
}

.acceso {
  width: 100%;
  max-width: 380px;
  background: var(--papel);
  border-radius: 16px;
  padding: 28px 24px 22px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

/* Tarjeta azul en vez de blanca: ver las variables --acceso-* de arriba.
   Sombra rehecha para que se despegue del fondo CLARO de la página (la
   original estaba pensada para una página oscura). */
[data-tema="plataforma"] .acceso {
  background: var(--acceso-fondo);
  border: 1px solid var(--acceso-borde);
  box-shadow: 0 24px 48px -20px rgba(23, 28, 43, .28), 0 4px 14px -4px rgba(23, 28, 43, .18);
}

.acceso__marca {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--senal); font-weight: 600;
}
[data-tema="plataforma"] .acceso__marca { color: var(--acceso-eyebrow); }

.acceso__titulo {
  font-family: var(--display);
  font-size: 30px; line-height: 1.08; font-weight: 700;
  letter-spacing: -.02em; color: var(--tinta);
  margin: 14px 0 10px;
}
[data-tema="plataforma"] .acceso__titulo { color: #fff; }

.acceso__texto { color: var(--suave); font-size: 14px; margin: 0 0 20px; }
[data-tema="plataforma"] .acceso__texto { color: var(--acceso-atenuado); }

.acceso__pie {
  margin: 16px 0 0; text-align: center;
  font-size: 12px; color: var(--suave);
}
[data-tema="plataforma"] .acceso__pie { color: var(--acceso-atenuado); }

/* Campos, botón y selector de rol DENTRO de la tarjeta de login --
   contraste verificado (ver PLAN-MULTIOFICINA.md, "Identidad de Pulsar"):
   label/atenuado blanco 75% sobre el fondo del campo (6,99:1), texto
   escrito en blanco pleno (11,03:1), "Continuar" con texto oscuro sobre
   dorado (8,91:1) -- nunca dorado sobre claro, sale ~1,6:1 e ilegible. */
[data-tema="plataforma"] .acceso .campo {
  background: var(--acceso-campo-fondo);
  border-color: var(--acceso-borde);
}
[data-tema="plataforma"] .acceso .campo label { color: var(--acceso-atenuado); }
[data-tema="plataforma"] .acceso .campo input,
[data-tema="plataforma"] .acceso .campo select {
  color: #fff;
}
[data-tema="plataforma"] .acceso .campo input::placeholder { color: var(--acceso-atenuado); }
/* El foco por defecto (--senal / --foco) es un azul casi idéntico al
   fondo de la propia tarjeta (#3D5187) -- invisible ahí. Dorado en su
   lugar, único acento que de verdad se distingue sobre los dos azules. */
[data-tema="plataforma"] .acceso .campo:focus-within {
  border-color: var(--acceso-boton-fondo);
  box-shadow: 0 0 0 3px var(--acceso-foco);
}

/* Sin esto, el estado SIN marcar hereda el color de ".campo label" de mas
   arriba (--acceso-atenuado, blanco al 75%) pero conserva el fondo
   blanco de ".opciones label" base -- misma especificidad que esa regla,
   texto casi blanco sobre fondo blanco, ilegible hasta que se marca.
   Mismo fondo oscuro que el campo (ya probado a 6,99:1 con este mismo
   --acceso-atenuado, ver la nota de ".campo label" arriba) para que se
   lea sin marcar, y para que la version marcada (borde dorado, texto
   blanco pleno) se note como un cambio real, no como aparecer de la
   nada. */
[data-tema="plataforma"] .acceso .opciones label {
  background: var(--acceso-campo-fondo);
  border-color: var(--acceso-borde);
  color: var(--acceso-atenuado);
}

/* Mismo motivo que el foco: el pill de rol marcado usa --senal de relleno,
   que se funde con el fondo de la tarjeta. Fondo oscuro (el mismo que el
   campo) en su lugar, con borde dorado -- se distingue en vez de desaparecer. */
[data-tema="plataforma"] .acceso .opciones label:has(input:checked),
[data-tema="plataforma"] .acceso .opciones label.marcada {
  background: var(--acceso-campo-fondo);
  border-color: var(--acceso-boton-fondo);
  color: #fff;
}

[data-tema="plataforma"] .acceso .boton--principal {
  background: var(--acceso-boton-fondo);
  color: var(--acceso-boton-texto);
  box-shadow: 0 8px 18px -10px var(--acceso-boton-sombra);
}
[data-tema="plataforma"] .acceso .boton--principal:hover { background: var(--acceso-boton-fondo-hover); }

/* ------------------------- Barra superior ------------------------- */

.barra {
  position: sticky; top: 0; z-index: 20;
  background: var(--tinta);
  padding-top: env(safe-area-inset-top);
}

.barra__interior {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 10px;
  max-width: 860px; margin: 0 auto;
}

.barra__marca { display: flex; align-items: center; gap: 10px; }

.barra__eyebrow {
  display: block; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acento-oscuro); font-weight: 600;
}

.barra__titulo {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; color: #fff; margin: 1px 0 0;
}

.barra__usuario {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; border-radius: 999px; padding: 6px 14px;
  font-family: var(--cuerpo); font-size: 13px; font-weight: 500;
  line-height: 1.2; cursor: pointer; text-align: right;
}
.barra__usuario small { display: block; font-size: 10px; color: var(--sobre-oscuro-atenuado); font-weight: 400; }

/* Raíl de secciones: reproduce las letras A–E de la hoja en papel */
.rail {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 0 16px 10px;
  max-width: 860px; margin: 0 auto;
  scrollbar-width: none;
}
/* Misma especificidad que [hidden] del UA stylesheet -- autor gana sin
   esto, igual que .capa/.logo (ver "Sesión caducada" en el plan). Hace
   falta desde que el rail empieza oculto en form.html hasta elegir marca. */
.rail[hidden] { display: none; }
.rail::-webkit-scrollbar { display: none; }

.rail__chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .75); text-decoration: none;
  font-size: 12.5px; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.rail__chip b {
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 5px;
  background: rgba(255, 255, 255, .14);
  font-family: var(--display); font-size: 11px; color: #fff;
}
.rail__chip.activo { background: #fff; color: var(--tinta); font-weight: 600; }
.rail__chip.activo b { background: var(--senal); color: #fff; }
.rail__chip.completa b { background: var(--senal-clara); color: var(--tinta); }

/* ------------------------- Hoja ------------------------- */

.hoja {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 14px calc(28px + env(safe-area-inset-bottom));
}

.seccion {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 14px 18px;
  margin-bottom: 14px;
  /* Por debajo de 720px el titulo "Hoja de recogida de datos" envuelve a 2
     lineas y la barra sticky mide ~129px (a partir de 720px, ~105px): con un
     solo valor fijo, saltar a una seccion desde el raíl dejaba el titulo
     tapado por la barra en movil. */
  scroll-margin-top: 140px;
}

.seccion__cabecera {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}

.seccion__letra {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--senal); color: #fff;
  font-family: var(--display); font-size: 12px; font-weight: 700;
}

.seccion__cabecera h2 {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta); margin: 0;
}

/* ------------------------- Campos ------------------------- */

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid--separada { margin-top: 14px; }

.campo {
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--papel);
  padding: 7px 10px 6px;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.campo:focus-within { border-color: var(--senal); box-shadow: 0 0 0 3px var(--foco); }
.campo.error { border-color: var(--alerta); box-shadow: 0 0 0 3px rgba(180, 83, 9, .12); }

.campo label {
  display: block;
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--suave); font-weight: 600; margin-bottom: 1px;
}
.campo label b { color: var(--alerta); font-weight: 600; }
.campo label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.campo.error label::before { content: '⚠ '; color: var(--alerta); }

.campo input,
.campo select,
.campo textarea {
  width: 100%; border: 0; padding: 0; margin: 0;
  background: transparent; color: var(--texto);
  font-family: var(--cuerpo); font-size: 16px; /* 16px evita el zoom en iOS */
  line-height: 1.35; outline: none; appearance: none;
}

.campo textarea { resize: vertical; min-height: 76px; padding-top: 2px; }
.campo select {
  cursor: pointer;
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B5E5E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.campo .mono { font-family: var(--numeros); letter-spacing: .01em; }
.campo input::placeholder, .campo textarea::placeholder { color: #A89898; }
/* Comercial/correo del comercial (form.html): de solo lectura, salen de la
   sesion -- se ven apagados para que no parezcan campos por rellenar. */
.campo input[readonly] { color: var(--suave); cursor: default; }

/* Botón de mostrar/ocultar contraseña (login y cambio de contraseña):
   dentro del campo, a la derecha. 40px de objetivo táctil -- cómodo con
   el pulgar en móvil, no un icono diminuto. */
.campo__envoltura-contrasena { position: relative; }
.campo__envoltura-contrasena input { padding-right: 38px; }
.campo__boton-ver {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 8px;
  color: var(--suave); cursor: pointer; padding: 0;
}
.campo__boton-ver:hover, .campo__boton-ver:focus-visible { color: var(--senal); background: var(--fondo); }
.campo__boton-ver:focus-visible { outline: 2px solid var(--senal); outline-offset: 1px; }
.campo__boton-ver svg { width: 20px; height: 20px; }
/* NO usar el atributo hidden para alternar estos dos iconos: en el
   navegador real, SVGElement no tiene la propiedad .hidden reflejada
   (confirmado: 'hidden' in SVGElement.prototype es false) -- asignarla
   desde JS crea una propiedad fantasma que no toca el atributo de
   verdad. Y aunque se manipule el ATRIBUTO a mano (setAttribute/
   removeAttribute), tampoco dispara [hidden]{display:none} en un <svg>
   incrustado directo en HTML -- confirmado tambien, con el atributo
   puesto de verdad y display seguia en "block". Con clase, ninguno de
   los dos problemas aplica. */
.icono-oculto { display: none; }
/* Misma tarjeta azul del login (ver las reglas .acceso .campo de arriba):
   --suave/--senal ahi no dan suficiente contraste contra el fondo oscuro
   del campo, hace falta el mismo --acceso-atenuado que ya usan sus labels. */
[data-tema="plataforma"] .acceso .campo__boton-ver { color: var(--acceso-atenuado); }
[data-tema="plataforma"] .acceso .campo__boton-ver:hover,
[data-tema="plataforma"] .acceso .campo__boton-ver:focus-visible {
  color: #fff; background: rgba(255, 255, 255, .1);
}
[data-tema="plataforma"] .acceso .campo__boton-ver:focus-visible { outline-color: var(--acceso-boton-fondo); }

.campo__nota { margin: 0; font-size: 15px; font-style: italic; color: var(--suave); line-height: 1.35; }

.campo--grande { padding: 10px 12px 9px; }

.campo__union { display: flex; align-items: baseline; gap: 6px; }
.sufijo {
  font-family: var(--numeros); font-size: 11px; font-weight: 600;
  color: var(--suave); white-space: nowrap;
}

.contador {
  display: block; text-align: right;
  font-family: var(--numeros); font-size: 10.5px; color: var(--suave); margin-top: 2px;
}

.sugerencia-email {
  display: block; margin-top: 3px; padding: 0; border: 0; background: none;
  font-family: var(--cuerpo); font-size: 11.5px; font-weight: 600; color: var(--senal);
  text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.sugerencia-email[hidden] { display: none; }

.resumen { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.resumen__fila { display: flex; justify-content: space-between; font-size: 13px; color: var(--suave); }
.resumen__fila[hidden] { display: none; }
.resumen__fila span:last-child { font-family: var(--numeros); color: var(--texto); font-weight: 600; }
.resumen__total {
  padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--linea); font-size: 15px;
}
.resumen__total span { color: var(--tinta); font-weight: 700; }

.tramo { margin-top: 16px; }
.tramo:first-child { margin-top: 0; }
.tramo + .tramo { padding-top: 14px; border-top: 1px dashed var(--linea); }
.tramo__titulo {
  margin: 0 0 8px; font-family: var(--display); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tinta);
}
.etiqueta-promo {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px;
  background: var(--senal); color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
}
.c1 { grid-column: span 1; }
.c2, .c3, .c4 { grid-column: span 2; }

@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .c1 { grid-column: span 1; }
  .c2 { grid-column: span 2; }
  .c3 { grid-column: span 3; }
  .c4 { grid-column: span 4; }
  .hoja { padding: 22px 20px 40px; }
  .seccion { padding: 20px 20px 22px; }
  .linea .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------- Líneas telefónicas ------------------------- */

.lineas { display: grid; gap: 10px; margin-bottom: 12px; }

.linea {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--senal);
  border-radius: 8px;
  background: #FCFAF9;
  padding: 12px;
}
/* Mismo tono que .aviso: el ICC de la tarjeta entregada (y su digito) son
   obligatorios en toda linea, y esta es la marca de "a esta le falta algo"
   a nivel de tarjeta completa, ademas del campo concreto en rojo. */
.linea--incompleta {
  background: #FDF3E3;
  border-color: #F0D9A8;
  border-left-color: var(--alerta);
}

.linea__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.linea__titulo {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tinta);
}
.linea__quitar {
  background: none; border: 0; color: var(--alerta);
  font-family: var(--cuerpo); font-size: 12.5px; cursor: pointer; padding: 4px 10px;
  min-height: 44px; display: inline-flex; align-items: center;
}

.linea .grid { grid-template-columns: repeat(2, 1fr); }

/* Fondo derivado de --senal (no un color ajeno a la paleta), lo bastante
   saturado para distinguirse a simple vista del ambar de .linea--incompleta
   (tono amarillo, no rosa) y del rojo pleno de los botones de accion -- este
   es un tinte de fondo, nunca un color solido. Agrupa la marca de tarjeta y
   el numero ICC en un solo recuadro para que se lean como una unidad, y se
   distinga del ICC de prepago (que se queda sin este fondo). */
.linea__icc-entregada {
  grid-column: 1 / -1;
  background: #F1CBCE;
  border: 1px solid #E6A0A5;
  border-radius: 8px;
  padding: 10px 10px 2px;
}

.opciones { display: flex; gap: 6px; margin-top: 2px; }
.opciones label {
  flex: 1; text-align: center; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 6px;
  padding: 7px 4px; font-size: 12.5px; color: var(--suave);
  text-transform: none; letter-spacing: 0; margin: 0;
  background: var(--papel);
  min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones label:has(input:checked),
.opciones label.marcada {
  background: var(--senal); border-color: var(--senal); color: #fff; font-weight: 600;
}

/* Solo dentro de la Seccion C: el resto de .opciones (Secciones A y B) se
   queda como esta. Mismo tamano y mismo letter-spacing que .campo label,
   para que las etiquetas y los botones de opcion se lean como un solo
   bloque homogeneo en mayusculas. */
.linea .opciones label {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 9.5px;
}

.lineas:empty + .boton { margin-top: 0; }

.vacio {
  border: 1px dashed var(--linea); border-radius: 8px;
  padding: 14px; text-align: center; color: var(--suave); font-size: 13.5px;
}

/* ------------------------- IBAN ------------------------- */

.iban { display: flex; align-items: center; gap: 8px; }
.iban__pais {
  font-family: var(--numeros); font-size: 16px; font-weight: 600;
  color: var(--tinta); background: var(--fondo);
  border-radius: 5px; padding: 3px 8px; letter-spacing: .04em;
}
.iban input { font-size: 16px; letter-spacing: .08em; }
/* El numero ICC (a diferencia del IBAN) lleva un digito extra al lado: sin
   ancho propio el input principal ocupa toda la fila y ese cuadrito queda
   lejos del ultimo digito escrito. Se ajusta al ancho de sus 19 caracteres
   (fuente monoespaciada) para que quede pegado. */
.iban input[data-campo="tarjetaIccNumero"] { width: 20ch; flex: 0 1 auto; }
.iban input.iban__extra {
  width: 34px; flex: 0 0 auto; text-align: center;
  background: var(--fondo); border-radius: 5px; padding: 3px 6px;
}

/* ------------------------- Botones ------------------------- */

.boton {
  font-family: var(--cuerpo); font-size: 15px; font-weight: 600;
  border-radius: 8px; padding: 13px 18px; cursor: pointer;
  border: 1px solid transparent; min-height: 48px;
  transition: transform .06s ease, background .18s ease, box-shadow .18s ease;
}
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .55; cursor: progress; }
.boton--ancho { width: 100%; }

.boton--principal {
  background: var(--senal); color: #fff;
  box-shadow: 0 8px 18px -10px var(--sombra-boton);
}
.boton--principal:hover { background: var(--senal-oscuro); }

.boton--secundario {
  background: var(--papel); color: var(--tinta); border-color: var(--linea);
}
.boton--secundario:hover { background: var(--fondo); }
.boton + .boton { margin-top: 10px; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--senal-clara);
  outline-offset: 2px;
}

/* ------------------------- Avisos y capa ------------------------- */

.aviso {
  margin: 12px 0 0; padding: 11px 13px;
  background: #FDF3E3; border: 1px solid #F0D9A8; border-left: 3px solid var(--alerta);
  border-radius: 6px; color: var(--alerta); font-size: 13.5px;
}
.aviso::before { content: '⚠ '; }

.capa {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(36, 25, 26, .72);
  display: grid; place-items: center; padding: 24px;
  backdrop-filter: blur(3px);
}
[data-tema="plataforma"] .capa { background: rgba(23, 28, 43, .72); }
.capa[hidden] { display: none; }

.capa__caja {
  background: var(--papel); border-radius: 14px;
  padding: 26px 22px 22px; max-width: 380px; width: 100%; text-align: center;
}

.capa__icono {
  width: 46px; height: 46px; margin: 0 auto 12px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(232, 119, 107, .16); color: var(--senal);
  font-size: 22px; font-weight: 700;
}
.capa__icono.error { background: rgba(180, 83, 9, .12); color: var(--alerta); }

.capa__caja h3 {
  font-family: var(--display); font-size: 19px; color: var(--tinta);
  margin: 0 0 6px; font-weight: 600;
}
.capa__caja p { color: var(--suave); font-size: 13.5px; margin: 0 0 18px; word-break: break-word; }

/* ------------------------- Panel de admin: tablas ------------------------- */

.tabla-envoltorio { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th, .tabla td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
/* Base/IVA/Total de una tarifa del catalogo (panel de admin) -- "se ve
   desglosado" del encargo, ver "Catálogo: precio base + tipo de IVA". */
.precio-desglose { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.precio-desglose b { font-size: 13px; }
.tabla th {
  font-family: var(--display); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--suave); font-weight: 600;
}
.tabla td.ancha { white-space: normal; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--fondo); }
.tabla .acciones { display: flex; gap: 6px; flex-wrap: wrap; }

.boton-mini {
  font-family: var(--cuerpo); font-size: 12px; font-weight: 600;
  border-radius: 6px; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
  min-height: 30px;
}
.boton-mini:hover { background: var(--fondo); }
.boton-mini--alerta { color: var(--alerta); border-color: #F0D9A8; }
.boton-mini--senal { color: var(--senal); border-color: var(--senal-clara); }
/* Relleno solido (no solo borde) -- reservado para acciones que de verdad
   no se pueden deshacer, para que se lean como mas severas que "Desactivar". */
.boton-mini--peligro { background: var(--alerta); color: #fff; border-color: var(--alerta); }
.boton-mini--peligro:hover { background: #93450A; }

.tabla-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.tabla-cabecera .boton { margin: 0; width: auto; }
.filtro-check {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--suave); cursor: pointer; white-space: nowrap;
}

.estado {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.estado--activa { background: rgba(21, 128, 61, .12); color: #15803D; }
.estado--inactiva { background: rgba(180, 83, 9, .12); color: var(--alerta); }

.logo-mini { height: 28px; width: auto; border-radius: 4px; display: block; }

/* Foto de un comercial, o sus iniciales si no ha subido ninguna (ver
   "Comerciales: alta, edición, foto y cumpleaños" en el plan). */
.avatar {
  height: 32px; width: 32px; border-radius: 999px; display: block;
  object-fit: cover; flex-shrink: 0;
}
.avatar--iniciales {
  display: flex; align-items: center; justify-content: center;
  background: var(--senal); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 12px;
}

.vacio-tabla { padding: 18px 4px; text-align: center; color: var(--suave); font-size: 13.5px; }

/* ------------------------- Interruptor (toggle) ------------------------- */

.interruptor { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interruptor__pista {
  position: absolute; inset: 0; background: var(--linea); border-radius: 999px;
  transition: background .15s ease; pointer-events: none;
}
.interruptor__pista::before {
  content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.interruptor input:checked ~ .interruptor__pista { background: var(--senal); }
.interruptor input:checked ~ .interruptor__pista::before { transform: translateX(16px); }
.interruptor input:focus-visible ~ .interruptor__pista { outline: 3px solid var(--senal-clara); outline-offset: 2px; }

/* ------------------------- Catálogo agrupado por marca (panel de admin) -- */

.marca-catalogo { margin-top: 24px; }
.marca-catalogo:first-child { margin-top: 0; }
.marca-catalogo + .marca-catalogo { padding-top: 20px; border-top: 1px solid var(--linea); }
.marca-catalogo__cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.marca-catalogo__cabecera h3 {
  flex: 1; margin: 0; font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--tinta);
}
.marca-catalogo__acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* Previsualización de importación del catálogo (modal): puede traer
   muchas filas de golpe -- scroll propio en vertical, aparte del scroll
   horizontal que ya tiene .tabla-envoltorio, para que el modal no crezca
   sin límite. */
.previsualizacion-import { max-height: 50vh; overflow-y: auto; }
.estado--neutra { background: var(--fondo); color: var(--suave); }

/* ------------------------- Tarjetas de marca (panel de oficina) --------- */

.tarjeta-marca {
  border: 1px solid var(--linea); border-radius: 10px; background: var(--papel);
  margin-bottom: 10px; overflow: hidden;
}
.tarjeta-marca__cabecera { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.tarjeta-marca__nombre { flex: 1; font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--tinta); }
.tarjeta-marca__logo { height: 28px; width: 28px; border-radius: 6px; object-fit: contain; background: var(--fondo); flex-shrink: 0; }
.tarjeta-marca__desplegar {
  display: block; width: 100%; background: var(--fondo); border: 0; border-top: 1px solid var(--linea);
  padding: 8px 14px; font-family: var(--cuerpo); font-size: 12.5px; font-weight: 600;
  color: var(--suave); cursor: pointer; text-align: left;
}
.tarjeta-marca__productos { padding: 4px 14px 10px; }
.tarjeta-marca__productos[hidden] { display: none; }
.fila-producto {
  padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 13px;
}
.fila-producto:last-child { border-bottom: 0; }
.fila-producto__cabecera { display: flex; align-items: center; gap: 10px; }
.fila-producto__nombre { flex: 1; color: var(--texto); }
.fila-producto__tipo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave);
  background: var(--fondo); border-radius: 4px; padding: 2px 6px;
}

/* --------------------- Elección de marca (formulario) -------------------- */

.marcas-eleccion {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-top: 12px;
}
.marcas-eleccion__tarjeta {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--papel);
  padding: 18px 14px; cursor: pointer; font-family: inherit;
}
.marcas-eleccion__tarjeta:hover, .marcas-eleccion__tarjeta:focus-visible {
  border-color: var(--senal-clara); background: var(--fondo);
}
.marcas-eleccion__logo {
  height: 48px; width: 48px; border-radius: 8px; object-fit: contain; background: var(--fondo);
}
.marcas-eleccion__nombre { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--tinta); text-align: center; }

/* Tipos de cliente por producto (panel de oficina): solo se listan los que
   la propia tarifa permite (catalogo.tipos_cliente, lo que fijó el admin)
   -- uno que el admin no permite no aparece aqui ni apagado, para no
   confundirlo con uno que SI permite la tarifa pero ha restringido la
   oficina (chip--restringido, mas apagado y tachado). */
.fila-producto__tipos-cliente {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 6px; padding-left: 2px;
}
.fila-producto__tipos-etiqueta {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave);
}
.chip-tipo-cliente {
  font-family: var(--cuerpo); font-size: 11.5px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; cursor: pointer;
  /* Mismo verde que .estado--activa (no --senal: en data-tema="plataforma"
     --senal es el azul de Pulsar, no un color semantico de "permitido"). */
  border: 1px solid rgba(21, 128, 61, .35); background: rgba(21, 128, 61, .08); color: #15803D;
}
.chip-tipo-cliente:hover { background: rgba(21, 128, 61, .16); }
.chip-tipo-cliente--restringido {
  border-color: var(--linea); background: var(--fondo); color: var(--suave);
  text-decoration: line-through; text-decoration-color: var(--suave);
}
.chip-tipo-cliente--restringido:hover { background: var(--linea); }
.chip-tipo-cliente:disabled { opacity: .6; cursor: default; }

/* Cuenta atrás de cumpleaños -- dentro de la fila (tabla de comerciales) y
   en el aviso destacado de arriba (panel de oficina), ver
   "Cumpleaños de comerciales" en el plan. Tono calido/festivo a proposito,
   distinto de .aviso (que es de advertencia): esto no es un problema. */
.chip-cumpleanos {
  display: inline-block; margin-left: 6px; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(180, 83, 9, .12); color: var(--alerta);
}
.aviso-cumpleanos {
  margin: 12px 0 0; padding: 11px 13px;
  background: rgba(180, 83, 9, .08); border: 1px solid rgba(180, 83, 9, .25);
  border-radius: 8px; color: var(--alerta); font-size: 13.5px; font-weight: 600;
}

/* Variante ancha de .capa__caja para los formularios del panel de admin
   (nombre + destinatarios + logo no caben comodos en los 380px de la capa
   de resultado del formulario). El titulo se queda centrado, el resto del
   contenido (campos de formulario) se lee mejor alineado a la izquierda. */
.capa__caja--ancha { max-width: 560px; text-align: left; }
.capa__caja--ancha h3 { text-align: center; }
.capa__caja--ancha .grid { margin-top: 10px; }

/* ------------------------- Formulario de corrección --------------------- */
/* Mucho mas alto que un modal normal (varias secciones completas) -- a
   diferencia de .capa__caja, que no lleva limite de alto ni scroll propio
   (pensada para contenido corto), esta si necesita las dos cosas. */
.capa__caja--formulario { max-width: 760px; max-height: 90vh; overflow-y: auto; text-align: left; }
.capa__caja--formulario h3 { text-align: center; }
.fc-seccion { border: 1px solid var(--linea); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.fc-seccion legend { padding: 0 6px; font-weight: 600; color: var(--tinta); }
.fc-seccion .campo { margin-bottom: 10px; }
.fc-subbloque { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--linea); display: flex; flex-direction: column; gap: 10px; }
.fc-linea { border: 1px solid var(--linea); border-radius: 8px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.fc-separador { border: none; border-top: 1px solid var(--linea); margin: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}