/* Estilos base de la calculadora (specs/001-bandas/plan.md §3.4 y §8 D20; specs/_componentes/README.md §Sistema de diseño).
   Solo lee valores de tokens.css: ningún color, tamaño de letra ni radio escrito a mano. Aquí van las piezas que comparten
   las cuatro páginas (cuerpo, cifras, nulo, foco, botón, campo, desplegable, tarjeta, chip de zona y etiqueta de estado).
   Lo propio de un componente va en css/vista/<componente>.css, junto a su js/vista/<componente>.js.
   La maqueta pintaba el paso del puntero y el foco con manejadores de JavaScript: aquí son :hover y :focus-visible. */

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

body {
  margin: 0;
  background: var(--fondo-app);
  color: var(--texto);
  font-family: var(--fuente-interfaz);
  font-size: var(--texto-m);
  line-height: var(--interlineado);
}

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

a {
  color: var(--enlace);
}

a:hover {
  color: var(--primario-hover);
}

/* ---- Cifras y nulo (reglas 9 y 12; HU-016.CA-18: dígitos de ancho uniforme) ---- */

.cifras {
  font-variant-numeric: var(--cifras);
}

.num {
  font-variant-numeric: var(--cifras);
  text-align: right;
}

.nulo {
  color: var(--texto-nulo);
}

/* ---- Solo para el lector de pantalla (specs/005-producto-base, T184; ficha C53, «Presentación»): oculto a la vista y
   fuera del flujo, así no cambia el alto de nada (P-13); el lector lo lee. Nunca display: none ni visibility: hidden,
   que lo callarían. Es la única clase para esto en la aplicación (T187).
   Necesita un ancestro posicionado dentro del área con scroll: sin él, su caja se ubica contra el bloque inicial, no la
   recorta ningún overflow y ensancha la página (hallazgo ra2-1). Hoy: `.subfila__celda` en la subfila de la bandeja
   (lista.css) y `.tabla-historial__control` en el historial de cargas (cargue.css). No se pone en `.tabla-contenedor`:
   la usan tablas de toda la aplicación y recortaría emergentes absolutos. ---- */

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

/* ---- Foco del teclado: siempre visible, con el anillo (README, piezas atómicas) ---- */

:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--foco-anillo);
}

/* ---- Lo que no se imprime lleva .no-imprimir (HU-015; el resto de la vista de impresión, en impresion.css, T40) ---- */

@media print {
  .no-imprimir {
    display: none !important;
  }
}

/* ---- Botón: tres énfasis (principal, secundario y tenue); deshabilitado atenuado y sin tachar ---- */

.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--control);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--texto);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.boton:hover {
  background: var(--superficie-hover);
}

.boton--principal {
  background: var(--primario);
  color: var(--sobre-primario);
  border-color: transparent;
}

.boton--principal:hover {
  background: var(--primario-hover);
}

/* Tenue: fondo transparente y borde discontinuo; se distingue del secundario por la forma, no solo por el color. */
.boton--tenue {
  background: transparent;
  border: 1px dashed var(--borde-fuerte);
  color: var(--texto-secundario);
  font-weight: var(--peso-normal);
}

.boton--tenue:hover {
  background: var(--superficie-hover);
}

.boton[aria-disabled="true"],
.boton:disabled {
  background: transparent;
  color: var(--deshabilitado-texto);
  border: 1px solid var(--borde);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---- Campo de texto y desplegable nativo (C01, C02, C03; patrón del buscador C22) ---- */

.rotulo {
  color: var(--texto-secundario);
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
}

.campo,
.desplegable {
  padding: var(--control);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--texto);
}

.desplegable {
  appearance: none;
  padding-right: 24px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-secundario) 50%),
    linear-gradient(135deg, var(--texto-secundario) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.campo:disabled,
.desplegable:disabled {
  background-color: var(--deshabilitado-fondo);
  color: var(--deshabilitado-texto);
  cursor: not-allowed;
}

/* Selector con el rótulo encima (el riel de filtros). */
.selector {
  display: block;
}

.selector .rotulo {
  display: block;
  margin-bottom: 3px;
}

.selector .desplegable {
  width: 100%;
}

/* Selector de una línea con el rótulo a la izquierda (segunda franja de la página 1, C79). */
.selector-compacto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.selector-compacto .desplegable {
  max-width: 260px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Tarjeta: la superficie de cada bloque de contenido ---- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-base);
  break-inside: avoid;
}

/* ---- Chip de zona (reglas 1, 7 y 8): la misma tinta en toda la aplicación, sin borde ---- */
/* Se marca con el nombre canónico de la zona (P-01): <span class="chip-zona" data-zona="Outlier(-)">. */

.chip-zona {
  display: inline-block;
  padding: 1px 6px;
  border: 0;
  border-radius: var(--radio-chip);
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
  font-variant-numeric: var(--cifras);
  line-height: 1.5;
  white-space: nowrap;
}

.chip-zona[data-zona="Outlier(-)"],
.chip-zona[data-zona="Outlier(+)"] {
  color: var(--zona-outlier-texto);
  background: var(--zona-outlier-fondo);
}

.chip-zona[data-zona="Ingreso"] {
  color: var(--zona-ingreso-texto);
  background: var(--zona-ingreso-fondo);
}

.chip-zona[data-zona="Crecimiento"] {
  color: var(--zona-crecimiento-texto);
  background: var(--zona-crecimiento-fondo);
}

.chip-zona[data-zona="Mercado"] {
  color: var(--zona-mercado-texto);
  background: var(--zona-mercado-fondo);
}

.chip-zona[data-zona="Madurez"] {
  color: var(--zona-madurez-texto);
  background: var(--zona-madurez-fondo);
}

.chip-zona[data-zona="Promoción"] {
  color: var(--zona-promocion-texto);
  background: var(--zona-promocion-fondo);
}

/* Un cero va apagado y sin color (regla 7, HU-005.CA-11). Misma especificidad que las zonas y escrito después: gana. */
.chip-zona.chip-zona--apagado {
  color: var(--texto-nulo);
  background: transparent;
}

/* ---- Etiqueta de estado (regla 11): su par de texto y color, borde de 1 px; los «todavía no», discontinuos ---- */
/* Se marca con el nombre del estado: <span class="etiqueta-estado" data-estado="Aprobado con cambios">. */

.etiqueta-estado {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: var(--radio-chip);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  line-height: 1.5;
  white-space: nowrap;
}

.etiqueta-estado[data-estado="Pendiente"] {
  color: var(--estado-pendiente-texto);
  background: var(--estado-pendiente-fondo);
  border-color: var(--estado-pendiente-borde);
}

.etiqueta-estado[data-estado="Aprobado"] {
  color: var(--estado-aprobado-texto);
  background: var(--estado-aprobado-fondo);
  border-color: var(--estado-aprobado-borde);
}

.etiqueta-estado[data-estado="Aprobado con cambios"] {
  color: var(--estado-aprobado-cambios-texto);
  background: var(--estado-aprobado-cambios-fondo);
  border-color: var(--estado-aprobado-cambios-borde);
}

.etiqueta-estado[data-estado="Rechazado"] {
  color: var(--estado-rechazado-texto);
  background: var(--estado-rechazado-fondo);
  border-color: var(--estado-rechazado-borde);
}

.etiqueta-estado[data-estado="Retirado"] {
  color: var(--estado-retirado-texto);
  background: var(--estado-retirado-fondo);
  border-color: var(--estado-retirado-borde);
}

.etiqueta-estado[data-estado="Borrador"] {
  color: var(--estado-borrador-texto);
  background: var(--estado-borrador-fondo);
  border-color: var(--estado-borrador-borde);
  border-style: dashed;
}

.etiqueta-estado[data-estado="Publicada"] {
  color: var(--estado-publicada-texto);
  background: var(--estado-publicada-fondo);
  border-color: var(--estado-publicada-borde);
}

.etiqueta-estado[data-estado="Fallida"] {
  color: var(--estado-fallida-texto);
  background: var(--estado-fallida-fondo);
  border-color: var(--estado-fallida-borde);
}

.etiqueta-estado[data-estado="En proceso"] {
  color: var(--estado-en-proceso-texto);
  background: var(--estado-en-proceso-fondo);
  border-color: var(--estado-en-proceso-borde);
  border-style: dashed;
}

.etiqueta-estado[data-estado="Activa"] {
  color: var(--estado-activa-texto);
  background: var(--estado-activa-fondo);
  border-color: var(--estado-activa-borde);
}

.etiqueta-estado[data-estado="Inactiva"] {
  color: var(--estado-inactiva-texto);
  background: var(--estado-inactiva-fondo);
  border-color: var(--estado-inactiva-borde);
}

.etiqueta-estado[data-estado="Pendiente de primer ingreso"] {
  color: var(--estado-pendiente-ingreso-texto);
  background: var(--estado-pendiente-ingreso-fondo);
  border-color: var(--estado-pendiente-ingreso-borde);
  border-style: dashed;
}

/* ---- Marcas de línea (js/vista/caso/piezas.js): texto además de color, nunca ámbar (regla de color 6); la de aviso,
   ámbar (MATCH-P2-03). Las usan la página 2 y la lista de la bandeja con su expansión (specs/003-bandeja, T39). ---- */

.marca {
  display: inline-block;
  padding: 0 6px;
  color: var(--marca-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  background: var(--marca-fondo);
  border: 1px solid var(--marca-borde);
  border-radius: var(--radio-chip);
}

.marca[data-variante="aviso"] {
  color: var(--aviso-texto);
  background: var(--aviso-fondo);
  border-color: var(--aviso-borde);
}

/* ---- Cabecera de tarjeta: título, subtítulo y acciones a la derecha ---- */

.tarjeta__cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: 10px 14px 6px;
}

.tarjeta__titulos {
  flex: 1;
  min-width: 0;
}

.tarjeta__titulo {
  margin: 0;
  font-size: var(--texto-l);
  font-weight: var(--peso-fuerte);
}

.tarjeta__subtitulo {
  margin-top: 1px;
  color: var(--texto-tenue);
  font-size: var(--texto-s);
}

.tarjeta__acciones {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--esp-2);
}

/* ---- Tabla: encabezados sobre la superficie suave, celdas densas (maqueta p1-v2) ---- */

.tabla-contenedor {
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
}

.tabla th,
.tabla td {
  padding: var(--celda-tabla);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
  vertical-align: middle;
  text-align: left;
}

.tabla thead th {
  background: var(--superficie-suave);
  border-bottom-color: var(--borde-fuerte);
  color: var(--texto-secundario);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.tabla .num {
  font-variant-numeric: var(--cifras);
  text-align: right;
}

.tabla__totales th,
.tabla__totales td {
  border-bottom: 0;
  border-top: 1px solid var(--borde-fuerte);
}

/* ---- Interruptor de dos estados (C04): la etiqueta a la derecha; deshabilitado, atenuado y con la pista punteada ---- */

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  cursor: pointer;
}

.interruptor__pista {
  position: relative;
  flex: none;
  width: 28px;
  height: 16px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--borde-campo);
  cursor: pointer;
}

.interruptor__pista[aria-checked="true"] {
  background: var(--primario);
}

.interruptor__perilla {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--superficie);
}

.interruptor__pista[aria-checked="true"] .interruptor__perilla {
  left: 13px;
}

.interruptor[data-deshabilitado="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.interruptor[data-deshabilitado="true"] .interruptor__pista {
  border: 1px dashed var(--borde-fuerte);
  cursor: not-allowed;
}

/* ---- Mantenimiento (specs/005-producto-base, T88): sustituye toda la pantalla, sin la barra superior ---- */

.mantenimiento {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--esp-4);
  text-align: center;
}

.mantenimiento__texto {
  color: var(--texto-tenue);
  font-size: var(--texto-xl);
}

/* ---- Mantenimiento de la demo (specs/006-demo-publica, ficha C85, T23; js/vista/pagina_mantenimiento.js): en línea,
   en la misma dirección; sustituye toda la pantalla, sin la barra superior ni el aviso, con el título y el texto de
   mantenimiento.html ---- */

.pagina-mantenimiento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  box-sizing: border-box;
  min-height: 100vh;
  padding: var(--esp-5);
  text-align: center;
}

.pagina-mantenimiento__titulo {
  margin: 0;
  font-size: var(--texto-cifra);
  font-weight: var(--peso-fuerte);
}

.pagina-mantenimiento__texto {
  max-width: 32rem;
  margin: 0;
  color: var(--texto-tenue);
  font-size: var(--texto-xl);
}

/* ---- Pantalla de carga (specs/006-demo-publica, ficha C86, T73; js/vista/pantalla_carga.js): dentro del área de
   contenido, nunca en lugar de la barra superior ni del aviso C80. El indicador gira; sin animación si el sistema pide
   menos movimiento ---- */

.pantalla-carga {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--esp-4);
  min-height: 60vh;
  padding: var(--esp-5) var(--esp-4);
  text-align: center;
}

.pantalla-carga__indicador {
  width: 28px;
  height: 28px;
  border: 3px solid var(--borde);
  border-top-color: var(--primario);
  border-radius: 50%;
  animation: pantalla-carga-giro 0.9s linear infinite;
}

.pantalla-carga__mensaje {
  max-width: 46ch;
  margin: 0;
  color: var(--texto-secundario);
  font-size: var(--texto-xl);
}

@keyframes pantalla-carga-giro {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pantalla-carga__indicador {
    animation: none;
    border-color: var(--primario);
  }
}

/* En una pestaña ya abierta (T85), C86 va en la ranura de la página y su cuerpo sigue montado pero oculto, con el
   atributo hidden. .cuerpo, .caso y .bandeja fijan su propio display, que le ganaría al del navegador: esta regla manda
   sobre todos. */

[hidden] {
  display: none !important;
}