/* ========================================
   Accesibilidad
   ========================================

   Se carga en último lugar y corrige lo que incumple WCAG 2.1 AA sin tocar
   la identidad visual del sistema: el morado principal (#6C5DD3, 5,07:1) se
   mantiene. Sólo bajan en luminosidad los colores que no llegaban al mínimo.

   Cada valor de aquí fue verificado contra su fondo real antes de entrar:
   4,5:1 para texto, 3:1 para bordes y controles.
   ======================================== */

:root {
    /* --- Colores semánticos corregidos ---------------------------------
       Antes -> ahora (contraste sobre blanco)
       --success  #10b981 2,54:1 -> #047857 5,48:1
       --danger   #FF7556 2,65:1 -> #b91c1c 6,47:1
       --warning  #F97316 2,80:1 -> #92400e 7,09:1
       --secondary #4CE5B1 1,60:1 -> #0f766e 5,47:1
       --accent   #FFCE73 1,47:1 -> #92400e 7,09:1
       --gray-400 #9ca3af 2,54:1 -> #52596b 7,00:1                        */
    --success: #047857;
    --danger: #b91c1c;
    --warning: #92400e;
    --secondary: #0f766e;
    --secondary-dark: #0b5c55;
    --accent: #92400e;

    /* El gris auxiliar no llegaba ni sobre blanco ni sobre el lienzo gris */
    --gray-400: #52596b;
    --gray-500: #52596b;

    /* Morado para texto sobre blanco: la variante oscura llega a 6,46:1 */
    --primary-text: #5B4BC4;

    /* Anillo de foco: 7,68:1 sobre blanco, 6,98:1 sobre el lienzo */
    --focus-ring: #4F3FB8;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;

    /* Piso tipográfico y de objetivo táctil */
    --text-min: 0.8125rem;   /* 13px */
    --target-min: 2.25rem;   /* 36px */
}

/* ========================================
   Foco visible
   ========================================
   Antes había una sola regla de foco en todo el CSS y cuatro que lo apagaban.
   Se usa :focus-visible para que el anillo aparezca al navegar con teclado
   y no al hacer clic con el ratón. */

*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring) !important;
    outline-offset: var(--focus-ring-offset) !important;
    border-radius: 4px;
}

/* Sobre el menú lateral oscuro el anillo morado se pierde: allí va blanco */
.sidebar *:focus-visible,
.sidebar-nav-link:focus-visible {
    outline-color: #FFFFFF !important;
}

/* Navegadores sin :focus-visible: no dejar a nadie sin indicador */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus {
        outline: var(--focus-ring-width) solid var(--focus-ring) !important;
        outline-offset: var(--focus-ring-offset) !important;
    }
}

/* ========================================
   Saltar al contenido
   ========================================
   Sin esto cada Tab recorre el menú completo antes de llegar a la tabla. */

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: #FFFFFF;
    color: var(--focus-ring);
    border: 2px solid var(--focus-ring);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 1rem;
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* ========================================
   Piso tipográfico
   ========================================
   Había 45 usos por debajo de 12 px en un sistema donde se leen montos
   durante toda la jornada. */

.table,
.table td,
table td {
    font-size: max(0.875rem, 1em);
}

.badge,
.badge-success,
.badge-warning,
.badge-danger,
.badge-info,
.btn-sm,
small,
.text-muted,
.text-small {
    font-size: var(--text-min) !important;
}

/* Única excepción al piso de 13px: los encabezados de tabla.
   Son etiquetas cortas, en mayúsculas, en negrita y con separación entre
   letras — no texto de lectura. Se quedan en 12px, que es donde estaban,
   pero con el gris corregido (antes #6B7280, 4,39:1 sobre el lienzo). */
.table th,
table th {
    font-size: 0.75rem;
    color: #52596b;
}

/* ========================================
   Estados: el color deja de ser el único canal
   ========================================
   La marca de forma sólo va donde el color ES la única diferencia. Las
   píldoras del dashboard (badge-regularizado, badge-pendiente, badge-parcial,
   badge-no-identificado) ya se distinguen por su texto —"Cerrado", "Reg.",
   "Parcial", "No Ident."— y además sus colores ya cumplían: 6,37:1 a 7,15:1.
   Ponerles un punto sólo les añadía 14 px de ancho y las hacía desbordar la
   columna de estado del dashboard, que está fijada al 12 %. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-min);
    line-height: 1.35;
}

.badge-success::before,
.badge-warning::before,
.badge-danger::before,
.badge-info::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    background: currentColor;
}

/* Círculo = resuelto */
.badge-success {
    background: #d1fae5 !important;
    color: #065f46 !important;   /* 6,78:1 */
}
.badge-success::before { border-radius: 50%; }

/* Cuadrado = en espera */
.badge-warning {
    background: #fef3c7 !important;
    color: #92400e !important;   /* 6,37:1 */
}
.badge-warning::before { border-radius: 2px; }

/* Rombo = requiere atención */
.badge-danger {
    background: #ffe4e6 !important;
    color: #9f1239 !important;   /* 6,68:1 */
}
.badge-danger::before { border-radius: 2px; transform: rotate(45deg); }

/* Barra = informativo */
.badge-info {
    background: #cffafe !important;
    color: #155e75 !important;   /* 6,49:1 */
}
.badge-info::before { border-radius: 2px; width: 0.25rem; height: 0.75rem; }

/* ========================================
   Objetivos de interacción
   ========================================
   Los botones dentro de tablas llegaban a 18 px de alto. */

.btn,
.btn-sm,
button,
a.btn {
    min-height: var(--target-min);
}

.btn-sm {
    padding: 0.4375rem 0.75rem;
}

/* Casillas de selección: 14 px es difícil de acertar con el ratón */
input[type="checkbox"],
input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ========================================
   Cifras
   ========================================
   Los montos se comparan en columna: dígitos de ancho fijo para que se
   alineen y no bailen al cambiar de fila. */

.table td,
table td,
.monto,
.stat-value,
.dash-stat-value {
    font-variant-numeric: tabular-nums;
}

/* ========================================
   Enlaces
   ======================================== */

a {
    color: var(--primary-text);
}

a:hover {
    color: var(--focus-ring);
}

/* ========================================
   Títulos de tabla
   ========================================
   Describen la tabla para quien la escucha, sin ocupar espacio en pantalla. */

table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Utilidad para texto sólo audible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   Movimiento reducido
   ========================================
   Respeta a quien tiene configurado el sistema para no animar. */

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

    .btn:hover,
    .card:hover,
    .stat-card:hover {
        transform: none !important;
    }
}

/* ========================================
   Botones de color
   ========================================
   El texto blanco sobre los rellenos originales no se leía:
   .btn-success 2,54:1  ·  .btn-danger 3,76:1  ·  .btn-warning 2,15:1
   Se conserva el degradado, oscurecido hasta que la parada más clara
   del gradiente cumple por sí sola. */

.btn-success {
    background: linear-gradient(135deg, #047857, #065f46) !important;  /* 5,48:1 */
    color: #FFFFFF !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #03604a, #044c3a) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #b91c1c, #991b1b) !important;  /* 6,47:1 */
    color: #FFFFFF !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #991b1b, #7f1d1d) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #92400e, #7c2d12) !important;  /* 7,09:1 */
    color: #FFFFFF !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #7c2d12, #6b2410) !important;
}

/* El morado principal ya cumplía (5,07:1): sólo se le da estado de foco */
.btn-primary {
    color: #FFFFFF;
}

/* ========================================
   Campos de formulario
   ========================================
   Cuatro reglas heredadas apagan el contorno al enfocar un campo. Tres son
   normales y las gana el !important de más arriba, pero reference-override.css
   usa `outline: none !important` sobre `select:focus` e
   `input[type="date"]:focus`, que empatan en especificidad con `*:focus-visible`.

   Un empate se resolvería por orden de carga — y esta hoja va última, así que
   ganaría — pero eso se rompe en silencio si alguien reordena los <link>.
   El prefijo `html` suma un elemento y deja la victoria fuera de discusión. */

html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible,
html input[type="text"]:focus-visible,
html input[type="date"]:focus-visible,
html input[type="number"]:focus-visible,
html input[type="search"]:focus-visible,
html input[type="password"]:focus-visible,
html .input:focus-visible,
html .input-control:focus-visible,
html .header-search-input:focus-visible,
html #dashboard .dash-search-input:focus-visible,
html #dashboard .dash-filter-select:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring) !important;
    outline-offset: var(--focus-ring-offset) !important;
}