/* ================================================================
   Informes en Excel (Fase 3) — estilos de la pantalla «Informes» (js/informes.js, <section id="v-informes"> de index.html)
   Usa las variables y las clases de base.css (.tarjeta, .campo, .btn, .acciones, .ayuda, .gs-aviso, .mg-suma, .mg-campos, .mg-fechas).
   ================================================================ */

/* La pregunta del IVA: dos opciones grandes, sin ninguna marcada de antemano */
.inf-iva { min-width: 0; margin: 4px 0 0; padding: 0; border: none; }
.inf-iva legend { padding: 0; margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--texto2); }
.inf-iva .error { display: block; margin-top: 4px; color: var(--rojo); font-size: 12px; line-height: 1.4; }
.inf-iva .error:empty { display: none; }

.inf-opcion { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); cursor: pointer; }
.inf-opcion input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--verde); }
.inf-opcion span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inf-opcion strong { font-size: 14px; font-weight: 600; }
.inf-opcion small { font-size: 12px; line-height: 1.45; color: var(--texto2); }
.inf-opcion:has(input:checked) { border-color: var(--verde); background: var(--verde-suave); }
.inf-fotos { margin: 0 0 14px; }

/* El periodo: el trimestre lleva un texto largo («4.º trimestre (octubre a diciembre)»); en el móvil ocupa toda la fila y el año va debajo */
@media (max-width: 700px) {
    #inf-campo-trimestre { grid-column: 1 / -1; }
}

/* El resumen y la revisión de datos (antes de crear nada) */
.inf-revision { margin: 0 0 16px; }
.inf-revision h3 { margin: 0 0 8px; font-size: 14px; }
.inf-revision ul { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.inf-revision li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.45; }
.inf-revision .ayuda { margin: 8px 0 0; font-size: 12px; }
.inf-etiqueta { flex: none; min-width: 44px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.inf-aviso .inf-etiqueta { color: var(--ambar); }
.inf-info .inf-etiqueta { color: var(--texto3); }

/* Mientras se crea */
#inf-progreso h2 { margin-bottom: 8px; }
#inf-prog-barra { display: block; width: 100%; height: 12px; margin: 4px 0 16px; accent-color: var(--verde); }

/* Listo */
.inf-archivo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
.inf-archivo .material-icons-round { color: var(--verde); }
.inf-archivo strong { min-width: 0; overflow-wrap: anywhere; }
.inf-archivo small { font-size: 12px; color: var(--texto3); }
.inf-notas { margin: 0 0 16px; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--texto2); }
.inf-notas .inf-aviso-texto { color: var(--ambar); }
.inf-acciones-listo { flex-wrap: wrap; }
.inf-acciones-listo .btn { flex: 1 1 180px; justify-content: center; margin-top: 0; }
.inf-descargar { text-align: center; text-decoration: none; }
#inf-listo .ayuda { margin: 14px 0 16px; }
#inf-fallo .gs-aviso { margin: 0 0 14px; }