/* Complementos sobre blaugrana.css: SOLO lo que ese sistema no cubre.
   blaugrana.css (= rhe.css del rediseño) ya resuelve tarjetas, tablas,
   pastillas de estado, formularios, botones, avisos, el medidor de límite
   anual y el modal — no se duplica nada de eso acá. */

/* ── FIX: el atributo `hidden` tiene que ganar SIEMPRE ───────────────────
   Todo este proyecto oculta elementos con `elemento.hidden = true` (nunca
   con clases `.oculto` a mano), y blaugrana.css define varias clases con su
   propio `display` incondicional: `.velo-modal{display:grid}`,
   `.campo{display:flex}`, `.avisos{display:flex}`, etc. En CSS, una regla de
   AUTOR le gana a la regla por defecto del navegador para `[hidden]` sin
   importar la especificidad — así que en cualquier elemento que tenga esas
   clases, `hidden` quedaba puesto en el HTML pero SIN NINGÚN EFECTO VISUAL:
   el modal de confirmar la emisión, por ejemplo, se quedaba en pantalla para
   siempre y ni «Cancelar» lo cerraba, porque cerrar es exactamente lo mismo
   que ocultar. Es la solución estándar documentada por MDN para este mismo
   choque; el !important es el uso correcto acá, no un atajo. */
[hidden] { display:none !important; }

/* ── Iconos emoji a color en el menú (el diseño original del usuario) ────
   Mismo ancho fijo que tenían los SVG del rediseño, para que los rótulos
   queden alineados en columna. El emoji conserva su color propio: no lo
   afecta el `color` del item ni el estado activo. */
.menu .ic { width:18px; flex-shrink:0; font-size:15px; line-height:1; text-align:center; }

/* ── Botón de tema, en la marca del sidebar ─────────────────────────────── */
.boton-tema { margin-left:auto; color:rgba(255,255,255,.8);
  border-color:rgba(255,255,255,.2); background:transparent; }
.boton-tema:hover { background:rgba(255,255,255,.12); color:#fff;
  border-color:rgba(255,255,255,.35); }

/* ── Utilidades generales ────────────────────────────────────────────────── */
.atenuado { opacity:.55; }
.vacio { text-align:center; color:var(--gris); padding:16px; font-size:12.5px; }
code { font-family:var(--datos); font-size:11.5px; background:var(--papel);
  border:1px solid var(--linea); padding:1px 5px; border-radius:4px;
  color:var(--tinta); }
.lista { margin:6px 0 0 18px; font-size:12px; color:var(--gris);
  line-height:1.6; display:grid; gap:5px; }
.sub-bloque { margin-top:11px; padding-top:11px; border-top:1px dashed var(--linea); }

/* Bloque normativo plegado: lo legal no compite con la vista por defecto. */
details.normativo { margin-top:11px; border-top:1px solid var(--linea); padding-top:9px; }
details.normativo summary { font-size:12px; color:var(--azul); cursor:pointer;
  font-weight:600; }
details.normativo p { font-size:11.5px; color:var(--gris); line-height:1.5; margin-top:6px; }
details.normativo p + p { margin-top:6px; }

.split { display:flex; gap:12px; flex-wrap:wrap; }
.split > .caja { flex:1; min-width:320px; }

/* ── Cuotas (pago al crédito) ────────────────────────────────────────────── */
.tabla input { font:inherit; font-size:12.5px; padding:5px 7px; border-radius:6px;
  border:1px solid var(--linea); background:var(--lienzo); color:var(--tinta);
  width:100%; }
.tabla input:focus { outline:2px solid var(--azul); outline-offset:-1px; }
.cuadra { color:var(--bien); font-weight:700; }
.no-cuadra { color:var(--grana); font-weight:700; }

/* ── Paso abortado por error: variante que rhe.css no define (.hecho/.activo
   sí) — reutiliza sus mismos tokens semánticos. ─────────────────────────── */
.paso.error { color:var(--mal); }
.paso.error .marca-paso { background:var(--mal); border-color:var(--mal); }
.paso.error .marca-paso svg { width:8px; height:8px; color:#fff; stroke-width:3.2; }

/* ── Bitácora: lo que pasó en SUNAT, paso a paso, tal como se registró ──── */
.bitacora { margin-top:4px; padding:9px 11px; border-radius:9px;
  background:var(--azul-tinta); color:#9FE6B0; font-family:var(--datos);
  font-size:11px; line-height:1.55; max-height:170px; overflow:auto; }
.bitacora b { color:#fff; display:block; margin-bottom:5px;
  font-family:var(--ui); font-size:11px; font-weight:650; }

/* ── Vista previa real capturada de SUNAT, dentro de .lienzo-previa ──────
   rhe.css ya da fondo/borde a .lienzo-previa; el contenido real que se
   captura en la prueba es una CAPTURA de pantalla del borrador (más
   confiable que reformatear el texto a mano) más el texto íntegro como
   respaldo plegado. */
.lienzo-previa img { width:100%; height:auto; display:block; border-radius:8px;
  border:1px solid var(--linea); }
.lienzo-previa details { margin-top:10px; }
.lienzo-previa summary { font-size:11.5px; color:var(--azul); cursor:pointer;
  font-weight:600; }
.lienzo-previa pre { white-space:pre-wrap; font-family:var(--datos);
  font-size:11px; color:var(--tinta); margin-top:8px; line-height:1.55; }

/* ── Opciones tipo tarjeta: el resaltado sigue al radio marcado solo,
   sin depender de que el JS mantenga sincronizada la clase .marcada. ─────── */
.opcion:has(input:checked) { border-color:var(--azul); background:var(--azul-suave);
  box-shadow:inset 0 0 0 1px var(--azul); }

/* ── Modal genérico (ui.js): el cuerpo puede traer varios párrafos ──────── */
.modal header p { white-space:pre-line; }

/* ── Campo de clave con el botón de mostrar/ocultar ─────────────────────── */
.campo-clave { display:flex; gap:6px; align-items:center; }
.campo-clave input { flex:1; }
.campo-clave .icono-btn { flex-shrink:0; height:32px; width:32px; }

/* ── Solo para lectores de pantalla ──────────────────────────────────────
   Visible en el árbol de accesibilidad, invisible para el ojo. NO se usa
   `display:none` ni `visibility:hidden`: esos lo sacan también del lector, que
   es justo lo contrario de lo que se busca. El recorte de 1px es la técnica
   estándar y la única que funciona en todos los lectores. */
.solo-lectores {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  border:0;
}

/* ── Logo y avatares del perfil (pantalla de Configuración) ─────────────── */
.marco-logo { width:108px; height:84px; margin-top:4px;
  border:1px dashed var(--linea); border-radius:10px;
  display:grid; place-items:center; overflow:hidden; background:var(--papel); }
.marco-logo img { max-width:92px; max-height:68px; object-fit:contain; }
.marco-logo .sin-logo { font-size:11px; color:var(--gris2); }

.avatares { display:flex; gap:7px; flex-wrap:wrap; }
.avatar-op { width:38px; height:38px; padding:0; border-radius:50%;
  border:2px solid transparent; background:transparent; cursor:pointer;
  line-height:0; }
.avatar-op img { width:100%; height:100%; border-radius:50%; display:block; }
.avatar-op:hover, .avatar-op:focus-visible { border-color:var(--azul); outline:none; }

/* ── Buscador inteligente de servicios guardados ─────────────────────────
   Reemplaza el <select> nativo: con el catálogo creciendo, obligar a leer
   una lista entera sin filtro es peor que dejar escribir y acotar. */
.buscador { position:relative; }
.buscador input { padding-right:30px; }
.buscador-limpiar { position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border:0; border-radius:6px; background:transparent;
  color:var(--gris2); cursor:pointer; display:grid; place-items:center; }
.buscador-limpiar:hover { color:var(--grana); background:var(--mal-f); }
.buscador-limpiar svg { width:13px; height:13px; stroke-width:2; }
.buscador-lista { position:absolute; z-index:10; top:calc(100% + 4px); left:0; right:0;
  max-height:230px; overflow-y:auto; margin:0; padding:5px; list-style:none;
  background:var(--lienzo); border:1px solid var(--linea); border-radius:10px;
  box-shadow:var(--sombra-f); }
.buscador-lista li[role="option"] { padding:7px 9px; border-radius:7px; cursor:pointer; }
.buscador-lista li[role="option"] b { display:block; font-size:12.5px; font-weight:640;
  color:var(--tinta); }
.buscador-lista li[role="option"] span { display:block; font-size:11px; color:var(--gris);
  line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buscador-lista li[role="option"]:hover,
.buscador-lista li[role="option"].activa { background:var(--azul-suave); }
.buscador-lista li.vacia { color:var(--gris); font-size:12px; cursor:default; padding:9px 10px; }
/* Texto oscuro FIJO, no var(--tinta): en tema oscuro `--tinta` es casi blanco
   y quedaría blanco sobre oro — ilegible justo en la parte que coincide con
   lo que el usuario buscó. El oro es claro en los dos temas. */
.buscador-lista mark { background:var(--oro); color:#16202E; border-radius:2px; padding:0 1px; }

/* ── Móvil (≤760 px) ──────────────────────────────────────────────────────
   Va acá y no en blaugrana.css porque estas dos reglas PISAN reglas que se
   definen en este mismo archivo: extra.css se carga después, así que un
   override escrito allá perdería por orden de cascada aunque la especificidad
   empate. Pasó al intentarlo. */
@media (max-width:760px) {
  /* 16 px es el umbral por debajo del cual iOS hace ZOOM al enfocar un campo:
     tocar el monto de una cuota descolocaba la pantalla entera. */
  .tabla input { font-size:16px; padding:9px 8px; }
  /* Objetivo táctil real para quitar el servicio elegido. */
  .buscador-limpiar { width:40px; height:40px; }
  .buscador-limpiar svg { width:16px; height:16px; }
}