/* ARC Systems — capa visual profesional.
   Se carga despues de estilos.css para normalizar el panel sin cambiar datos,
   permisos, graficas ni el comportamiento de cada modulo. */

:root {
    --ui-radius-xs: 8px;
    --ui-radius-sm: 11px;
    --ui-radius-md: 15px;
    --ui-radius-lg: 19px;
    --ui-shadow-card: 0 1px 2px rgba(20, 34, 52, .04), 0 8px 24px rgba(20, 34, 52, .055);
    --ui-shadow-raised: 0 3px 8px rgba(20, 34, 52, .06), 0 18px 42px rgba(20, 34, 52, .09);
    --ui-ring: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
    --ui-surface-glass: color-mix(in srgb, var(--surface) 91%, transparent);
    --ui-surface-muted: color-mix(in srgb, var(--surface-alt) 68%, var(--surface));
}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body:not(.pagina-login-shell):not(.tablero-app) {
    background:
        radial-gradient(circle at 76% -18%, color-mix(in srgb, var(--acento) 7%, transparent), transparent 34rem),
        var(--bg);
}

/* Estructura: mas aire util, no mas espacio desperdiciado. */
.container:not(.container-login):not(.container-documento) {
    width: min(100%, 1540px);
    max-width: 1540px;
    padding: 24px 26px 34px;
}

.sidebar {
    border-right: 1px solid color-mix(in srgb, var(--borde) 78%, transparent);
    box-shadow: 8px 0 30px rgba(17, 31, 48, .035);
}

html[data-sidebar-translucida="1"] .sidebar {
    background: color-mix(in srgb, var(--bg-sidebar) 91%, transparent);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.sidebar-brand {
    padding-bottom: 15px;
    margin-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--borde) 72%, transparent);
}

.sidebar-nav {
    gap: 3px;
}

.sidebar-nav a,
.sidebar-acciones a,
.sidebar-acciones button {
    border-radius: var(--ui-radius-sm) !important;
    min-height: 40px;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.sidebar-nav a.activo {
    box-shadow: inset 3px 0 0 var(--acento);
}

.sidebar-busqueda input {
    min-height: 39px;
    border-radius: var(--ui-radius-sm) !important;
    background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
}

/* Jerarquia editorial clara. */
.encabezado-seccion {
    margin-bottom: 16px;
    gap: 14px;
}

.encabezado-seccion h1,
.encabezado-seccion h2 {
    margin-bottom: 3px;
    font-size: clamp(21px, 1.7vw, 27px);
    line-height: 1.16;
    letter-spacing: -.026em;
    font-weight: 760;
}

.encabezado-seccion h3 {
    letter-spacing: -.015em;
}

.encabezado-seccion p,
.subtitulo,
.texto-discreto {
    line-height: 1.48;
}

.panel-status-strip {
    min-height: 38px;
    padding: 8px 13px;
    margin-bottom: 15px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-glass);
    border-color: color-mix(in srgb, var(--borde) 84%, transparent);
    box-shadow: 0 1px 1px rgba(20, 34, 52, .025);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Tarjetas: una sola familia visual; el color sigue reservado al significado. */
:where(
    .tarjeta,
    .tarjeta-bi,
    .tarjeta-resumen,
    .tarjeta-metrica,
    .indicador-salud,
    .inv-ui-kpi,
    .inv-ui-meta-card,
    .inventario-kpi,
    .reporteador-kpi,
    .rep-ui-card,
    .reporteador-card,
    .gastos-ui-kpi,
    .pos-arc-kpi-card,
    .opc-wa-kpi,
    .formulario-box,
    .detalle-box,
    .panel,
    .card
) {
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-card) !important;
}

.tarjeta,
.formulario-box,
.detalle-box,
.panel,
.card {
    border-color: color-mix(in srgb, var(--borde) 88%, transparent) !important;
}

.dashboard-grid,
.tarjetas-metricas {
    gap: 14px !important;
}

.dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.tarjetas-metricas {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.tarjeta-resumen,
.tarjeta-metrica,
.tarjeta-bi {
    min-height: 116px !important;
    padding: 17px 18px !important;
}

.tarjeta-resumen-icono,
.tarjeta-metrica-icono {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.tarjeta-resumen-valor,
.tarjeta-metrica-valor,
.tarjeta-bi .valor,
.kpi-valor {
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}

.tarjeta-resumen-valor,
.tarjeta-metrica-valor {
    font-size: clamp(25px, 2.15vw, 34px) !important;
}

.tarjeta-resumen-titulo,
.tarjeta-metrica-titulo,
.tarjeta-bi .etiqueta {
    font-size: 12px !important;
    font-weight: 690 !important;
    letter-spacing: .01em;
}

/* Filtros y acciones: compactos y alineados. */
.tarjeta.ui-filtros,
.inv-ui-filtro,
.rep-ui-filtros,
.filtro-box,
.filtros-barra {
    border-radius: var(--ui-radius-md) !important;
}

.tarjeta.ui-filtros,
.inv-ui-filtro,
.rep-ui-filtros {
    padding: 12px 14px !important;
    box-shadow: 0 2px 10px rgba(20, 34, 52, .035) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    border-radius: var(--ui-radius-xs) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color: color-mix(in srgb, var(--acento) 60%, var(--borde-fuerte)) !important;
    box-shadow: var(--ui-ring) !important;
    outline: none;
}

.boton,
.boton-secundario,
.boton-mini,
.boton-icono {
    border-radius: var(--ui-radius-xs) !important;
    font-weight: 680 !important;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.boton,
.boton-secundario {
    min-height: 40px;
}

.boton:focus-visible,
.boton-secundario:focus-visible,
.boton-mini:focus-visible,
.boton-icono:focus-visible,
.sidebar-nav a:focus-visible {
    outline: none !important;
    box-shadow: var(--ui-ring) !important;
}

/* Tablas: lectura empresarial, encabezado sobrio y filas menos apretadas. */
.tabla-wrap,
.tabla-scroll {
    border: 1px solid color-mix(in srgb, var(--borde) 90%, transparent) !important;
    border-top-width: 1px !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-card) !important;
    overflow: auto;
}

.tabla th,
.tabla-scroll th,
.tabla-compacta th {
    min-height: 42px;
    padding: 10px 13px !important;
    background: color-mix(in srgb, var(--acento-hover) 91%, #ffffff) !important;
    border-bottom-color: color-mix(in srgb, var(--acento-hover) 76%, #ffffff) !important;
    color: #f8fbfd !important;
    font-size: 10.5px !important;
    line-height: 1.25;
    letter-spacing: .055em !important;
    font-weight: 730 !important;
    text-transform: uppercase;
}

.tabla td,
.tabla-scroll td {
    padding: 10px 13px !important;
    line-height: 1.35;
    border-bottom-color: color-mix(in srgb, var(--borde) 78%, transparent) !important;
}

.tabla tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--surface-alt) 42%, var(--surface)) !important;
}

.tabla tbody tr:hover td,
.tabla-scroll tbody tr:hover td {
    background: color-mix(in srgb, var(--acento-suave) 44%, var(--surface)) !important;
}

.ui-paginacion {
    padding: 9px 2px 2px;
    color: var(--texto-secundario);
}

.estado-vacio-card {
    min-height: 150px;
    display: grid;
    place-content: center;
    border: 1px dashed color-mix(in srgb, var(--borde-fuerte) 72%, transparent) !important;
    background: color-mix(in srgb, var(--surface) 76%, transparent) !important;
    box-shadow: none !important;
}

/* Tablero celular: conserva sus graficas y datos, mejora su acabado de app. */
.tablero-app {
    background:
        radial-gradient(circle at 80% -8%, color-mix(in srgb, var(--acento) 9%, transparent), transparent 24rem),
        var(--bg);
}

.tablero-top {
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom-color: color-mix(in srgb, var(--borde) 82%, transparent);
    box-shadow: 0 4px 22px rgba(20, 34, 52, .055);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.tablero-top strong {
    font-size: 17px;
    letter-spacing: -.018em;
}

.tablero-cuerpo {
    max-width: 760px;
    padding: 18px 16px 24px;
    gap: 14px;
}

.tablero-tarjeta,
.tablero-bloque,
.tablero-lista,
.tablero-instalar,
.tablero-contexto {
    border-radius: var(--ui-radius-md);
    border-color: color-mix(in srgb, var(--borde) 86%, transparent);
    background: var(--ui-surface-glass);
    box-shadow: var(--ui-shadow-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tablero-fila {
    min-height: 62px;
    transition: background-color .15s ease, transform .15s ease;
}

.tablero-fila:active {
    transform: scale(.992);
    background: var(--acento-suave);
}

.tablero-barra {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-top-color: color-mix(in srgb, var(--borde) 82%, transparent);
    box-shadow: 0 -9px 28px rgba(20, 34, 52, .08);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.tablero-barra a {
    border-radius: 11px;
}

.tablero-barra a.activo {
    background: color-mix(in srgb, var(--acento-suave) 70%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .tarjeta-resumen:hover,
    .tarjeta-metrica:hover,
    .tarjeta-bi:hover,
    .rep-ui-card:hover,
    .reporteador-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ui-shadow-raised) !important;
    }

    .boton:hover,
    .boton-secundario:hover,
    .boton-mini:hover {
        transform: translateY(-1px);
    }

    .sidebar-nav a:hover {
        transform: translateX(2px);
    }
}

[data-tema="oscuro"] {
    --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .24), 0 10px 28px rgba(0, 0, 0, .20);
    --ui-shadow-raised: 0 5px 12px rgba(0, 0, 0, .25), 0 20px 44px rgba(0, 0, 0, .28);
    --ui-surface-glass: color-mix(in srgb, var(--surface) 89%, transparent);
}

[data-tema="oscuro"] .tabla th,
[data-tema="oscuro"] .tabla-scroll th,
[data-tema="oscuro"] .tabla-compacta th {
    background: color-mix(in srgb, var(--acento-hover) 58%, #0d1722) !important;
    border-bottom-color: color-mix(in srgb, var(--acento) 38%, #0d1722) !important;
}

@media (max-width: 1024px) {
    .container:not(.container-login):not(.container-documento) {
        padding: 20px 18px 28px;
    }

    .tarjeta-resumen,
    .tarjeta-metrica,
    .tarjeta-bi {
        min-height: 108px !important;
    }
}

@media (max-width: 767px) {
    .container:not(.container-login):not(.container-documento) {
        padding: 58px 12px calc(126px + env(safe-area-inset-bottom));
    }

    .encabezado-seccion {
        align-items: flex-start;
    }

    .encabezado-seccion h1,
    .encabezado-seccion h2 {
        font-size: 22px;
    }

    .dashboard-grid,
    .tarjetas-metricas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }

    .tarjeta-resumen,
    .tarjeta-metrica,
    .tarjeta-bi {
        min-height: 104px !important;
        padding: 14px !important;
    }

    .tarjeta-resumen-icono,
    .tarjeta-metrica-icono {
        width: 36px !important;
        height: 36px !important;
    }

    .tabla th,
    .tabla-scroll th,
    .tabla-compacta th {
        font-size: 10px !important;
        padding: 9px 11px !important;
    }

    .tabla td,
    .tabla-scroll td {
        padding: 9px 11px !important;
    }
}

@media (max-width: 440px) {
    .dashboard-grid,
    .tarjetas-metricas {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta-resumen,
    .tarjeta-metrica,
    .tarjeta-bi,
    .rep-ui-card,
    .reporteador-card,
    .boton,
    .boton-secundario,
    .boton-mini,
    .sidebar-nav a,
    .tablero-fila {
        transition: none !important;
        transform: none !important;
    }
}