/* ==========================================================================
   iLESSO — Capa de componentes reutilizables (ui.css)

   POR QUÉ EXISTE ESTE ARCHIVO
   Los formularios de los paneles usaban `.form-grid`, que es una rejilla de
   DOS COLUMNAS IGUALES. Daba lo mismo si el campo era un RUC de 13 dígitos o
   una dirección larga: los dos ocupaban media pantalla. De ahí venían los
   huecos enormes que se veían en pantalla.

   Aquí se define una rejilla de DOCE columnas donde cada campo declara cuánto
   mide, más los componentes que faltaban: cabeceras de sección con color,
   selector de archivos con estilo propio (el nativo mostraba el botón gris
   "Elegir archivo" del navegador) y skeletons de carga.

   Se apoya en las variables de app.css: no redefine la paleta, la usa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REJILLA DE FORMULARIO — 12 columnas
   Uso:  <div class="grid"> <div class="col-3">…</div> <div class="col-9">…</div> </div>
   Guía de anchos (para que todos los formularios se vean iguales):
     col-2  → siglas, códigos cortos
     col-3  → cédula, RUC, licencia, teléfono, fecha, importes
     col-4  → nombres, apellidos, ciudad, selects medianos
     col-6  → correo, cargo, campos de texto normales
     col-8  → dirección, enlaces
     col-12 → descripciones, observaciones, textareas
   -------------------------------------------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Tablet: se simplifica a 6 columnas para no dejar campos de 2 columnas ilegibles. */
@media (max-width: 1024px) {
    .col-1, .col-2, .col-3 { grid-column: span 4; }
    .col-4, .col-5         { grid-column: span 6; }
    .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }
}

/* Móvil: todo a ancho completo. */
@media (max-width: 640px) {
    .grid { gap: 0.85rem; }
    [class*="col-"] { grid-column: span 12; }
}

/* --------------------------------------------------------------------------
   2. CABECERA DE SECCIÓN CON COLOR
   Antes cada vista escribía su propio <h3> con estilos en línea. Ahora hay un
   único componente con número, icono y una franja de color que identifica el
   bloque, para que el formulario no sea una pared blanca.
   -------------------------------------------------------------------------- */
.seccion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.05), transparent 65%);
    border-left: 4px solid var(--color-primary);
}

.seccion:first-child { margin-top: 0; }

.seccion__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-text-light);
    font-size: 0.78rem;
    font-weight: 700;
}

.seccion__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

.seccion__nota {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.15rem;
}

.seccion svg,
.seccion i[data-lucide] { width: 18px; height: 18px; flex: none; }

/* Variantes de color: identifican de un vistazo el tipo de bloque. */
.seccion--ambar   { border-left-color: var(--color-accent);  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.10), transparent 65%); }
.seccion--ambar   .seccion__num { background: var(--color-accent); color: #3a2a08; }
.seccion--ambar   .seccion__titulo { color: #8a5d0c; }

.seccion--verde   { border-left-color: var(--color-success); background: linear-gradient(90deg, rgba(16, 185, 129, 0.10), transparent 65%); }
.seccion--verde   .seccion__num { background: var(--color-success); }
.seccion--verde   .seccion__titulo { color: #067a55; }

.seccion--info    { border-left-color: var(--color-info);    background: linear-gradient(90deg, rgba(14, 165, 233, 0.10), transparent 65%); }
.seccion--info    .seccion__num { background: var(--color-info); }
.seccion--info    .seccion__titulo { color: #0369a1; }

.seccion--peligro { border-left-color: var(--color-danger);  background: linear-gradient(90deg, rgba(239, 68, 68, 0.10), transparent 65%); }
.seccion--peligro .seccion__num { background: var(--color-danger); }
.seccion--peligro .seccion__titulo { color: #b91c1c; }

/* --------------------------------------------------------------------------
   3. CAMPOS — más compactos que antes (menos aire desperdiciado)
   -------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 0.35rem; }

.campo > label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.campo > label .req { color: var(--color-danger); font-weight: 700; }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="date"],
.campo input[type="time"],
.campo input[type="tel"],
.campo input[type="url"],
.campo input[type="number"],
.campo input[type="search"],
.campo select,
.campo textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: #fff;
    color: var(--color-text-main);
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

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

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}

.campo input:disabled,
.campo select:disabled { background: #f1f5f9; color: var(--color-text-muted); cursor: not-allowed; }

.campo__ayuda { font-size: 0.75rem; color: var(--color-text-muted); }
.campo__error { font-size: 0.75rem; font-weight: 500; color: var(--color-danger); }

.campo.tiene-error input,
.campo.tiene-error select,
.campo.tiene-error textarea { border-color: var(--color-danger); background: #fffafb; }

/* Prefijo/sufijo dentro del campo (por ejemplo el símbolo $ o "USD"). */
.campo__grupo { display: flex; align-items: stretch; }
.campo__grupo > input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.campo__afijo {
    display: inline-flex;
    align-items: center;
    padding: 0 0.7rem;
    background: #f1f5f9;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   4. SELECTOR DE ARCHIVOS
   El input nativo pintaba el botón gris "Elegir archivo" del sistema, que se
   veía ajeno al panel. Aquí se oculta el nativo y se usa la etiqueta como zona
   pulsable; ui.js escribe el nombre del archivo elegido.
   -------------------------------------------------------------------------- */
.archivo { position: relative; }

.archivo input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.archivo__caja {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: #fbfdff;
    transition: var(--transition-fast);
    min-height: 42px;
}

.archivo:hover .archivo__caja { border-color: var(--color-accent); background: var(--color-creme); }

.archivo input[type="file"]:focus-visible + .archivo__caja {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}

.archivo__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    background: var(--color-creme);
    color: var(--color-accent);
}

.archivo__texto {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archivo.tiene-archivo .archivo__caja { border-style: solid; border-color: var(--color-success); background: #f0fdf9; }
.archivo.tiene-archivo .archivo__icono { background: #d1fae5; color: var(--color-success); }
.archivo.tiene-archivo .archivo__texto { color: var(--color-text-main); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. TARJETA DE FORMULARIO Y PIE DE ACCIONES — más ceñidos
   -------------------------------------------------------------------------- */
.tarjeta {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 640px) { .tarjeta { padding: 1.1rem; } }

.acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
}

.acciones--separado { justify-content: space-between; }

@media (max-width: 576px) {
    .acciones { flex-direction: column-reverse; }
    .acciones > * { width: 100%; justify-content: center; }
}

/* Bloque que se muestra/oculta según una casilla (local físico, viaje…). */
.condicional { display: none; }
.condicional.abierto { display: block; animation: fadeIn var(--transition-normal); }

/* --------------------------------------------------------------------------
   6. CASILLAS Y OPCIONES con aspecto de tarjeta (en vez del checkbox suelto)
   -------------------------------------------------------------------------- */
.opcion {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    transition: var(--transition-fast);
}

.opcion:hover { border-color: var(--color-accent); background: var(--color-creme); }
.opcion input { width: auto; margin-top: 0.15rem; accent-color: var(--color-accent); }
.opcion__titulo { font-size: 0.87rem; font-weight: 600; color: var(--color-text-main); }
.opcion__nota { font-size: 0.76rem; color: var(--color-text-muted); }
.opcion:has(input:checked) { border-color: var(--color-accent); background: var(--color-creme); }

/* --------------------------------------------------------------------------
   6b. NOTA INFORMATIVA PERMANENTE
   OJO: no usar `.alert` para esto. app.js (y los app.js de cada panel) recogen
   TODOS los elementos `.alert` y los descartan solos, porque están pensados
   para los mensajes de "guardado con éxito". Una explicación que debe quedarse
   en pantalla usa `.nota`, que nadie borra.
   -------------------------------------------------------------------------- */
.nota {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(14, 165, 233, 0.25);
    background: rgba(14, 165, 233, 0.07);
    color: var(--color-text-main);
    font-size: 0.85rem;
    line-height: 1.5;
}

.nota > i[data-lucide],
.nota > svg { width: 18px; height: 18px; flex: none; margin-top: 0.1rem; color: var(--color-info); }
.nota strong { color: #0369a1; }

.nota--ambar   { border-color: rgba(var(--color-accent-rgb), 0.3); background: var(--color-creme); }
.nota--ambar   > i[data-lucide], .nota--ambar > svg { color: var(--color-accent); }
.nota--ambar   strong { color: #8a5d0c; }

.nota--verde   { border-color: rgba(16, 185, 129, 0.28); background: rgba(16, 185, 129, 0.07); }
.nota--verde   > i[data-lucide], .nota--verde > svg { color: var(--color-success); }
.nota--verde   strong { color: #067a55; }

.nota--peligro { border-color: rgba(239, 68, 68, 0.28); background: rgba(239, 68, 68, 0.06); }
.nota--peligro > i[data-lucide], .nota--peligro > svg { color: var(--color-danger); }
.nota--peligro strong { color: #b91c1c; }

/* --------------------------------------------------------------------------
   7. SKELETONS — esqueletos de carga
   Sustituyen al salto en blanco mientras llegan los datos. Se usan poniendo
   .skeleton sobre el hueco; ui.js los retira cuando el contenido está listo.
   -------------------------------------------------------------------------- */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #eef2f7;
    border-radius: var(--radius-sm);
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: skeleton-brillo 1.3s infinite;
}

@keyframes skeleton-brillo { 100% { transform: translateX(100%); } }

.skeleton-texto  { height: 0.85rem; margin-bottom: 0.5rem; border-radius: 4px; }
.skeleton-texto:last-child { margin-bottom: 0; width: 70%; }
.skeleton-titulo { height: 1.3rem; width: 45%; margin-bottom: 0.9rem; border-radius: 5px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.skeleton-boton  { height: 38px; width: 120px; border-radius: var(--radius-md); }

.skeleton-tarjeta {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

/* Fila de tabla en carga: se repite tantas veces como haga falta. */
.skeleton-fila { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid var(--color-border); }
.skeleton-fila > .skeleton { height: 0.9rem; border-radius: 4px; }

/* Contenedor de esqueleto (fila de tabla, tarjeta…).
   ui.js solo QUITA la clase .skeleton de cada pieza; no borra el contenedor.
   Sin esta regla el hueco gris se quedaría vacío en pantalla para siempre. */
.skeleton-carga:not(:has(.skeleton)) { display: none; }
.skeleton-carga .skeleton { display: block; height: 0.9rem; border-radius: 4px; }

/* Sin JavaScript nadie retira los esqueletos: se ocultan de entrada para no
   tapar el contenido, que en casi todos los listados ya viene del servidor. */
@media (scripting: none) {
    .skeleton-carga { display: none; }
}

/* Valor de un dato de solo lectura, con el aspecto de un campo del formulario.
   Evita repetir el mismo style="..." en cada línea de las fichas de revisión. */
.dato {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-main);
}

/* Quien prefiera menos movimiento no ve el brillo. */
@media (prefers-reduced-motion: reduce) {
    .skeleton::after { animation: none; }
    .condicional.abierto { animation: none; }
}