/* ==========================================================================
   AJPF — Hoja de estilos base
   Complementa a Tailwind CDN. Tokens espejo de tw-config.js.
   Ver docs/DISENO_UX.md §2.6 para el rationale de cada bloque.
   ========================================================================== */

:root{
  --fondo:#F4F6F9;      --superficie:#FFFFFF;   --superficie-alt:#F8FAFC;
  --borde:#CBD5E1;      --borde-fuerte:#64748B;
  --texto:#0F172A;      --texto-suave:#475569;
  --primario:#1E3A5F;   --primario-hover:#16293F; --primario-suave:#EEF2F7;
  --cobrar:#146C33;     --cobrar-hover:#0F5527;
  --peligro:#B91C1C;    --peligro-hover:#991B1B;
  --foco:#C2410C;
  --ok-bg:#DCFCE7;   --ok-tx:#14532D;   --ok-bd:#166534;
  --debe-bg:#FEE2E2; --debe-tx:#7F1D1D; --debe-bd:#B91C1C;
  --inac-bg:#E2E8F0; --inac-tx:#334155; --inac-bd:#475569;
  --aviso-bg:#FEF3C7;--aviso-tx:#78350F;--aviso-bd:#B45309;

  --r-md:8px; --r-lg:12px; --r-xl:16px;
  --tactil:48px;
  --sombra-tarjeta:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --sombra-elevado:0 4px 12px rgba(15,23,42,.10);
  --sombra-modal:0 20px 40px rgba(15,23,42,.22);
}

/* --- BASE ---------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Atkinson Hyperlegible", Roboto, system-ui, sans-serif;
  font-size:1.125rem;           /* 18px — minimo del contrato base §2 */
  line-height:1.6;
  color:var(--texto);
  background:var(--fondo);
  margin:0;
}

/* --- FOCO GLOBAL (WCAG 2.4.7) -------------------------------------------- */
/* Naranja porque no significa nada mas en esta app: navy se confundiria con
   el boton primario y rojo se leeria como error. Nunca eliminar sin reemplazo. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--foco);
  outline-offset:2px;
  border-radius:var(--r-md);
}

/* --- AREA TACTIL MINIMA -------------------------------------------------- */
.ajpf-tactil{ min-height:var(--tactil); min-width:var(--tactil); }

/* --- NUMEROS ALINEADOS (cedulas, montos) --------------------------------- */
.tabular{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* --- BOTONES ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--tactil); padding:0 1.25rem;
  font-size:1.25rem; font-weight:700; line-height:1.2;
  border-radius:var(--r-md); border:2px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--inac-bg); color:var(--texto-suave);
  border-color:var(--inac-bg); cursor:not-allowed;
}
.btn-primario{ background:var(--primario); color:#fff; }
.btn-primario:hover:not(:disabled){ background:var(--primario-hover); }
.btn-cobrar{ background:var(--cobrar); color:#fff; }
.btn-cobrar:hover:not(:disabled){ background:var(--cobrar-hover); }
.btn-secundario{ background:var(--superficie); color:var(--primario); border-color:var(--borde-fuerte); }
.btn-secundario:hover:not(:disabled){ background:var(--primario-suave); border-color:var(--primario); }
.btn-peligro{ background:var(--peligro); color:#fff; }
.btn-peligro:hover:not(:disabled){ background:var(--peligro-hover); }
.btn-ancho{ width:100%; min-height:56px; }

/* --- CAMPOS -------------------------------------------------------------- */
.campo, .campo-texto{
  width:100%; min-height:var(--tactil); padding:.625rem 1rem;
  font-size:1.125rem; color:var(--texto);
  background:var(--superficie);
  border:2px solid var(--borde-fuerte); border-radius:var(--r-md);
  box-sizing:border-box;
}
.campo::placeholder, .campo-texto::placeholder{ color:var(--texto-suave); opacity:1; }
.campo[aria-invalid="true"], .campo-texto[aria-invalid="true"]{ border-color:var(--peligro); background:#FFF7F7; }
.etiqueta{ display:block; font-size:1.25rem; font-weight:700; margin-bottom:.5rem; }
.ayuda{ font-size:1rem; color:var(--texto-suave); margin-top:.375rem; }

/* --- MENSAJES EN PAGINA (persistentes, no toasts) ------------------------ */
.aviso{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:1rem; border-radius:var(--r-md); border:2px solid;
  font-size:1.125rem;
}
.aviso-error{ background:var(--debe-bg); color:var(--debe-tx); border-color:var(--debe-bd); }
.aviso-ok   { background:var(--ok-bg);   color:var(--ok-tx);   border-color:var(--ok-bd); }
.aviso-info { background:var(--aviso-bg);color:var(--aviso-tx);border-color:var(--aviso-bd); }

/* --- BADGES DE ESTADO (nunca solo color) --------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.25rem .75rem; min-height:32px;
  font-size:1rem; font-weight:700; line-height:1.2;
  border-radius:9999px; border:2px solid;
  white-space:nowrap;
}
.badge-ok  { background:var(--ok-bg);   color:var(--ok-tx);   border-color:var(--ok-bd); }
.badge-debe{ background:var(--debe-bg); color:var(--debe-tx); border-color:var(--debe-bd); }
.badge-inac{ background:var(--inac-bg); color:var(--inac-tx); border-color:var(--inac-bd); }

/* --- TARJETAS ------------------------------------------------------------ */
.tarjeta{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r-lg); box-shadow:var(--sombra-tarjeta);
}

/* --- LAYOUT -------------------------------------------------------------- */
/* max-width en rem y sin alturas fijas: sobrevive al zoom 200%. */
.contenido{ width:100%; max-width:80rem; margin-inline:auto; padding-inline:1rem; box-sizing:border-box; }

/* --- NAVEGACION ---------------------------------------------------------- */
.nav-item{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:var(--tactil); padding:0 1rem;
  font-size:1.125rem; font-weight:700; color:#fff; text-decoration:none;
  border-radius:var(--r-md); border:2px solid transparent;
}
.nav-item:hover{ background:var(--primario-hover); }
.nav-item[aria-current="page"]{ background:#fff; color:var(--primario); }

/* --- MOVIMIENTO REDUCIDO (WCAG 2.3.3) ------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --- IMPRESION ----------------------------------------------------------- */
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; font-size:11pt; color:#000; }
  .tarjeta{ box-shadow:none; border:1px solid #000; }
  .badge{ border-color:#000 !important; color:#000 !important; background:#fff !important; }
  a[href]::after{ content:""; }
  nav, footer{ display:none !important; }

  /* Las utilidades de tamaño de Tailwind (text-lg, text-2xl, etc.) son una
     clase (especificidad 0,1,0) y le ganan a "body" (0,0,1): sin esto,
     cualquier texto en pantalla de 18-48px imprime a ESE tamaño en papel,
     enorme frente a un documento impreso estandar (10-12pt). Se fuerza un
     tamaño estandar acorde a la jerarquia, igual en toda la app. */
  .text-xs, .text-sm, .text-base, .text-lg{ font-size:10pt !important; line-height:1.35 !important; }
  .text-xl, .text-2xl{ font-size:13pt !important; line-height:1.3 !important; }
  .text-3xl, .text-4xl{ font-size:16pt !important; line-height:1.25 !important; }
  h1, h2, h3{ font-size:14pt !important; line-height:1.3 !important; }
  table, th, td{ font-size:10pt !important; }
}