/* eContador — sistema visual "cuaderno que se llena solo"
   Paleta de la familia institucional tributaria peruana (azul, rojo, verde) con tonos propios:
   se parece a SUNAT para inspirar confianza, pero NO la copia (eContador no es SUNAT). */
/* Fuentes alojadas en el propio servidor (licencia OFL): funcionan sin internet y sin terceros */
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: swap; src: url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: swap; src: url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Kalam'; font-weight: 400; font-display: swap; src: url('/fonts/kalam-latin-400-normal.woff2') format('woff2'); }

:root {
  --papel: #F2F5F9;
  --hoja: #FFFFFF;
  --renglon: #C9D6E6;
  --margen: #E7A1A1;
  --tinta: #0F3F7D;        /* azul institucional (SUNAT usa un azul marino parecido) */
  --tinta-suave: #2F65A8;
  --franja: #0F3F7D;       /* barra superior */
  --franja-texto: #FFFFFF;
  --rojo: #C8202F;         /* rojo de acento y alertas */
  --verde: #2E8B3E;        /* "al día" (familia del verde de SUNAT, más oscuro para leerse bien) */
  --ambar: #9A5B00;
  --texto: #18233A;
  --texto-2: #52607A;
  --borde: #D6DFEA;
  --sombra: 0 1px 0 #D6DFEA, 0 8px 24px -16px rgba(15, 63, 125, .35);
  --radio: 12px;
  --renglon-alto: 32px;
  --f: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --mano: 'Kalam', 'Comic Sans MS', cursive;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0D1628; --hoja: #142139; --renglon: #24375A; --margen: #6B3433;
    --tinta: #8FB4F2; --tinta-suave: #6E98DE; --franja: #0B2550; --franja-texto: #FFFFFF;
    --rojo: #FF7C7C; --verde: #6BD38A; --ambar: #F2B347;
    --texto: #E8EDF7; --texto-2: #A5B1C9; --borde: #26385A;
    --sombra: 0 1px 0 #26385A, 0 8px 24px -16px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0D1628; --hoja: #142139; --renglon: #24375A; --margen: #6B3433;
    --tinta: #8FB4F2; --tinta-suave: #6E98DE; --franja: #0B2550; --franja-texto: #FFFFFF;
    --rojo: #FF7C7C; --verde: #6BD38A; --ambar: #F2B347;
    --texto: #E8EDF7; --texto-2: #A5B1C9; --borde: #26385A;
    --sombra: 0 1px 0 #26385A, 0 8px 24px -16px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* que un display de clase no le gane al atributo hidden */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--texto); font: 17px/1.5 var(--f); font-variant-numeric: tabular-nums; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; color: var(--texto); }
p { margin: 0 0 1em; }
a { color: var(--tinta); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 6px; }

/* Hoja de cuaderno: renglones + margen rojo */
.hoja {
  background-color: var(--hoja);
  background-image:
    linear-gradient(90deg, transparent 38px, var(--margen) 38px, var(--margen) 39px, transparent 39px),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--renglon-alto) - 1px), var(--renglon) calc(var(--renglon-alto) - 1px), var(--renglon) var(--renglon-alto));
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 12px 16px 12px 52px;
  line-height: var(--renglon-alto);
}
.manuscrito { font-family: var(--mano); color: var(--tinta); font-size: 21px; }

/* Botones */
.btn { appearance: none; border: 0; border-radius: 12px; padding: 13px 20px; font: 700 17px var(--f); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.btn-tinta { background: var(--tinta); color: var(--hoja); }
.btn-borde { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.btn-texto { background: transparent; color: var(--tinta); padding: 8px 4px; min-height: 0; }
.btn-rojo { background: transparent; color: var(--rojo); box-shadow: inset 0 0 0 2px var(--rojo); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-bloque { width: 100%; }

/* Formularios */
label { display: block; font-weight: 700; margin: 14px 0 6px; }
.ayuda { font-size: 14px; color: var(--texto-2); font-weight: 400; }
input, select, textarea {
  width: 100%; font: 17px var(--f); color: var(--texto); background: var(--hoja);
  border: 2px solid var(--borde); border-radius: 10px; padding: 11px 12px; min-height: 48px;
}
input:focus, select:focus, textarea:focus { border-color: var(--tinta); outline: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; }
.check input { width: 22px; min-height: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--tinta); }

.error-msg { color: var(--rojo); font-weight: 700; margin: 10px 0; }
.ok-msg { color: var(--verde); font-weight: 700; margin: 10px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Aviso de cookies (landing, app y páginas legales) */
.aviso-cookies { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; max-width: 640px; margin: 0 auto;
  background: var(--hoja); color: var(--texto); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .45); font-size: 15px; }
.aviso-cookies p { margin: 0 0 10px; }
.aviso-cookies div { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.aviso-cookies .btn { min-height: 44px; padding: 10px 16px; font-size: 16px; }

/* Libro de Reclamaciones: aviso con el libro abierto */
.libro-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.libro-link img { background: #fff; border-radius: 4px; padding: 2px; }

/* "Ya pagué": subir captura y estado de la verificación (app del cliente y panel del contador) */
.opciones-pago { display: grid; gap: 8px; margin: 6px 0; }
.opciones-pago .opcion { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 0; padding: 10px 12px; border: 2px solid var(--borde); border-radius: 12px; cursor: pointer; }
.opciones-pago .opcion:has(input:checked) { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.opciones-pago input { width: 20px; min-height: 20px; height: 20px; accent-color: var(--tinta); }
.pago-estado { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; margin: 8px 0 12px; font-size: 16px; }
.pago-estado.esperando { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.pago-estado.ok { background: color-mix(in srgb, var(--verde) 12%, transparent); }
.pago-estado.no { background: color-mix(in srgb, var(--rojo) 10%, transparent); }
.pago-estado span { font-size: 22px; }
.giro { width: 22px; height: 22px; border: 3px solid color-mix(in srgb, var(--tinta) 25%, transparent); border-top-color: var(--tinta); border-radius: 50%; animation: girar 1s linear infinite; flex: none; }
@keyframes girar { to { transform: rotate(360deg); } }
.pago-confirmar label { margin-top: 10px; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }