/*
 * public/ui.css — Estilos de la interfaz de usuario (FASE 4d-1a, v3).
 *
 * Paleta (RH1/RH3): los 3 colores de la bandera cubana.
 *   - Azul:   #002A8F
 *   - Blanco: #FFFFFF
 *   - Rojo:   #CF142B (solo acento de marca; no semántico — RH4)
 *
 * Semántica digital (RH4):
 *   - Verde: #2E7D32 (online / éxito)
 *   - Gris:  #616161 (offline / neutro)
 *   - Ámbar: #F57C00 (advertencia — reservado)
 *   - Rojo:  #CF142B (error — reservado, no usado en 4d-1)
 *
 * Accesibilidad (compendio §59.4):
 *   - Botones ≥ 44 × 44 px (--toque-min).
 *   - Texto principal ≥ 16 px (--t-base).
 *   - Contraste WCAG AA.
 *   - Sin dependencia del color (iconos + texto).
 *
 * Sin frameworks. Sin fuentes externas.
 * Complementa app.css (que ya define body, header, footer).
 *
 * Cambios acumulados:
 *   v1 → v2 (H390, H392, H393).
 *   + H1066 (.a8-forzar override).
 *   + H1010 (.banner-actualizacion).
 *   + H976  (.cache-desync).
 *   + H1007 (.conflictos-acciones).
 *   v2 → v3 (H1385C):
 *   + .banner-rechazados (banner persistente en Inicio).
 *   + .rechazados-acciones (acciones por fila en #/rechazados).
 */

/* ============================================================
   Variables
   ============================================================ */
:root {
  --azul:         #002A8F;
  --azul-claro:   #1A4AB0;
  --azul-oscuro:  #001E6B;
  --azul-hover:   #F0F4FF;                    /* [H392] */
  --blanco:       #FFFFFF;
  --rojo:         #CF142B;
  --rojo-oscuro:  #A30F22;

  --verde:        #2E7D32;
  --verde-claro:  #A5D6A7;
  --gris:         #616161;
  --gris-medio:   #9E9E9E;
  --gris-claro:   #E0E0E0;
  --gris-fondo:   #F5F5F5;
  --ambar:        #F57C00;
  --amarillo-sync: #FFE082;                   /* [H392] */
  --texto:        #222222;
  --texto-suave:  #616161;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.25rem;
  --t-2xl:  1.5rem;
  --t-3xl:  2rem;

  --radio-sm: 0.25rem;
  --radio:    0.5rem;
  --radio-lg: 0.75rem;

  --sombra-sm: 0 1px 2px rgba(0,0,0,0.05);
  --sombra:    0 1px 3px rgba(0,0,0,0.10);
  --sombra-md: 0 2px 6px rgba(0,0,0,0.15);

  --toque-min: 44px;
}

/* ============================================================
   Contenedor de pantallas
   ============================================================ */
.pantalla {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.pantalla-titulo {
  margin: 0 0 var(--sp-3) 0;
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--azul);
}

.pantalla-subtitulo {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.pantalla-cuerpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.pantalla-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ============================================================
   Cabecera persistente (indicadores §59.2)
   ============================================================ */
.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-sm);
}

.cabecera-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radio-sm);
  background-color: rgba(255,255,255,0.15);
  white-space: nowrap;
}

.cabecera-estado[data-estado="online"]  { color: var(--verde-claro); }
.cabecera-estado[data-estado="offline"] { color: var(--gris-claro);  }
.cabecera-estado[data-estado="sync"]    { color: var(--amarillo-sync); }

.cabecera-pendientes {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radio-sm);
  background-color: rgba(255,255,255,0.15);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cabecera-pendientes[data-count="0"] { opacity: 0.5; }

/* ============================================================
   Botones (accesibilidad ≥44×44)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--toque-min);
  min-width: var(--toque-min);                 /* [H390] */
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background-color: var(--gris-fondo);
  color: var(--texto);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
  white-space: nowrap;
}

.btn:hover:not(:disabled) { filter: brightness(0.95); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primario {
  background-color: var(--azul);
  color: var(--blanco);
  border-color: var(--azul);
}
.btn-primario:hover:not(:disabled) {
  background-color: var(--azul-claro);
  border-color: var(--azul-claro);
}

.btn-secundario {
  background-color: var(--blanco);
  color: var(--azul);
  border-color: var(--azul);
}
.btn-secundario:hover:not(:disabled) {
  background-color: var(--azul-hover);
}

.btn-peligro {
  background-color: var(--rojo);
  color: var(--blanco);
  border-color: var(--rojo);
}
.btn-peligro:hover:not(:disabled) {
  background-color: var(--rojo-oscuro);
  border-color: var(--rojo-oscuro);
}

.btn-fantasma {
  background-color: transparent;
  color: var(--azul);
  border-color: transparent;
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
.btn-fantasma:hover:not(:disabled) {
  background-color: var(--gris-fondo);
}

.btn-bloque {
  width: 100%;
}

.btn-grande {
  min-height: 56px;
  font-size: var(--t-lg);
  padding: var(--sp-3) var(--sp-5);
}

.btn-icono {
  min-width: var(--toque-min);
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background-color: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}

.card-titulo {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--texto);
}

.card-descripcion {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.card-destacada {
  border-left: 4px solid var(--azul);
}

.card-info    { border-left-color: var(--azul); }
.card-exito   { border-left-color: var(--verde); }
.card-alerta  { border-left-color: var(--ambar); }
.card-error   { border-left-color: var(--rojo); }

/* ============================================================
   Formularios
   ============================================================ */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.campo label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-suave);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-base);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio-sm);
  background-color: var(--blanco);
  color: var(--texto);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 2px rgba(0,42,143,0.15);
}

.campo textarea {
  min-height: 100px;
  resize: vertical;
}

.campo-error {
  font-size: var(--t-sm);
  color: var(--rojo-oscuro);
}

.campo input[aria-invalid="true"] {
  border-color: var(--rojo);
  background-color: #FEF5F6;
}

/* ============================================================
   Listas
   ============================================================ */
.lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.lista-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background-color: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio-sm);
}

.lista-item-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 auto;
  min-width: 0;
}

.lista-item-titulo {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-item-detalle {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.lista-item-valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.lista-item[data-estado="warning"]  { border-left: 4px solid var(--ambar); }
.lista-item[data-estado="error"]    { border-left: 4px solid var(--rojo); }
.lista-item[data-estado="success"]  { border-left: 4px solid var(--verde); }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--t-xs);
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.3;
}

.badge-azul    { background: #E3E9F5; color: var(--azul); }
.badge-verde   { background: #E8F5E9; color: var(--verde); }
.badge-gris    { background: var(--gris-claro); color: var(--gris); }
.badge-ambar   { background: #FFF3E0; color: var(--ambar); }
.badge-rojo    { background: #FFEBEE; color: var(--rojo-oscuro); }

/* ============================================================
   Alertas / Notices
   ============================================================ */
.notice {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radio);
  border-left: 4px solid;
  font-size: var(--t-sm);
  line-height: 1.5;
}

.notice-titulo {
  font-weight: 600;
  margin: 0 0 var(--sp-1) 0;
  font-size: var(--t-base);
}

.notice-info   { background: #E3E9F5; border-color: var(--azul); }
.notice-exito  { background: #E8F5E9; border-color: var(--verde); }
.notice-alerta { background: #FFF3E0; border-color: var(--ambar); }
.notice-error  { background: #FFEBEE; border-color: var(--rojo); }

/* ============================================================
   Overlays / Modales
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background-color: rgba(0,0,0,0.55);
  z-index: 1000;
}

.overlay[hidden] { display: none; }

.modal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--sp-5);
  background-color: var(--blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
}

.modal-titulo {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--azul);
}

.modal-cuerpo {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--texto);
}

.modal-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.modal-acciones .btn { width: 100%; }

.modal-bloqueante {
  border-top: 4px solid var(--rojo);
}

/* ============================================================
   Estados
   ============================================================ */
.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--texto-suave);
}

.estado-vacio-icono {
  font-size: var(--t-3xl);
  line-height: 1;
  opacity: 0.6;
}

.estado-vacio-titulo {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--texto);
}

.estado-cargando {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-5);
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

/* ============================================================
   Separadores y utilidades
   ============================================================ */
.separador {
  height: 1px;
  background-color: var(--gris-claro);
  margin: var(--sp-3) 0;
  border: none;
}

/* [H393] Regla global para el atributo [hidden]. */
[hidden] { display: none !important; }

.texto-centro   { text-align: center; }
.texto-derecha  { text-align: right; }
.texto-suave    { color: var(--texto-suave); }
.texto-grande   { font-size: var(--t-lg); }
.texto-pequeno  { font-size: var(--t-sm); }
.texto-xs       { font-size: var(--t-xs); }
.texto-negrita  { font-weight: 600; }
.texto-exito    { color: var(--verde); }
.texto-error    { color: var(--rojo-oscuro); }
.texto-mono     { font-family: ui-monospace, "Courier New", monospace; }
.numero-tabular { font-variant-numeric: tabular-nums; }

.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-fila      { flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1          { gap: var(--sp-1); }
.gap-2          { gap: var(--sp-2); }
.gap-3          { gap: var(--sp-3); }
.gap-4          { gap: var(--sp-4); }
.mt-2           { margin-top: var(--sp-2); }
.mt-3           { margin-top: var(--sp-3); }
.mt-4           { margin-top: var(--sp-4); }
.mb-2           { margin-bottom: var(--sp-2); }
.mb-3           { margin-bottom: var(--sp-3); }
.w-full         { width: 100%; }

.oculto         { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Filas de datos (Mi día, resumen)
   ============================================================ */
.fila-dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--gris-claro);
  font-size: var(--t-base);
}

.fila-dato:last-child { border-bottom: none; }

.fila-dato-etiqueta { color: var(--texto-suave); }
.fila-dato-valor    { font-weight: 600; font-variant-numeric: tabular-nums; }

.fila-dato-destacado {
  border-top: 2px solid var(--azul);
  border-bottom: none;
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--t-lg);
}
.fila-dato-destacado .fila-dato-valor { color: var(--azul); }

/* ============================================================
   Cabecera de la app (indicador de conexión + pendientes)
   ============================================================ */
#estado-conexion {
  font-size: var(--t-sm);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radio-sm);
  background-color: rgba(255,255,255,0.15);
  white-space: nowrap;
}

#estado-conexion[data-estado="online"]  { color: var(--verde-claro); }
#estado-conexion[data-estado="offline"] { color: var(--gris-claro);  }

/* ============================================================
   Pantalla de apertura (compendio §32.2)
   ============================================================ */
.pantalla-apertura .card-titulo {
  font-size: var(--t-2xl);
  color: var(--azul);
}

.pantalla-apertura .inventario-linea {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-1) 0;
  font-size: var(--t-sm);
}

.pantalla-apertura .caja-inicial {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background-color: var(--gris-fondo);
  border-radius: var(--radio-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Pantalla de cobro — vuelto
   ============================================================ */
.vuelto-grande {
  padding: var(--sp-4);
  background-color: var(--gris-fondo);
  border-radius: var(--radio);
  text-align: center;
}

.vuelto-etiqueta {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin-bottom: var(--sp-1);
}

.vuelto-valor {
  font-size: var(--t-3xl);
  font-weight: 700;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Pantalla de cierre (4 pasos, compendio §35.2-§35.5)
   ============================================================ */
.paso-indicador {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--t-xs);
  font-weight: 600;
  background-color: var(--azul);
  color: var(--blanco);
  border-radius: var(--radio-sm);
  margin-bottom: var(--sp-2);
}

.conteo-display {
  padding: var(--sp-4);
  font-size: var(--t-3xl);
  font-weight: 700;
  text-align: center;
  background-color: var(--gris-fondo);
  border-radius: var(--radio);
  font-variant-numeric: tabular-nums;
  color: var(--azul);
}

.diferencia-linea {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-2) 0;
  font-variant-numeric: tabular-nums;
}

.diferencia-linea.negativa .diferencia-valor { color: var(--rojo-oscuro); }
.diferencia-linea.positiva .diferencia-valor { color: var(--verde); }
.diferencia-linea.cero     .diferencia-valor { color: var(--texto-suave); }

/* ============================================================
   Formato responsivo mínimo (portrait, sin landscape en MVP)
   ============================================================ */
@media (min-width: 480px) {
  .pantalla { padding: var(--sp-5); }
  .modal { padding: var(--sp-6); }
}

/* [H1066] Overlay A8 — botón requiere wrap por texto largo.
   .btn global usa white-space nowrap. */
#a8-forzar {
  white-space: normal;
  line-height: 1.3;
  padding: 12px 14px;
  text-align: center;
}

/* [H1010] Banner "Nueva versión disponible" — entre header y main. */
.banner-actualizacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #fffbe6;
  border-bottom: 2px solid #f0a020;
  font-size: 13px;
  z-index: 100;
}

.banner-actualizacion[hidden] {
  display: none;
}

.banner-actualizacion-texto {
  flex: 1 1 auto;
  color: #5c4813;
  font-weight: 600;
}

.banner-actualizacion .btn {
  padding: 6px 12px;
  font-size: 12px;
  width: auto;
}

/* [H976] Banner divergencia cache↔server (rojo tenue). */
.banner-actualizacion.cache-desync {
  background: #fbe6e6;
  border-bottom-color: #c00;
}

.banner-actualizacion.cache-desync .banner-actualizacion-texto {
  color: #8b0000;
}

/* ============================================================
   [H1007] Pantalla Conflictos — acciones por fila.
   Fila con botones "Reintentar" y "Marcar pérdida" envueltos.
   ============================================================ */
.conflictos-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  width: 100%;
}

.conflictos-acciones .btn {
  flex: 1 1 auto;
  min-width: 120px;
  font-size: var(--t-sm);
  padding: var(--sp-2) var(--sp-3);
  min-height: 40px;
}

/* ============================================================
   [H1385C] Pantalla Rechazados — banner persistente + acciones.
   Paralelo a .banner-actualizacion.cache-desync (H976) y
   .conflictos-acciones (H1007).
   ============================================================ */
.banner-rechazados {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #fbe6e6;
  border-left: 4px solid var(--rojo);
  border-radius: var(--radio-sm);
  cursor: pointer;
}

.banner-rechazados[hidden] {
  display: none;
}

.banner-rechazados-texto {
  flex: 1 1 auto;
  color: #8b0000;
  font-weight: 600;
  font-size: var(--t-sm);
}

.rechazados-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  width: 100%;
}

.rechazados-acciones .btn {
  flex: 1 1 auto;
  min-width: 120px;
  font-size: var(--t-sm);
  padding: var(--sp-2) var(--sp-3);
  min-height: 40px;
}

/* FASE 12-3: Banner de aviso de T&C pendientes. */
.banner-tc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #fff3cd;
  border-bottom: 2px solid #ffc107;
  font-size: 13px;
  margin-bottom: 8px;
}
.banner-tc[hidden] { display: none; }