:root {
    --color-primario: #4338CA;
    --color-primario-suave: color-mix(in srgb,var(--color-primario) 10%,#fff);
    --gris-950: #0f172a;
    --gris-800: #1e293b;
    --gris-600: #475569;
    --gris-400: #94a3b8;
    --gris-200: #e2e8f0;
    --gris-100: #f1f5f9;
    --gris-50: #f8fafc;
    --verde: #16a34a;
    --verde-suave: #dcfce7;
    --rojo: #dc2626;
    --rojo-suave: #fee2e2;
    --ambar: #d97706;
    --ambar-suave: #fef3c7;
    --azul: #2563eb;
    --azul-suave: #dbeafe;
    --violeta: #7c3aed;
    --violeta-suave: #ede9fe;
    --radio: 16px;
    --sombra: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.045);
    --font-ui: var(--font-brand, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    --font-display: var(--font-ui);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-ui);
    background: var(--gris-50);
    color: var(--gris-950);
    font-size: 14.5px;
    line-height: 1.5;
    overflow-x: hidden; /* candado general: ninguna tabla ancha debe poder mover la página entera */
}

a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
    width: 240px;
    background: #fff;
    border-right: 1px solid var(--gris-200);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    flex-shrink: 0;
}
.sidebar-logo { display: flex; align-items: center; gap: .6rem; padding: 0 .4rem 1.25rem; border-bottom: 1px solid var(--gris-100); margin-bottom: 1rem; }
.sidebar-logo img { max-height: 36px; max-width: 100%; object-fit: contain; }
.sidebar-logo span { font-weight: 700; font-size: 1rem; color: var(--gris-950); }
.nav-group { margin-bottom: 1.25rem; }
.nav-group-label { font-size: var(--type-overline,.6875rem); text-transform: uppercase; letter-spacing: var(--tracking-overline,.055em); color: var(--gris-400); padding: 0 .6rem; margin-bottom: .4rem; font-weight: 700; }
.nav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .6rem; border-radius:var(--radius-sm); color: var(--gris-600);
    font-size: .875rem; font-weight: 500; margin-bottom: .15rem;
}
.nav-link:hover { background: var(--gris-100); text-decoration: none; color: var(--gris-950); }
.nav-link.active { background: var(--color-primario-suave); color: var(--color-primario); box-shadow: inset 3px 0 0 var(--color-primario); }
.nav-link svg { flex-shrink: 0; }
.sidebar-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--gris-100); }
.user-chip { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primario-suave); color: var(--color-primario); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.user-meta { line-height: 1.2; }
.user-meta strong { font-size: .82rem; display: block; }
.user-meta span { font-size: .72rem; color: var(--gris-400); }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid var(--gris-200); padding: 1rem 1.75rem; display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { font-size: 1.1rem; margin: 0; }
.content { padding: 1.75rem; max-width: 1280px; }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem; }
.card + .card { margin-top: 1rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card-header h2 { font-size: .95rem; margin: 0; font-weight: 700; }

.grid { display: grid; gap: 1rem; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid > * { min-width: 0; } /* ninguna tarjeta se ensancha por su contenido: retícula simétrica en TODA la app */
@media (max-width: 900px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat-card { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; height: 118px; box-sizing: border-box; overflow: hidden; }
.stat-card .valor { font-size: 1.7rem; font-weight: 700; line-height: 1.15; margin-bottom: .15rem; color: var(--gris-950); }
.stat-card .etiqueta { font-size: .78rem; color: var(--gris-600); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .subtitulo { font-size: .74rem; color: var(--gris-400); margin-top: .1rem; }

/* ---------- Insignias de ícono (dashboard, accesos rápidos) ---------- */
.icon-badge {
    width: 40px; height: 40px; border-radius:var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .65rem; flex-shrink: 0;
}
.icon-badge-azul { background: var(--azul-suave); color: var(--azul); }
.icon-badge-verde { background: var(--verde-suave); color: var(--verde); }
.icon-badge-rojo { background: var(--rojo-suave); color: var(--rojo); }
.icon-badge-ambar { background: var(--ambar-suave); color: var(--ambar); }
.icon-badge-violeta { background: var(--violeta-suave); color: var(--violeta); }
.icon-badge-primario { background: var(--color-primario-suave); color: var(--color-primario); }
.icon-badge-gris { background: var(--gris-100); color: var(--gris-600); }

/* ---------- Accesos rápidos (ícono arriba, etiqueta abajo) ---------- */
.accesos-rapidos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.acceso-rapido {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .55rem; padding: 1.1rem .75rem; border: 1px solid var(--gris-200); border-radius: var(--radio);
    background: #fff; color: var(--gris-800); font-size: var(--type-body-small,.8125rem); font-weight: 500; text-align: center;
    transition: border-color .15s, background .15s;
}
.acceso-rapido:hover { border-color: var(--color-primario); background: var(--color-primario-suave); text-decoration: none; }
.acceso-rapido .icon-badge { margin-bottom: 0; }
@media (max-width: 700px) { .accesos-rapidos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1rem; border-radius: 9px; font-size: var(--type-button,.8125rem); font-weight: 500;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primario { background: var(--color-primario); color: #fff; }
.btn-primario:hover { filter: brightness(1.08); }
.btn-secundario { background: #fff; border-color: var(--gris-200); color: var(--gris-800); }
.btn-secundario:hover { background: var(--gris-50); }
.btn-peligro { background: var(--rojo-suave); color: var(--rojo); }
.btn-exito { background: var(--verde-suave); color: var(--verde); }
.btn-sm { padding: .35rem .7rem; font-size: .78rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Forms ---------- */
.form-grupo { margin-bottom: 1rem; }
.form-grupo label { display: block; font-size: var(--type-label,.8125rem); font-weight: 500; color: var(--gris-800); margin-bottom: .3rem; }
.form-grupo .ayuda { font-size: var(--type-caption,.75rem); color: var(--gris-400); margin-top: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=file], select, textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--gris-200); border-radius:var(--radius-sm);
    font-size: .875rem; font-family: inherit; background: #fff; color: var(--gris-950);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--color-primario-suave); }
textarea { resize: vertical; min-height: 80px; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--type-table,.8125rem); }
th { text-align: left; font-size: var(--type-table-head,.6875rem); text-transform: uppercase; letter-spacing: .035em; color: var(--gris-400); font-weight: 700; padding: .6rem .7rem; border-bottom: 1px solid var(--gris-200); }
td { padding: .65rem .7rem; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.tabla-wrap { overflow-x: auto; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius:var(--radius-pill); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.badge-gray { background: var(--gris-100); color: var(--gris-600); }
.badge-blue { background: var(--azul-suave); color: var(--azul); }
.badge-green { background: var(--verde-suave); color: var(--verde); }
.badge-red { background: var(--rojo-suave); color: var(--rojo); }
.badge-amber { background: var(--ambar-suave); color: var(--ambar); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--gris-200); margin-bottom: 1.25rem; }
.tab { padding: .6rem 1rem; font-size: var(--type-label,.8125rem); font-weight: 500; color: var(--gris-400); border-bottom: 2px solid transparent; }
.tab.active { color: var(--color-primario); border-color: var(--color-primario); }
.tab .conteo { background: var(--gris-100); border-radius:var(--radius-pill); padding: .05rem .45rem; font-size: .72rem; margin-left: .3rem; }
.tab.active .conteo { background: var(--color-primario-suave); color: var(--color-primario); }

/* ---------- Alerts / flash ---------- */
.alerta { padding: .75rem 1rem; border-radius: 10px; font-size: .85rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.alerta-error { background: var(--rojo-suave); color: var(--rojo); }
.alerta-exito { background: var(--verde-suave); color: var(--verde); }

/* ---------- Comparación campo a campo ---------- */
.comparacion-row { display: grid; grid-template-columns: 140px 1fr 1fr 110px; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--gris-100); align-items: center; font-size: .85rem; }
.comparacion-row .campo-nombre { font-weight: 700; color: var(--gris-600); text-transform: capitalize; }
.comparacion-row .valor { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .8rem; }

/* ---------- Auth (login) ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--gris-50); padding: 1rem; }
.auth-card { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra); padding: 2rem; width: 100%; max-width: 380px; }
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo img { max-height: 48px; max-width: 100%; }
.auth-logo h1 { font-size: 1.15rem; margin: .5rem 0 0; }

/* ---------- Empty state ---------- */
.vacio { text-align: center; padding: 3rem 1rem; color: var(--gris-400); }
.vacio svg { margin-bottom: .75rem; opacity: .6; }

.texto-muted { color: var(--gris-400); }
.mono { font-family: ui-monospace, SFMono-Regular, monospace; }
.flex { display: flex; align-items: center; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.justify-between { justify-content: space-between; }
.mt-3 { margin-top: .75rem; }
.mb-0 { margin-bottom: 0; }

/* ---------- Móvil / tablet ---------- */
/* Todos los inputs a 16px mínimo: evita que iOS haga zoom automático al enfocar un campo */
input, select, textarea, button { font-size: max(16px, 0.875rem); }

.topbar-movil {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid var(--gris-200);
    padding: .75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 40;
}
.btn-menu-movil {
    background: none; border: none; padding: .4rem; cursor: pointer;
    color: var(--gris-800); display: flex; align-items: center;
}
.overlay-sidebar {
    display: none;
    position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 55;
}
.bottom-nav-movil { display: none; } /* solo aparece en móvil, ver @media abajo */

@media (max-width: 860px) {
    .sidebar .btn-menu-movil { display: flex !important; justify-content: flex-end; margin-bottom: .5rem; }

    .app-shell { flex-direction: column; }
    .topbar-movil { display: flex; }

    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
        width: 78vw; max-width: 300px;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 2px 0 16px rgba(0,0,0,.15);
        overflow-y: auto; /* el menú ahora sí se puede desplazar cuando no cabe en la pantalla */
    }
    .sidebar.abierto { transform: translateX(0); }
    .overlay-sidebar.abierto { display: block; }

    .content { padding: 1.1rem; }
    .topbar { flex-wrap: wrap; gap: .6rem; padding: .85rem 1.1rem; margin-left: -1.1rem !important; margin-right: -1.1rem !important; }
    .topbar h1 { font-size: 1rem; }

    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
    .stat-card .valor { font-size: 1.4rem; }

    table { font-size: .78rem; }
    th, td { padding: .5rem .5rem; }

    .comparacion-row { grid-template-columns: 90px 1fr 1fr 80px; font-size: .78rem; }

    .btn { padding: .6rem 1rem; } /* mantiene objetivo táctil >=40px alto */

    /* Barra de navegación inferior — accesos directos sin abrir el menú completo */
    .bottom-nav-movil {
        display: flex;
        background: #fff; border-top: 1px solid var(--gris-200);
    }
    .bottom-nav-movil a, .bottom-nav-movil button {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--gris-400); font-size: .68rem; font-weight:500;
        background: none; border: none; font-family: inherit; cursor: pointer;
    }
    .bottom-nav-movil a.active { color: var(--color-primario); }
    .bottom-nav-movil a:hover { text-decoration: none; }
}

@media (max-width: 520px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .auth-card { padding: 1.5rem; }
    .card { padding: 1rem; }
}

/* ========================================================================== 
   v1.4 — Sistema visual aprobado: minimalista, simétrico y responsive
   ========================================================================== */
:root {
    --layout-max: 1180px;
    --sidebar-width: 244px;
    --radio: 14px;
    --radio-sm: 10px;
    --sombra: 0 1px 2px rgba(15,23,42,.035), 0 5px 18px rgba(15,23,42,.04);
}
html, body { max-width: 100%; overflow-x: clip; }
body { background: #f8fafc; }
.app-shell { width: 100%; min-width: 0; }
.sidebar { width: var(--sidebar-width); padding: 1.15rem .95rem; }
.sidebar-logo { min-height: 56px; }
.nav-link { min-height: 40px; padding: .58rem .65rem; border-radius: 10px; }
.nav-link.active { box-shadow: none; background: var(--color-primario-suave); }
.main { width: calc(100% - var(--sidebar-width)); min-width: 0; }

/* Cabecera global — misma jerarquía de la propuesta aprobada */
.app-header {
    height: 72px; padding: 0 1.75rem; background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--gris-200); display: flex; align-items: center;
    position: sticky; top: 0; z-index: 35; backdrop-filter: blur(10px);
}
.app-header-menu { color: var(--gris-600); }
.app-header-spacer { flex: 1; }
.cabecera-acciones { display: flex; align-items: center; gap: .8rem; }
.btn-icono-cabecera {
    width: 40px; height: 40px; border: 0; border-radius:var(--radius-md); background: transparent;
    color: var(--gris-600); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; padding: 0;
}
.btn-icono-cabecera:hover { background: var(--gris-100); color: var(--gris-950); }
.usuario-cabecera { display: flex; align-items: center; gap: .65rem; padding-left: .35rem; }
.user-avatar-cabecera { width: 38px; height: 38px; font-size: .82rem; }
.usuario-cabecera-meta { display: flex; flex-direction: column; min-width: 118px; line-height: 1.2; }
.usuario-cabecera-meta strong { font-size: .82rem; color: var(--gris-950); }
.usuario-cabecera-meta span { font-size: .72rem; color: var(--gris-400); margin-top: .15rem; }

/* Notificaciones reales derivadas de la operación actual */
.notificaciones { position: relative; }
.notificacion-contador {
    position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: var(--color-primario); color: #fff; border: 2px solid #fff; font-size: 9px; font-weight:700;
}
.notificaciones-panel {
    position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 28px));
    background: #fff; border: 1px solid var(--gris-200); border-radius: 14px; box-shadow: 0 18px 45px rgba(15,23,42,.14);
    opacity: 0; visibility: hidden; transform: translateY(-5px); transition: .16s ease; overflow: hidden; z-index: 90;
}
.notificaciones.abierto .notificaciones-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.notificaciones-header { padding: .95rem 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gris-100); }
.notificaciones-header strong { font-size: .88rem; }
.notificaciones-header span { font-size: .72rem; color: var(--gris-400); }
.notificacion-item { display: flex; gap: .75rem; padding: .85rem 1rem; color: var(--gris-800); border-bottom: 1px solid var(--gris-100); }
.notificacion-item:last-child { border-bottom: 0; }
.notificacion-item:hover { background: var(--gris-50); text-decoration: none; }
.notificacion-item > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.notificacion-item strong { font-size: .8rem; color: var(--gris-950); }
.notificacion-item small { font-size: .72rem; color: var(--gris-400); line-height: 1.35; }
.notificacion-icono { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.notificacion-revision { background: var(--verde-suave); color: var(--verde); }
.notificacion-pendiente, .notificacion-tiempo { background: var(--ambar-suave); color: var(--ambar); }
.notificacion-alerta { background: var(--rojo-suave); color: var(--rojo); }
.notificaciones-vacio { padding: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--gris-400); font-size: .8rem; }

/* Contenedor central: nunca se pega al borde y nunca produce overflow global */
.content { width: 100%; max-width: var(--layout-max); margin: 0 auto; padding: 1.65rem 1.75rem 2.5rem; }
.content > * { max-width: 100%; min-width: 0; }

/* El antiguo topbar de cada vista ahora funciona como encabezado de página */
.topbar, .page-heading {
    background: transparent; border: 0; padding: 0; margin: 0 0 1.4rem !important;
    min-height: 52px; gap: 1rem;
}
.topbar h1 { font-size: 1.55rem; letter-spacing: -.025em; line-height: 1.2; }
.page-heading p { margin: .25rem 0 0; color: var(--gris-400); font-size: .82rem; }

/* Tarjetas / geometría compartida */
.card { border-color: #e6ebf2; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.2rem; }
.grid { gap: 1rem; }

/* 7 métricas: mismo ancho y altura; segunda fila centrada sin hueco “accidental”. */
.dashboard-stats { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1rem; }
.dashboard-stats > .stat-card { grid-column: span 2; }
.dashboard-stats > .stat-card:nth-child(5) { grid-column: 2 / span 2; }
.dashboard-stats > .stat-card:nth-child(6) { grid-column: 4 / span 2; }
.dashboard-stats > .stat-card:nth-child(7) { grid-column: 6 / span 2; }
.stat-card { height: 150px; padding: 1.15rem; justify-content: flex-start; overflow: hidden; }
.stat-card .icon-badge { width: 38px; height: 38px; margin-bottom: .7rem; }
.stat-card .valor { font-size: 1.65rem; letter-spacing: -.025em; margin-bottom: .16rem; }
.stat-card .etiqueta { font-size: .72rem; line-height: 1.25; min-height: 18px; }
.stat-card .subtitulo { font-size: .72rem; margin-top: .2rem; }

/* Accesos rápidos como en la propuesta: horizontales, equilibrados y discretos */
.accesos-rapidos { gap: .9rem; }
.acceso-rapido { min-height: 64px; flex-direction: row; justify-content: flex-start; text-align: left; padding: .8rem 1rem; border-radius: 11px; gap: .65rem; }
.acceso-rapido .icon-badge { width: 34px; height: 34px; border-radius: 10px; }

/* Tablas: solo la tabla desplaza, jamás la página. */
.tabla-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
table { min-width: 620px; }

/* Formularios y tarjetas de dos columnas aprovechan el área sin verse “pegados”. */
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card { height: 100%; }

.topbar-movil { display: none; }
.cabecera-acciones-movil { gap: .25rem; }
.topbar-movil-logo { display: flex; align-items: center; justify-content: center; min-width: 0; flex: 1; }
.topbar-movil-logo img { max-height: 30px; max-width: 150px; object-fit: contain; }

@media (max-width: 1020px) {
    .dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dashboard-stats > .stat-card,
    .dashboard-stats > .stat-card:nth-child(5),
    .dashboard-stats > .stat-card:nth-child(6),
    .dashboard-stats > .stat-card:nth-child(7) { grid-column: auto; }
    .content { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 860px) {
    .main { width: 100%; }
    .app-header { display: none; }
    .topbar-movil { display: flex; min-height: 64px; padding: .65rem .9rem; }
    .sidebar { width: min(84vw, 320px); max-width: 320px; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
    .content { width: 100%; max-width: none; padding: 1.25rem 1rem 5.5rem; }
    .topbar, .page-heading { margin-bottom: 1rem !important; min-height: 44px; }
    .topbar h1 { font-size: 1.35rem; }
    .topbar .btn { margin-left: auto; }
    .dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
    .stat-card { height: 142px; padding: 1rem; }
    .stat-card .valor { font-size: 1.45rem; }
    .accesos-rapidos { grid-template-columns: 1fr; gap: .55rem; }
    .acceso-rapido { min-height: 52px; padding: .65rem .8rem; }
    .card { padding: 1rem; }
    .card-header { gap: .75rem; }
    .notificaciones-panel { position: fixed; top: 64px; right: 12px; }
    .bottom-nav-movil { box-shadow: 0 -4px 18px rgba(15,23,42,.05); }
    .bottom-nav-movil a, .bottom-nav-movil button { }
}

/* En teléfonos estrechos conservamos las 2 columnas de métricas de la propuesta.
   Solo pantallas excepcionalmente angostas bajan a una columna. */
@media (max-width: 360px) {
    .dashboard-stats { grid-template-columns: 1fr; }
}

/* Sobrescribe la regla heredada que convertía todas las retículas en 1 columna a 520px. */
@media (max-width: 520px) {
    .dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .content { padding-left: .85rem; padding-right: .85rem; }
    .stat-card { height: 136px; }
    .stat-card .etiqueta { font-size: .67rem; }
    .stat-card .subtitulo { font-size: .67rem; }
    .usuario-cabecera-meta { display: none; }
}
@media (max-width: 360px) { .dashboard-stats { grid-template-columns: 1fr; } }


/* ========================================================================== 
   v1.5 — precisión geométrica, sidebar compacto y perfiles
   ========================================================================== */
:root { --sidebar-compact-width: 78px; --dashboard-gap: 16px; }
.user-avatar img, .profile-avatar-xl img, .employee-photo-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.avatar-link { text-decoration:none; flex:0 0 auto; }

/* Las 7 métricas comparten EXACTAMENTE ancho y alto. La fila de tres se centra
   sin cambiar el ancho de las tarjetas respecto a la fila de cuatro. */
.dashboard-stats-wrap { display:flex; flex-direction:column; gap:var(--dashboard-gap); width:100%; }
.dashboard-stats-row { display:grid; gap:var(--dashboard-gap); }
.dashboard-stats-row-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.dashboard-stats-row-3 {
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:calc(75% - (var(--dashboard-gap) / 4));
    margin-inline:auto;
}
.dashboard-stats-row > .stat-card { width:100%; height:150px; min-width:0; }
/* Neutraliza la retícula anterior v1.4 */
.dashboard-stats { display:none !important; }

/* Contenedores principales: misma caja, mismo ancho y mismos ejes verticales */
.content { --content-pad: 1.75rem; }
.content > .card, .content > .dashboard-stats-wrap, .content > .topbar, .content > .alerta { width:100%; }
.card { box-sizing:border-box; }
.accesos-rapidos { align-items:stretch; }
.acceso-rapido { min-height:58px; box-sizing:border-box; }

/* Sidebar compacto de verdad: el botón superior alterna ancho completo/íconos */
.sidebar, .main { transition: width .2s ease; }
.app-shell.sidebar-compacto .sidebar { width:var(--sidebar-compact-width); padding-inline:.65rem; }
.app-shell.sidebar-compacto .main { width:calc(100% - var(--sidebar-compact-width)); }
.app-shell.sidebar-compacto .sidebar-logo { height:46px; min-height:46px; overflow:hidden; }
.app-shell.sidebar-compacto .sidebar-logo img { max-width:46px; object-fit:contain; object-position:left center; }
.app-shell.sidebar-compacto .sidebar-logo span,
.app-shell.sidebar-compacto .nav-group-label,
.app-shell.sidebar-compacto .nav-link > :not(svg),
.app-shell.sidebar-compacto .user-meta { display:none; }
.app-shell.sidebar-compacto .nav-link { justify-content:center; padding:.6rem; gap:0; font-size:0; }
.app-shell.sidebar-compacto .nav-link svg { flex:0 0 auto; }
.app-shell.sidebar-compacto .sidebar-footer .user-chip { justify-content:center; }
.app-shell.sidebar-compacto .sidebar-footer form .nav-link { display:flex; justify-content:center; }
.app-shell.sidebar-compacto .sidebar-footer form .nav-link svg { width:18px; height:18px; }

/* Menú de usuario superior */
.usuario-menu { position:relative; }
.usuario-cabecera-btn { border:0; background:transparent; cursor:pointer; border-radius:var(--radius-md); padding:.35rem .45rem; color:var(--gris-700); font-family:inherit; }
.usuario-cabecera-btn:hover { background:var(--gris-50); }
.usuario-menu-panel {
    position:absolute; right:0; top:calc(100% + 10px); width:280px; background:#fff;
    border:1px solid var(--gris-200); border-radius:14px; box-shadow:0 18px 45px rgba(15,23,42,.14);
    opacity:0; visibility:hidden; transform:translateY(-5px); transition:.16s ease; z-index:95; overflow:hidden;
}
.usuario-menu.abierto .usuario-menu-panel { opacity:1; visibility:visible; transform:translateY(0); }
.usuario-menu-panel a, .usuario-menu-panel button {
    width:100%; display:flex; align-items:center; gap:.75rem; padding:.82rem .9rem; border:0; background:#fff;
    color:var(--gris-700); text-decoration:none; font-family:inherit; text-align:left; cursor:pointer;
}
.usuario-menu-panel a:hover, .usuario-menu-panel button:hover { background:var(--gris-50); }
.usuario-menu-panel a span, .usuario-menu-panel button span { display:flex; flex-direction:column; gap:.08rem; }
.usuario-menu-panel strong { font-size:.8rem; color:var(--gris-900); }
.usuario-menu-panel small { color:var(--gris-400); font-size:.68rem; }
.usuario-menu-panel form { border-top:1px solid var(--gris-100); }

/* Perfil */
.profile-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start; }
.profile-hero { display:flex; align-items:center; gap:1rem; padding-bottom:1.25rem; margin-bottom:1.25rem; border-bottom:1px solid var(--gris-100); }
.profile-avatar-xl { width:82px; height:82px; border-radius:24px; background:var(--color-primario-suave); color:var(--color-primario); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; overflow:hidden; }
.profile-hero h2 { margin:0; font-size:1.05rem; }
.profile-hero p { margin:.25rem 0 0; color:var(--gris-400); font-size:.8rem; }

/* Foto de expediente */
.employee-photo-strip { display:flex; align-items:center; gap:1rem; padding:1rem 1.15rem; margin-bottom:.75rem; }
.employee-photo-avatar { width:58px; height:58px; border-radius:var(--radius-lg); background:var(--gris-100); color:var(--gris-600); display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700; overflow:hidden; flex:0 0 auto; }
.employee-photo-meta { display:flex; flex-direction:column; min-width:0; }
.employee-photo-meta strong { font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.employee-photo-meta span { color:var(--gris-400); font-size:.72rem; margin-top:.15rem; }
.employee-photo-form { margin-left:auto; }

@media (max-width: 1020px) {
    .dashboard-stats-row-4, .dashboard-stats-row-3 { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; margin:0; }
    .dashboard-stats-row-3 > .stat-card:last-child { grid-column:1 / span 2; width:calc(50% - (var(--dashboard-gap) / 2)); justify-self:center; }
}
@media (max-width: 860px) {
    .app-shell.sidebar-compacto .sidebar { width:78vw; max-width:300px; padding:1.15rem .95rem; }
    .app-shell.sidebar-compacto .main { width:100%; }
    .app-shell.sidebar-compacto .nav-group-label, .app-shell.sidebar-compacto .user-meta { display:initial; font-size:initial; }
    .app-shell.sidebar-compacto .nav-link { justify-content:flex-start; padding:.58rem .65rem; gap:.65rem; }
    .app-shell.sidebar-compacto .sidebar-footer .user-chip { justify-content:flex-start; }
    .profile-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
    .dashboard-stats-row-4, .dashboard-stats-row-3 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
    .dashboard-stats-row-3 > .stat-card:last-child { grid-column:auto; width:100%; justify-self:stretch; }
    .employee-photo-strip { flex-wrap:wrap; }
    .employee-photo-form { width:100%; margin-left:74px; }
}
@media (max-width: 360px) {
    .dashboard-stats-row-4, .dashboard-stats-row-3 { grid-template-columns:1fr; }
}

/* ========================================================================== 
   v1.6 — sistema geométrico definitivo / contención responsive global
   ========================================================================== */
:root {
    --layout-max: 1480px;
    --layout-gutter-x: clamp(16px, 2vw, 32px);
    --layout-gutter-y: 24px;
    --ui-gap: 16px;
    --ui-card-radius: 14px;
    --ui-card-min-h: 150px;
}

html, body { width:100%; max-width:100%; overflow-x:hidden; }
.app-shell, .main, .content { min-width:0; max-width:100%; }
.main { width:auto; flex:1 1 auto; overflow:clip; }
.content {
    width:min(100%, var(--layout-max));
    max-width:var(--layout-max);
    margin-inline:auto;
    padding:var(--layout-gutter-y) var(--layout-gutter-x) 40px;
}
.content > * { min-width:0; max-width:100%; }

/* Un único eje visual para encabezados y bloques principales. */
.content > .topbar,
.content > .page-heading,
.content > .dashboard-stats-wrap,
.content > .card,
.content > .alerta,
.content > .usuarios-layout {
    width:100%;
    margin-left:0;
    margin-right:0;
}

/* Retícula definitiva: 4 × 2 en desktop. No hay filas centradas con ejes distintos. */
.dashboard-stats-wrap { display:grid; grid-template-columns:1fr; gap:var(--ui-gap); }
.dashboard-stats-row,
.dashboard-stats-row-4,
.dashboard-stats-row-3 {
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:var(--ui-gap);
    width:100%;
    margin:0;
}
.dashboard-stats-row > .stat-card {
    width:100%;
    height:var(--ui-card-min-h);
    min-height:var(--ui-card-min-h);
    max-height:var(--ui-card-min-h);
    min-width:0;
    margin:0;
}

/* Todas las tarjetas comunes comparten geometría y nunca fuerzan el ancho de su padre. */
.card { min-width:0; width:100%; border-radius:var(--ui-card-radius); }
.grid { width:100%; min-width:0; align-items:stretch; }
.grid > * { min-width:0; max-width:100%; }
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card { width:100%; min-width:0; }

/* Pantalla Usuarios: 4/8 columnas reales en vez de dos cajas 50/50. */
.usuarios-layout {
    display:grid;
    grid-template-columns:minmax(300px, 4fr) minmax(0, 8fr);
    gap:var(--ui-gap);
    align-items:start;
}
.usuarios-card-form, .usuarios-card-list { min-width:0; width:100%; }
.usuarios-card-list .tabla-wrap { width:100%; max-width:100%; }
.usuarios-table { width:100%; min-width:760px; table-layout:auto; }
.usuarios-table th:first-child, .usuarios-table td:first-child { min-width:190px; }
.usuarios-table th:nth-child(2), .usuarios-table td:nth-child(2) { min-width:135px; }
.usuarios-table th:nth-child(3), .usuarios-table td:nth-child(3) { min-width:95px; }
.usuarios-col-acciones { min-width:230px; width:230px; }
.usuarios-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-start; }
.usuarios-actions form { margin:0; }
.usuarios-actions .btn { white-space:normal; line-height:1.2; min-height:34px; }

/* Ninguna tabla puede recortar contenido: si no cabe, el desplazamiento pertenece a la tabla. */
.tabla-wrap {
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
}
.tabla-wrap > table { width:100%; max-width:none; }
td, th { overflow:visible; }

/* Formularios y botones no pueden ampliar una tarjeta. */
input, select, textarea, button, .btn { max-width:100%; }
.flex { min-width:0; }

/* Sidebar compacto: el main siempre absorbe el espacio restante sin cálculos de viewport. */
.app-shell.sidebar-compacto .main { width:auto; flex:1 1 auto; min-width:0; }

@media (max-width: 1180px) {
    .dashboard-stats-row,
    .dashboard-stats-row-4,
    .dashboard-stats-row-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .usuarios-layout { grid-template-columns:minmax(280px, 5fr) minmax(0, 7fr); }
}

@media (max-width: 980px) {
    .usuarios-layout { grid-template-columns:1fr; }
    .usuarios-table { min-width:720px; }
}

@media (max-width: 860px) {
    .content { width:100%; max-width:none; padding:18px 14px 88px; }
    .dashboard-stats-row,
    .dashboard-stats-row-4,
    .dashboard-stats-row-3 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .dashboard-stats-row > .stat-card { height:136px; min-height:136px; max-height:136px; }
    .usuarios-layout { grid-template-columns:1fr; }
}

@media (max-width: 420px) {
    .content { padding-inline:12px; }
    .dashboard-stats-row,
    .dashboard-stats-row-4,
    .dashboard-stats-row-3 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .dashboard-stats-row > .stat-card { height:132px; min-height:132px; max-height:132px; padding:.85rem; }
    .stat-card .icon-badge { width:32px; height:32px; margin-bottom:.45rem; }
    .stat-card .valor { font-size:1.35rem; }
    .stat-card .etiqueta { font-size:.64rem; }
    .stat-card .subtitulo { font-size:.64rem; }
}

@media (max-width: 340px) {
    .dashboard-stats-row,
    .dashboard-stats-row-4,
    .dashboard-stats-row-3 { grid-template-columns:1fr; }
}

/* Patrón maestro-detalle reutilizable para formularios + listados. */
.master-detail-layout {
    display:grid;
    grid-template-columns:minmax(300px,4fr) minmax(0,8fr);
    gap:var(--ui-gap);
    width:100%;
    align-items:start;
}
.master-detail-form, .master-detail-list { min-width:0; width:100%; }
.master-detail-list .tabla-wrap { width:100%; max-width:100%; }
@media (max-width:1180px) {
    .master-detail-layout { grid-template-columns:minmax(280px,5fr) minmax(0,7fr); }
}
@media (max-width:980px) {
    .master-detail-layout { grid-template-columns:1fr; }
}

/* ========================================================================== 
   v1.7 — contrato global de geometría (aplica a TODAS las vistas y módulos)
   Regla: el espaciado pertenece al contenedor, nunca a la tarjeta hermana.
   ========================================================================== */
:root {
    --ui-gap: 16px;
    --ui-gap-sm: 12px;
    --ui-card-h: 150px;
    --ui-section-gap: 16px;
}

/* 1) Elimina la causa raíz de las desalineaciones: .card + .card agregaba 16px
   a partir de la segunda tarjeta incluso DENTRO de grids. */
.card + .card { margin-top: 0; }
.content > .card + .card,
.content > .card + .grid,
.content > .grid + .card,
.content > .dashboard-stats-wrap + .card,
.content > .card + .dashboard-stats-wrap,
.content > .usuarios-layout + .card,
.content > .master-detail-layout + .card { margin-top: var(--ui-section-gap); }
.mt-3 { margin-top: var(--ui-section-gap) !important; }

/* 2) Una sola retícula para toda la aplicación. Cada hijo arranca exactamente
   en el mismo eje y el gap lo controla el grid, nunca el propio componente. */
.grid,
.grid-2,
.grid-3,
.grid-4,
.dashboard-stats-row,
.dashboard-stats-row-4,
.dashboard-stats-row-3 {
    gap: var(--ui-gap) !important;
    align-items: stretch;
    grid-auto-flow: row;
    min-width: 0;
}
.grid > *,
.dashboard-stats-row > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-width: 0;
    align-self: stretch;
}

/* 3) Toda métrica usa el MISMO componente visual aunque una vista antigua no
   haya añadido la clase .card. Esto normaliza Dashboard, Analítica, Histórico,
   Cargas, integridad y futuros módulos automáticamente. */
.stat-card {
    width: 100%;
    height: var(--ui-card-h) !important;
    min-height: var(--ui-card-h) !important;
    max-height: var(--ui-card-h) !important;
    margin: 0 !important;
    padding: 1.15rem !important;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: var(--ui-card-radius);
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
.grid > .stat-card,
.grid > .card.stat-card { height: var(--ui-card-h) !important; }

/* Tarjetas normales dentro de grids: mismas alturas por fila sin porcentajes
   ambiguos. Se neutraliza el antiguo height:100% que podía crear solapes. */
.grid-2 > .card,
.grid-3 > .card,
.grid-4 > .card {
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
}
.grid-2 > .stat-card,
.grid-3 > .stat-card,
.grid-4 > .stat-card,
.grid-2 > .card.stat-card,
.grid-3 > .card.stat-card,
.grid-4 > .card.stat-card {
    height: var(--ui-card-h) !important;
    min-height: var(--ui-card-h) !important;
    max-height: var(--ui-card-h) !important;
}

/* 4) Las secciones internas también respetan un ritmo único. */
.card > .grid + .grid,
.card > .grid + h3,
.card > h3 + .grid,
.card > .tabla-wrap + .grid,
.card > .grid + .tabla-wrap { margin-top: var(--ui-gap) !important; }
.card-header { min-height: 36px; margin-bottom: var(--ui-gap); }

/* 5) Formularios/filtros: pueden envolver, nunca forzar ancho ni montarse. */
.card form.flex,
.content form.flex {
    flex-wrap: wrap;
    row-gap: var(--ui-gap-sm);
}
.form-grupo { min-width: 0; }
.form-grupo.mb-0 { margin-bottom: 0; }

/* 6) Tablas: su ancho nunca recorta columnas ni invade la página. */
.tabla-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative;
}
.tabla-wrap > table {
    margin: 0 !important;
    min-width: max(720px, 100%);
}

/* 7) Bloques maestro-detalle: el formulario y el listado comparten eje superior
   y nunca se pisan. */
.usuarios-layout,
.master-detail-layout,
.profile-grid {
    gap: var(--ui-gap) !important;
    align-items: start !important;
}
.usuarios-layout > *,
.master-detail-layout > *,
.profile-grid > * { margin: 0 !important; min-width: 0; }

/* 8) Dashboard: las dos filas son idénticas y numeralia usa exactamente la
   misma retícula/espaciado que el resto de métricas. */
.dashboard-stats-wrap { gap: var(--ui-gap) !important; }
.dashboard-stats-row > .stat-card { margin: 0 !important; }
.card .grid.grid-4 > .stat-card { margin: 0 !important; }

/* 9) Ningún bloque principal puede montarse sobre el siguiente. */
.content { display: flow-root; }
.content > * { clear: both; }

@media (max-width: 1180px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    :root { --ui-gap: 12px; --ui-card-h: 138px; --ui-section-gap: 12px; }
    .grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .stat-card,
    .grid > .stat-card,
    .grid > .card.stat-card { height: var(--ui-card-h) !important; min-height: var(--ui-card-h) !important; max-height: var(--ui-card-h) !important; }
}

@media (max-width: 520px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    /* Dashboard conserva sus dos columnas móviles aprobadas. */
    .dashboard-stats-row,
    .dashboard-stats-row-4,
    .dashboard-stats-row-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 340px) {
    .dashboard-stats-row,
    .dashboard-stats-row-4,
    .dashboard-stats-row-3 { grid-template-columns: 1fr; }
}

/* ================================================================
   v1.8 — Acciones uniformes + modal global de carga masiva
   ================================================================ */

/* Grupos verticales de acciones: mismo ancho y misma altura siempre. */
.usuarios-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.usuarios-actions > form,
.usuarios-actions > button,
.usuarios-actions > .btn { width: 100%; margin: 0; }
.usuarios-actions > form > .btn,
.usuarios-actions > button,
.usuarios-actions > .btn {
    width: 100% !important;
    min-width: 100% !important;
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
}
.usuarios-col-acciones { min-width: 230px; width: 230px; }

/* Modal reutilizable: no cambia el ancho de la página. */
.app-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.app-modal[style*="display: flex"] { display: flex !important; }
.app-modal-dialog {
    width: min(100%, 620px);
    max-height: calc(100vh - 40px);
    overflow: auto;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius:var(--radius-lg);
    box-shadow: 0 24px 60px rgba(15,23,42,.16);
    padding: 22px;
}
.app-modal-header,
.app-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.app-modal-header { margin-bottom: 18px; }
.app-modal-header h2 { margin: 0; }
.app-modal-header p { margin: 4px 0 0; color: var(--gris-500); font-size: .86rem; }
.app-modal-footer { margin-top: 18px; }
.app-modal-footer-actions { display: flex; gap: 8px; margin-left: auto; }

.dropzone-carga {
    min-height: 220px;
    border: 1.5px dashed var(--gris-300);
    border-radius: 14px;
    background: var(--gris-50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
    padding: 28px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dropzone-carga:hover,
.dropzone-carga.arrastrando {
    border-color: var(--color-primario);
    background: color-mix(in srgb, var(--color-primario) 5%, white);
}
.dropzone-carga.arrastrando { transform: scale(.995); }
.dropzone-carga input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone-carga-icono {
    width: 44px;
    height: 44px;
    border-radius:var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primario);
    background: color-mix(in srgb, var(--color-primario) 10%, white);
}
.dropzone-carga span { color: var(--gris-600); }
.dropzone-carga small { color: var(--gris-400); }
.archivo-seleccionado {
    margin-top: 12px;
    border: 1px solid var(--gris-200);
    border-radius:var(--radius-md);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.archivo-seleccionado[hidden] { display: none !important; }
.archivo-seleccionado > div { flex: 1; min-width: 0; }
.archivo-seleccionado strong,
.archivo-seleccionado small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-seleccionado small { color: var(--gris-500); margin-top: 2px; }

@media (max-width: 640px) {
    .app-modal { padding: 10px; align-items: flex-end; }
    .app-modal-dialog { width: 100%; max-height: 92vh; border-radius:var(--radius-lg) 16px 10px 10px; padding: 18px; }
    .dropzone-carga { min-height: 180px; padding: 22px 16px; }
    .app-modal-footer { align-items: stretch; flex-direction: column; }
    .app-modal-footer-actions { width: 100%; margin-left: 0; }
    .app-modal-footer .btn { flex: 1; }
}


/* v1.9.1 — Alta individual: contrato de renderizado y geometría */
.alta-page-heading {
    display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
    margin-bottom:var(--ui-section-gap, 1rem);
}
.alta-page-heading h1 { margin:0; }
.alta-page-heading p { margin:.25rem 0 0; color:var(--gris-400); font-size:.82rem; }
.alta-form { width:100%; min-width:0; }
.alta-form > .card-header { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--gris-200); }
.alta-form > .card-header:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.alta-form .grid { margin:0; }
.alta-form input, .alta-form select, .alta-form textarea { width:100%; max-width:100%; }
.alta-form textarea { min-height:96px; resize:vertical; }
@media (max-width: 860px) {
    .alta-page-heading { margin-bottom:1rem; }
    .alta-form > .card-header { margin-top:1rem; padding-top:1rem; }
}


/* ========================================================================== 
   v1.10.1 — Expediente responsive sin recortes
   Regla: ningún dato crítico, badge o comparación sale de su tarjeta.
   ========================================================================== */
.expediente-grid { align-items:start; }
.expediente-grid > * { min-width:0; }
.employee-photo-strip { min-width:0; }
.employee-photo-meta { flex:1 1 auto; min-width:0; }
.employee-photo-meta strong {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    line-height:1.25;
}
.employee-photo-form { flex:0 0 auto; }

/* Comparaciones: el texto puede envolver y jamás empuja la tarjeta. */
.comparacion-row {
    grid-template-columns:minmax(120px,.85fr) minmax(0,1.15fr) minmax(0,1.15fr) minmax(120px,.75fr);
    min-width:0;
}
.comparacion-row > * { min-width:0; }
.comparacion-row .valor,
.comparacion-row .campo-nombre {
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.comparacion-estado .badge { max-width:100%; white-space:normal; line-height:1.2; }

/* En tablet el expediente deja de competir por dos columnas. */
@media (max-width: 1180px) {
    .expediente-grid { grid-template-columns:1fr !important; }
    .employee-photo-strip { min-height:auto; }
}

/* En tablet y móvil la comparación se vuelve una ficha legible, no una tabla comprimida. */
@media (max-width: 1024px) {
    .comparacion-head { display:none !important; }
    .comparacion-row {
        display:grid;
        grid-template-columns:1fr !important;
        gap:.45rem;
        padding:.9rem 0;
        align-items:start;
    }
    .comparacion-row > [data-label] {
        display:grid;
        grid-template-columns:minmax(92px, 34%) minmax(0,1fr);
        gap:.65rem;
        align-items:start;
    }
    .comparacion-row > [data-label]::before {
        content:attr(data-label);
        color:var(--gris-400);
        font-family:inherit;
        font-size:.68rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.02em;
    }
    .comparacion-row .campo-nombre { text-transform:none; }
    .comparacion-estado .badge { justify-self:start; }
    .employee-photo-strip { align-items:flex-start; }
    .employee-photo-form { width:auto; margin-left:0; }
}

@media (max-width: 520px) {
    .employee-photo-strip {
        display:grid;
        grid-template-columns:auto minmax(0,1fr);
        gap:.75rem;
    }
    .employee-photo-form { grid-column:1 / -1; width:100%; margin:0 !important; }
    .employee-photo-form .btn { width:100%; justify-content:center; }
    .expediente-grid .card { padding:1rem; }
    .comparacion-row > [data-label] { grid-template-columns:1fr; gap:.18rem; }
}


/* Información capturada: en tablet/móvil deja de ser una tabla ancha y se vuelve una lista clave/valor. */
@media (max-width: 1024px) {
    .expediente-info-wrap { overflow:visible !important; }
    .expediente-info-table { min-width:0 !important; width:100% !important; display:block; }
    .expediente-info-table tbody { display:block; width:100%; }
    .expediente-info-table tr {
        display:grid;
        grid-template-columns:minmax(120px, 38%) minmax(0,1fr);
        gap:.75rem;
        width:100%;
        padding:.7rem 0;
        border-bottom:1px solid var(--gris-100);
    }
    .expediente-info-table tr:last-child { border-bottom:0; }
    .expediente-info-table td {
        display:block;
        min-width:0;
        width:auto !important;
        padding:0 !important;
        border:0 !important;
        white-space:normal !important;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
}
@media (max-width: 430px) {
    .expediente-info-table tr { grid-template-columns:1fr; gap:.2rem; }
    .expediente-info-table td:first-child { font-size:.68rem; text-transform:uppercase; font-weight:700; letter-spacing:.02em; }
}

/* ========================================================================
   v1.10.2 — Carga masiva unificada + Login con identidad visual
   ======================================================================== */

/* Carga masiva: misma experiencia en modal y en la sección propia. */
.carga-page-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
}
.carga-page-heading h1 { margin:0; font-size:1.55rem; letter-spacing:-.02em; }
.carga-page-heading p { margin:.3rem 0 0; color:var(--gris-400); }
.carga-page-layout {
    display:grid;
    grid-template-columns:minmax(0, 1.7fr) minmax(280px, .7fr);
    gap:1rem;
    align-items:start;
}
.carga-upload-card,
.carga-info-card { min-width:0; }
.carga-upload-heading {
    display:flex;
    align-items:center;
    gap:.85rem;
    margin-bottom:1rem;
}
.carga-upload-heading .icon-badge { margin:0; }
.carga-upload-heading h2 { margin:0; font-size:1rem; }
.carga-upload-heading p { margin:.2rem 0 0; color:var(--gris-400); font-size:.82rem; }
.carga-drop-form { width:100%; min-width:0; }
.dropzone-carga-premium {
    position:relative;
    min-height:280px;
    border-width:1.5px;
    background:
      radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--color-primario) 7%, transparent), transparent 42%),
      #fbfdff;
    gap:8px;
}
.dropzone-carga-premium strong { font-size:1.03rem; color:var(--gris-950); }
.dropzone-carga-premium > span:not(.dropzone-carga-icono):not(.dropzone-cta) { color:var(--gris-500); }
.dropzone-kicker {
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--color-primario) !important;
}
.dropzone-formatos { font-size:.75rem; }
.dropzone-cta {
    margin-top:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:.42rem .8rem;
    border:1px solid var(--gris-200);
    border-radius:9px;
    background:#fff;
    color:var(--gris-800) !important;
    font-size:.8rem;
    font-weight:700;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.archivo-seleccionado-premium {
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.archivo-seleccionado-icono {
    width:34px;
    height:34px;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--verde-suave);
    color:var(--verde);
    flex:0 0 auto;
}
.carga-ayuda-inline {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:.6rem;
    margin-top:.85rem;
}
.carga-ayuda-inline span {
    display:flex;
    align-items:flex-start;
    gap:.45rem;
    color:var(--gris-500);
    font-size:.75rem;
    min-width:0;
}
.carga-ayuda-inline svg { flex:0 0 auto; color:var(--verde); margin-top:1px; }
.carga-footer { border-top:1px solid var(--gris-100); padding-top:1rem; }
.carga-info-card { padding:1.1rem; }
.carga-info-step {
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:.75rem;
    padding:.85rem 0;
    border-bottom:1px solid var(--gris-100);
}
.carga-info-step:first-child { padding-top:.1rem; }
.carga-info-step:last-child { border-bottom:0; padding-bottom:.1rem; }
.carga-info-step > span {
    width:32px;
    height:32px;
    border-radius:10px;
    background:var(--color-primario-suave);
    color:var(--color-primario);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.78rem;
}
.carga-info-step strong { display:block; font-size:.82rem; }
.carga-info-step p { margin:.2rem 0 0; color:var(--gris-400); font-size:.75rem; line-height:1.45; }

/* Modal de carga: más editorial y menos genérico. */
.app-modal-carga { width:min(100%, 680px); padding:24px; }
.app-modal-carga .app-modal-header { padding-bottom:2px; }
.app-modal-carga .app-modal-header h2 { font-size:1.15rem; letter-spacing:-.01em; }
.app-modal-carga .dropzone-carga-premium { min-height:245px; }

/* Login: pantalla diseñada como producto, no tarjeta genérica centrada. */
.auth-body {
    min-height:100vh;
    margin:0;
    background:#f7f9fc;
}
.auth-shell {
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(390px, 44%) minmax(0, 56%);
}
.auth-brand-panel {
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(2rem, 5vw, 4.5rem);
    background:
      radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 32%),
      radial-gradient(circle at 82% 78%, rgba(255,255,255,.10), transparent 28%),
      linear-gradient(145deg, color-mix(in srgb, var(--color-primario) 86%, #0f172a), color-mix(in srgb, var(--color-primario) 64%, #0f172a));
    color:#fff;
}
.auth-brand-panel::after {
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
    right:-160px;
    bottom:-140px;
    box-shadow:0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018);
}
.auth-brand-content { position:relative; z-index:1; max-width:560px; }
.auth-brand-logo { min-height:48px; display:flex; align-items:center; margin-bottom:clamp(3rem, 8vh, 6rem); }
.auth-brand-logo img {
    max-width:min(250px, 72%);
    max-height:58px;
    object-fit:contain;
    object-position:left center;
    filter:brightness(0) invert(1);
}
.auth-brand-mark {
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
}
.auth-eyebrow {
    display:block;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:inherit;
    opacity:.72;
}
.auth-brand-copy h1 {
    margin:.65rem 0 .85rem;
    max-width:520px;
    font-size:clamp(2.15rem, 4vw, 3.7rem);
    line-height:1.02;
    letter-spacing:-.045em;
    color:#fff;
}
.auth-brand-copy p {
    max-width:480px;
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:clamp(.95rem, 1.3vw, 1.08rem);
    line-height:1.65;
}
.auth-feature-list {
    display:grid;
    gap:.8rem;
    margin-top:2.4rem;
}
.auth-feature {
    display:flex;
    align-items:center;
    gap:.7rem;
    color:rgba(255,255,255,.86);
    font-size:.84rem;
}
.auth-feature svg { color:#fff; opacity:.9; }
.auth-brand-footer {
    position:relative;
    z-index:1;
    color:rgba(255,255,255,.48);
    font-size:.72rem;
}
.auth-access-panel {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(1.5rem, 5vw, 5rem);
    background:
      radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--color-primario) 5%, transparent), transparent 28%),
      #f8fafc;
}
.auth-card-premium {
    width:100%;
    max-width:430px;
    padding:0;
    border:0;
      background:transparent;
}
.auth-access-heading { margin-bottom:1.75rem; }
.auth-access-heading .auth-eyebrow { color:var(--color-primario); opacity:1; }
.auth-access-heading h2 {
    margin:.45rem 0 .35rem;
    font-size:2rem;
    line-height:1.1;
    letter-spacing:-.035em;
}
.auth-access-heading p { margin:0; color:var(--gris-400); font-size:.86rem; }
.auth-form-modern .form-grupo { margin-bottom:1.05rem; }
.auth-form-modern .form-grupo label { font-size:.77rem; }
.auth-input-wrap { position:relative; }
.auth-input-icon {
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--gris-400);
    display:flex;
    pointer-events:none;
}
.auth-input-wrap input {
    min-height:48px;
    padding-left:42px;
    border-radius:var(--radius-md);
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.02);
}
.auth-submit {
    min-height:48px;
    border-radius:var(--radius-md);
    margin-top:.4rem;
    justify-content:center;
    box-shadow:0 8px 20px color-mix(in srgb, var(--color-primario) 18%, transparent);
}
.auth-security-note {
    margin-top:1rem;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.4rem;
    color:var(--gris-400);
    font-size:.7rem;
}
.auth-security-note svg { color:var(--verde); }

@media (max-width: 920px) {
    .carga-page-layout { grid-template-columns:1fr; }
    .carga-info-card { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.75rem; }
    .carga-info-step { border:0; padding:.2rem; }
    .auth-shell { grid-template-columns:1fr; }
    .auth-brand-panel { min-height:auto; padding:1.5rem; }
    .auth-brand-logo { margin-bottom:1.35rem; }
    .auth-brand-copy h1 { font-size:2rem; max-width:520px; }
    .auth-brand-copy p { max-width:620px; }
    .auth-feature-list { display:none; }
    .auth-brand-footer { display:none; }
    .auth-access-panel { padding:2rem 1.25rem 3rem; align-items:flex-start; }
}

@media (max-width: 640px) {
    .carga-page-heading { flex-direction:column; align-items:stretch; }
    .carga-page-heading .btn { align-self:flex-start; }
    .carga-ayuda-inline { grid-template-columns:1fr; }
    .carga-info-card { grid-template-columns:1fr; }
    .carga-info-step { grid-template-columns:30px minmax(0,1fr); }
    .dropzone-carga-premium { min-height:220px; padding:24px 14px; }
    .carga-footer { align-items:stretch; }
    .auth-brand-panel { padding:1.2rem; }
    .auth-brand-logo { margin-bottom:1rem; min-height:34px; }
    .auth-brand-logo img { max-height:38px; }
    .auth-brand-copy h1 { font-size:1.62rem; margin:.35rem 0 .45rem; }
    .auth-brand-copy p { font-size:.82rem; line-height:1.5; }
    .auth-access-panel { padding:1.6rem 1.1rem 2.5rem; }
    .auth-access-heading { margin-bottom:1.35rem; }
    .auth-access-heading h2 { font-size:1.65rem; }
}

/* v1.10.3 — retroalimentación de autocompletado de identidad */
.identidad-auto-hint { margin-top:.35rem; line-height:1.35; }
.identidad-auto-status {
    display:flex; align-items:center; min-height:42px; margin:.1rem 0 1.15rem;
    padding:.7rem .85rem; border:1px solid var(--gris-200); border-radius:10px;
    background:var(--gris-50); color:var(--gris-700); font-size:.875rem;
}
.identidad-auto-status.es-cargando { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.identidad-auto-status.es-exito { background:#ecfdf5; border-color:#bbf7d0; color:#15803d; }
.identidad-auto-status.es-aviso { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.identidad-auto-status.es-error { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }

/* v1.10.3 — identidad white-label visible también en el home */
.dashboard-home-identidad { display:flex; align-items:center; gap:1rem; min-width:0; }
.dashboard-home-logo {
    width:58px; height:58px; flex:0 0 58px; border:1px solid var(--gris-200);
    border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center;
    padding:.55rem; box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.dashboard-home-logo img { width:100%; height:100%; object-fit:contain; }
@media (max-width: 640px) {
    .dashboard-home-heading { align-items:flex-start; }
    .dashboard-home-identidad { gap:.75rem; }
    .dashboard-home-logo { width:46px; height:46px; flex-basis:46px; border-radius:var(--radius-md); padding:.45rem; }
}

/* ============================================================
   v1.11.1 · Release Manager seguro
   ============================================================ */
.release-summary-grid{align-items:stretch}
.release-upload-form{display:flex;gap:1rem;align-items:stretch;flex-wrap:wrap}
.release-dropzone{flex:1 1 520px;min-height:132px;border:1.5px dashed var(--gris-300,#cbd5e1);border-radius:var(--radius-lg);background:var(--gris-50,#f8fafc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1.35rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;overflow:hidden;position:relative}
.release-dropzone:hover{border-color:var(--primario,#2563eb);background:#f8fbff}
.release-dropzone input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.release-dropzone strong{font-size:.95rem;color:var(--gris-900,#0f172a)}
.release-dropzone span:last-child{font-size:.78rem;color:var(--gris-500,#64748b)}
.release-drop-icon{inline-size:42px;block-size:42px;border-radius:var(--radius-md);background:#eaf2ff;color:var(--primario,#2563eb);display:grid;place-items:center}
.release-upload-form>.btn{align-self:center;min-width:178px;min-height:44px}
.release-check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.release-check{min-width:0;border:1px solid var(--gris-200,#e2e8f0);border-radius:13px;padding:.85rem;display:flex;gap:.7rem;align-items:flex-start;background:#fff}
.release-check.ok>span{color:#16a34a}.release-check.fail>span{color:#dc2626}
.release-check div{min-width:0}.release-check strong{display:block;font-size:.82rem;line-height:1.25}.release-check small{display:block;margin-top:.2rem;color:var(--gris-500,#64748b);font-size:.73rem;overflow-wrap:anywhere}
.release-list{display:grid;gap:14px}.release-item{border:1px solid var(--gris-200,#e2e8f0);border-radius:15px;padding:1rem;background:#fff;min-width:0}
.release-item-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}.release-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.release-actions form{margin:0}
.release-test-summary{display:flex;gap:.5rem;align-items:center;margin-top:.85rem;padding:.65rem .75rem;border-radius:10px;background:var(--gris-50,#f8fafc);font-size:.8rem;color:var(--gris-600,#475569)}
.release-ready-dot{inline-size:7px;block-size:7px;border-radius:var(--radius-pill);background:#16a34a;margin-left:.35rem}.release-tests{margin-top:.75rem}.release-tests summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--primario,#2563eb)}
.release-history-row{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--gris-100,#f1f5f9);flex-wrap:wrap}.release-history-row:last-child{border-bottom:0}
@media (max-width:1180px){.release-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.release-check-grid{grid-template-columns:1fr}.release-upload-form{display:grid;grid-template-columns:1fr}.release-upload-form>.btn{width:100%}.release-dropzone{min-height:118px}.release-actions{width:100%}.release-actions form,.release-actions .btn{width:100%}.release-item-head{display:grid;grid-template-columns:1fr}.release-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.release-summary-grid{grid-template-columns:1fr}}

/* v1.11.2 — White Label Studio, acceso y marca compacta */
.brand-logo-icono { display:none; }
.app-shell.sidebar-compacto .sidebar-logo .brand-logo-completo { display:none; }
.app-shell.sidebar-compacto .sidebar-logo .brand-logo-icono { display:block; width:38px; height:38px; object-fit:contain; margin:auto; }
.topbar-movil-logo img { width:42px; height:42px; max-width:42px; object-fit:contain; }
.auth-label-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.35rem; }
.auth-label-row label { margin:0 !important; }
.auth-label-row a,.auth-inline-link { color:var(--color-primario); font-size:.75rem; font-weight:700; text-decoration:none; }
.auth-inline-link { display:block; text-align:center; margin-top:1rem; }
.auth-password-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:9px; background:transparent; cursor:pointer; opacity:.58; font-size:15px; }
.auth-password-toggle:hover,.auth-password-toggle.is-visible { background:var(--gris-100); opacity:1; }
.auth-input-wrap:has(.auth-password-toggle) input { padding-right:48px; }
.auth-welcome-user { display:flex; flex-direction:column; padding:.85rem 1rem; margin-bottom:1rem; border:1px solid var(--gris-200); background:#fff; border-radius:var(--radius-md); }
.auth-welcome-user strong { font-size:.88rem; }.auth-welcome-user span{font-size:.74rem;color:var(--gris-400);margin-top:.15rem}

.white-label-studio { margin-bottom:1.5rem; }
.white-label-heading { margin-bottom:1rem; }.white-label-heading h2{font-size:1.25rem;margin:.25rem 0}.white-label-heading p{margin:0;color:var(--gris-400);font-size:.84rem}
.section-kicker { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--color-primario); font-weight:700; }
.white-label-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.7fr); gap:1rem; align-items:start; }
.white-label-editor { padding:1.25rem; }.white-label-editor h3{font-size:.9rem;margin:0 0 .9rem}.form-divider{height:1px;background:var(--gris-200);margin:1.25rem 0}
.brand-color-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }.color-field{display:grid;grid-template-columns:44px minmax(0,1fr);gap:.5rem}.color-field input[type=color]{padding:3px;height:42px;min-width:0}.color-field input[type=text]{min-width:0}
.brand-upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.brand-current{height:70px;border:1px solid var(--gris-200);border-radius:var(--radius-md);background:var(--gris-50);display:flex;align-items:center;justify-content:center;padding:.7rem;margin-bottom:.6rem}.brand-current img{max-width:100%;max-height:100%;object-fit:contain}.brand-current-icon{width:70px}
.white-label-preview { display:grid; gap:1rem; position:sticky; top:84px; }.preview-card{background:#fff;border:1px solid var(--gris-200);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--sombra)}.preview-card>span{display:block;color:var(--gris-400);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem}.preview-appbar{display:flex;align-items:center;gap:.65rem;padding:.7rem;border:1px solid var(--gris-200);border-radius:var(--radius-md)}.preview-icon{width:34px;height:34px;border-radius:10px;background:var(--gris-100);display:flex;align-items:center;justify-content:center;font-weight:700}.preview-icon img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-sm)}.preview-button{display:inline-flex;color:#fff;border-radius:9px;padding:.65rem .9rem;margin-top:.8rem;font-size:.75rem;font-weight:700}.preview-email-line{height:4px;border-radius:99px;margin:-1rem -1rem .9rem}.preview-email img{max-height:32px;max-width:150px;object-fit:contain}.preview-email h4{font-size:1rem;margin:.9rem 0 .35rem}.preview-email p{font-size:.74rem;color:var(--gris-400);line-height:1.5}
.reset-request-list{display:grid;gap:.6rem}.reset-request-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem;border:1px solid var(--gris-200);border-radius:var(--radius-md)}.reset-request-item>div:first-child{display:flex;flex-direction:column}.reset-request-item span{font-size:.72rem;color:var(--gris-400);margin-top:.15rem}.inline-actions{display:flex;gap:.45rem;flex-wrap:wrap}.modal-actions{display:flex;gap:.5rem;justify-content:flex-end}.badge-amber{background:var(--ambar-suave);color:var(--ambar)}
.usuarios-actions form,.usuarios-actions .btn { width:100%; }.usuarios-actions .btn { min-height:38px; justify-content:center; }

/* El dashboard no duplica la marca: la identidad vive en header/sidebar. */
.dashboard-home-logo { display:none !important; }

@media(max-width:900px){.white-label-grid{grid-template-columns:1fr}.white-label-preview{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.brand-color-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.brand-color-grid,.brand-upload-grid,.white-label-preview{grid-template-columns:1fr}.reset-request-item{align-items:stretch;flex-direction:column}.inline-actions{width:100%}.inline-actions form,.inline-actions .btn{width:100%}.auth-label-row{align-items:flex-start}.white-label-editor{padding:1rem}}
.auth-access-heading h2 { color:var(--color-secundario); }
.auth-security-note svg { color:var(--color-acento); }
.backup-manual-form{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}.backup-code-check{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--gris-500)}
.backup-protection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.backup-protection-item{display:flex;gap:.65rem;align-items:flex-start;padding:.8rem;border:1px solid var(--gris-200);border-radius:var(--radius-md);background:var(--gris-50)}.backup-protection-item div{display:flex;flex-direction:column;min-width:0}.backup-protection-item strong{font-size:.78rem}.backup-protection-item small{font-size:.68rem;color:var(--gris-400);margin-top:.18rem;line-height:1.35}.status-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:.22rem}.status-dot.ok{background:#22c55e}.status-dot.warn{background:#f59e0b}.status-dot.bad{background:#ef4444}.backup-policy-note{margin-top:.8rem;padding:.7rem .8rem;border-radius:10px;background:#f8fafc;color:var(--gris-500);font-size:.73rem;line-height:1.5}
@media(max-width:900px){.backup-protection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.backup-protection-grid{grid-template-columns:1fr}.backup-manual-form{width:100%;align-items:stretch}.backup-manual-form .btn{width:100%;justify-content:center}}

/* v1.11.3 — Glass UI + dark mode (Design System global) */
:root {
  --glass-bg: rgba(255,255,255,.74);
  --glass-bg-strong: rgba(255,255,255,.88);
  --glass-border: rgba(255,255,255,.72);
  --glass-shadow: 0 14px 38px rgba(15,23,42,.12);
  --glass-blur: 20px;
  --surface-app: #f6f8fc;
  --surface-card: #ffffff;
  --surface-elevated: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --line-soft: #e5eaf2;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --gris-950:#f8fafc; --gris-900:#f1f5f9; --gris-800:#e2e8f0; --gris-700:#cbd5e1;
  --gris-600:#aab7ca; --gris-500:#94a3b8; --gris-400:#718096; --gris-300:#475569;
  --gris-200:#334155; --gris-100:#263244; --gris-50:#182132;
  --surface-app:#0b1220; --surface-card:#111b2c; --surface-elevated:#162235;
  --text-main:#f8fafc; --text-muted:#9fb0c6; --line-soft:rgba(148,163,184,.18);
  --glass-bg:rgba(17,27,44,.72); --glass-bg-strong:rgba(17,27,44,.9);
  --glass-border:rgba(255,255,255,.09); --glass-shadow:0 18px 48px rgba(0,0,0,.34);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .main { background:var(--surface-app); color:var(--text-main); }
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .topbar-movil { background:rgba(11,18,32,.92); border-color:var(--line-soft); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .seccion-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .tabla-card,
html[data-theme="dark"] .app-modal-dialog { background:var(--surface-card); border-color:var(--line-soft); color:var(--text-main); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:#0d1727; color:var(--text-main); border-color:#334155; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#718096; }
html[data-theme="dark"] table th,
html[data-theme="dark"] table td { border-color:var(--line-soft); }
html[data-theme="dark"] .nav-link { color:#c7d2e2; }
html[data-theme="dark"] .nav-link.active { background:color-mix(in srgb, var(--color-primario) 22%, transparent); color:#fff; }

/* Glass se reserva para navegación, overlays y controles flotantes. */
.notificaciones-panel,
.usuario-menu-panel {
  background:var(--glass-bg-strong) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:var(--glass-shadow) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(145%);
  backdrop-filter:blur(var(--glass-blur)) saturate(145%);
}
.theme-toggle { position:relative; overflow:hidden; }
.theme-toggle .theme-icon { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); transition:opacity .18s ease, transform .22s ease; }
.theme-toggle .theme-icon-sun { opacity:0; transform:translate(-50%,-50%) rotate(-35deg) scale(.72); }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { opacity:0; transform:translate(-50%,-50%) rotate(35deg) scale(.72); }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { opacity:1; transform:translate(-50%,-50%) rotate(0) scale(1); }

@media (max-width: 767px) {
  .topbar-movil {
    background:var(--glass-bg-strong) !important;
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
  }
  .bottom-nav-movil {
    display:flex;
    border:1px solid var(--glass-border);
    background:var(--glass-bg) !important;
    box-shadow:var(--glass-shadow) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  }
  .bottom-nav-movil::before {
    content:""; inset:0; pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 42%,rgba(255,255,255,.08));
  }
  html[data-theme="dark"] .bottom-nav-movil::before { background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 48%); }
  .bottom-nav-movil a,.bottom-nav-movil button { transition:background .18s ease,color .18s ease,transform .18s ease; }
  .bottom-nav-movil a.active { background:color-mix(in srgb,var(--color-primario) 12%,transparent); }
  .bottom-nav-movil a:active,.bottom-nav-movil button:active { transform:scale(.96); }
  .theme-toggle-mobile { width:40px; height:40px; }
  .notificaciones-panel { top:70px !important; left:12px; right:12px !important; width:auto !important; border-radius:22px !important; }
  .sidebar {
    background:var(--glass-bg-strong) !important;
    border-right:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
    backdrop-filter:blur(24px) saturate(145%);
  }
  .overlay-sidebar.abierto { background:rgba(15,23,42,.28); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle .theme-icon,.bottom-nav-movil a,.bottom-nav-movil button { transition:none !important; }
}


/* v1.11.4 — Experience OS: Spotlight, Command Center y Timeline */
.dashboard-spotlight{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin:0 0 1rem;padding:1.25rem 1.35rem;border:1px solid var(--line-soft);border-radius:var(--radius-xl);background:linear-gradient(135deg,color-mix(in srgb,var(--color-primario) 8%,var(--surface-card)),var(--surface-card));box-shadow:0 12px 34px rgba(15,23,42,.055)}
.dashboard-spotlight-copy{min-width:0}.spotlight-eyebrow{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primario);margin-bottom:.35rem}.dashboard-spotlight h2{font-size:1.18rem;line-height:1.25;margin:0;color:var(--text-main)}.dashboard-spotlight p{margin:.35rem 0 0;color:var(--text-muted);font-size:.82rem;line-height:1.5;max-width:760px}.spotlight-alerta{background:linear-gradient(135deg,color-mix(in srgb,#f59e0b 10%,var(--surface-card)),var(--surface-card))}.spotlight-alerta .spotlight-eyebrow{color:#d97706}.spotlight-ok{background:linear-gradient(135deg,color-mix(in srgb,var(--color-acento) 8%,var(--surface-card)),var(--surface-card))}.spotlight-ok .spotlight-eyebrow{color:var(--color-acento)}
.command-hint-card{width:100%;display:flex;align-items:center;gap:.75rem;margin:0 0 1rem;padding:.78rem .9rem;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface-card);color:var(--text-main);text-align:left;cursor:pointer;box-shadow:0 6px 20px rgba(15,23,42,.035);transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}.command-hint-card:hover{border-color:color-mix(in srgb,var(--color-primario) 38%,var(--line-soft));box-shadow:0 10px 28px rgba(15,23,42,.075);transform:translateY(-1px)}.command-hint-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--color-primario) 10%,transparent);color:var(--color-primario);flex:0 0 34px}.command-hint-card>span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}.command-hint-card strong{font-size:.78rem}.command-hint-card small{font-size:.69rem;color:var(--text-muted);margin-top:.12rem}.command-hint-card kbd,.command-search-wrap kbd{font:600 .65rem/1 system-ui;padding:.35rem .42rem;border-radius:7px;border:1px solid var(--line-soft);background:var(--surface-app);color:var(--text-muted);box-shadow:inset 0 -1px 0 rgba(15,23,42,.08)}
.command-center{position:fixed;inset:0;z-index:3000;display:none}.command-center.is-open{display:block}.command-center-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.24);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.command-center-dialog{position:relative;width:min(680px,calc(100vw - 32px));max-height:min(680px,calc(100vh - 72px));margin:8vh auto 0;border:1px solid var(--glass-border);border-radius:24px;background:var(--glass-bg-strong);box-shadow:0 30px 90px rgba(15,23,42,.24);-webkit-backdrop-filter:blur(26px) saturate(145%);backdrop-filter:blur(26px) saturate(145%);overflow:hidden;display:flex;flex-direction:column}.command-search-wrap{height:64px;display:flex;align-items:center;gap:.7rem;padding:0 1rem;border-bottom:1px solid var(--line-soft)}.command-search-wrap>span{color:var(--text-muted);display:grid}.command-search-wrap input{flex:1;height:auto!important;padding:0!important;border:0!important;background:transparent!important;font-size:1rem!important;box-shadow:none!important;color:var(--text-main)}.command-results{padding:.55rem;overflow:auto;min-height:160px;max-height:470px}.command-result{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.72rem .75rem;border-radius:13px;color:inherit;text-decoration:none}.command-result:hover,.command-result.is-active{background:color-mix(in srgb,var(--color-primario) 9%,transparent)}.command-result-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--surface-app);font-size:.85rem}.command-result>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.command-result strong{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.command-result small{font-size:.68rem;color:var(--text-muted);margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.command-result-kind{font-size:.61rem;color:var(--text-muted);padding:.28rem .4rem;border:1px solid var(--line-soft);border-radius:var(--radius-pill)}.command-empty{min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;color:var(--text-muted)}.command-empty strong{color:var(--text-main);font-size:.88rem}.command-empty span{font-size:.72rem;margin-top:.35rem;max-width:360px;line-height:1.45}.command-footer{display:flex;justify-content:flex-end;gap:1rem;padding:.6rem .85rem;border-top:1px solid var(--line-soft);font-size:.61rem;color:var(--text-muted)}body.command-center-open{overflow:hidden}.cabecera-command-trigger{display:grid}
.employee-timeline{position:relative;display:grid;gap:0}.timeline-item{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:.75rem;padding:0 0 1rem}.timeline-item:not(:last-child)::before{content:"";position:absolute;left:18px;top:34px;bottom:0;width:1px;background:var(--line-soft)}.timeline-marker{position:relative;z-index:1;width:36px;height:36px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--surface-app);color:var(--color-primario);border:1px solid var(--line-soft)}.timeline-aprobacion .timeline-marker,.timeline-validacion .timeline-marker{color:#16a34a;background:color-mix(in srgb,#22c55e 10%,var(--surface-card))}.timeline-alerta .timeline-marker{color:#dc2626;background:color-mix(in srgb,#ef4444 9%,var(--surface-card))}.timeline-content{min-width:0;padding-top:.15rem}.timeline-meta{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.timeline-meta strong{font-size:.8rem;color:var(--text-main);text-transform:none}.timeline-meta time{font-size:.65rem;color:var(--text-muted);white-space:nowrap}.timeline-content p{font-size:.72rem;line-height:1.5;color:var(--text-muted);margin:.22rem 0 0;overflow-wrap:anywhere}.technical-history{padding:0;overflow:hidden}.technical-history summary{cursor:pointer;list-style:none;padding:1rem 1.1rem;margin:0}.technical-history summary::-webkit-details-marker{display:none}.technical-history[open] summary{border-bottom:1px solid var(--line-soft)}.technical-history>.tabla-wrap,.technical-history>p{margin:1rem}
@media(max-width:767px){.dashboard-spotlight{align-items:stretch;flex-direction:column;padding:1rem;border-radius:18px}.spotlight-cta{width:100%;justify-content:center}.command-hint-card kbd{display:none}.command-center-dialog{width:calc(100vw - 20px);margin:10px auto 0;max-height:calc(100dvh - 96px);border-radius:22px}.command-result{grid-template-columns:36px minmax(0,1fr)}.command-result-kind{display:none}.command-footer{justify-content:center}.timeline-meta{flex-direction:column;gap:.16rem}.cabecera-command-trigger{display:none}}
@media(prefers-reduced-motion:reduce){.command-hint-card{transition:none!important}}

/* v1.11.5 — Experience OS Fase 2: acciones universales, activity center,
   microinteracciones y navegación adaptativa. */
.activity-center{padding:0!important;overflow:hidden;min-width:330px;max-width:min(390px,calc(100vw - 24px))}
.activity-center .notificaciones-header{padding:1rem 1rem .8rem;align-items:flex-start}.activity-center .notificaciones-header>div:first-child{display:flex;flex-direction:column;gap:.14rem}.activity-center .notificaciones-header small{font-size:.64rem;color:var(--text-muted);font-weight:500}.activity-center .notificaciones-header>span{font-size:.62rem;border:1px solid var(--line-soft);border-radius:var(--radius-pill);padding:.3rem .45rem;color:var(--text-muted);background:var(--surface-app)}
.activity-group{padding:.25rem .55rem .45rem}.activity-group+.activity-group{border-top:1px solid var(--line-soft);padding-top:.55rem}.activity-group-label{padding:.25rem .42rem .34rem;font-size:.61rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--text-muted)}
.activity-center .notificacion-item{border-radius:13px;margin:.1rem 0;border:0!important;padding:.68rem .65rem!important}.activity-center .notificacion-item:hover{background:color-mix(in srgb,var(--color-primario) 8%,transparent)}
.activity-center-footer{border-top:1px solid var(--line-soft);padding:.62rem .78rem}.activity-center-footer a{display:flex;align-items:center;justify-content:center;gap:.3rem;color:var(--color-primario);font-size:.68rem;font-weight:700;text-decoration:none;border-radius:10px;padding:.35rem}.activity-center-footer a:hover{background:color-mix(in srgb,var(--color-primario) 8%,transparent)}
.empty-state-compact{display:flex!important;flex-direction:column;align-items:center;gap:.28rem;padding:1.45rem 1rem!important;text-align:center}.empty-state-compact svg{color:var(--color-acento)}.empty-state-compact strong{font-size:.78rem;color:var(--text-main)}.empty-state-compact span{font-size:.67rem;color:var(--text-muted)}

.global-create-trigger{color:var(--color-primario)!important;background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card))!important;border-color:color-mix(in srgb,var(--color-primario) 18%,var(--line-soft))!important}.global-create-trigger:hover{background:color-mix(in srgb,var(--color-primario) 14%,var(--surface-card))!important}
.global-create-fab{display:none;position:fixed;z-index:1190;width:54px;height:54px;border-radius:18px;border:1px solid color-mix(in srgb,var(--color-primario) 30%,rgba(255,255,255,.72));background:linear-gradient(145deg,color-mix(in srgb,var(--color-primario) 92%,white),var(--color-primario));color:#fff;box-shadow:0 14px 34px color-mix(in srgb,var(--color-primario) 28%,transparent),0 2px 8px rgba(15,23,42,.12);align-items:center;justify-content:center;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.global-create-fab:active{transform:scale(.94)}
.global-create-sheet{position:fixed;inset:0;z-index:2600;display:none}.global-create-sheet.is-open{display:block}.global-create-backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.28);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.global-create-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));border:1px solid var(--glass-border);border-radius:26px;background:var(--glass-bg-strong);box-shadow:0 30px 90px rgba(15,23,42,.24);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);padding:1rem}.global-create-handle{display:none}.global-create-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.25rem .2rem .8rem}.global-create-header .eyebrow{font-size:.61rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--color-primario)}.global-create-header h2{font-size:1.05rem;margin:.18rem 0 0;color:var(--text-main)}.global-create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.global-create-grid>a,.global-create-grid>button{appearance:none;border:1px solid var(--line-soft);border-radius:var(--radius-lg);background:var(--surface-card);padding:.8rem;text-align:left;display:flex;align-items:center;gap:.7rem;color:var(--text-main);text-decoration:none;cursor:pointer;min-width:0;transition:transform .16s ease,border-color .16s ease,background .16s ease}.global-create-grid>a:hover,.global-create-grid>button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--color-primario) 32%,var(--line-soft));background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-card))}.global-create-icon{width:39px;height:39px;flex:0 0 39px;border-radius:var(--radius-md);display:grid;place-items:center;color:var(--color-primario);background:color-mix(in srgb,var(--color-primario) 10%,transparent)}.global-create-grid span:last-child{display:flex;flex-direction:column;min-width:0}.global-create-grid strong{font-size:.76rem}.global-create-grid small{font-size:.64rem;color:var(--text-muted);margin-top:.14rem}.global-create-open{overflow:hidden}

.app-toast-stack{position:fixed;right:18px;top:76px;z-index:2500;display:grid;gap:.55rem;width:min(370px,calc(100vw - 28px));pointer-events:none}.app-toast{pointer-events:auto;display:grid;grid-template-columns:30px minmax(0,1fr) 26px;align-items:start;gap:.6rem;padding:.78rem .82rem;border-radius:17px;border:1px solid var(--glass-border);background:var(--glass-bg-strong);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%);animation:toast-in .28s cubic-bezier(.2,.8,.2,1)}.app-toast>svg{margin-top:.08rem}.app-toast>span{display:flex;flex-direction:column;gap:.12rem}.app-toast strong{font-size:.72rem;color:var(--text-main)}.app-toast small{font-size:.66rem;line-height:1.45;color:var(--text-muted)}.app-toast button{border:0;background:transparent;color:var(--text-muted);padding:0;cursor:pointer}.app-toast-success>svg{color:#16a34a}.app-toast-error>svg{color:#dc2626}.app-toast.is-leaving{animation:toast-out .2s ease forwards}@keyframes toast-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}@keyframes toast-out{to{opacity:0;transform:translateY(-8px) scale(.98)}}

/* Estados vacíos como parte del producto, no como huecos de tabla. */
.vacio.empty-state-modern,.empty-state-modern{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;border:1px dashed color-mix(in srgb,var(--line-soft) 85%,transparent);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--color-primario) 3%,var(--surface-card)),var(--surface-card))}.empty-state-modern .empty-state-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--color-primario) 9%,transparent);color:var(--color-primario);margin-bottom:.7rem}.empty-state-modern h3{font-size:.84rem;margin:0;color:var(--text-main)}.empty-state-modern p{font-size:.69rem;line-height:1.5;color:var(--text-muted);max-width:420px;margin:.32rem 0 0}.empty-state-modern .empty-state-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.85rem}

.command-loading{display:grid;gap:.42rem;padding:.3rem}.command-skeleton{height:54px;border-radius:13px;background:linear-gradient(90deg,var(--surface-app),color-mix(in srgb,var(--surface-app) 70%,var(--surface-card)),var(--surface-app));background-size:220% 100%;animation:skeleton-shimmer 1.1s linear infinite}@keyframes skeleton-shimmer{to{background-position:-220% 0}}
.btn,.btn-icono-cabecera,.acceso-rapido,.nav-link{transition:transform .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease}.btn:active,.btn-icono-cabecera:active,.acceso-rapido:active{transform:scale(.97)}

@media(max-width:767px){
  .global-create-trigger-desktop{display:none!important}.global-create-fab{display:flex;left:50%;bottom:calc(79px + env(safe-area-inset-bottom));transform:translateX(-50%)}.global-create-fab:active{transform:translateX(-50%) scale(.94)}
  .bottom-nav-movil{}.bottom-nav-movil a,.bottom-nav-movil button{flex:1}.bottom-nav-movil::after{content:"";flex:0 0 56px;order:2}.bottom-nav-movil>a:nth-child(1){order:0}.bottom-nav-movil>a:nth-child(2){order:1}.bottom-nav-movil>a:nth-child(3){order:3}.bottom-nav-movil>button{order:4}
  .global-create-panel{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));top:auto;transform:none;width:auto;border-radius:26px;padding:.85rem .85rem 1rem}.global-create-handle{display:block;width:38px;height:4px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-muted) 28%,transparent);margin:0 auto .65rem}.global-create-grid{grid-template-columns:1fr 1fr}.global-create-grid>a,.global-create-grid>button{padding:.72rem}.app-toast-stack{top:calc(68px + env(safe-area-inset-top));left:12px;right:12px;width:auto}.activity-center{min-width:0;width:min(360px,calc(100vw - 20px))}
}
@media(max-width:420px){.global-create-grid{grid-template-columns:1fr}.global-create-fab{width:52px;height:52px;border-radius:17px}}
@media(prefers-reduced-motion:reduce){.global-create-fab,.global-create-grid>a,.global-create-grid>button,.app-toast,.btn,.btn-icono-cabecera,.acceso-rapido,.nav-link{transition:none!important;animation:none!important}.command-skeleton{animation:none!important}}

.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}.grid-metricas-adaptable>.stat-card{height:100%}@media(max-width:1180px){.grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:820px){.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.grid-5{grid-template-columns:1fr}}

/* v1.11.6 — Inducción guiada */
.onboarding-shell{position:fixed;inset:0;z-index:2500;display:none}.onboarding-shell.is-open{display:block}.onboarding-backdrop{position:absolute;inset:0;background:rgba(8,15,30,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:0;width:100%;height:100%}.onboarding-spotlight{position:fixed;border-radius:18px;pointer-events:none;opacity:0;box-shadow:0 0 0 9999px rgba(8,15,30,.10),0 0 0 3px color-mix(in srgb,var(--color-primario) 65%,white),0 14px 42px rgba(15,23,42,.22);transition:all .38s cubic-bezier(.2,.8,.2,1),opacity .2s;background:rgba(255,255,255,.06)}.onboarding-shell.has-target .onboarding-spotlight{opacity:1}.onboarding-card{position:fixed;z-index:2;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,calc(100vw - 32px));padding:22px;border:1px solid rgba(255,255,255,.62);border-radius:24px;background:rgba(255,255,255,.90);box-shadow:0 28px 80px rgba(15,23,42,.28);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);animation:onboardingIn .42s cubic-bezier(.2,.8,.2,1)}.onboarding-progress{height:4px;border-radius:99px;background:rgba(100,116,139,.16);overflow:hidden;margin-bottom:18px}.onboarding-progress span{display:block;height:100%;border-radius:inherit;background:var(--color-primario);transition:width .35s ease}.onboarding-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.onboarding-step-label{font-size:12px;font-weight:700;color:var(--color-primario);margin-top:12px}.onboarding-card h2{font-size:24px;letter-spacing:-.025em;margin:5px 0 8px}.onboarding-card p{margin:0;color:var(--texto-secundario,#64748b);line-height:1.55}.onboarding-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.onboarding-skip{display:block;margin:14px auto 0;border:0;background:transparent;color:#64748b;font-size:12px;cursor:pointer}.user-menu-action{width:100%;border:0;background:transparent;text-align:left;display:flex;align-items:center;gap:10px;padding:10px 12px;color:inherit;cursor:pointer;border-radius:var(--radius-md)}.user-menu-action:hover{background:rgba(100,116,139,.08)}@keyframes onboardingIn{from{opacity:0;transform:translate(-50%,18px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}html[data-theme="dark"] .onboarding-card{background:rgba(15,23,42,.90);border-color:rgba(255,255,255,.12);color:#f8fafc}html[data-theme="dark"] .onboarding-card p,html[data-theme="dark"] .onboarding-skip{color:#94a3b8}@media(max-width:640px){.onboarding-card{bottom:calc(92px + env(safe-area-inset-bottom));padding:18px;border-radius:22px}.onboarding-card h2{font-size:21px}.onboarding-actions .btn{flex:1}.onboarding-spotlight{border-radius:15px}}@media(prefers-reduced-motion:reduce){.onboarding-card{animation:none}.onboarding-spotlight{transition:none}}


/* v1.11.7 — onboarding spotlight legible: el objetivo queda nítido. */
.onboarding-shell.has-target .onboarding-backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.onboarding-shell.has-target .onboarding-spotlight{background:transparent;box-shadow:0 0 0 9999px rgba(8,15,30,.62),0 0 0 3px color-mix(in srgb,var(--color-primario) 72%,white),0 16px 46px rgba(15,23,42,.26)}
html[data-theme="dark"] .onboarding-shell.has-target .onboarding-spotlight{box-shadow:0 0 0 9999px rgba(2,6,23,.72),0 0 0 3px color-mix(in srgb,var(--color-primario) 76%,white),0 16px 46px rgba(0,0,0,.36)}

/* ============================================================
   v1.11.8.2 · Dark Mode refinado — contraste AA y superficies suaves
   ============================================================ */
html[data-theme="dark"] {
  --surface-app:#141922;
  --surface-card:#1b222d;
  --surface-elevated:#202936;
  --text-main:#edf2f7;
  --text-muted:#aab6c5;
  --line-soft:rgba(226,232,240,.11);
  --glass-bg:rgba(27,34,45,.78);
  --glass-bg-strong:rgba(27,34,45,.92);
  --glass-border:rgba(255,255,255,.10);
  --glass-shadow:0 16px 38px rgba(0,0,0,.22);
  --gris-950:#f1f5f9;
  --gris-800:#e2e8f0;
  --gris-600:#bdc8d6;
  --gris-400:#93a4b8;
  --gris-200:#394553;
  --gris-100:#27313e;
  --gris-50:#202936;
  --verde-suave:rgba(34,197,94,.14);
  --rojo-suave:rgba(239,68,68,.14);
  --ambar-suave:rgba(245,158,11,.15);
  --azul-suave:rgba(59,130,246,.15);
  --violeta-suave:rgba(139,92,246,.15);
  --color-primario-suave:color-mix(in srgb,var(--color-primario) 18%,transparent);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .main { background:var(--surface-app) !important; color:var(--text-main); }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .acceso-rapido,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-welcome-user,
html[data-theme="dark"] .release-check,
html[data-theme="dark"] .release-item,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .dashboard-home-logo,
html[data-theme="dark"] .app-modal-dialog {
  background:var(--surface-card) !important;
  color:var(--text-main) !important;
  border-color:var(--line-soft) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
html[data-theme="dark"] .release-dropzone,
html[data-theme="dark"] .release-test-summary,
html[data-theme="dark"] .brand-current,
html[data-theme="dark"] .preview-appbar,
html[data-theme="dark"] .reset-request-item,
html[data-theme="dark"] .user-menu-action:hover {
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .release-dropzone:hover { background:#252f3d !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background:#171e28 !important;
  color:var(--text-main) !important;
  border-color:#3b4858 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#8494a8 !important; }
html[data-theme="dark"] .btn-secundario { background:#232c38 !important; color:#e6edf5 !important; border-color:#3b4858 !important; }
html[data-theme="dark"] .btn-secundario:hover { background:#2a3543 !important; }
html[data-theme="dark"] .form-grupo label,
html[data-theme="dark"] .card-header h2,
html[data-theme="dark"] .release-check strong,
html[data-theme="dark"] .release-dropzone strong,
html[data-theme="dark"] .white-label-heading h2,
html[data-theme="dark"] .preview-email h4 { color:var(--text-main) !important; }
html[data-theme="dark"] .form-grupo .ayuda,
html[data-theme="dark"] .stat-card .subtitulo,
html[data-theme="dark"] .release-check small,
html[data-theme="dark"] .release-dropzone span:last-child,
html[data-theme="dark"] .white-label-heading p,
html[data-theme="dark"] .preview-email p,
html[data-theme="dark"] .user-meta span { color:var(--text-muted) !important; }
html[data-theme="dark"] th { color:#aab6c5 !important; }
html[data-theme="dark"] td { color:#e4eaf1; }
html[data-theme="dark"] .badge-gray { background:#2a3543; color:#c9d3df; }
html[data-theme="dark"] .badge-green { color:#6ee7a0; }
html[data-theme="dark"] .badge-red { color:#fca5a5; }
html[data-theme="dark"] .badge-amber { color:#facc7b; }
html[data-theme="dark"] .badge-blue { color:#93c5fd; }
html[data-theme="dark"] .icon-badge-gris { background:#27313e; color:#b9c5d3; }
html[data-theme="dark"] .nav-link:hover { background:#232c38; color:#f1f5f9; }
html[data-theme="dark"] .onboarding-backdrop { background:rgba(5,10,18,.52); backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-theme="dark"] .onboarding-card { background:rgba(27,34,45,.95); color:var(--text-main); border-color:rgba(255,255,255,.11); }
html[data-theme="dark"] .onboarding-card p,
html[data-theme="dark"] .onboarding-skip { color:#aab6c5; }

/* Evita contrastes excesivos: superficies informativas de estado usan tintes, no bloques saturados. */
html[data-theme="dark"] .alerta-error { background:rgba(239,68,68,.12); color:#fca5a5; }
html[data-theme="dark"] .alerta-exito { background:rgba(34,197,94,.12); color:#86efac; }
html[data-theme="dark"] .identidad-auto-status.es-aviso { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.30); color:#facc7b; }

@media (prefers-contrast: more) {
  html[data-theme="dark"] { --text-muted:#c2ccd8; --line-soft:rgba(226,232,240,.20); }
}

/* ============================================================
   v1.11.9 · Experience polish
   Bienvenida inteligente, upload con progreso y encabezados limpios.
   ============================================================ */

/* Los títulos de página no son tarjetas: eliminamos la pleca/superficie en
   ambos temas, conservando solo tipografía y acciones. */
.topbar,
.page-heading,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .page-heading {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Release Manager: feedback real durante la transferencia del ZIP. */
.release-upload-progress {
  flex: 1 0 100%;
  padding: 1rem 1.05rem;
  border: 1px solid var(--gris-200,#e2e8f0);
  border-radius: 14px;
  background: var(--gris-50,#f8fafc);
  min-width: 0;
}
.release-upload-progress[hidden] { display: none !important; }
.release-upload-progress-head,
.release-upload-progress-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.release-upload-progress-head { margin-bottom:.65rem; }
.release-upload-progress-head strong { font-size:.84rem; }
.release-upload-progress-head span { color:var(--color-primario); font-size:.8rem; font-weight:700; font-variant-numeric:tabular-nums; }
.release-progress-track { height:8px; overflow:hidden; border-radius:var(--radius-pill); background:color-mix(in srgb,var(--gris-300,#cbd5e1) 42%,transparent); }
.release-progress-track > span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--color-primario),color-mix(in srgb,var(--color-primario) 68%,#60a5fa)); transition:width .18s ease; }
.release-upload-progress-meta { margin-top:.6rem; color:var(--gris-500,#64748b); font-size:.72rem; }
.release-upload-progress.is-processing .release-progress-track > span { width:100% !important; animation:releasePulse 1.3s ease-in-out infinite alternate; }
.release-upload-progress.is-complete { border-color:color-mix(in srgb,#22c55e 36%,var(--gris-200,#e2e8f0)); }
.release-upload-progress.is-complete .release-progress-track > span { background:#22c55e; animation:none; }
.release-upload-progress.is-error { border-color:color-mix(in srgb,#ef4444 38%,var(--gris-200,#e2e8f0)); }
.release-upload-progress.is-error .release-progress-track > span { background:#ef4444; animation:none; }
@keyframes releasePulse { from { opacity:.55; } to { opacity:1; } }

/* El dropzone debe pertenecer al tema, no conservar una isla blanca. */
html[data-theme="dark"] .release-dropzone {
  background:var(--surface-elevated) !important;
  color:var(--text-main) !important;
  border-color:color-mix(in srgb,var(--color-primario) 52%,var(--line-soft)) !important;
}
html[data-theme="dark"] .release-dropzone:hover { background:color-mix(in srgb,var(--surface-elevated) 90%,var(--color-primario) 10%) !important; }
html[data-theme="dark"] .release-dropzone strong { color:var(--text-main) !important; }
html[data-theme="dark"] .release-dropzone span:last-child { color:var(--text-muted) !important; }
html[data-theme="dark"] .release-drop-icon { background:color-mix(in srgb,var(--color-primario) 18%,transparent); color:color-mix(in srgb,var(--color-primario) 72%,white); }
html[data-theme="dark"] .release-upload-progress { background:var(--surface-elevated); border-color:var(--line-soft); color:var(--text-main); }
html[data-theme="dark"] .release-upload-progress-meta { color:var(--text-muted); }

/* Bienvenida diaria: breve, contextual y no bloquea el trabajo más de unos
   segundos. Se muestra una vez al día por usuario. */
.daily-welcome { position:fixed; inset:0; z-index:2450; display:none; align-items:center; justify-content:center; padding:24px; }
.daily-welcome.is-open { display:flex; }
.daily-welcome-backdrop { position:absolute; inset:0; border:0; background:rgba(15,23,42,.22); backdrop-filter:blur(7px) saturate(112%); -webkit-backdrop-filter:blur(7px) saturate(112%); animation:dailyWelcomeBackdrop .3s ease both; }
.daily-welcome-card { position:relative; width:min(560px,calc(100vw - 32px)); padding:26px 28px 22px; border:1px solid rgba(255,255,255,.72); border-radius:28px; background:rgba(255,255,255,.88); box-shadow:0 30px 90px rgba(15,23,42,.22); backdrop-filter:blur(26px) saturate(145%); -webkit-backdrop-filter:blur(26px) saturate(145%); animation:dailyWelcomeIn .48s cubic-bezier(.2,.86,.2,1) both; overflow:hidden; }
.daily-welcome-close { position:absolute; top:16px; right:16px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:var(--radius-md); background:rgba(148,163,184,.10); color:#64748b; cursor:pointer; }
.daily-welcome-eyebrow { display:block; color:var(--color-primario); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.48rem; }
.daily-welcome-card h2 { margin:0; padding-right:34px; font-size:clamp(1.65rem,4vw,2.25rem); letter-spacing:-.04em; line-height:1.08; color:#0f172a; }
.daily-welcome-wave { display:inline-block; transform-origin:75% 75%; animation:dailyWave .9s ease .28s 2; }
.daily-welcome-card > p { color:#64748b; line-height:1.55; margin:.85rem 0 0; font-size:.95rem; }
.daily-welcome-highlights { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:1rem; }
.daily-welcome-highlights span { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .7rem; border-radius:var(--radius-pill); background:color-mix(in srgb,var(--color-primario) 8%,white); color:#334155; font-size:.76rem; font-weight:500; }
.daily-welcome-highlights svg { color:var(--color-primario); }
.daily-welcome-meta { display:flex; justify-content:space-between; gap:1rem; margin-top:1.35rem; padding-top:1rem; border-top:1px solid rgba(148,163,184,.18); color:#94a3b8; font-size:.7rem; }
.daily-welcome-timer { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(148,163,184,.12); }
.daily-welcome-timer span { display:block; height:100%; width:100%; transform-origin:left; background:var(--color-primario); animation:dailyTimer 5.6s linear forwards; }
.daily-welcome.is-paused .daily-welcome-timer span { animation-play-state:paused; }
.daily-welcome.is-leaving .daily-welcome-card { animation:dailyWelcomeOut .34s ease forwards; }
.daily-welcome.is-leaving .daily-welcome-backdrop { opacity:0; transition:opacity .34s ease; }

html[data-theme="dark"] .daily-welcome-backdrop { background:rgba(2,6,23,.40); }
html[data-theme="dark"] .daily-welcome-card { background:rgba(28,36,47,.91); border-color:rgba(255,255,255,.11); box-shadow:0 32px 90px rgba(0,0,0,.36); }
html[data-theme="dark"] .daily-welcome-card h2 { color:var(--text-main); }
html[data-theme="dark"] .daily-welcome-card > p { color:var(--text-muted); }
html[data-theme="dark"] .daily-welcome-highlights span { background:rgba(255,255,255,.055); color:#d7e0ea; }
html[data-theme="dark"] .daily-welcome-meta { color:#91a0b2; border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .daily-welcome-close { background:rgba(255,255,255,.06); color:#b7c3d2; }

@keyframes dailyWelcomeIn { from { opacity:0; transform:translateY(18px) scale(.975); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes dailyWelcomeOut { to { opacity:0; transform:translateY(-10px) scale(.985); } }
@keyframes dailyWelcomeBackdrop { from { opacity:0; } to { opacity:1; } }
@keyframes dailyWave { 0%,100% { transform:rotate(0); } 35% { transform:rotate(18deg); } 70% { transform:rotate(-8deg); } }
@keyframes dailyTimer { from { transform:scaleX(1); } to { transform:scaleX(0); } }

@media (max-width:640px) {
  .daily-welcome { align-items:flex-end; padding:16px 16px calc(96px + env(safe-area-inset-bottom)); }
  .daily-welcome-card { padding:22px 20px 19px; border-radius:24px; }
  .daily-welcome-highlights { display:grid; grid-template-columns:1fr; }
  .daily-welcome-highlights span { border-radius:13px; }
  .release-upload-progress-head,.release-upload-progress-meta { align-items:flex-start; }
  .release-upload-progress-meta { flex-direction:column; gap:.25rem; }
}
@media (prefers-reduced-motion:reduce) {
  .daily-welcome-card,.daily-welcome-backdrop,.daily-welcome-wave,.daily-welcome-timer span,.release-upload-progress.is-processing .release-progress-track > span { animation:none !important; }
}

/* ==========================================================================
   v1.11.10 — Geometría consistente + navegación móvil integrada + Glass Activity
   ========================================================================== */

/* Regla definitiva: las clases de columnas SON grids aunque la vista no incluya
   la clase auxiliar .grid. Evita que tarjetas de Release Manager u otros módulos
   terminen apiladas/pegadas por omisión de display:grid. */
.grid-2,.grid-3,.grid-4,.grid-5 {
  display:grid !important;
  gap:var(--ui-gap,16px) !important;
  align-items:stretch;
  width:100%;
  min-width:0;
}
.release-summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:var(--ui-section-gap,16px); }
.release-summary-grid > .stat-card { margin:0 !important; }
.release-summary-grid + .card { margin-top:0 !important; }

/* Ritmo vertical único entre bloques directos del contenido. */
.content > .grid-2 + *, .content > .grid-3 + *, .content > .grid-4 + *, .content > .grid-5 + *,
.content > .card + *, .content > .dashboard-stats-wrap + * {
  margin-top:var(--ui-section-gap,16px) !important;
}
.content > *:first-child { margin-top:0 !important; }

/* Centro de actividad: glass real, no tarjeta opaca. */
.notificaciones > .btn-icono-cabecera {
  background:color-mix(in srgb,var(--glass-bg-strong) 88%,transparent) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  backdrop-filter:blur(16px) saturate(145%);
}
.notificaciones-panel.activity-center {
  overflow:hidden;
  background:color-mix(in srgb,var(--glass-bg-strong) 92%,transparent) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.20) !important;
  -webkit-backdrop-filter:blur(28px) saturate(165%) !important;
  backdrop-filter:blur(28px) saturate(165%) !important;
}
.notificaciones-panel.activity-center::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.34),transparent 34%,rgba(255,255,255,.08) 72%,transparent);
  opacity:.55;
}
.notificaciones-panel.activity-center > * { position:relative; z-index:1; }
.notificacion-item {
  border-radius:14px;
  transition:background .16s ease,transform .16s ease;
}
.notificacion-item:hover { background:color-mix(in srgb,var(--color-primario) 7%,transparent); transform:translateY(-1px); }
html[data-theme="dark"] .notificaciones-panel.activity-center::before { opacity:.13; }
html[data-theme="dark"] .notificaciones > .btn-icono-cabecera { box-shadow:0 10px 26px rgba(0,0,0,.18); }

@media(max-width:1180px){
  .release-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:767px){
  :root { --ui-gap:14px; --ui-section-gap:16px; }

  /* El botón + forma parte física de la barra Glass. */
  .global-create-fab { display:none !important; }
  .bottom-nav-movil.has-global-create {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;
    gap:2px !important;
  }
  .bottom-nav-movil.has-global-create::after { display:none !important; content:none !important; }
  .bottom-nav-movil.has-global-create > a,
  .bottom-nav-movil.has-global-create > button {
    order:initial !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border:0;
    background:transparent;
  }
  .bottom-nav-movil .bottom-nav-create {
    color:white !important;
    background:transparent !important;
    transform:none !important;
  }
  .bottom-nav-create-icon {
    width:48px;height:48px;border-radius:17px;
    display:grid;place-items:center;
    margin-top:-24px;
    color:#fff;
    background:linear-gradient(145deg,color-mix(in srgb,var(--color-primario) 88%,#fff 12%),var(--color-primario));
    border:1px solid color-mix(in srgb,#fff 36%,var(--color-primario));
    box-shadow:0 12px 30px color-mix(in srgb,var(--color-primario) 34%,transparent),0 3px 9px rgba(15,23,42,.14);
  }
  .bottom-nav-create > span:last-child { color:var(--color-primario); font-size:.62rem; font-weight:700; margin-top:-1px; }
  .bottom-nav-create:active .bottom-nav-create-icon { transform:scale(.94); }

  /* Espaciado móvil constante: ninguna tarjeta queda pegada a su hermana. */
  .content > .card + .card,
  .content > .card + .grid,
  .content > .grid + .card,
  .content > .grid-2 + .card,
  .content > .grid-3 + .card,
  .content > .grid-4 + .card,
  .content > .grid-5 + .card,
  .content > .dashboard-stats-wrap + .card { margin-top:16px !important; }
  .dashboard-stats-row,.dashboard-stats-row-4,.dashboard-stats-row-3 { gap:14px !important; }

  /* Centro de actividad móvil como hoja Glass flotante, con margen real. */
  .notificaciones-panel.activity-center {
    position:fixed !important;
    top:76px !important;
    left:14px !important;
    right:14px !important;
    width:auto !important;
    max-height:min(70vh,620px);
    border-radius:24px !important;
    padding:8px;
  }
}

@media(max-width:680px){ .release-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:420px){
  .release-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .release-summary-grid .stat-card { min-height:126px !important; height:126px !important; max-height:126px !important; }
  .bottom-nav-create-icon { width:46px;height:46px;border-radius:var(--radius-lg); }
}
   v1.11.11 — Expediente 360: identidad compacta en encabezado
   La foto, nombre y número de expediente forman una sola cabecera; se elimina
   la tarjeta redundante de identidad y se preserva la jerarquía responsive.
   ========================================================================== */
.expediente-hero {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.25rem;
    flex-wrap:wrap;
}
.expediente-hero-identity {
    display:flex;
    align-items:center;
    gap:.9rem;
    min-width:0;
    flex:1 1 420px;
}
.expediente-hero-avatar {
    width:64px;
    height:64px;
    border-radius:var(--radius-xl);
    background:var(--gris-100);
    color:var(--gris-600);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    font-weight:700;
    overflow:hidden;
    flex:0 0 auto;
    border:1px solid var(--gris-100);
}
.expediente-hero-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.expediente-hero-copy { min-width:0; display:flex; flex-direction:column; gap:.18rem; }
.expediente-hero-copy h1 {
    margin:0;
    line-height:1.12;
    overflow-wrap:anywhere;
}
.expediente-number {
    color:var(--gris-400);
    font-size:.74rem;
    font-weight:500;
}
.expediente-hero-photo-form { flex:0 0 auto; }
.expediente-hero-actions { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.expediente-grid {
    display:block !important;
    width:100%;
}
.expediente-grid > .card { width:100%; }

@media (max-width: 860px) {
    .expediente-hero { align-items:flex-start; }
    .expediente-hero-identity { flex:1 1 100%; }
    .expediente-hero-actions { width:100%; margin-left:0; justify-content:flex-start; }
}
@media (max-width: 520px) {
    .expediente-hero { gap:.9rem; }
    .expediente-hero-identity {
        display:grid;
        grid-template-columns:auto minmax(0,1fr);
        align-items:center;
        gap:.75rem;
    }
    .expediente-hero-avatar { width:54px; height:54px; border-radius:17px; }
    .expediente-hero-copy h1 { font-size:1.2rem; }
    .expediente-hero-photo-form { grid-column:1 / -1; }
    .expediente-hero-photo-form .btn { width:100%; justify-content:center; }
    .expediente-hero-actions { gap:.45rem; }
}

/* ========================================================================== 
   v1.11.12 — Design system hardening: spacing, RBAC UI and intentional mobile +
   ========================================================================== */
:root {
  --ui-gap: 16px;
  --ui-section-gap: 18px;
  --ui-stack-gap: 18px;
  --ui-radius-panel: 16px;
}

/* Regla global: toda retícula declarada como grid-N se comporta como grid aunque
   una vista no incluya además la clase .grid. Evita regresiones de geometría. */
.grid-2,.grid-3,.grid-4,.grid-5 {
  display:grid !important;
  gap:var(--ui-gap) !important;
  align-items:stretch;
  width:100%;
  min-width:0;
}
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > * { min-width:0; }

/* Cadencia vertical común para bloques de primer nivel. Nunca quedan pegados. */
.content > :where(.card,.grid,.grid-2,.grid-3,.grid-4,.grid-5,.dashboard-stats-wrap,.roles-layout,.master-detail-layout) +
:where(.card,.grid,.grid-2,.grid-3,.grid-4,.grid-5,.dashboard-stats-wrap,.roles-layout,.master-detail-layout) {
  margin-top:var(--ui-stack-gap) !important;
}
.card + .card { margin-top:var(--ui-stack-gap); }

/* Release Manager: resumen compacto y simétrico 2 × 2 en desktop. */
.release-summary-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:var(--ui-gap) !important;
  align-items:stretch;
}
.release-summary-grid > .stat-card {
  width:100%;
  height:100% !important;
  min-height:142px;
}

/* Roles: builder y listado viven lado a lado; cada panel tiene geometría propia. */
.roles-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.roles-intro h2 { margin:.25rem 0 .35rem; }
.roles-intro-badge {
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:260px;
  padding:.8rem .9rem;
  border:1px solid var(--line-soft,var(--gris-200));
  border-radius:14px;
  background:var(--surface-app,var(--gris-50));
}
.roles-intro-badge > span { display:flex;flex-direction:column;gap:.12rem; }
.roles-intro-badge small { color:var(--text-muted,var(--gris-400));font-size:.7rem; }
.roles-layout {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:var(--ui-gap);
  align-items:start;
  width:100%;
}
.roles-builder-card,.roles-list { min-width:0; }
.roles-list { display:grid;gap:var(--ui-gap); }
.roles-list > .card { margin:0 !important; }
.roles-builder-card .card-header { margin-bottom:1.15rem; }
.role-builder-form .grid-2 { gap:var(--ui-gap); }
.role-builder-form input,.role-builder-form select { width:100%; }

.permission-groups { display:grid;gap:.7rem;margin-top:.35rem; }
.permission-group {
  border:1px solid var(--line-soft,var(--gris-200));
  border-radius:15px;
  overflow:hidden;
  background:var(--surface-card,#fff);
}
.permission-group > summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem .95rem;
  user-select:none;
}
.permission-group > summary::-webkit-details-marker { display:none; }
.permission-group > summary::after {
  content:"⌄";
  color:var(--text-muted,var(--gris-400));
  font-size:1rem;
  transition:transform .18s ease;
}
.permission-group[open] > summary::after { transform:rotate(180deg); }
.permission-group > summary span { color:var(--text-muted,var(--gris-400));font-size:.68rem;font-weight:500; }
.permission-group[open] > summary { border-bottom:1px solid var(--line-soft,var(--gris-200)); }
.permission-list { display:grid;gap:0;padding:.18rem .75rem .45rem; }
.permission-toggle {
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:58px;
  padding:.62rem .2rem;
  margin:0 !important;
  border-bottom:1px solid color-mix(in srgb,var(--line-soft,var(--gris-200)) 72%,transparent);
  cursor:pointer;
}
.permission-toggle:last-child { border-bottom:0; }
.permission-toggle > span { display:flex;flex-direction:column;gap:.12rem;min-width:0; }
.permission-toggle strong { font-size:.78rem;line-height:1.3;color:var(--text-main,var(--gris-950)); }
.permission-toggle small { font-size:.62rem;line-height:1.25;color:var(--text-muted,var(--gris-400));overflow-wrap:anywhere; }
.permission-toggle input {
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none;
  width:1px !important;
  height:1px !important;
}
.permission-toggle i {
  position:relative;
  display:block;
  width:42px;
  height:24px;
  flex:0 0 42px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--text-muted,#94a3b8) 28%,transparent);
  border:1px solid color-mix(in srgb,var(--text-muted,#94a3b8) 22%,transparent);
  transition:background .18s ease,border-color .18s ease;
}
.permission-toggle i::after {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(15,23,42,.2);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.permission-toggle input:checked + i {
  background:var(--color-primario);
  border-color:var(--color-primario);
}
.permission-toggle input:checked + i::after { transform:translateX(18px); }
.permission-toggle input:focus-visible + i { outline:3px solid color-mix(in srgb,var(--color-primario) 22%,transparent);outline-offset:2px; }
.permission-toggle:hover { background:color-mix(in srgb,var(--color-primario) 3.5%,transparent); }
.permission-groups.compact .permission-toggle { min-height:50px; }

.role-card { display:grid;gap:.85rem; }
.role-card-head { display:flex;justify-content:space-between;gap:1rem;align-items:flex-start; }
.role-card-head h2 { margin:0; }
.role-card-head p { margin:.25rem 0 0;color:var(--text-muted,var(--gris-400));font-size:.75rem; }
.role-users-count { white-space:nowrap;font-size:.68rem;color:var(--text-muted,var(--gris-400)); }
.role-meta { display:flex;gap:.5rem;flex-wrap:wrap; }
.role-meta span { padding:.35rem .5rem;border-radius:var(--radius-pill);background:var(--surface-app,var(--gris-50));font-size:.66rem;color:var(--text-muted,var(--gris-500)); }
.role-edit > summary { list-style:none;cursor:pointer; }
.role-edit > summary::-webkit-details-marker { display:none; }
.empty-state-card { min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.empty-state-card .empty-state-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--color-primario) 9%,transparent);color:var(--color-primario);margin-bottom:.7rem; }
.empty-state-card h2 { margin:0;font-size:1rem; }
.empty-state-card p { max-width:360px;color:var(--text-muted,var(--gris-400));font-size:.76rem;line-height:1.5; }

/* El + central debe sobresalir con intención: más grande y con una muesca visual. */
@media (max-width:767px) {
  :root { --ui-gap:14px; --ui-section-gap:16px; --ui-stack-gap:16px; }
  .bottom-nav-movil.has-global-create { }
  .bottom-nav-movil .bottom-nav-create {
  }
  .bottom-nav-create-icon {
    width:58px !important;
    height:58px !important;
    border-radius:var(--radius-xl) !important;
    margin-top:-34px !important;
    border:3px solid color-mix(in srgb,var(--surface-card,#fff) 88%,transparent) !important;
    box-shadow:0 17px 36px color-mix(in srgb,var(--color-primario) 36%,transparent),0 5px 13px rgba(15,23,42,.17) !important;
  }
  .bottom-nav-create > span:last-child { margin-top:1px !important; }
  .roles-layout { grid-template-columns:1fr; }
  .roles-intro { align-items:flex-start;flex-direction:column; }
  .roles-intro-badge { min-width:0;width:100%; }
  .release-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .release-summary-grid > .stat-card { min-height:126px; }
}

@media (max-width:980px) {
  .roles-layout { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  /* Structural grids reflow to one column on narrow mobile. KPI collections
     keep their own explicit 2×2/rail contracts and are not governed by this
     generic grid helper. */
  .grid-4,.grid-3,.grid-2 { grid-template-columns:minmax(0,1fr); }
  .role-builder-form .grid-2 { grid-template-columns:1fr !important; }
}
@media (max-width:420px) {
  .release-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .bottom-nav-create-icon { width:56px !important;height:56px !important;margin-top:-33px !important; }
}

html[data-theme="dark"] .permission-group,
html[data-theme="dark"] .roles-intro-badge,
html[data-theme="dark"] .role-meta span {
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .permission-toggle strong { color:var(--text-main) !important; }
html[data-theme="dark"] .permission-toggle small,
html[data-theme="dark"] .permission-group > summary span { color:var(--text-muted) !important; }

/* ==========================================================
   v1.11.13 — Estado de sesión expirada
   Mantiene la experiencia de autenticación dentro del Design System.
   ========================================================== */
.auth-session-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0;
  padding:.15rem 0 .1rem;
}
.auth-session-icon {
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-xl);
  margin:.15rem auto 1.15rem;
  color:var(--color-primario);
  background:color-mix(in srgb,var(--color-primario) 10%,var(--surface-card,#fff));
  border:1px solid color-mix(in srgb,var(--color-primario) 16%,transparent);
  box-shadow:0 12px 30px color-mix(in srgb,var(--color-primario) 10%,transparent);
}
.auth-session-copy {
  max-width:330px;
  margin:0 auto 1.35rem;
  color:var(--texto-secundario,var(--gris-500,#64748b));
  font-size:.88rem;
  line-height:1.65;
}
.auth-session-action {
  min-height:46px;
  border-radius:14px;
  font-weight:700;
  box-shadow:0 12px 26px color-mix(in srgb,var(--color-primario) 20%,transparent);
}
.auth-session-helper {
  max-width:310px;
  margin:.85rem auto 0;
  color:var(--gris-400,#94a3b8);
  font-size:.68rem;
  line-height:1.5;
}
html[data-theme="dark"] .auth-session-icon {
  background:color-mix(in srgb,var(--color-primario) 16%,#17202b);
  border-color:color-mix(in srgb,var(--color-primario) 25%,#2f3a48);
}
html[data-theme="dark"] .auth-session-copy { color:#a8b3c2; }
html[data-theme="dark"] .auth-session-helper { color:#7f8b9c; }
@media(max-width:640px){
  .auth-session-icon{width:58px;height:58px;border-radius:18px;margin-bottom:1rem}
  .auth-session-copy{font-size:.84rem;margin-bottom:1.15rem}
  .auth-session-action{min-height:48px}
}


/* v1.11.14 — Alta: nómina vinculada + pulido de interacción móvil. */
[data-nomina-destino].is-auto-filled {
    border-color: color-mix(in srgb, var(--color-primario) 48%, var(--line-soft, var(--gris-200)));
    background: color-mix(in srgb, var(--color-primario) 4%, var(--surface-card, #fff));
}
.nomina-auto-ayuda { transition: color .15s ease; }
[data-nomina-destino].is-auto-filled + .nomina-auto-ayuda { color: var(--color-primario); }

/* Samsung Internet / Chrome Android conserva durante unos instantes el
   tap-highlight del área completa del botón central. Bajo el glass del sheet
   se veía como un rectángulo azul. Desactivamos solo ese highlight y, desde
   pointerdown, neutralizamos visualmente el trigger antes de abrir el sheet. */
[data-open-global-create],
.bottom-nav-movil button,
.bottom-nav-movil a {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent;
}
.bottom-nav-movil .bottom-nav-create {
    outline: none !important;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
html.global-create-tap-start .bottom-nav-movil .bottom-nav-create,
body.global-create-open .bottom-nav-movil .bottom-nav-create {
    background: transparent !important;
    box-shadow: none !important;
}
body.global-create-open .bottom-nav-create-icon {
    opacity: 0 !important;
    transform: scale(.88) !important;
    transition: opacity .08s linear, transform .08s linear !important;
}
body.global-create-open .bottom-nav-create > span:last-child { opacity: 0 !important; }
.global-create-sheet.is-open { isolation: isolate; }

@media (max-width: 767px) {
    .global-create-panel { will-change: transform; transform: translateZ(0); }
    .global-create-backdrop { -webkit-tap-highlight-color: transparent; }
}

/* v1.11.15 — Header de marca + control de navegación cinético */
.nav-motion-toggle{-webkit-tap-highlight-color:transparent;position:relative;display:inline-grid;place-items:center;isolation:isolate}
.nav-motion-lines{position:relative;display:block;width:22px;height:18px}
.nav-motion-lines i{position:absolute;left:1px;width:20px;height:1.8px;border-radius:var(--radius-pill);background:currentColor;transform-origin:center;transition:top .24s cubic-bezier(.4,0,.2,1),transform .24s cubic-bezier(.4,0,.2,1),width .2s ease,opacity .16s ease}
.nav-motion-lines i:nth-child(1){top:2px;width:15px}.nav-motion-lines i:nth-child(2){top:8px;width:20px}.nav-motion-lines i:nth-child(3){top:14px;width:12px;left:9px}
.nav-motion-toggle:hover .nav-motion-lines i:nth-child(1),.nav-motion-toggle:focus-visible .nav-motion-lines i:nth-child(1){width:20px}
.nav-motion-toggle:hover .nav-motion-lines i:nth-child(3),.nav-motion-toggle:focus-visible .nav-motion-lines i:nth-child(3){width:20px;left:1px}
.nav-motion-toggle.is-open .nav-motion-lines i:nth-child(1){top:8px;width:20px;transform:rotate(45deg)}
.nav-motion-toggle.is-open .nav-motion-lines i:nth-child(2){opacity:0;transform:scaleX(.35)}
.nav-motion-toggle.is-open .nav-motion-lines i:nth-child(3){top:8px;left:1px;width:20px;transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav-motion-lines i{transition:none}}
@media (max-width:767px){
  .topbar-movil{justify-content:flex-start;gap:6px}
  .topbar-movil-logo{flex:0 0 46px;width:46px;height:46px;min-width:46px;display:grid;place-items:center;overflow:hidden;background:transparent;border:0;box-shadow:none;border-radius:0}
  .topbar-movil-logo img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
  .topbar-movil-logo strong{font-size:1rem;line-height:1;color:var(--text-main)}
  .topbar-movil>.nav-motion-toggle{flex:0 0 42px;width:42px;height:42px;margin:0}
  .topbar-movil .cabecera-acciones-movil{margin-left:auto}
}

/* ========================================================================== 
   v1.11.16 — Activity Glass legible + navegación móvil Top Sheet
   ========================================================================== */
/* El centro de actividad conserva profundidad Glass, pero prioriza contraste.
   La superficie queda casi opaca y el blur funciona como refuerzo, no como
   requisito para poder leer el contenido. */
.notificaciones > .btn-icono-cabecera {
  background:color-mix(in srgb,var(--surface-card) 92%,transparent) !important;
  border-color:color-mix(in srgb,var(--line-soft) 86%,transparent) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.10) !important;
  -webkit-backdrop-filter:blur(22px) saturate(155%) !important;
  backdrop-filter:blur(22px) saturate(155%) !important;
}
.notificaciones-panel.activity-center {
  isolation:isolate;
  background:color-mix(in srgb,var(--surface-card) 94%,transparent) !important;
  border-color:color-mix(in srgb,var(--line-soft) 92%,transparent) !important;
  box-shadow:0 28px 86px rgba(15,23,42,.22) !important;
  -webkit-backdrop-filter:blur(34px) saturate(175%) !important;
  backdrop-filter:blur(34px) saturate(175%) !important;
}
.notificaciones-panel.activity-center::before {
  background:linear-gradient(145deg,rgba(255,255,255,.26),transparent 38%,rgba(255,255,255,.06) 76%,transparent) !important;
  opacity:.36 !important;
}
.notificaciones-panel.activity-center .notificaciones-header,
.notificaciones-panel.activity-center .activity-group,
.notificaciones-panel.activity-center .activity-center-footer {
  background:color-mix(in srgb,var(--surface-card) 82%,transparent);
}
.notificaciones-panel.activity-center .notificacion-item {
  background:color-mix(in srgb,var(--surface-card) 76%,transparent);
}
.notificaciones-panel.activity-center .notificacion-item:hover {
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .notificaciones > .btn-icono-cabecera,
  .notificaciones-panel.activity-center { background:var(--surface-card) !important; }
}
html[data-theme="dark"] .notificaciones-panel.activity-center {
  background:color-mix(in srgb,var(--surface-card) 96%,transparent) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.42) !important;
}
html[data-theme="dark"] .notificaciones-panel.activity-center .notificaciones-header,
html[data-theme="dark"] .notificaciones-panel.activity-center .activity-group,
html[data-theme="dark"] .notificaciones-panel.activity-center .activity-center-footer,
html[data-theme="dark"] .notificaciones-panel.activity-center .notificacion-item {
  background:color-mix(in srgb,var(--surface-card) 88%,transparent);
}

/* En móvil la navegación deja de ser un drawer lateral. Se comporta como una
   hoja flotante que emerge desde debajo del header y cae de arriba hacia abajo. */
@media (max-width:860px) {
  .topbar-movil { z-index:72; }
  .overlay-sidebar {
    display:block;
    inset:68px 0 0;
    z-index:55;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:rgba(15,23,42,.20);
    -webkit-backdrop-filter:blur(0);
    backdrop-filter:blur(0);
    transition:opacity .24s ease,visibility .24s ease,-webkit-backdrop-filter .28s ease,backdrop-filter .28s ease;
  }
  .overlay-sidebar.abierto {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    background:rgba(15,23,42,.24);
    -webkit-backdrop-filter:blur(7px) saturate(120%);
    backdrop-filter:blur(7px) saturate(120%);
  }
  .sidebar {
    top:76px;
    left:12px;
    right:12px;
    bottom:auto;
    width:auto;
    max-width:none;
    max-height:calc(100dvh - 104px - env(safe-area-inset-bottom));
    z-index:64;
    padding:12px 12px 18px;
    border:1px solid var(--glass-border) !important;
    border-radius:26px;
    background:color-mix(in srgb,var(--surface-card) 94%,transparent) !important;
    box-shadow:0 28px 86px rgba(15,23,42,.24) !important;
    -webkit-backdrop-filter:blur(30px) saturate(165%) !important;
    backdrop-filter:blur(30px) saturate(165%) !important;
    overflow-y:auto;
    overscroll-behavior:contain;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(calc(-100% - 96px)) scale(.985);
    transform-origin:50% 0;
    transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .22s ease,visibility .34s ease;
  }
  .sidebar.abierto {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  .sidebar::before {
    content:"";
    display:block;
    width:38px;
    height:4px;
    margin:0 auto 10px;
    border-radius:var(--radius-pill);
    background:color-mix(in srgb,var(--text-muted) 32%,transparent);
  }
  /* La identidad ya vive en el header móvil; evitamos duplicarla dentro del sheet. */
  .sidebar > .sidebar-logo,
  .sidebar > .btn-menu-movil { display:none !important; }
  .sidebar nav { padding:0; }
  .sidebar .nav-group { margin-bottom:8px; }
  .sidebar .nav-group:last-child { margin-bottom:0; }
  .sidebar .nav-group-label {
    padding:7px 10px 4px;
    margin:0;
    font-size:.62rem;
    letter-spacing:.075em;
  }
  .sidebar .nav-link {
    min-height:46px;
    padding:10px 12px;
    border-radius:14px;
    gap:11px;
    font-size:.79rem;
    transition:background .16s ease,transform .16s ease,color .16s ease;
  }
  .sidebar .nav-link:active { transform:scale(.985); }
  .sidebar .nav-link.active {
    background:color-mix(in srgb,var(--color-primario) 11%,transparent);
  }
  .sidebar .sidebar-footer {
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--line-soft);
  }
  body.mobile-nav-open { overflow:hidden; touch-action:none; }

  /* En móvil subimos todavía más la solidez del Activity Center para impedir
     que textos y botones de la página se mezclen visualmente por detrás. */
  .notificaciones-panel.activity-center {
    background:color-mix(in srgb,var(--surface-card) 97%,transparent) !important;
    -webkit-backdrop-filter:blur(38px) saturate(180%) !important;
    backdrop-filter:blur(38px) saturate(180%) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .sidebar,.overlay-sidebar { transition:none !important; }
}

/* ========================================================================== 
   v1.11.17 — Geometría móvil: Top Sheet + presets de Histórico
   ========================================================================== */
@media (max-width:860px) {
  /* El Top Sheet y la navegación inferior comparten exactamente el mismo eje
     horizontal: 14px desde cada borde del viewport. */
  .sidebar {
    left:14px !important;
    right:14px !important;
  }
}

@media (max-width:767px) {
  /* Histórico y reportes: los atajos dejan de depender de una fila flex cuyo
     contenido podía superar el viewport. En móvil viven en una retícula de
     dos columnas y el preset por defecto ocupa el ancho completo. */
  .card:has(form[action*="/supervisor/historico"]) > .flex.gap-2.mt-3 {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px !important;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
  }
  .card:has(form[action*="/supervisor/historico"]) > .flex.gap-2.mt-3 > .btn {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:46px;
    height:auto;
    padding:.62rem .55rem;
    justify-content:center;
    text-align:center;
    white-space:normal;
    line-height:1.28;
    overflow-wrap:anywhere;
  }
  .card:has(form[action*="/supervisor/historico"]) > .flex.gap-2.mt-3 > .btn:last-child {
    grid-column:1 / -1;
  }
}

/* Fallback conservador para motores sin :has(): por lo menos permite wrap y
   evita que un botón pueda forzar el ancho del viewport. */
@supports not selector(:has(*)) {
  @media (max-width:767px) {
    .content .card > .flex.gap-2.mt-3 { flex-wrap:wrap !important; max-width:100%; }
    .content .card > .flex.gap-2.mt-3 > .btn { max-width:100%; white-space:normal; }
  }
}

/* ========================================================================== 
   v1.11.18 — Nav motion: evita estado hover táctil persistente
   ========================================================================== */
/* En pantallas táctiles Chrome/Samsung puede conservar :hover después del tap.
   El efecto anterior expandía los trazos asimétricos y hacía que, al cerrar,
   la hamburguesa pareciera volver al icono tradicional de tres líneas iguales.
   La morfología base ahora es estable en touch; el micro-hover solo existe
   donde realmente hay cursor preciso. */
.nav-motion-toggle:not(.is-open) .nav-motion-lines i:nth-child(1){width:15px;left:1px}
.nav-motion-toggle:not(.is-open) .nav-motion-lines i:nth-child(2){width:20px;left:1px}
.nav-motion-toggle:not(.is-open) .nav-motion-lines i:nth-child(3){width:12px;left:9px}
@media (hover:hover) and (pointer:fine){
  .nav-motion-toggle:not(.is-open):hover .nav-motion-lines i:nth-child(1),
  .nav-motion-toggle:not(.is-open):focus-visible .nav-motion-lines i:nth-child(1){width:20px}
  .nav-motion-toggle:not(.is-open):hover .nav-motion-lines i:nth-child(3),
  .nav-motion-toggle:not(.is-open):focus-visible .nav-motion-lines i:nth-child(3){width:20px;left:1px}
}
@media (hover:none),(pointer:coarse){
  .nav-motion-toggle:not(.is-open):hover .nav-motion-lines i:nth-child(1),
  .nav-motion-toggle:not(.is-open):focus .nav-motion-lines i:nth-child(1){width:15px;left:1px}
  .nav-motion-toggle:not(.is-open):hover .nav-motion-lines i:nth-child(3),
  .nav-motion-toggle:not(.is-open):focus .nav-motion-lines i:nth-child(3){width:12px;left:9px}
}
/* === v1.11.13 · Document Hub / Expediente 360 === */
.document-hub{padding:0;overflow:hidden}
.document-hub-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:1.55rem 1.65rem 1.25rem;border-bottom:1px solid var(--line-soft,var(--gris-200));background:linear-gradient(180deg,color-mix(in srgb,var(--surface-card,#fff) 92%,var(--color-primario) 8%) 0%,var(--surface-card,#fff) 100%)}
.document-hub-title{min-width:0}.document-hub-title h2{margin:.15rem 0 .35rem;font-size:1.25rem;letter-spacing:-.02em}.document-hub-title p{margin:0;color:var(--text-muted,var(--gris-400));font-size:.82rem;line-height:1.5}
.document-hub-kicker{display:inline-flex;align-items:center;gap:.35rem;font-size:.64rem;line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-primario)}
.document-upload-primary{flex:0 0 auto;min-height:40px;border-radius:var(--radius-md);padding-inline:1rem}
.document-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;padding:1rem 1.65rem 0}
.document-summary-item{display:flex;align-items:center;gap:.75rem;min-width:0;padding:.85rem .95rem;border:1px solid var(--line-soft,var(--gris-200));border-radius:15px;background:color-mix(in srgb,var(--surface-card,#fff) 96%,var(--surface-app,#f8fafc));box-shadow:0 7px 22px rgba(15,23,42,.035)}
.document-summary-item>div{display:flex;flex-direction:column;min-width:0}.document-summary-item strong{font-size:1.02rem;line-height:1;color:var(--text-main,#0f172a)}.document-summary-item span:last-child{margin-top:.25rem;font-size:.66rem;color:var(--text-muted,var(--gris-400));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.document-summary-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:var(--radius-md)}.document-summary-icon.is-blue{color:#2563eb;background:#eaf2ff}.document-summary-icon.is-green{color:#16a34a;background:#dcfce7}.document-summary-icon.is-amber{color:#d97706;background:#fff3c4}.document-summary-icon.is-red{color:#dc2626;background:#fee2e2}
.document-category-grid-modern{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1.25rem 1.65rem 1.65rem}
.document-category-card-modern{min-width:0;border:1px solid var(--line-soft,var(--gris-200));border-radius:18px;background:var(--surface-card,#fff);overflow:hidden;box-shadow:0 8px 28px rgba(15,23,42,.045);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.document-category-card-modern:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--color-primario) 22%,var(--line-soft));box-shadow:0 12px 32px rgba(15,23,42,.065)}
.document-category-card-modern:last-child:nth-child(odd){grid-column:1/-1}
.document-category-head-modern{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:1rem 1rem .9rem;border-bottom:1px solid color-mix(in srgb,var(--line-soft,var(--gris-200)) 72%,transparent)}
.document-category-icon-modern{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-md);color:var(--color-primario);background:color-mix(in srgb,var(--color-primario) 10%,transparent)}
.document-category-copy{display:flex;flex-direction:column;min-width:0}.document-category-copy strong{font-size:.82rem;color:var(--text-main,#0f172a)}.document-category-copy span{margin-top:.18rem;font-size:.66rem;color:var(--text-muted,var(--gris-400));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.document-count-pill{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 .5rem;border-radius:var(--radius-pill);background:var(--surface-app,#f8fafc);border:1px solid var(--line-soft,var(--gris-200));font-size:.7rem;font-weight:700;color:var(--text-main,#0f172a)}
.document-empty-modern{display:flex;align-items:center;gap:.72rem;padding:1rem;color:var(--text-muted,var(--gris-400))}.document-empty-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;background:var(--surface-app,#f8fafc);border:1px dashed var(--line-soft,var(--gris-200));color:var(--text-muted,var(--gris-400))}.document-empty-modern>div{display:flex;flex-direction:column}.document-empty-modern strong{font-size:.72rem;color:var(--text-main,#0f172a)}.document-empty-modern span:last-child{font-size:.64rem;margin-top:.18rem}
.document-list-modern{display:grid}.document-row-modern{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.82rem 1rem;border-top:1px solid color-mix(in srgb,var(--line-soft,var(--gris-200)) 70%,transparent)}.document-row-modern:first-child{border-top:0}.document-row-modern.is-history{opacity:.65}
.document-file-icon-modern{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--surface-app,#f8fafc);color:var(--text-muted,var(--gris-400))}.document-file-meta{display:flex;flex-direction:column;min-width:0}.document-file-meta strong{font-size:.73rem;color:var(--text-main,#0f172a)}.document-file-meta span,.document-file-meta small{font-size:.62rem;color:var(--text-muted,var(--gris-400));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.document-file-meta span{margin-top:.14rem}.document-file-meta small{margin-top:.18rem}
.document-row-actions-modern{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}.document-view-btn{display:inline-flex;align-items:center;gap:.35rem;min-height:32px;padding:0 .7rem;border:1px solid var(--line-soft,var(--gris-200));border-radius:9px;background:var(--surface-card,#fff);color:var(--text-main,#0f172a);font-size:.66rem;font-weight:700;text-decoration:none;transition:background .16s ease,border-color .16s ease}.document-view-btn:hover{background:color-mix(in srgb,var(--color-primario) 6%,var(--surface-card,#fff));border-color:color-mix(in srgb,var(--color-primario) 24%,var(--line-soft))}
.document-upload-dialog{width:min(680px,calc(100vw - 32px))}.document-dropzone-modern{position:relative;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.35rem;padding:1.2rem;border:1.5px dashed color-mix(in srgb,var(--color-primario) 35%,var(--line-soft));border-radius:18px;background:color-mix(in srgb,var(--color-primario) 3%,var(--surface-card,#fff));cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}.document-dropzone-modern:hover{border-color:color-mix(in srgb,var(--color-primario) 68%,var(--line-soft));background:color-mix(in srgb,var(--color-primario) 6%,var(--surface-card,#fff));transform:translateY(-1px)}.document-dropzone-modern input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.document-dropzone-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--color-primario) 10%,transparent);color:var(--color-primario);margin-bottom:.3rem}.document-dropzone-modern strong{font-size:.82rem;color:var(--text-main,#0f172a)}.document-dropzone-modern>span:last-child{font-size:.67rem;color:var(--text-muted,var(--gris-400))}
html[data-theme="dark"] .document-hub-header{background:linear-gradient(180deg,color-mix(in srgb,var(--surface-card) 92%,var(--color-primario) 8%),var(--surface-card))}html[data-theme="dark"] .document-summary-item,html[data-theme="dark"] .document-category-card-modern,html[data-theme="dark"] .document-view-btn{background:var(--surface-card)}html[data-theme="dark"] .document-summary-icon.is-blue{background:rgba(37,99,235,.18);color:#93c5fd}html[data-theme="dark"] .document-summary-icon.is-green{background:rgba(22,163,74,.17);color:#86efac}html[data-theme="dark"] .document-summary-icon.is-amber{background:rgba(217,119,6,.18);color:#fcd34d}html[data-theme="dark"] .document-summary-icon.is-red{background:rgba(220,38,38,.18);color:#fca5a5}
@media(max-width:980px){.document-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.document-category-grid-modern{grid-template-columns:1fr}.document-category-card-modern:last-child:nth-child(odd){grid-column:auto}}
@media(max-width:640px){.document-hub-header{padding:1.15rem;flex-direction:column;align-items:stretch}.document-upload-primary{width:100%;justify-content:center}.document-summary-grid{padding:.85rem 1.15rem 0;gap:.6rem}.document-summary-item{padding:.7rem}.document-summary-icon{width:32px;height:32px;flex-basis:32px}.document-category-grid-modern{padding:1rem 1.15rem 1.15rem;gap:.75rem}.document-category-head-modern{padding:.85rem}.document-category-copy span{white-space:normal}.document-row-modern{grid-template-columns:auto minmax(0,1fr);padding:.8rem .85rem}.document-row-actions-modern{grid-column:2;justify-content:flex-start}.document-view-btn span{display:none}.document-view-btn{width:32px;padding:0;justify-content:center}.document-summary-item span:last-child{white-space:normal}.document-upload-dialog{width:calc(100vw - 20px)}}


/* v1.11.20 · Remember Me */
.auth-remember{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  margin:-2px 0 18px;
  padding:12px 13px;
  border:1px solid var(--border, #dbe3ee);
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--surface, #fff) 92%, transparent);
  cursor:pointer;
  user-select:none;
  transition:border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.auth-remember:hover{
  border-color:color-mix(in srgb, var(--primary, #245aa5) 38%, var(--border, #dbe3ee));
  background:color-mix(in srgb, var(--primary, #245aa5) 4%, var(--surface, #fff));
}
.auth-remember:active{transform:translateY(1px)}
.auth-remember input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.auth-remember-box{
  flex:0 0 22px;
  width:22px;
  height:22px;
  margin-top:1px;
  border:1.5px solid var(--border-strong, #cbd5e1);
  border-radius:7px;
  background:var(--surface, #fff);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:13px;
  font-weight:700;
  transition:all .18s ease;
}
.auth-remember-box span{opacity:0;transform:scale(.7);transition:all .16s ease}
.auth-remember input:checked + .auth-remember-box{
  border-color:var(--primary, #245aa5);
  background:var(--primary, #245aa5);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary, #245aa5) 12%, transparent);
}
.auth-remember input:checked + .auth-remember-box span{opacity:1;transform:scale(1)}
.auth-remember input:focus-visible + .auth-remember-box{
  outline:3px solid color-mix(in srgb, var(--primary, #245aa5) 22%, transparent);
  outline-offset:2px;
}
.auth-remember-copy{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.25}
.auth-remember-copy strong{font-size:14px;color:var(--text, #0f172a);font-weight:700}
.auth-remember-copy small{font-size:12px;color:var(--muted, #7c8ba1);line-height:1.35}
html[data-theme="dark"] .auth-remember,
body.dark-mode .auth-remember{
  background:rgba(255,255,255,.035);
  border-color:rgba(148,163,184,.20);
}
html[data-theme="dark"] .auth-remember:hover,
body.dark-mode .auth-remember:hover{background:rgba(255,255,255,.055);border-color:rgba(96,165,250,.34)}
html[data-theme="dark"] .auth-remember-box,
body.dark-mode .auth-remember-box{background:rgba(15,23,42,.72);border-color:rgba(148,163,184,.40)}
@media (max-width:640px){
  .auth-remember{padding:11px 12px;gap:10px;margin-bottom:16px}
  .auth-remember-copy strong{font-size:13.5px}
  .auth-remember-copy small{font-size:11.5px}
}

/* HR Core 2.0 Fase 2 — progressive disclosure */
.hrcore-summary{margin-bottom:var(--space-4,1rem);padding:1.15rem;border:1px solid var(--borde,#e5e7eb);border-radius:var(--radius-lg,16px);background:var(--superficie,#fff)}
.hrcore-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.hrcore-heading h2{margin:.15rem 0 .2rem;font-size:1.05rem}.hrcore-heading p{margin:0;color:var(--texto-muted,#64748b);font-size:.82rem}.hrcore-heading .eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primario,#4f46e5)}
.hrcore-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.hrcore-kpis>div{padding:.8rem;border-radius:var(--radius-md);background:var(--gris-50,#f8fafc);min-width:0}.hrcore-kpis span,.hrcore-history small{display:block;color:var(--texto-muted,#64748b);font-size:.72rem}.hrcore-kpis strong{display:block;margin-top:.2rem;font-size:.86rem;overflow:hidden;text-overflow:ellipsis}
.hrcore-history-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.75rem}.hrcore-history{border:1px solid var(--borde,#e5e7eb);border-radius:var(--radius-md);padding:.85rem}.hrcore-history h3{font-size:.8rem;margin:0 0 .55rem}.hrcore-row{display:flex;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-top:1px solid var(--borde-suave,#eef2f7)}.hrcore-row:first-of-type{border-top:0}.hrcore-row strong{font-size:.8rem}.hrcore-row time{font-size:.7rem;color:var(--texto-muted,#64748b);white-space:nowrap}
[data-theme="dark"] .hrcore-summary{background:var(--superficie,#172033)}[data-theme="dark"] .hrcore-kpis>div{background:rgba(255,255,255,.035)}
@media(max-width:900px){.hrcore-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.hrcore-history-grid{grid-template-columns:1fr}}
@media(max-width:560px){.hrcore-summary{padding:.9rem}.hrcore-heading{align-items:center}.hrcore-kpis{grid-template-columns:1fr 1fr;gap:.55rem}.hrcore-kpis>div{padding:.65rem}}

/* v1.11.22 — Movimientos laborales / HR Core 2.0 */
.hrcore-heading-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.hrcore-current-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-card-gap,1rem);margin-top:1rem}
.hrcore-current-strip>div{min-width:0;padding:1rem 1.05rem;border:1px solid var(--borde,#e5e7eb);border-radius:14px;background:color-mix(in srgb,var(--blanco,#fff) 86%,transparent);display:flex;flex-direction:column;gap:.22rem}
.hrcore-current-strip span{font-size:.72rem;color:var(--gris-400);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.hrcore-current-strip strong{font-size:.92rem;color:var(--gris-800);overflow-wrap:anywhere}
.hrcore-current-strip small{font-size:.75rem;color:var(--gris-500)}
.hrcore-row.is-future{background:color-mix(in srgb,var(--primario,#2563eb) 7%,transparent);border-radius:10px;padding:.5rem .6rem}
.hrcore-movement-log{margin-top:1rem;border-top:1px solid var(--borde,#e5e7eb);padding-top:.8rem}
.hrcore-movement-log summary{cursor:pointer;color:var(--gris-600);font-weight:700;font-size:.82rem;display:flex;gap:.5rem;align-items:center;list-style:none}
.hrcore-movement-log summary::-webkit-details-marker{display:none}
.hrcore-movement-log summary span{min-width:22px;height:22px;display:inline-grid;place-items:center;border-radius:var(--radius-pill);background:var(--gris-100);font-size:.7rem}
.hrcore-movement-list{display:grid;gap:.55rem;margin-top:.75rem}
.hrcore-movement-list>div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.65rem .75rem;border:1px solid var(--borde,#e5e7eb);border-radius:var(--radius-md)}
.hrcore-movement-list small{color:var(--gris-500);text-align:right}

.movement-modal{background:rgba(10,18,32,.34);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
.movement-dialog{width:min(920px,calc(100vw - 32px));max-height:min(88vh,920px);overflow:auto;padding:0;background:color-mix(in srgb,var(--blanco,#fff) 94%,transparent);border:1px solid color-mix(in srgb,var(--blanco,#fff) 60%,var(--borde,#dbe2ea));box-shadow:0 24px 80px rgba(15,23,42,.22)}
.movement-header{position:sticky;top:0;z-index:2;padding:1.25rem 1.35rem;background:color-mix(in srgb,var(--blanco,#fff) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--borde,#e5e7eb)}
.movement-header h2{margin:.12rem 0 .2rem}.movement-header p{margin:0;color:var(--gris-500);font-size:.84rem}
.movement-dialog form{padding:1.25rem 1.35rem 1.35rem}
.movement-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-bottom:1.1rem}
.movement-type{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem;border:1px solid var(--borde,#e5e7eb);border-radius:14px;background:var(--blanco,#fff);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;min-width:0}
.movement-type:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primario,#2563eb) 35%,var(--borde,#e5e7eb))}
.movement-type.is-selected{border-color:color-mix(in srgb,var(--primario,#2563eb) 70%,transparent);background:color-mix(in srgb,var(--primario,#2563eb) 7%,var(--blanco,#fff));box-shadow:0 0 0 3px color-mix(in srgb,var(--primario,#2563eb) 10%,transparent)}
.movement-type input{position:absolute;opacity:0;pointer-events:none}
.movement-type-icon{width:36px;height:36px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--gris-100);color:var(--primario,#2563eb);flex:0 0 auto}
.movement-type span:last-child{display:flex;flex-direction:column;min-width:0}.movement-type strong{font-size:.86rem;color:var(--gris-800)}.movement-type small{font-size:.72rem;color:var(--gris-500);line-height:1.3}
.movement-common{padding:1rem;border:1px solid var(--borde,#e5e7eb);border-radius:14px;background:var(--gris-50);margin-bottom:1rem}
.movement-fields{padding:1.05rem;border:1px solid var(--borde,#e5e7eb);border-radius:14px;margin-bottom:1rem;background:var(--blanco,#fff)}
.movement-fields[hidden]{display:none!important}
.movement-section-title{margin-bottom:.9rem}.movement-section-title h3{margin:0 0 .18rem;font-size:.96rem}.movement-section-title p{margin:0;color:var(--gris-500);font-size:.78rem}
.movement-danger-note{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem;border:1px solid color-mix(in srgb,#dc2626 22%,var(--borde,#e5e7eb));background:color-mix(in srgb,#dc2626 5%,var(--blanco,#fff));border-radius:13px;margin-bottom:.9rem;color:#991b1b}.movement-danger-note p{margin:.15rem 0 0;font-size:.78rem;line-height:1.45;color:inherit}
.movement-notes textarea{min-height:88px}
.movement-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.95rem;border-top:1px solid var(--borde,#e5e7eb)}
.movement-safety{display:flex;align-items:center;gap:.45rem;color:var(--gris-500);font-size:.76rem}

html[data-theme="dark"] .movement-dialog,html.dark .movement-dialog{background:rgba(24,34,49,.94);border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .movement-header,html.dark .movement-header{background:rgba(24,34,49,.84)}
html[data-theme="dark"] .movement-type,html.dark .movement-type,html[data-theme="dark"] .movement-fields,html.dark .movement-fields{background:rgba(31,43,59,.88);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .movement-common,html.dark .movement-common{background:rgba(15,23,42,.34);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .hrcore-current-strip>div,html.dark .hrcore-current-strip>div{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .movement-danger-note,html.dark .movement-danger-note{background:rgba(127,29,29,.18);border-color:rgba(248,113,113,.2);color:#fecaca}

@media(max-width:980px){.hrcore-current-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.movement-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hrcore-heading-actions{width:100%;justify-content:flex-start}.hrcore-current-strip{grid-template-columns:1fr}.movement-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 28px);border-radius:var(--radius-xl)}.movement-header,.movement-dialog form{padding:1rem}.movement-type-grid{grid-template-columns:1fr 1fr;gap:.55rem}.movement-type{padding:.72rem}.movement-type-icon{width:32px;height:32px}.movement-common.grid-2,.movement-fields .grid-2,.movement-fields .grid-3,.movement-fields .grid-4{grid-template-columns:1fr!important}.movement-footer{align-items:stretch;flex-direction:column}.movement-footer>.flex{width:100%}.movement-footer .btn{flex:1}.hrcore-movement-list>div{grid-template-columns:auto 1fr}.hrcore-movement-list small{grid-column:2;text-align:left}}

/* HR Core 2.0 · secciones internas de movimientos */
.movement-subsection{display:flex;align-items:center;gap:.75rem;margin:1.15rem 0 .75rem;color:var(--gris-500);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.movement-subsection::after{content:"";height:1px;flex:1;background:var(--gris-200)}
[data-theme="dark"] .movement-subsection{color:var(--gris-400)}
[data-theme="dark"] .movement-subsection::after{background:rgba(255,255,255,.09)}
.hrcore-movement-item{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hrcore-movement-main{display:flex;align-items:center;gap:.65rem;min-width:0;flex-wrap:wrap}
.hrcore-movement-main small{color:var(--gris-400)}
.movement-cancel-dialog{max-width:560px}
@media(max-width:640px){.hrcore-movement-item{align-items:flex-start;flex-direction:column}.hrcore-movement-item>.btn{width:100%}}

/* === Modo Test / Demo ============================================== */
.global-test-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--amarillo,#f59e0b) 14%,var(--surface-card,#fff));border:1px solid color-mix(in srgb,var(--amarillo,#f59e0b) 38%,transparent);color:var(--texto,#0f172a);font-size:11px;font-weight:700;letter-spacing:.08em;text-decoration:none;box-shadow:0 8px 25px rgba(15,23,42,.08)}
.global-test-badge span,.test-mode-status span{width:7px;height:7px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.12)}
.test-mode-page-head{align-items:center}.test-mode-status{display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid var(--borde);border-radius:var(--radius-pill);font-weight:700;background:var(--surface)}.test-mode-status.is-active{border-color:rgba(245,158,11,.35)}
.test-mode-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:30px!important;overflow:hidden;position:relative}.test-mode-hero.is-active:before{content:"";position:absolute;inset:-80px auto auto -60px;width:240px;height:240px;border-radius:50%;background:rgba(245,158,11,.09);filter:blur(10px);pointer-events:none}.test-mode-hero-copy{display:flex;align-items:flex-start;gap:18px;max-width:790px;position:relative}.test-mode-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--radius-lg);background:rgba(37,99,235,.09);color:var(--primario);flex:0 0 auto}.test-mode-hero h2{margin:5px 0 8px}.test-mode-hero p{margin:0;color:var(--texto-secundario);line-height:1.55}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;color:#b45309}.test-mode-toggle-form{flex:0 0 auto}.test-mode-toggle{border:0;background:transparent;display:flex;align-items:center;gap:12px;cursor:pointer;color:var(--texto);padding:8px}.test-mode-toggle-track{width:54px;height:30px;border-radius:var(--radius-pill);background:var(--surface-3,#e9eef5);position:relative;border:1px solid var(--borde);transition:.22s ease}.test-mode-toggle-knob{position:absolute;width:24px;height:24px;border-radius:50%;left:2px;top:2px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.18);transition:.22s ease}.test-mode-toggle.is-on .test-mode-toggle-track{background:#f59e0b;border-color:#f59e0b}.test-mode-toggle.is-on .test-mode-toggle-knob{transform:translateX(24px)}
.test-mode-metrics{margin-top:var(--space-4,18px)}.test-mode-safety{margin-top:var(--space-4,18px)}.test-mode-safety-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.test-mode-safety-grid>div{display:flex;gap:12px;padding:16px;border:1px solid var(--borde);border-radius:14px;background:var(--surface-2,rgba(248,250,252,.55))}.test-mode-safety-grid svg{color:var(--primario);flex:0 0 auto;margin-top:2px}.test-mode-safety-grid strong,.test-mode-safety-grid span{display:block}.test-mode-safety-grid span{font-size:13px;color:var(--texto-secundario);margin-top:4px;line-height:1.45}.test-mode-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--borde)}.test-mode-actions strong,.test-mode-actions span{display:block}.test-mode-actions span{font-size:12px;color:var(--texto-secundario);margin-top:4px}
[data-theme="dark"] .global-test-badge{background:rgba(245,158,11,.12);color:#f8fafc}[data-theme="dark"] .test-mode-toggle-knob{background:#f8fafc}[data-theme="dark"] .test-mode-safety-grid>div{background:rgba(255,255,255,.025)}
@media(max-width:760px){.test-mode-hero{align-items:flex-start;flex-direction:column;padding:22px!important}.test-mode-toggle-form,.test-mode-toggle{width:100%}.test-mode-toggle{justify-content:space-between}.test-mode-safety-grid{grid-template-columns:1fr}.test-mode-actions{align-items:flex-start;flex-direction:column}.test-mode-actions form,.test-mode-actions .btn{width:100%}.global-test-badge{padding:6px 8px;font-size:10px}}


/* ==========================================================
   v1.11.26.6 — Hotfix Nomina CSRF + coherencia visual UI
   ========================================================== */
/* Menú de cuenta: una sola superficie Glass; los items no pintan blanco. */
.usuario-menu-panel > a,
.usuario-menu-panel > button,
.usuario-menu-panel > .user-menu-action,
.usuario-menu-panel form > button {
  background:transparent !important;
  color:var(--text-main,var(--gris-700)) !important;
}
.usuario-menu-panel > a:hover,
.usuario-menu-panel > button:hover,
.usuario-menu-panel > .user-menu-action:hover,
.usuario-menu-panel form > button:hover {
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-elevated,var(--gris-50))) !important;
}
.usuario-menu-panel strong { color:var(--text-main,var(--gris-900)) !important; }
.usuario-menu-panel small { color:var(--text-muted,var(--gris-400)) !important; }
.usuario-menu-panel form { border-color:var(--line-soft,var(--gris-100)) !important; }
html[data-theme="dark"] .usuario-menu-panel {
  background:rgba(27,34,45,.94) !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.38) !important;
}
html[data-theme="dark"] .usuario-menu-panel > a,
html[data-theme="dark"] .usuario-menu-panel > button,
html[data-theme="dark"] .usuario-menu-panel > .user-menu-action,
html[data-theme="dark"] .usuario-menu-panel form > button {
  background:transparent !important;
  color:#edf2f7 !important;
}
html[data-theme="dark"] .usuario-menu-panel > a:hover,
html[data-theme="dark"] .usuario-menu-panel > button:hover,
html[data-theme="dark"] .usuario-menu-panel > .user-menu-action:hover,
html[data-theme="dark"] .usuario-menu-panel form > button:hover {
  background:#263140 !important;
}
html[data-theme="dark"] .usuario-menu-panel strong { color:#edf2f7 !important; }
html[data-theme="dark"] .usuario-menu-panel small { color:#9fb0c6 !important; }

/* Constructor de roles: inputs deliberados, no controles nativos del navegador. */
.role-builder-form .role-text-input,
.role-edit .role-text-input {
  display:block;
  width:100%;
  min-height:46px;
  padding:.72rem .82rem;
  border:1px solid var(--line-soft,var(--gris-200));
  border-radius:var(--radius-md);
  background:var(--surface-card,#fff);
  color:var(--text-main,var(--gris-950));
  font:inherit;
  font-size:.88rem;
  line-height:1.35;
  box-shadow:0 1px 2px rgba(15,23,42,.025);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.role-builder-form .role-text-input::placeholder,
.role-edit .role-text-input::placeholder { color:var(--text-muted,var(--gris-400)); opacity:.92; }
.role-builder-form .role-text-input:focus,
.role-edit .role-text-input:focus {
  outline:none;
  border-color:color-mix(in srgb,var(--color-primario) 70%,white);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primario) 12%,transparent);
}
.role-builder-form .role-description-input,
.role-edit .role-description-input { min-height:82px; resize:vertical; }
html[data-theme="dark"] .role-builder-form .role-text-input,
html[data-theme="dark"] .role-edit .role-text-input {
  background:#151e2b !important;
  border-color:#334155 !important;
  color:#edf2f7 !important;
}
html[data-theme="dark"] .role-builder-form .role-text-input:focus,
html[data-theme="dark"] .role-edit .role-text-input:focus {
  border-color:color-mix(in srgb,var(--color-primario) 72%,#fff) !important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primario) 18%,transparent) !important;
}


/* ===== v2.0 Core Design System: ritmo estructural ===== */
:root{--space-page-section:1.5rem;--space-page-section-mobile:1.125rem;--glass-blur:18px}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:var(--space-page-section)}
.page-header>div:first-child{min-width:0}
.page-header h1{margin:.2rem 0 .25rem}
.page-header p{margin:.15rem 0 0;color:var(--texto-secundario,var(--gris-600))}
.header-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
@media(max-width:767px){.page-header{align-items:stretch;margin-bottom:var(--space-page-section-mobile)}.page-header>.btn,.page-header>.header-actions{width:100%}.page-header>.btn{justify-content:center}}

/* v2.0.2.1 — Payroll UX consistency / White Label tokens */
.eyebrow{color:var(--color-primario,var(--primario,#2563eb))!important;text-transform:uppercase}
.payroll-page-header{align-items:flex-end}
.payroll-back-link{display:inline-flex;align-items:center;gap:.38rem;color:var(--texto-secundario,var(--gris-600));font-size:.78rem;font-weight:700;text-decoration:none;margin-bottom:.72rem;transition:color .16s ease,transform .16s ease}
.payroll-back-link:hover{color:var(--color-primario,var(--primario));transform:translateX(-2px)}
.payroll-page-header .eyebrow{display:block;margin-bottom:.35rem}
.payroll-page-header h1{margin:0 0 .35rem;letter-spacing:-.025em}
.payroll-header-actions{display:flex;align-items:center;gap:.7rem}
.payroll-status{display:inline-flex;align-items:center;gap:.48rem;min-height:38px;padding:.48rem .72rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-primario,var(--primario)) 7%,var(--surface-card,#fff));border:1px solid color-mix(in srgb,var(--color-primario,var(--primario)) 15%,var(--line-soft,#e2e8f0));font-size:.74rem;font-weight:700;color:var(--text-main,var(--texto))}
.payroll-status-dot{width:7px;height:7px;border-radius:50%;background:var(--color-primario,var(--primario))}
.payroll-status-cerrado .payroll-status-dot{background:#64748b}.payroll-status-autorizado .payroll-status-dot{background:#16a34a}.payroll-status-revision .payroll-status-dot{background:#d97706}
.payroll-incidencias-card{padding:var(--space-card,1.5rem)!important}
.payroll-incidencias-card>.card-header{align-items:flex-start;margin-bottom:1.35rem;gap:1.25rem}
.payroll-incidencias-card>.card-header h2{margin:.28rem 0 .42rem;font-size:1.02rem}
.payroll-incidencias-card>.card-header p{margin:0;line-height:1.55}
.payroll-incidencias-card>.grid-3{margin-bottom:0}
.payroll-incidencias-card .empty-state-modern{margin-top:1.25rem}
.modal-card .icon-btn[data-cerrar-modal]{width:40px;height:40px;min-width:40px;padding:0;border:1px solid var(--line-soft,#e2e8f0);border-radius:var(--radius-md);background:var(--surface-card,#fff);color:var(--text-muted,#64748b);display:grid;place-items:center;box-shadow:none;transition:.16s ease}
.modal-card .icon-btn[data-cerrar-modal]:hover{background:color-mix(in srgb,var(--color-primario,var(--primario)) 6%,var(--surface-card,#fff));border-color:color-mix(in srgb,var(--color-primario,var(--primario)) 22%,var(--line-soft,#e2e8f0));color:var(--color-primario,var(--primario))}
.incidencia-field-help{margin:-.35rem 0 1rem;color:var(--texto-secundario,var(--gris-600));font-size:.72rem;line-height:1.45}
.money-input{display:flex;align-items:center;position:relative}.money-input>span{position:absolute;left:14px;color:var(--texto-secundario);font-weight:700;z-index:1}.money-input input{padding-left:30px!important}
[hidden]{display:none!important}
.audit-detail-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line-soft,#e2e8f0);background:var(--surface-card,#fff);color:var(--color-primario,var(--primario));display:grid;place-items:center;font-size:1.05rem;font-weight:700;cursor:pointer}
.audit-detail-btn:hover{background:color-mix(in srgb,var(--color-primario,var(--primario)) 7%,var(--surface-card,#fff))}
.audit-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.audit-detail-item{padding:.85rem;border:1px solid var(--line-soft,#e2e8f0);border-radius:14px;background:var(--surface-soft,#f8fafc)}.audit-detail-item small{display:block;color:var(--text-muted,#64748b);margin-bottom:.25rem}.audit-detail-item strong{font-size:.82rem;overflow-wrap:anywhere}.audit-detail-wide{grid-column:1/-1}
@media(max-width:767px){.payroll-header-actions{width:100%;justify-content:space-between;flex-wrap:wrap}.payroll-header-actions form{flex:1}.payroll-header-actions .btn{width:100%;justify-content:center}.payroll-incidencias-card{padding:1rem!important}.payroll-incidencias-card>.card-header{gap:.85rem}.audit-detail-grid{grid-template-columns:1fr}}

/* ==========================================================
   Organization / Employee Experience — v2.1.0
   Reutiliza únicamente tokens White Label y semánticos.
   ========================================================== */
.module-hero{
    display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
    padding:1.55rem 1.65rem;margin-bottom:1rem;border:1px solid var(--gris-200);border-radius:var(--radius-xl);
    background:linear-gradient(135deg,var(--color-primario-suave) 0%,#fff 58%);box-shadow:var(--sombra);
}
.module-hero h1{margin:.18rem 0 .3rem;font-size:1.7rem;line-height:1.15}.module-hero p{margin:0;color:var(--gris-600);max-width:760px}
.module-eyebrow{display:block;color:var(--color-primario);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.section-tabs{display:flex;align-items:center;gap:.35rem;padding:.35rem;margin-bottom:1rem;border:1px solid var(--gris-200);border-radius:14px;background:#fff;overflow-x:auto;scrollbar-width:none}
.section-tabs::-webkit-scrollbar{display:none}.section-tab{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.62rem .78rem;border-radius:10px;color:var(--gris-600);font-weight:700;text-decoration:none}.section-tab:hover{background:var(--gris-50);text-decoration:none;color:var(--gris-950)}.section-tab.active{background:var(--color-primario-suave);color:var(--color-primario)}.section-tab em{font-style:normal;min-width:20px;height:20px;padding:0 .35rem;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--gris-100);font-size:.7rem}
.organization-toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.organization-search{flex:1;display:flex;align-items:center;gap:.55rem;border:1px solid var(--gris-200);border-radius:var(--radius-md);background:#fff;padding:0 .85rem;color:var(--gris-400)}.organization-search:focus-within{border-color:var(--color-primario);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primario) 12%,transparent)}.organization-search input{border:0;outline:0;background:transparent;width:100%;padding:.78rem 0;color:var(--gris-950);font:inherit}.organization-count{color:var(--gris-400);font-size:.82rem;white-space:nowrap}
.organization-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.directory-person-card{display:flex;align-items:center;gap:.85rem;padding:1rem;border:1px solid var(--gris-200);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--sombra)}.directory-person-main{display:flex;flex-direction:column;min-width:0;flex:1}.directory-person-main strong,.directory-person-main span,.directory-person-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.directory-person-main strong{font-size:.9rem}.directory-person-main span{color:var(--gris-600);font-size:.82rem}.directory-person-main small{color:var(--gris-400);font-size:.75rem;margin-top:.12rem}
.org-avatar{width:42px;height:42px;border-radius:13px;background:var(--color-primario-suave);color:var(--color-primario);display:inline-flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden;flex:none}.org-avatar img{width:100%;height:100%;object-fit:cover}.org-avatar-sm{width:32px;height:32px;border-radius:10px;border:2px solid #fff;margin-left:-8px}.org-avatar-sm:first-child{margin-left:0}.org-avatar-xs{width:30px;height:30px;border-radius:9px;font-size:.72rem}
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.team-card{margin:0!important}.team-card-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.team-card-head h2{margin:.18rem 0 0;font-size:1.05rem}.team-card-head p{margin:.15rem 0 0;color:var(--gris-400);font-size:.78rem}.org-team-stack{display:flex;padding-left:.5rem}.team-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:1rem}.team-members>div{display:flex;gap:.55rem;align-items:center;padding:.55rem;border-radius:10px;background:var(--gris-50)}.team-members span:last-child{display:flex;flex-direction:column;min-width:0}.team-members strong{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.team-members small{font-size:.72rem;color:var(--gris-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-chart-shell{padding:0;overflow:hidden}.org-chart-head{display:flex;justify-content:space-between;gap:1rem;padding:1.35rem 1.45rem;border-bottom:1px solid var(--gris-100);background:linear-gradient(135deg,var(--color-primario-suave),#fff 58%)}.org-chart-head h2{margin:.18rem 0 .15rem;font-size:1.15rem}.org-chart-head p{margin:0;color:var(--gris-600)}.org-chart-controls{display:flex;gap:.35rem;align-items:flex-start}.org-structure-editor{margin:.85rem 1.45rem;border:1px solid var(--gris-200);border-radius:var(--radius-md);background:var(--gris-50)}.org-structure-editor summary{cursor:pointer;padding:.75rem .9rem;font-weight:700;display:flex;gap:.45rem;align-items:center}.org-inline-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.75rem;padding:0 .9rem .9rem}.org-inline-form label,.stack-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.78rem;font-weight:700;color:var(--gris-800)}.org-inline-form select,.stack-form select,.stack-form input,.stack-form textarea{width:100%;border:1px solid var(--gris-200);border-radius:10px;padding:.7rem .75rem;background:#fff;color:var(--gris-950);font:inherit}.org-inline-form .btn{align-self:end}
.org-chart-viewport{min-height:520px;overflow:auto;background-image:radial-gradient(circle at 1px 1px,var(--gris-200) 1px,transparent 0);background-size:24px 24px}.org-chart-canvas{padding:4rem 3rem;min-width:max-content;transform-origin:top center;transition:transform .15s ease}.org-tree-roots{display:flex;gap:5rem;justify-content:center;align-items:flex-start}.org-tree-node{display:flex;flex-direction:column;align-items:center;position:relative}.org-person-node{width:178px;min-height:128px;padding:1rem .8rem;border:1px solid var(--gris-200);border-radius:var(--radius-lg);background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.06);display:flex;flex-direction:column;align-items:center;text-align:center}.org-person-node strong{font-size:.82rem;margin-top:.55rem}.org-person-node>span:not(.org-avatar){font-size:.74rem;color:var(--gris-600);margin-top:.12rem}.org-person-node small{font-size:.68rem;color:var(--color-primario);margin-top:.25rem}.org-tree-children{display:flex;gap:1.25rem;align-items:flex-start;padding-top:3.2rem;position:relative}.org-tree-children:before{content:"";position:absolute;top:0;left:50%;height:2rem;border-left:1px solid var(--gris-300,#cbd5e1)}.org-tree-children>.org-tree-node:before{content:"";position:absolute;top:-1.2rem;left:50%;height:1.2rem;border-left:1px solid var(--gris-300,#cbd5e1)}
.organization-two-column{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:1rem}.section-title-row h2{margin:.18rem 0 .15rem;font-size:1.15rem}.section-title-row p{margin:0;color:var(--gris-600)}.announcement-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}.announcement-card{padding:1rem;border:1px solid var(--gris-200);border-radius:14px;background:#fff}.announcement-card.important{background:linear-gradient(135deg,var(--color-primario-suave),#fff 70%);border-color:color-mix(in srgb,var(--color-primario) 20%,var(--gris-200))}.announcement-meta{display:flex;justify-content:space-between;gap:1rem;color:var(--gris-400);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.announcement-card h3{margin:.5rem 0 .3rem;font-size:.98rem}.announcement-card p{margin:0;color:var(--gris-600);font-size:.84rem}.announcement-card footer{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--gris-100);margin-top:.8rem;padding-top:.65rem;color:var(--gris-400);font-size:.72rem}.organization-admin-card{align-self:start;position:sticky;top:86px}.organization-admin-card h2{margin:.18rem 0 .1rem}.organization-admin-card>p{color:var(--gris-600);margin:.1rem 0 1rem}.stack-form{display:flex;flex-direction:column;gap:.75rem}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.toggle-row{flex-direction:row!important;align-items:center!important;font-weight:500!important}.toggle-row input{width:auto!important}.celebration-list{display:flex;flex-direction:column;gap:.65rem;margin-top:1rem}.celebration-list article{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.8rem;border:1px solid var(--gris-200);border-radius:13px}.celebration-list article>div:nth-child(2){display:flex;flex-direction:column}.celebration-list article>div:nth-child(2) span{color:var(--gris-500,#64748b);font-size:.78rem}.celebration-date{width:48px;height:50px;border-radius:var(--radius-md);background:var(--color-primario-suave);color:var(--color-primario);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.celebration-date strong{font-size:1rem}.celebration-date span{font-size:.62rem;font-weight:700;margin-top:.2rem}.semantic-badge{border-radius:var(--radius-pill);padding:.35rem .6rem;font-size:.68rem;font-weight:700}.semantic-badge.info{background:var(--azul-suave);color:var(--azul)}.semantic-badge.success{background:var(--verde-suave);color:var(--verde)}
.organization-dashboard-strip{margin:1rem 0;padding:1.1rem 1.2rem;border:1px solid var(--gris-200);border-radius:18px;background:linear-gradient(135deg,var(--color-primario-suave),#fff 60%);box-shadow:var(--sombra)}.organization-dashboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.organization-dashboard-head h2{margin:.15rem 0 0;font-size:1rem}.organization-dashboard-head a{font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:.2rem}.organization-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:.8rem}.org-dash-item{display:flex;align-items:center;gap:.65rem;padding:.7rem;border:1px solid rgba(255,255,255,.7);border-radius:var(--radius-md);background:rgba(255,255,255,.72)}.org-dash-icon{width:34px;height:34px;border-radius:10px;background:#fff;color:var(--color-primario);display:flex;align-items:center;justify-content:center;flex:none}.org-dash-item div{display:flex;flex-direction:column;min-width:0}.org-dash-item strong{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-dash-item small{font-size:.72rem;color:var(--gris-500,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.module-hero{flex-direction:column}.organization-directory,.team-grid,.organization-two-column{grid-template-columns:1fr}.team-members{grid-template-columns:1fr}.org-inline-form{grid-template-columns:1fr}.organization-admin-card{position:static}.organization-dashboard-grid{grid-template-columns:1fr}.org-chart-head{flex-direction:column}.org-tree-roots{gap:2rem}}
@media(max-width:600px){.module-hero{padding:1.2rem}.module-hero h1{font-size:1.45rem}.organization-toolbar{align-items:stretch;flex-direction:column}.organization-count{padding-left:.2rem}.directory-person-card{align-items:flex-start}.directory-person-card .btn{display:none}.section-tab{padding:.55rem .65rem}.org-chart-canvas{padding:2.5rem 1rem}.form-grid-2{grid-template-columns:1fr}.celebration-list article{grid-template-columns:auto 1fr}.semantic-badge{grid-column:2;justify-self:start}}

/* Primitivas globales incorporadas en v2.1.0 */
.segmented-control{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem;border:1px solid var(--gris-200);border-radius:var(--radius-md);background:var(--gris-50);margin-bottom:1rem}.segment-option{border:0;background:transparent;color:var(--gris-400);padding:.58rem .85rem;border-radius:9px;font:inherit;font-weight:700;cursor:pointer}.segment-option:hover{color:var(--gris-800);background:#fff}.segment-option.active{background:#fff;color:var(--color-primario);box-shadow:0 1px 3px rgba(15,23,42,.08),inset 0 0 0 1px color-mix(in srgb,var(--color-primario) 18%,transparent)}
.expediente-section-tabs{margin-top:.15rem;margin-bottom:1rem}

/* ==========================================================
   v2.1.0.1 — Organización: dark mode + comunicados simples
   ========================================================== */
.announcement-footer-actions{display:flex;align-items:center;gap:.65rem}.inline-pin-form{margin:0}.announcement-pin-action{appearance:none;border:0;background:transparent;color:var(--primary);font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;padding:.18rem .25rem;border-radius:7px}.announcement-pin-action:hover{background:var(--color-primario-suave)}.announcement-card.pinned{border-color:color-mix(in srgb,var(--color-primario) 28%,var(--gris-200));box-shadow:inset 3px 0 0 var(--color-primario)}
.organization-admin-card input[type="date"]{min-height:44px}.organization-admin-card [hidden]{display:none!important}

html[data-theme="dark"] .module-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primario) 20%,var(--surface-card)) 0%,var(--surface-card) 62%)!important;border-color:var(--line-soft)!important;color:var(--text-main)!important}
html[data-theme="dark"] .module-hero p{color:var(--text-muted)!important}
html[data-theme="dark"] .section-tabs,html[data-theme="dark"] .organization-search,html[data-theme="dark"] .directory-person-card,html[data-theme="dark"] .org-person-node,html[data-theme="dark"] .announcement-card{background:var(--surface-card)!important;border-color:var(--line-soft)!important;color:var(--text-main)!important}
html[data-theme="dark"] .section-tab{color:var(--text-muted)!important}html[data-theme="dark"] .section-tab:hover{background:var(--surface-elevated)!important;color:var(--text-main)!important}html[data-theme="dark"] .section-tab.active{background:color-mix(in srgb,var(--color-primario) 22%,var(--surface-card))!important;color:color-mix(in srgb,var(--color-primario) 72%,white)!important}html[data-theme="dark"] .section-tab em{background:var(--surface-elevated)!important;color:var(--text-main)!important}
html[data-theme="dark"] .organization-search input{color:var(--text-main)!important}html[data-theme="dark"] .organization-search{color:var(--text-muted)!important}
html[data-theme="dark"] .directory-person-main strong,html[data-theme="dark"] .team-members strong,html[data-theme="dark"] .org-person-node strong,html[data-theme="dark"] .announcement-card h3,html[data-theme="dark"] .organization-admin-card h2,html[data-theme="dark"] .section-title-row h2{color:var(--text-main)!important}
html[data-theme="dark"] .directory-person-main span,html[data-theme="dark"] .directory-person-main small,html[data-theme="dark"] .team-card-head p,html[data-theme="dark"] .team-members small,html[data-theme="dark"] .org-person-node>span:not(.org-avatar),html[data-theme="dark"] .announcement-card p,html[data-theme="dark"] .organization-admin-card>p,html[data-theme="dark"] .section-title-row p,html[data-theme="dark"] .organization-count{color:var(--text-muted)!important}
html[data-theme="dark"] .team-members>div,html[data-theme="dark"] .org-structure-editor{background:var(--surface-elevated)!important;border-color:var(--line-soft)!important}
html[data-theme="dark"] .org-chart-head{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primario) 17%,var(--surface-card)),var(--surface-card) 62%)!important;border-color:var(--line-soft)!important}
html[data-theme="dark"] .org-chart-viewport{background-color:var(--surface-app)!important;background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text-muted) 20%,transparent) 1px,transparent 0)!important}
html[data-theme="dark"] .announcement-card.important{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primario) 18%,var(--surface-card)),var(--surface-card) 72%)!important}
html[data-theme="dark"] .announcement-card footer{border-color:var(--line-soft)!important;color:var(--text-muted)!important}
html[data-theme="dark"] .organization-admin-card .stack-form label,html[data-theme="dark"] .org-inline-form label{color:var(--text-main)!important}
html[data-theme="dark"] .organization-admin-card .stack-form input,html[data-theme="dark"] .organization-admin-card .stack-form select,html[data-theme="dark"] .organization-admin-card .stack-form textarea,html[data-theme="dark"] .org-inline-form select{background:var(--surface-elevated)!important;border-color:var(--line-soft)!important;color:var(--text-main)!important}
html[data-theme="dark"] .organization-dashboard-strip{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primario) 17%,var(--surface-card)),var(--surface-card) 65%)!important;border-color:var(--line-soft)!important}
html[data-theme="dark"] .org-dash-item{background:var(--surface-elevated)!important;border-color:var(--line-soft)!important;color:var(--text-main)!important}html[data-theme="dark"] .org-dash-icon{background:var(--surface-card)!important}
@media(max-width:600px){.announcement-footer-actions{align-items:flex-end;flex-direction:column;gap:.2rem}.organization-admin-card{overflow:hidden}.organization-admin-card .stack-form{min-width:0}.organization-admin-card .stack-form>*{min-width:0}}

/* ============================================================
   v2.1.1 · White Label & Theme System
   Tokens globales + Settings Experience
   ============================================================ */
:root{
  --surface-app:var(--gris-50);
  --surface-card:#fff;
  --surface-elevated:#f8fafc;
  --surface-subtle:#f1f5f9;
  --text-main:var(--gris-950);
  --text-muted:var(--gris-600);
  --line-soft:var(--gris-200);
  --brand-soft:color-mix(in srgb,var(--color-primario) 11%,white);
  --brand-softer:color-mix(in srgb,var(--color-primario) 5%,white);
  --brand-on-primary:#fff;
  --focus-ring:color-mix(in srgb,var(--color-primario) 22%,transparent);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --shadow-soft:0 12px 34px rgba(15,23,42,.06);
}
html[data-theme="dark"]{
  --brand-soft:color-mix(in srgb,var(--color-primario) 20%,var(--surface-card));
  --brand-softer:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card));
  --focus-ring:color-mix(in srgb,var(--color-primario) 28%,transparent);
}

/* Garantía transversal: componentes base consumen tema, no blanco fijo. */
html[data-theme="dark"] .section-tabs,
html[data-theme="dark"] .segmented-control,
html[data-theme="dark"] .settings-page .card,
html[data-theme="dark"] .tabla-wrap,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .preview-card{
  background:var(--surface-card)!important;
  border-color:var(--line-soft)!important;
  color:var(--text-main)!important;
}
html[data-theme="dark"] .tabs{border-bottom-color:var(--line-soft)!important}
html[data-theme="dark"] .tab{color:var(--text-muted)!important}
html[data-theme="dark"] .tab.active{color:color-mix(in srgb,var(--color-primario) 72%,white)!important;border-color:var(--color-primario)!important}
html[data-theme="dark"] .tab .conteo{background:var(--surface-elevated)!important;color:var(--text-muted)!important}
html[data-theme="dark"] .tab.active .conteo{background:var(--brand-soft)!important;color:color-mix(in srgb,var(--color-primario) 72%,white)!important}
html[data-theme="dark"] .sidebar-logo span,
html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .card strong{color:var(--text-main)}

.settings-page{display:grid;gap:1.15rem;max-width:1240px}
.settings-hero{margin-bottom:0!important;padding:1.45rem 1.6rem!important}
.settings-hero h1{margin:.15rem 0 .2rem;font-size:1.55rem;letter-spacing:-.025em}
.settings-hero p{margin:0;color:var(--text-muted)}
.settings-tabs{margin:0;position:sticky;top:68px;z-index:20;box-shadow:0 10px 28px rgba(15,23,42,.04)}
.settings-section{scroll-margin-top:135px;display:grid;gap:1rem}
.settings-section-heading{display:flex;justify-content:space-between;align-items:flex-end;padding:.2rem .15rem}
.settings-section-heading h2{margin:.12rem 0 .15rem;font-size:1.08rem;color:var(--text-main)}
.settings-section-heading p{margin:0;color:var(--text-muted);font-size:.86rem}
.brand-studio-v2{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);gap:1rem;align-items:start}
.brand-editor-v2{padding:0;overflow:hidden}
.brand-editor-v2 form{display:grid}
.settings-block{padding:1.35rem;border-bottom:1px solid var(--line-soft)}
.settings-block:last-of-type{border-bottom:0}
.settings-block-title{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:1rem}
.settings-block-title>span{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:10px;background:var(--brand-soft);color:var(--color-primario);font-size:.7rem;font-weight:700}
.settings-block-title h3{margin:0;color:var(--text-main);font-size:.95rem}
.settings-block-title p{margin:.12rem 0 0;color:var(--text-muted);font-size:.78rem}
.brand-upload-grid-v2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.brand-upload-tile{display:grid;gap:.55rem;padding:.9rem;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface-elevated);cursor:pointer;min-width:0}
.brand-upload-label{font-weight:700;color:var(--text-main);font-size:.8rem}
.brand-upload-preview{display:flex;align-items:center;justify-content:center;min-height:92px;border:1px dashed color-mix(in srgb,var(--line-soft) 86%,var(--color-primario) 14%);border-radius:var(--radius-md);background:var(--surface-card);overflow:hidden;color:var(--text-muted)}
.brand-upload-preview.is-logo img{max-height:62px;max-width:86%;object-fit:contain}
.brand-upload-preview.is-icon{max-width:112px}.brand-upload-preview.is-icon img{width:62px;height:62px;object-fit:contain;border-radius:14px}
.brand-upload-preview>span{display:flex;gap:.45rem;align-items:center;font-size:.76rem}
.brand-upload-tile input[type=file]{font-size:.72rem;background:var(--surface-card)}
.brand-upload-tile small{color:var(--text-muted);font-size:.7rem}
.brand-color-grid-v2{grid-template-columns:repeat(3,minmax(0,1fr))}
.brand-token-note{display:flex;gap:.55rem;align-items:flex-start;padding:.75rem .85rem;border-radius:var(--radius-md);background:var(--brand-softer);color:var(--text-muted);font-size:.76rem;line-height:1.45}
.brand-token-note svg{color:var(--color-primario);flex:0 0 auto;margin-top:.1rem}
.brand-editor-actions{padding:1rem 1.35rem;background:var(--surface-elevated);display:flex;justify-content:flex-end}
.brand-live-preview{position:sticky;top:132px;padding:1rem;overflow:hidden}
.brand-preview-head{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start;margin-bottom:.8rem}
.brand-preview-head h3{font-size:.94rem;margin:.12rem 0 0;color:var(--text-main)}
.segmented-control{display:inline-flex;gap:.2rem;padding:.25rem;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-elevated)}
.segmented-control button{border:0;background:transparent;color:var(--text-muted);padding:.45rem .62rem;border-radius:9px;font:inherit;font-size:.75rem;font-weight:700;cursor:pointer}
.segmented-control button:hover{color:var(--text-main)}
.segmented-control button.is-active{background:var(--surface-card);color:var(--color-primario);box-shadow:0 1px 3px rgba(15,23,42,.08)}
html[data-theme="dark"] .segmented-control button.is-active{background:var(--brand-soft);color:color-mix(in srgb,var(--color-primario) 72%,white)}
.brand-preview-stage{min-height:420px;border:1px solid var(--line-soft);border-radius:var(--radius-lg);background:var(--surface-elevated);overflow:hidden;padding:1rem}
.brand-preview-pane{display:none;height:100%}.brand-preview-pane.is-active{display:block}
.mini-app-shell{height:385px;display:grid;grid-template-columns:72px 1fr;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface-card);overflow:hidden;box-shadow:var(--shadow-soft)}
.mini-app-sidebar{padding:.75rem .65rem;background:var(--surface-card);border-right:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;gap:.65rem}
.mini-brand-icon{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;color:var(--preview-brand,var(--color-primario));font-weight:700;overflow:hidden}
.mini-brand-icon img{width:100%;height:100%;object-fit:contain}.mini-app-sidebar>span{width:35px;height:6px;border-radius:var(--radius-pill);background:var(--surface-subtle)}
.mini-app-main{padding:.9rem;position:relative}.mini-app-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:.75rem;border-bottom:1px solid var(--line-soft);font-size:.72rem}.mini-app-top i{width:25px;height:25px;border-radius:50%;background:var(--surface-subtle)}
.mini-app-hero{margin-top:.85rem;padding:1rem;border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--preview-brand,var(--color-primario)) 14%,var(--surface-card)),var(--surface-card) 72%);display:grid;gap:.2rem}.mini-app-hero small{color:var(--preview-brand,var(--color-primario));font-weight:700;font-size:.58rem;letter-spacing:.08em}.mini-app-hero strong{font-size:.9rem}.mini-app-hero span{color:var(--text-muted);font-size:.65rem}.mini-app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:.75rem}.mini-app-grid i{height:82px;border-radius:var(--radius-md);border:1px solid var(--line-soft);background:var(--surface-card)}
.mini-app-main>button,.mini-login-card button,.mini-email-card button{border:0;border-radius:9px;background:var(--preview-brand,var(--color-primario));color:#fff;font-weight:700;font-size:.7rem;padding:.55rem .8rem;margin-top:.8rem}
.mini-login{height:385px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--surface-card)}
.mini-login-brand{padding:1.4rem;background:linear-gradient(150deg,color-mix(in srgb,var(--preview-brand,var(--color-primario)) 17%,var(--surface-card)),var(--surface-card));display:flex;flex-direction:column;justify-content:center}.mini-login-brand img{max-width:130px;max-height:52px;object-fit:contain}.mini-login-brand h4{margin:1rem 0 .3rem;font-size:.95rem}.mini-login-brand p{color:var(--text-muted);font-size:.68rem}.mini-login-card{margin:auto;width:76%;padding:1rem;border:1px solid var(--line-soft);border-radius:13px;background:var(--surface-card);box-shadow:var(--shadow-soft)}.mini-login-card>span{font-size:.58rem;color:var(--preview-brand,var(--color-primario));font-weight:700;text-transform:uppercase}.mini-login-card h4{margin:.35rem 0 .7rem}.mini-login-card>div{height:30px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);margin:.45rem 0;background:var(--surface-elevated)}
.mini-email-wrap{height:385px;padding:1.5rem;background:var(--surface-subtle);display:flex;align-items:center;justify-content:center}.mini-email-card{width:min(340px,100%);background:var(--surface-card);border:1px solid var(--line-soft);border-radius:14px;padding:1.25rem;box-shadow:var(--shadow-soft)}.mini-email-logo{min-height:48px;display:flex;align-items:center}.mini-email-logo img{max-width:150px;max-height:52px;object-fit:contain}.mini-email-card h4{font-size:1rem;margin:1rem 0 .35rem}.mini-email-card p{font-size:.72rem;color:var(--text-muted);line-height:1.55}.preview-test-email{margin-top:.75rem}
.module-control-card{display:flex;align-items:center;justify-content:space-between;gap:1rem}.module-control-main{display:flex;align-items:flex-start;gap:.85rem}.module-control-icon{width:42px;height:42px;border-radius:13px;background:var(--brand-soft);color:var(--color-primario);display:flex;align-items:center;justify-content:center;flex:0 0 auto}.module-control-main strong{display:block;margin-bottom:.18rem}.module-control-main p{margin:0 0 .45rem;color:var(--text-muted);font-size:.8rem;max-width:650px}.status-pill{display:inline-flex;padding:.2rem .55rem;border-radius:var(--radius-pill);font-size:.68rem;font-weight:700}.status-pill.is-standby{background:var(--ambar-suave);color:var(--ambar)}.status-pill.is-active{background:var(--verde-suave);color:var(--verde)}

/* White label controla todo acento no-semántico */
.section-kicker,.auth-eyebrow,.document-hub-kicker,.organization-kicker{color:var(--color-primario)!important}
.module-hero{background:linear-gradient(135deg,var(--brand-soft),var(--surface-card) 68%)!important;border-color:var(--line-soft)!important}
.btn-primario{background:var(--color-primario)!important;color:var(--brand-on-primary)!important}
input:focus,select:focus,textarea:focus{border-color:var(--color-primario)!important;box-shadow:0 0 0 3px var(--focus-ring)!important}

@media(max-width:1050px){.brand-studio-v2{grid-template-columns:1fr}.brand-live-preview{position:static}.brand-preview-stage{min-height:360px}.mini-app-shell,.mini-login,.mini-email-wrap{height:325px}}
@media(max-width:720px){.settings-page{gap:.9rem}.settings-hero{padding:1.1rem!important}.settings-tabs{top:66px}.brand-upload-grid-v2,.brand-color-grid-v2,.grid.grid-2{grid-template-columns:1fr}.brand-preview-head{display:grid}.brand-preview-switch{width:100%}.brand-preview-switch button{flex:1}.brand-preview-stage{padding:.65rem;min-height:330px}.mini-app-shell{grid-template-columns:52px 1fr;height:300px}.mini-app-grid i{height:58px}.mini-login{grid-template-columns:1fr;height:auto}.mini-login-brand{display:none}.mini-login-card{margin:1rem auto}.mini-email-wrap{height:300px;padding:.75rem}.module-control-card{align-items:flex-start;flex-direction:column}.module-control-card form,.module-control-card .btn{width:100%;justify-content:center}.settings-block{padding:1rem}}

/* v2.2.0 — Approval Core + Ausencias */
.timeoff-hero{margin-bottom:18px}.timeoff-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}.timeoff-card{padding:0;overflow:hidden}.section-card-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:22px 24px;border-bottom:1px solid var(--line-soft)}.section-card-head h2{margin:.18rem 0 .25rem}.section-card-head p{margin:0;color:var(--text-muted)}.compact-filter select{min-width:150px}.responsive-table-wrap{overflow:auto}.timeoff-table{width:100%;min-width:880px}.timeoff-table th,.timeoff-table td{padding:14px 16px;vertical-align:middle}.table-sub{display:block;color:var(--text-muted);margin-top:3px}.table-actions{white-space:nowrap;text-align:right}.btn-sm{padding:.48rem .7rem;font-size:.82rem}.status-badge{display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:.33rem .62rem;font-size:.76rem;font-weight:700;background:var(--surface-soft);border:1px solid var(--line-soft)}.status-pendiente{background:color-mix(in srgb,var(--warning,#d97706) 12%,var(--surface-card));color:var(--warning,#b45309)}.status-aprobada{background:color-mix(in srgb,var(--success,#16a34a) 12%,var(--surface-card));color:var(--success,#15803d)}.status-rechazada,.status-cancelada{background:color-mix(in srgb,var(--danger) 10%,var(--surface-card));color:var(--danger)}.timeoff-empty{min-height:230px}.modal-card-md{width:min(760px,100%)}.modal-card-sm{width:min(540px,100%)}.modal-close-clean{float:right;width:40px;height:40px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-main);font:600 1.45rem/1 system-ui;cursor:pointer}.modal-close-clean:hover{background:var(--surface-soft);color:var(--color-primario)}.modal-lead{color:var(--text-muted);margin:.25rem 0 18px}.timeoff-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:flex;flex-direction:column;gap:7px;font-weight:500}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-main);padding:.78rem .9rem}.field small{font-weight:500;color:var(--text-muted)}.field-span-2{grid-column:1/-1}html[data-theme="dark"] .timeoff-card,html[data-theme="dark"] .modal-card{background:var(--surface-card);color:var(--text-main)}
@media(max-width:800px){.timeoff-stats{grid-template-columns:1fr}.section-card-head{flex-direction:column}.compact-filter,.compact-filter select{width:100%}.timeoff-form{grid-template-columns:1fr}.field-span-2{grid-column:auto}}
.pagination-clean{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-top:1px solid var(--line-soft);color:var(--text-muted);font-size:.84rem}.pagination-clean>div{display:flex;gap:8px}@media(max-width:600px){.pagination-clean{align-items:stretch;flex-direction:column}.pagination-clean>div .btn{flex:1}}

/* v2.2.0.1 — Time Off responsive KPI + empty-state normalization */
.timeoff-stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:var(--ui-gap,16px) !important;
  align-items:stretch;
  margin:0 0 var(--space-4,18px) !important;
}
.timeoff-stats>.stat-card{
  width:auto !important;
  height:auto !important;
  min-height:118px !important;
  max-height:none !important;
  padding:18px 20px !important;
  justify-content:center;
  gap:4px;
}
.timeoff-stats>.stat-card>span{font-size:.82rem;color:var(--text-muted);font-weight:500}
.timeoff-stats>.stat-card>strong{font-size:1.65rem;line-height:1.05;color:var(--text-main);letter-spacing:-.025em}
.timeoff-stats>.stat-card>small{font-size:.76rem;color:var(--text-muted);line-height:1.35}
.timeoff-empty{
  min-height:220px;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  padding:34px 22px;
  color:var(--text-muted);
}
.timeoff-empty>svg{width:26px;height:26px;padding:12px;box-sizing:content-box;border-radius:var(--radius-lg);background:var(--surface-soft);color:var(--color-primario)}
.timeoff-empty>strong{font-size:.96rem;color:var(--text-main);margin-top:2px}
.timeoff-empty>span{max-width:520px;font-size:.82rem;line-height:1.5}
@media(max-width:980px){.timeoff-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.timeoff-stats>.stat-card:last-child{grid-column:1/-1}}
@media(max-width:620px){.timeoff-stats{grid-template-columns:1fr !important}.timeoff-stats>.stat-card:last-child{grid-column:auto}.timeoff-stats>.stat-card{min-height:104px !important;padding:15px 16px !important}}

/* v2.3.0 — Gastos y viáticos + captura asistida */
.expenses-hero{background:linear-gradient(120deg,color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 10%,var(--surface-card,#fff)),var(--surface-card,#fff) 62%);}
.expenses-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
.expenses-stats .stat-card{min-height:132px;}
.expenses-stats .stat-card strong{font-size:clamp(1.35rem,2vw,1.9rem);}
.expenses-card{margin-top:var(--space-5,24px);}
.expenses-ai-mark{color:var(--color-primario,var(--primario,#2563eb));font-weight:700;}
.expense-modal{max-width:1080px;}
.expense-capture-grid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr);gap:24px;margin-top:20px;align-items:start;}
.expense-scan-panel{position:sticky;top:18px;padding:18px;border-radius:24px;}
.glass-surface{background:color-mix(in srgb,var(--surface-card,#fff) 82%,transparent);border:1px solid color-mix(in srgb,var(--border,#dfe7f1) 70%,transparent);box-shadow:0 18px 50px rgba(15,23,42,.12);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);}
.expense-dropzone{min-height:240px;border:1px dashed color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 28%,var(--border,#dfe7f1));border-radius:var(--radius-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:9px;cursor:pointer;background:color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 4%,transparent);transition:.2s ease;}
.expense-dropzone:hover{border-color:color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 55%,var(--border,#dfe7f1));background:color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 7%,transparent);}
.expense-dropzone input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.expense-dropzone strong{font-size:1.02rem;color:var(--text-primary,#111827);}
.expense-dropzone span:last-child{font-size:.82rem;color:var(--text-muted,#64748b);line-height:1.45;max-width:250px;}
.expense-scan-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 12%,var(--surface-card,#fff));color:var(--color-primario,var(--primario,#2563eb));}
.expense-ai-button{width:100%;margin-top:12px;justify-content:center;}
.expense-ai-status{font-size:.78rem;color:var(--text-muted,#64748b);line-height:1.45;margin-top:12px;display:flex;gap:8px;align-items:flex-start;}
.ai-ready-dot,.ai-off-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex:0 0 auto}.ai-ready-dot{background:var(--verde,#16a34a)}.ai-off-dot{background:var(--text-muted,#94a3b8)}
.expense-ai-result{margin-top:12px;padding:12px 14px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 8%,var(--surface-card,#fff));border:1px solid color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 15%,var(--border,#dfe7f1));}
.expense-ai-result strong,.expense-ai-result span{display:block}.expense-ai-result span{font-size:.8rem;color:var(--text-muted,#64748b);margin-top:3px;}
.expense-fields{margin:0;}
.status-aprobado{background:color-mix(in srgb,var(--verde,#16a34a) 12%,transparent);color:var(--verde,#15803d)}
.status-rechazado{background:color-mix(in srgb,var(--rojo,#dc2626) 10%,transparent);color:var(--rojo,#b91c1c)}
.status-reembolsado{background:color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 10%,transparent);color:var(--color-primario,var(--primario,#2563eb))}
@media(max-width:1100px){.expenses-stats{grid-template-columns:repeat(2,minmax(0,1fr));}.expense-capture-grid{grid-template-columns:1fr}.expense-scan-panel{position:static}.expense-dropzone{min-height:180px}}
@media(max-width:640px){.expenses-stats{grid-template-columns:1fr}.expense-modal{border-radius:28px 28px 0 0}.expense-capture-grid{gap:16px}.expense-scan-panel{padding:14px;border-radius:var(--radius-xl)}.expense-fields{grid-template-columns:1fr}.expense-fields .field-span-2{grid-column:auto}}
html[data-theme="dark"] .expenses-hero{background:linear-gradient(120deg,color-mix(in srgb,var(--color-primario,var(--primario,#2563eb)) 14%,var(--surface,#111827)),var(--surface,#111827) 64%)}
html[data-theme="dark"] .glass-surface{background:color-mix(in srgb,var(--surface-card,#172033) 76%,transparent);border-color:rgba(255,255,255,.09);box-shadow:0 20px 56px rgba(0,0,0,.36)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.glass-surface{background:var(--surface-card,#fff)}}

/* v2.3.0.1 — AI Provider Hub */
.ai-settings-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:var(--space-4,1.5rem);align-items:start}.ai-provider-config,.ai-provider-status{padding:clamp(1.15rem,2vw,1.6rem)}.ai-config-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border-soft,var(--border,#e5e7eb));margin-bottom:1.15rem}.ai-config-head>div{display:flex;gap:.8rem;align-items:flex-start}.ai-config-head h3,.ai-provider-status h3{margin:0 0 .25rem}.ai-config-head p,.ai-provider-status>p{margin:0;color:var(--text-muted,#64748b)}.ai-spark{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand-primary,#2459a9) 11%,transparent);border:1px solid color-mix(in srgb,var(--brand-primary,#2459a9) 17%,transparent)}.switch-control{position:relative;display:inline-flex;width:48px;height:28px;flex:0 0 auto}.switch-control input{position:absolute;opacity:0;pointer-events:none}.switch-control span{position:absolute;inset:0;border-radius:var(--radius-pill);background:var(--surface-subtle,#e2e8f0);border:1px solid var(--border,#cbd5e1);transition:.2s}.switch-control span:after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;left:3px;top:3px;background:var(--surface,#fff);box-shadow:0 2px 7px rgba(15,23,42,.18);transition:.2s}.switch-control input:checked+span{background:var(--brand-primary,#2459a9);border-color:var(--brand-primary,#2459a9)}.switch-control input:checked+span:after{transform:translateX(20px)}.ai-routing-grid{margin-bottom:1rem}.ai-provider-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.ai-provider-card{padding:1rem;border:1px solid var(--border-soft,var(--border,#e5e7eb));border-radius:var(--radius-lg,18px);background:var(--surface-subtle,rgba(248,250,252,.75))}.ai-provider-title{min-height:44px;margin-bottom:.85rem}.ai-provider-title>div{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.ai-provider-title small{display:block;margin-top:.25rem;color:var(--text-muted,#64748b)}.ai-provider-card .form-grupo:last-child{margin-bottom:0}.ai-config-actions{display:flex;justify-content:flex-end;margin-top:1.15rem}.ai-secret-warning{margin-top:1rem}.ai-provider-status .section-kicker{display:block;margin-bottom:.35rem}.ai-connection-row{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--border-soft,var(--border,#e5e7eb))}.ai-connection-row>div:first-child{display:flex;flex-direction:column;gap:.18rem}.ai-connection-row span{font-size:.82rem;color:var(--text-muted,#64748b)}.ai-future-card{margin-top:1.15rem;padding:1rem;border-radius:var(--radius-lg,18px);background:linear-gradient(135deg,color-mix(in srgb,var(--brand-primary,#2459a9) 10%,var(--surface,#fff)),var(--surface,#fff) 68%);border:1px solid color-mix(in srgb,var(--brand-primary,#2459a9) 16%,var(--border,#e5e7eb))}.ai-future-card span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-primary,#2459a9);margin-bottom:.4rem}.ai-future-card strong{display:block;margin-bottom:.35rem}.ai-future-card p{margin:0;color:var(--text-muted,#64748b);font-size:.88rem;line-height:1.55}
[data-theme="dark"] .ai-provider-card{background:color-mix(in srgb,var(--surface-elevated,#111827) 88%,transparent)}[data-theme="dark"] .ai-future-card{background:linear-gradient(135deg,color-mix(in srgb,var(--brand-primary,#5b8def) 14%,var(--surface-elevated,#111827)),var(--surface-elevated,#111827) 70%)}
@media(max-width:980px){.ai-settings-grid{grid-template-columns:1fr}.ai-provider-cards{grid-template-columns:1fr 1fr}}@media(max-width:680px){.ai-provider-cards,.ai-routing-grid{grid-template-columns:1fr}.ai-config-head{align-items:center}.ai-connection-row{align-items:flex-start;flex-direction:column}.ai-connection-row>.flex{width:100%}.ai-connection-row form{flex:1}.ai-connection-row button{width:100%}.ai-config-actions .btn{width:100%}}

/* v2.3.0.2 — Design System consistency hotfix */
/* Gastos: retícula y densidad acordadas */
.expenses-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  margin:0 0 18px!important;
}
.expenses-stats>.stat-card{
  min-height:116px!important;
  padding:16px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:6px!important;
}
.expenses-stats>.stat-card>span{font-size:.8rem;color:var(--text-muted);font-weight:500}
.expenses-stats>.stat-card>strong{font-size:1.55rem!important;line-height:1.08;color:var(--text-main);letter-spacing:-.025em}
.expenses-stats>.stat-card>small{font-size:.74rem;line-height:1.35;color:var(--text-muted)}
.expenses-card{margin-top:0!important}
.expense-capture-grid{gap:20px!important;margin-top:18px!important}
.expense-fields{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px 16px!important;
  align-items:start;
}
.expense-fields .field{gap:6px}
.expense-fields .field-span-2{grid-column:1/-1}
.expense-scan-panel{
  background:var(--surface-card)!important;
  border:1px solid var(--line-soft)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.expense-modal{padding:24px!important}
.expense-modal .modal-lead{margin-bottom:0}

/* Configuración: la IA usa exactamente la misma iconografía/tokens que el resto. */
.ai-spark{
  color:var(--color-primario,var(--brand-primary,#2459a9));
}
.ai-spark svg{width:18px;height:18px;display:block;stroke:currentColor}
.settings-tabs .section-tab svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor}

/* Date Picker global — única experiencia de calendario para toda la app. */
.date-field-control{position:relative;display:flex;align-items:center;width:100%}
.date-field-control>.date-display-input{
  width:100%!important;
  min-height:44px;
  padding-right:44px!important;
  cursor:pointer;
  background:var(--surface-card,#fff)!important;
  color:var(--text-main,#0f172a)!important;
  border:1px solid var(--line-soft,#dfe7f1)!important;
  border-radius:var(--radius-md)!important;
}
.date-field-control>.date-display-input::placeholder{color:var(--text-muted,#94a3b8)}
.date-field-control>.date-display-input:focus{
  border-color:color-mix(in srgb,var(--color-primario,#2459a9) 55%,var(--line-soft,#dfe7f1))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primario,#2459a9) 12%,transparent)!important;
  outline:0;
}
.date-picker-trigger{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:10px;background:transparent;
  color:var(--text-muted,#64748b);display:grid;place-items:center;cursor:pointer;
}
.date-picker-trigger:hover,.date-picker-trigger:focus-visible{
  background:color-mix(in srgb,var(--color-primario,#2459a9) 8%,transparent);
  color:var(--color-primario,#2459a9);outline:0;
}
.date-picker-trigger svg{width:17px;height:17px;stroke:currentColor}
.glass-date-picker[hidden]{display:none!important}
.glass-date-picker{
  position:fixed;z-index:4200;width:320px;padding:14px;
  border:1px solid var(--glass-border,rgba(255,255,255,.72));
  border-radius:22px;
  background:color-mix(in srgb,var(--glass-bg-strong,rgba(255,255,255,.9)) 94%,transparent);
  box-shadow:0 26px 70px rgba(15,23,42,.22);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  color:var(--text-main,#0f172a);
  transform-origin:top center;
  animation:date-picker-in .16s ease-out;
}
@keyframes date-picker-in{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}}
.date-picker-head{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:5px;margin-bottom:10px}
.date-picker-head strong{text-align:center;font-size:.88rem;text-transform:capitalize}
.date-picker-nav{width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--text-muted);display:grid;place-items:center;cursor:pointer}
.date-picker-nav:hover,.date-picker-nav:focus-visible{background:color-mix(in srgb,var(--color-primario) 8%,transparent);color:var(--color-primario);outline:0}
.date-picker-nav svg{width:17px;height:17px;stroke:currentColor}
.date-picker-weekdays,.date-picker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.date-picker-weekdays{padding:2px 0 6px}
.date-picker-weekdays span{text-align:center;color:var(--text-muted);font-size:.67rem;font-weight:700;text-transform:uppercase}
.date-picker-day{
  aspect-ratio:1/1;border:0;border-radius:var(--radius-md);background:transparent;color:var(--text-main);
  display:grid;place-items:center;font-size:.78rem;font-weight:500;cursor:pointer;
}
.date-picker-day:hover,.date-picker-day:focus-visible{background:color-mix(in srgb,var(--color-primario) 9%,transparent);color:var(--color-primario);outline:0}
.date-picker-day.is-outside{color:color-mix(in srgb,var(--text-muted) 60%,transparent)}
.date-picker-day.is-today{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primario) 44%,transparent);color:var(--color-primario)}
.date-picker-day.is-selected{background:var(--color-primario)!important;color:#fff!important;box-shadow:0 7px 18px color-mix(in srgb,var(--color-primario) 24%,transparent)}
.date-picker-day:disabled{opacity:.28;cursor:not-allowed;background:transparent!important;color:var(--text-muted)!important;box-shadow:none!important}
.date-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.date-picker-action{border:0;background:transparent;color:var(--color-primario);font-size:.75rem;font-weight:700;padding:7px 8px;border-radius:9px;cursor:pointer}
.date-picker-action:hover,.date-picker-action:focus-visible{background:color-mix(in srgb,var(--color-primario) 8%,transparent);outline:0}
html[data-theme="dark"] .date-field-control>.date-display-input{background:var(--surface-card)!important;color:var(--text-main)!important}
html[data-theme="dark"] .glass-date-picker{background:color-mix(in srgb,var(--glass-bg-strong) 95%,transparent);box-shadow:0 28px 76px rgba(0,0,0,.45)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.glass-date-picker{background:var(--surface-card,#fff)}}
@media(max-width:1100px){.expenses-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){
  .expenses-stats{grid-template-columns:1fr!important;gap:12px!important}
  .expenses-stats>.stat-card{min-height:102px!important;padding:14px 16px!important}
  .expense-fields{grid-template-columns:1fr!important;gap:12px!important}
  .expense-fields .field-span-2{grid-column:auto}
  .expense-modal{padding:18px!important}
  .glass-date-picker{left:12px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom));top:auto!important;width:auto;border-radius:24px}
}

/* v2.3.0.3 — Actionable Notifications: glass, guía y CTA contextual */
.app-toast-actionable{width:100%;grid-template-columns:30px minmax(0,1fr) 26px;padding:.86rem .88rem}.app-toast-copy{min-width:0}.app-toast-actionable .app-toast-copy{gap:.42rem}.app-toast-action{margin-top:.16rem;display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.58rem .68rem;border:1px solid color-mix(in srgb,var(--color-primario) 24%,var(--glass-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primario) 8%,var(--glass-bg-strong));color:var(--color-primario);font-size:.7rem;font-style:normal;font-weight:700;text-decoration:none;transition:transform .16s ease,border-color .16s ease,background .16s ease}.app-toast-action>span{display:flex;align-items:center;gap:.42rem}.app-toast-action:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--color-primario) 42%,var(--glass-border));background:color-mix(in srgb,var(--color-primario) 12%,var(--glass-bg-strong))}.app-toast-action:focus-visible{outline:3px solid var(--brand-soft-strong);outline-offset:2px}.app-toast-action-help{display:flex;align-items:flex-start;gap:.38rem;margin-top:.04rem;color:var(--text-muted);font-size:.61rem;line-height:1.4;font-style:normal;font-weight:500}.app-toast-action-help svg{flex:0 0 auto;margin-top:.08rem}.app-toast-actionable::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-primario),transparent 76%)}
@media(max-width:620px){.app-toast-action{padding:.65rem .7rem;font-size:.72rem}.app-toast-action-help{font-size:.64rem}}

/* v2.3.0.4 — Contextual Quick Actions */
.global-create-grid strong{display:flex;align-items:center;gap:.42rem;min-width:0}
.global-create-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--color-primario);color:#fff;font-size:.58rem;line-height:1;font-weight:700;box-shadow:0 4px 12px color-mix(in srgb,var(--color-primario) 22%,transparent)}
.global-create-grid>a:focus-visible,.global-create-grid>button:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primario) 22%,transparent);outline-offset:2px}
@media (max-width:620px){.global-create-grid{grid-template-columns:1fr 1fr}.global-create-grid strong{font-size:.74rem}.global-create-grid small{line-height:1.32}}

/* =========================================================
   Design System · Autoservicio / Employee Experience
   Primitivas reutilizables: detail-grid, action-list, inline-alert
   ========================================================= */
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.detail-grid>div{min-width:0;padding:.9rem 1rem;border:1px solid var(--line-soft);border-radius:var(--radius-md,14px);background:var(--surface-soft)}.detail-grid span{display:block;margin-bottom:.28rem;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted)}.detail-grid strong{display:block;color:var(--text-main);font-size:.84rem;line-height:1.4;overflow-wrap:anywhere}
.quick-action-list{display:grid;gap:.55rem}.quick-action-row{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:.75rem;padding:.78rem .85rem;border:1px solid var(--line-soft);border-radius:var(--radius-md,14px);background:var(--surface-card);color:var(--text-main);text-decoration:none;transition:border-color .18s ease,transform .18s ease,background .18s ease}.quick-action-row:hover{border-color:color-mix(in srgb,var(--color-primario) 34%,var(--line-soft));background:var(--brand-soft-bg);transform:translateY(-1px)}.quick-action-row>svg:first-child{width:36px;height:36px;padding:9px;border-radius:var(--radius-md);background:var(--brand-soft-bg);color:var(--color-primario)}.quick-action-row span{display:flex;flex-direction:column;min-width:0}.quick-action-row strong{font-size:.8rem}.quick-action-row small{margin-top:.12rem;color:var(--text-muted);font-size:.69rem}.quick-action-row>svg:last-child{color:var(--text-muted)}
.app-inline-alert{display:flex;align-items:flex-start;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--line-soft);border-radius:var(--radius-md,14px);background:var(--surface-card);color:var(--text-main)}.app-inline-alert>svg{flex:0 0 auto;margin-top:.05rem}.app-inline-alert strong{display:block;font-size:.8rem}.app-inline-alert p{margin:.2rem 0 0;color:var(--text-muted);font-size:.72rem;line-height:1.45}.app-inline-alert.warning{border-color:color-mix(in srgb,#d97706 28%,var(--line-soft));background:color-mix(in srgb,#f59e0b 7%,var(--surface-card));color:#b45309}
@media(max-width:767px){.detail-grid{grid-template-columns:1fr}.quick-action-row{grid-template-columns:36px minmax(0,1fr) 16px}}

/* =========================================================
   Procurement · Design System alignment v2.5.1
   Superficies sólidas; glass sólo en capas flotantes globales.
   ========================================================= */
.procurement-page{color:var(--text-main)}
.procurement-topbar{align-items:flex-start;gap:1rem}
.procurement-tabs{
  display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.25rem;padding:.3rem;
  background:var(--surface-soft);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg,18px)
}
.procurement-tabs a{
  display:flex;align-items:center;gap:.5rem;padding:.68rem .9rem;
  border-radius:var(--radius-md,12px);color:var(--text-muted);
  font-weight:500;text-decoration:none;transition:background .16s ease,color .16s ease,box-shadow .16s ease
}
.procurement-tabs a:hover{background:color-mix(in srgb,var(--surface-card) 72%,transparent);color:var(--text-main)}
.procurement-tabs a.active{
  background:var(--surface-card);color:var(--text-main);
  box-shadow:0 1px 3px rgba(15,23,42,.08)
}
.badge-count{
  display:inline-flex;min-width:20px;height:20px;padding:0 6px;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);background:var(--color-primario);color:#fff;font-size:.72rem
}
.procurement-page .card{background:var(--surface-card);border-color:var(--line-soft);color:var(--text-main)}
.procurement-page .texto-muted,.procurement-page .card-header p{color:var(--text-muted)}
.procurement-form-card,.procurement-detail-card{margin-bottom:1.25rem}
.procurement-form{display:grid;gap:1.25rem}
.form-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.form-grid-2 .span-2{grid-column:1/-1}

/* Todos los controles de Compras heredan la geometría del Design System. */
.procurement-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.procurement-page select,
.procurement-page textarea{
  width:100%;min-height:44px;padding:.68rem .82rem;
  border:1px solid var(--line-soft)!important;border-radius:var(--radius-md,12px)!important;
  background:var(--surface-card)!important;color:var(--text-main)!important;
  box-shadow:none;outline:0;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease
}
.procurement-page textarea{min-height:88px;resize:vertical}
.procurement-page input::placeholder,.procurement-page textarea::placeholder{color:var(--text-muted)}
.procurement-page input:focus,.procurement-page select:focus,.procurement-page textarea:focus{
  border-color:color-mix(in srgb,var(--color-primario) 48%,var(--line-soft))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primario) 11%,transparent)!important
}
.procurement-page input[type="file"]{
  width:100%;padding:.55rem;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);
  background:var(--surface-card);color:var(--text-main)
}
.procurement-page label{color:var(--text-main)}
.procurement-page hr{border:0;border-top:1px solid var(--line-soft);margin:1rem 0}

.procurement-lines{border-top:1px solid var(--line-soft);padding-top:1rem}
.procurement-lines-head{margin-bottom:.8rem}.procurement-lines-head h3{margin:0}
.procurement-line{
  display:grid;grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(86px,.55fr) minmax(90px,.55fr) minmax(120px,.7fr) minmax(120px,.7fr);
  gap:.65rem;align-items:end;padding:.7rem 0;border-bottom:1px solid var(--line-soft)
}
.procurement-line .field{min-width:0}.procurement-line-optional label:empty{display:none}
.procurement-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1rem 0}
.procurement-summary-grid>div{
  padding:.9rem;border:1px solid var(--line-soft);border-radius:var(--radius-md,14px);background:var(--surface-soft)
}
.procurement-summary-grid small{display:block;color:var(--text-muted);margin-bottom:.25rem}.procurement-summary-grid strong{font-size:1rem}
.approval-timeline{margin:1rem 0;padding-top:1rem;border-top:1px solid var(--line-soft)}
.approval-timeline h3{margin:0 0 .8rem}.approval-step{display:flex;gap:.75rem;position:relative;padding:0 0 .85rem}
.approval-dot{width:10px;height:10px;border-radius:50%;background:var(--color-primario);margin-top:.35rem;flex:0 0 auto}
.approval-step div{display:grid;gap:.12rem}.approval-step small{color:var(--text-muted)}
.approval-inline-form{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}.approval-inline-form input{min-width:260px}
.procurement-doc-list,.supplier-list,.rule-list{display:grid;gap:.55rem}
.document-row,.supplier-row,.rule-row{
  display:flex;align-items:center;gap:.75rem;padding:.8rem;border:1px solid var(--line-soft);
  border-radius:var(--radius-md,14px);text-decoration:none;color:var(--text-main);background:var(--surface-card)
}
.document-row>svg,.supplier-row>svg,.rule-row>svg{flex:0 0 auto}
.document-row span,.supplier-row span:nth-child(2),.rule-row>div{display:grid;gap:.12rem;min-width:0;flex:1}
.document-row small,.supplier-row small,.rule-row small,.mini-record small{color:var(--text-muted)}
.supplier-row.active{border-color:color-mix(in srgb,var(--color-primario) 52%,var(--line-soft));background:var(--brand-soft-bg)}
.supplier-avatar{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-md);
  background:var(--surface-soft);color:var(--text-main);font-weight:700
}
.procurement-two-col{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.5fr);gap:1.1rem}
.inline-create{margin-bottom:1rem}.inline-create>summary{list-style:none;width:max-content}.inline-create>summary::-webkit-details-marker{display:none}
.supplier-section{border-top:1px solid var(--line-soft);padding:1rem 0}.supplier-section>summary{cursor:pointer;font-weight:700;margin-bottom:.8rem}
.status-strip{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem}
.mini-record{display:grid;gap:.15rem;padding:.65rem 0;border-top:1px solid var(--line-soft)}
.rule-row{justify-content:space-between}.rule-row form{margin-left:auto}.form-stack{display:grid;gap:.85rem}
.form-stack label,.form-grid-2 label{display:grid;gap:.4rem}.procurement-detail-header{align-items:flex-start}

/* Empty states: icono, título y explicación con separación real. */
.procurement-page .empty-state{
  min-height:120px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:.45rem;text-align:center;padding:1.5rem;color:var(--text-muted)
}
.procurement-page .empty-state>svg{
  display:block;flex:0 0 auto;margin:0 0 .2rem;color:var(--text-muted)
}
.procurement-page .empty-state>strong{display:block;color:var(--text-main);line-height:1.3}
.procurement-page .empty-state>span{display:block;max-width:560px;line-height:1.5;color:var(--text-muted)}
.procurement-page .supplier-detail .empty-state{min-height:190px}

/* Dark mode: no fondos blancos ni fallbacks light dentro de Procurement. */
html[data-theme="dark"] .procurement-tabs{
  background:var(--surface-soft);border-color:var(--line-soft)
}
html[data-theme="dark"] .procurement-tabs a{color:var(--text-muted)}
html[data-theme="dark"] .procurement-tabs a.active{
  background:var(--surface-card);color:var(--text-main);box-shadow:0 1px 3px rgba(0,0,0,.28)
}
html[data-theme="dark"] .procurement-page .card,
html[data-theme="dark"] .document-row,
html[data-theme="dark"] .supplier-row,
html[data-theme="dark"] .rule-row,
html[data-theme="dark"] .procurement-page input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .procurement-page select,
html[data-theme="dark"] .procurement-page textarea{background:var(--surface-card)!important;color:var(--text-main)!important;border-color:var(--line-soft)!important}
html[data-theme="dark"] .procurement-summary-grid>div,
html[data-theme="dark"] .supplier-avatar{background:var(--surface-soft)}

@media(max-width:1100px){
  .procurement-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .procurement-line .line-description{grid-column:1/-1}
  .procurement-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .procurement-two-col{grid-template-columns:1fr}
}
@media(max-width:700px){
  .form-grid-2,.procurement-summary-grid,.procurement-line{grid-template-columns:1fr}
  .form-grid-2 .span-2,.procurement-line .line-description{grid-column:auto}
  .procurement-tabs{overflow-x:auto;flex-wrap:nowrap}
  .procurement-tabs a{white-space:nowrap}
  .approval-inline-form{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .approval-inline-form input{grid-column:1/-1;min-width:0}
  .procurement-topbar .btn{width:100%;justify-content:center}
}

/* v2.5.3 · Release Manager integrity */
.release-integrity-line{display:flex;align-items:center;gap:.35rem;margin-top:.28rem;color:var(--text-muted);font-size:.68rem}
.release-integrity-line svg{flex:0 0 auto;color:var(--color-primario)}
.release-integrity-line code{padding:.12rem .35rem;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--surface-soft);color:var(--text-main);font-size:.64rem}

/* v2.5.3 · Supplier categories */
.procurement-category-options{display:flex;flex-wrap:wrap;gap:.55rem}
.procurement-category-option{display:inline-flex!important;align-items:center;gap:.45rem;padding:.55rem .7rem;border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:var(--surface-soft);cursor:pointer}
.procurement-category-option input{width:16px!important;min-height:16px!important;margin:0}
.procurement-category-option span{font-size:.74rem;font-weight:500;color:var(--text-main)}

.procurement-supplier-search{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem}
.procurement-supplier-search input{flex:1;min-width:0}
@media(max-width:620px){.procurement-supplier-search{display:grid;grid-template-columns:1fr}.procurement-supplier-search .btn{width:100%;justify-content:center}}

/* =========================================================
   v2.5.4 · Procurement UI contract
   Aplica la regla global de formularios + Actionable Guidance.
   ========================================================= */
.procurement-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.procurement-page select,
.procurement-page textarea{
  border-radius:var(--radius-md,12px)!important;
  min-height:44px!important;
}
.procurement-page input[type="number"]{
  border-radius:var(--radius-md,12px)!important;
}
.procurement-page .status-strip>input,
.procurement-page .status-strip>select{
  border-radius:var(--radius-md,12px)!important;
}

/* Empty states: icono y copy son dos bloques separados y centrados entre sí. */
.procurement-page .procurement-empty-state{
  min-height:128px;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:1.5rem!important;
  text-align:left!important;
}
.procurement-page .procurement-empty-state .empty-state-icon{
  width:44px;height:44px;flex:0 0 44px;
  display:grid;place-items:center;
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:var(--surface-soft);
  color:var(--text-muted);
}
.procurement-page .procurement-empty-state .empty-state-icon svg{
  display:block;width:24px;height:24px;margin:0!important;
}
.procurement-page .procurement-empty-state .empty-state-copy{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  min-width:0;max-width:620px;
}
.procurement-page .procurement-empty-state .empty-state-copy strong{
  margin:0;color:var(--text-main);font-size:.84rem;line-height:1.35;
}
.procurement-page .procurement-empty-state .empty-state-copy span{
  margin:0;color:var(--text-muted);font-size:.74rem;line-height:1.5;
}

/* Actionable Guidance: sólo aparece cuando falta una dependencia/configuración. */
.procurement-page .field-guidance{
  display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;
  gap:10px;margin-top:8px;padding:10px 11px;
  border:1px solid color-mix(in srgb,var(--color-primario) 18%,var(--line-soft));
  border-radius:var(--radius-md,12px);
  background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-card));
  color:var(--text-main);
}
.procurement-page .field-guidance>svg{
  width:28px;height:28px;padding:6px;border-radius:9px;
  background:var(--brand-soft-bg);color:var(--color-primario);
  display:block;margin:0;
}
.procurement-page .field-guidance>div{
  display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;
}
.procurement-page .field-guidance strong{font-size:.72rem;line-height:1.35;color:var(--text-main)}
.procurement-page .field-guidance span{font-size:.66rem;line-height:1.45;color:var(--text-muted)}
.procurement-page .field-guidance a{
  display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;
  margin-top:4px;color:var(--color-primario);font-size:.67rem;font-weight:700;text-decoration:none;
}
.procurement-page .field-guidance a svg{width:13px;height:13px;flex:0 0 13px}
.procurement-page .field-guidance-block{margin:10px 0 14px}
.procurement-page select:disabled{
  opacity:.72;cursor:not-allowed;background:var(--surface-soft)!important;
}

@media(max-width:620px){
  .procurement-page .procurement-empty-state{justify-content:flex-start!important;padding:1.1rem!important}
  .procurement-page .field-guidance{grid-template-columns:26px minmax(0,1fr);gap:9px}
}


/* =========================================================
   v2.5.5 · Procurement onboarding + control alignment
   ========================================================= */
.procurement-header-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:.55rem;flex-wrap:wrap;
}
.procurement-help-trigger{
  display:inline-flex;align-items:center;justify-content:center;gap:.42rem;
}
.procurement-help-trigger svg{display:block;flex:0 0 auto}

/* Un bloque de guía puede crecer, pero nunca debe estirar el control de la columna vecina. */
.procurement-page .form-grid-2>label,
.procurement-page .form-grid-2>.field{
  align-self:start!important;
  align-content:start!important;
}
.procurement-page .form-grid-2>label{
  grid-auto-rows:max-content;
}
.procurement-page .form-grid-2>label>select,
.procurement-page .form-grid-2>.field>select{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
}
.procurement-page .form-grid-2>label>input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.procurement-page .form-grid-2>.field>input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
}
.procurement-page .field-guidance{
  align-self:start;
}

/* El tour es una extensión del onboarding global, no un sistema visual paralelo. */
.procurement-tour-shell .onboarding-card{
  max-width:520px;
}
.procurement-tour-shell .onboarding-top .eyebrow{
  color:var(--color-primario);
}
.procurement-tour-shell.has-target .onboarding-spotlight{
  border-radius:var(--radius-lg,18px);
}
html[data-theme="dark"] .procurement-tour-shell .onboarding-card{
  background:rgba(27,34,45,.95);
  border-color:rgba(255,255,255,.11);
}
@media(max-width:700px){
  .procurement-header-actions{width:100%;justify-content:stretch}
  .procurement-header-actions .btn{flex:1;justify-content:center}
}

/* =========================================================
   v2.5.6 · Design System Foundation v1
   Consolidación incremental de tokens globales.
   No elimina overrides históricos: establece una capa de compatibilidad
   para migrar componentes sin regresiones funcionales.
   ========================================================= */
:root{
  /* Brand vs. semantics: nunca asumir que el color de marca significa peligro. */
  --brand-primary:var(--color-primario);
  --brand-primary-soft:var(--color-primario-suave);
  /* DataViz 2.0: non-semantic series derive from White Label primary. */
  --chart-brand-1:var(--color-primario);
  --chart-brand-2:color-mix(in srgb,var(--color-primario) 72%,var(--surface-card));
  --chart-brand-3:color-mix(in srgb,var(--color-primario) 48%,var(--surface-card));
  --chart-brand-4:color-mix(in srgb,var(--color-primario) 28%,var(--surface-card));
  --chart-brand-soft:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card));
  --icon-emphasis-size:48px;
  --icon-emphasis-radius:15px;
  --icon-emphasis-bg:color-mix(in srgb,var(--color-primario) 10%,var(--surface-card));
  --icon-emphasis-fg:var(--color-primario);
  --semantic-success:var(--verde);
  --semantic-success-soft:var(--verde-suave);
  --semantic-danger:var(--rojo);
  --semantic-danger-soft:var(--rojo-suave);
  --semantic-warning:var(--ambar);
  --semantic-warning-soft:var(--ambar-suave);
  --semantic-info:var(--azul);
  --semantic-info-soft:var(--azul-suave);

  /* Geometry: escala corta y predecible. */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:999px;

  /* Compatibilidad con generaciones anteriores del Design System. */
  --radio:var(--radius-lg);
  --radio-sm:var(--radius-md);
  --ui-card-radius:var(--radius-lg);
  --ui-radius-panel:var(--radius-xl);

  /* Spacing: base 4px. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;

  /* Controles. 44px es la altura estándar de captura. */
  --control-height-sm:36px;
  --control-height-md:44px;
  --control-height-lg:48px;

  /* Tipografía semántica: los módulos deben migrar por rol, no inventar escalas. */
  --text-xs:.72rem;
  --text-sm:.80rem;
  --text-md:.875rem;
  --text-lg:1rem;
  --text-xl:1.2rem;
  --text-2xl:1.55rem;
  --line-tight:1.25;
  --line-normal:1.5;
  --line-relaxed:1.65;

  /* Surfaces y borders. Mantienen compatibilidad con White Label/Dark Mode. */
  --surface-raised:var(--surface-elevated);
  --surface-overlay:var(--surface-card);
  --border-subtle:var(--line-soft);
  --border-default:color-mix(in srgb,var(--text-muted) 26%,transparent);
  --border-strong:color-mix(in srgb,var(--text-muted) 42%,transparent);

  /* Elevation. Glass conserva su sistema independiente para overlays. */
  --shadow-xs:0 1px 2px rgba(15,23,42,.035);
  --shadow-sm:0 1px 2px rgba(15,23,42,.035),0 5px 18px rgba(15,23,42,.04);
  --shadow-md:0 12px 34px rgba(15,23,42,.06);
  --shadow-overlay:0 24px 70px rgba(15,23,42,.18);
  --sombra:var(--shadow-sm);
  --shadow-soft:var(--shadow-md);
}

html[data-theme="dark"]{
  --surface-overlay:var(--surface-elevated);
  --border-default:color-mix(in srgb,var(--text-muted) 35%,transparent);
  --border-strong:color-mix(in srgb,var(--text-muted) 50%,transparent);
  --shadow-xs:0 1px 2px rgba(0,0,0,.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,.18),0 7px 22px rgba(0,0,0,.16);
  --shadow-md:0 16px 38px rgba(0,0,0,.22);
  --shadow-overlay:0 28px 80px rgba(0,0,0,.36);
}

/* Componentes base de bajo riesgo: consumen tokens sin cambiar su semántica. */
.card{
  border-radius:var(--radius-lg);
  border-color:var(--border-subtle);
  box-shadow:var(--shadow-sm);
}

.btn{
  border-radius:var(--radius-md);
}
.btn-sm{
  border-radius:var(--radius-sm);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select{
  min-height:var(--control-height-md);
  border-radius:var(--radius-md);
}
textarea{
  border-radius:var(--radius-md);
}

.icon-badge,
.btn-icono-cabecera,
.notificacion-icono{
  border-radius:var(--radius-md);
}
.badge,
.notificacion-contador{
  border-radius:var(--radius-pill);
}

/* Focus transversal. No reemplaza estados específicos; garantiza foco visible. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px var(--focus-ring);
}

/* La reducción de movimiento forma parte del contrato base de accesibilidad. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
  }
}

/* =========================================================
   v2.5.7 · Fase 1.2 — Shell, Typography & Surfaces
   Calm Enterprise UX: jerarquía más clara, menos ruido de contenedores
   y roles semánticos reutilizables sin alterar la lógica de negocio.
   ========================================================= */
:root{
  /* Jerarquía tipográfica por rol. */
  --type-page-title:1.5rem;
  --type-section-title:1rem;
  --type-component-title:.875rem;
  --type-body:.875rem;
  --type-label:.8125rem;
  --type-meta:.75rem;
  --weight-page:700;
  --weight-section:700;
  --weight-component:500;

  /* Ritmo estructural. */
  --page-section-gap:var(--space-5);
  --panel-padding:var(--space-5);
  --panel-padding-compact:var(--space-4);
}

/* Shell: el workspace y su cabecera comparten una cadencia visual estable. */
.app-header{
  border-color:var(--border-subtle);
}
.content{
  color:var(--text-main);
}
.content > :where(.topbar,.page-heading){
  margin-bottom:var(--page-section-gap)!important;
}

/* Tipografía semántica transversal. */
:where(.topbar,.page-heading) h1{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-page-title);
  font-weight:var(--weight-page);
  letter-spacing:-.035em;
  line-height:1.18;
}
:where(.topbar,.page-heading) p{
  margin:var(--space-1) 0 0;
  color:var(--text-muted);
  font-size:var(--type-body);
  line-height:var(--line-normal);
}
.card-header h2,
.section-title-row h2{
  color:var(--text-main);
  font-size:var(--type-section-title);
  font-weight:var(--weight-section);
  letter-spacing:-.012em;
  line-height:1.3;
}
.module-eyebrow,
.spotlight-eyebrow,
.section-kicker,
.document-hub-kicker,
.organization-kicker{
  font-size:var(--type-meta);
  letter-spacing:.075em;
  line-height:1.2;
}

/*
 * Taxonomía de superficies:
 * .surface-panel = agrupador estructural, más calmado que una card autónoma.
 * .card conserva el contrato anterior para objetos independientes/interactivos.
 */
.surface-panel{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  padding:var(--panel-padding);
}
.surface-panel > .card-header{
  margin-bottom:var(--space-4);
}
.surface-panel .card-header + .tabla-wrap{
  margin-top:0;
}

/* Dashboard: bajar el ruido sin perder estructura. */
.dashboard-section{
}
.dashboard-section .accesos-rapidos{
  gap:var(--space-3);
}
.dashboard-section .acceso-rapido{
  min-height:56px;
  border-color:var(--border-subtle);
  background:var(--surface-subtle,var(--surface-card));
  border-radius:var(--radius-md);
}
.dashboard-section-secondary{
  background:color-mix(in srgb,var(--surface-card) 94%,var(--surface-app));
}
.dashboard-stats-row > .stat-card{
  box-shadow:var(--shadow-xs);
  border-color:var(--border-subtle);
}

/* Histórico/reportes: el encabezado adopta el mismo contrato del resto del producto. */
.report-page-heading h1{
  font-size:var(--type-page-title);
}

/* Dark mode hereda las nuevas superficies; sin crear una segunda estética. */
html[data-theme="dark"] .surface-panel{
  background:var(--surface-card);
  border-color:var(--border-subtle);
  box-shadow:var(--shadow-xs);
}
html[data-theme="dark"] .dashboard-section .acceso-rapido{
  background:var(--surface-subtle,var(--surface-elevated));
  border-color:var(--border-subtle);
}
html[data-theme="dark"] .dashboard-section-secondary{
  background:color-mix(in srgb,var(--surface-card) 92%,var(--surface-app));
}

@media(max-width:700px){
  :root{
    --type-page-title:1.35rem;
    --page-section-gap:var(--space-4);
    --panel-padding:var(--space-4);
  }
  .surface-panel{padding:var(--panel-padding)}
}

/* =========================================================
   v2.5.8 · Fase 1.3 — Global Shell & Interaction Foundations
   Contrato transversal para controles del shell. El movimiento
   expresivo se incorpora en Fase 2; aquí se normalizan estados,
   hit areas, foco y hooks semánticos.
   ========================================================= */
:root{
  --shell-control-size:44px;
  --shell-control-radius:var(--radius-md,12px);
  --shell-control-gap:.55rem;
  --shell-control-hover:color-mix(in srgb,var(--text-main) 5%,transparent);
  --shell-control-pressed:color-mix(in srgb,var(--text-main) 8%,transparent);
  --shell-control-active:color-mix(in srgb,var(--color-primario,var(--primario)) 9%,var(--surface-card));
}

.app-header{
  min-height:72px;
}
.cabecera-acciones{
  gap:var(--shell-control-gap);
}
.btn-icono-cabecera{
  width:var(--shell-control-size);
  height:var(--shell-control-size);
  min-width:var(--shell-control-size);
  min-height:var(--shell-control-size);
  border-radius:var(--shell-control-radius);
  color:var(--text-muted);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease;
}
@media (hover:hover){
  .btn-icono-cabecera:hover{
    background:var(--shell-control-hover);
    color:var(--text-main);
  }
}
.btn-icono-cabecera:active{
  background:var(--shell-control-pressed);
  transform:scale(.96);
}
.btn-icono-cabecera[aria-expanded="true"],
.notificaciones.abierto > .btn-icono-cabecera{
  background:var(--shell-control-active);
  color:var(--color-primario,var(--primario));
}
.btn-icono-cabecera:disabled,
.btn-icono-cabecera[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

/* Crear es la única acción del shell que conserva énfasis de marca suave. */
.global-create-trigger{
  background:color-mix(in srgb,var(--color-primario,var(--primario)) 9%,var(--surface-card));
  color:var(--color-primario,var(--primario));
}
@media (hover:hover){
  .global-create-trigger:hover{
    background:color-mix(in srgb,var(--color-primario,var(--primario)) 14%,var(--surface-card));
    color:var(--color-primario,var(--primario));
  }
}

/* Estado semántico preparado para Attention Motion de Fase 2. */
.notificaciones > [data-toggle-notificaciones][data-notification-state="unread"]{
  color:var(--text-main);
}
.notificaciones > [data-toggle-notificaciones][data-notification-state="unread"] svg{
  transform-origin:50% 10%;
}
.notificaciones.abierto > [data-toggle-notificaciones]{
  color:var(--color-primario,var(--primario));
}
.notificacion-contador{
  border-color:var(--surface-card);
  background:var(--color-primario,var(--primario));
}

/* Cuenta: mismo lenguaje de foco/hover que el resto del shell. */
.usuario-cabecera-btn{
  border-radius:var(--radius-md,12px);
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
@media (hover:hover){
  .usuario-cabecera-btn:hover{background:var(--shell-control-hover);}
}
.usuario-cabecera-btn[aria-expanded="true"]{background:var(--shell-control-active);}
.usuario-cabecera-btn > svg:last-child{transition:transform .16s ease;}
.usuario-cabecera-btn[aria-expanded="true"] > svg:last-child{transform:rotate(180deg);}

/* El menú/hamburguesa comparte la misma caja interactiva. */
.app-header-menu,.btn-menu-movil{flex:0 0 var(--shell-control-size);}

html[data-theme="dark"] .btn-icono-cabecera{
  color:var(--text-muted);
}
html[data-theme="dark"] .btn-icono-cabecera[aria-expanded="true"],
html[data-theme="dark"] .notificaciones.abierto > .btn-icono-cabecera{
  color:var(--color-primario,var(--primario));
}

@media(max-width:860px){
  .cabecera-acciones{gap:.35rem;}
  .btn-icono-cabecera{width:42px;height:42px;min-width:42px;min-height:42px;}
}

@media(prefers-reduced-motion:reduce){
  .btn-icono-cabecera,.usuario-cabecera-btn,.usuario-cabecera-btn>svg:last-child{
    transition:none!important;
  }
  .btn-icono-cabecera:active{transform:none!important;}
}

/* =========================================================
   v2.5.9 · Fase 2.1 — Motion Foundations & Microinteractions
   Movimiento con propósito: feedback, estado y orientación.
   ========================================================= */
:root{
  --motion-micro:160ms;
  --motion-ui:240ms;
  --motion-context:340ms;
  --motion-ease-standard:cubic-bezier(.2,.8,.2,1);
  --motion-ease-emphasized:cubic-bezier(.22,1,.36,1);
  --motion-distance-xs:2px;
  --motion-distance-sm:4px;
}

/* Iconografía interactiva del shell: misma física, distinta semántica. */
.btn-icono-cabecera > svg,
.global-create-trigger > svg,
.cabecera-command-trigger > svg,
.activity-center-footer svg,
.user-menu-action > svg,
.usuario-menu-panel > a > svg,
.usuario-menu-panel form button > svg{
  transition:transform var(--motion-micro) var(--motion-ease-standard),
             opacity var(--motion-micro) ease;
  transform-origin:center;
  will-change:transform;
}
@media (hover:hover){
  .global-create-trigger:hover > svg{transform:rotate(90deg) scale(1.04);}
  .cabecera-command-trigger:hover > svg{transform:scale(1.08) translateY(-1px);}
  .theme-toggle:hover .theme-icon-moon{transform:translate(-50%,-50%) rotate(-8deg) scale(1.04);}
  html[data-theme="dark"] .theme-toggle:hover .theme-icon-sun{transform:translate(-50%,-50%) rotate(12deg) scale(1.04);}
  .activity-center-footer a:hover svg{transform:translateX(var(--motion-distance-xs));}
  .usuario-menu-panel :is(a,button):hover > svg{transform:translateX(var(--motion-distance-xs));}
}

/* Theme toggle: el icono ya cambia de estado; ahora comparte los tokens globales. */
.theme-toggle .theme-icon{
  transition:opacity var(--motion-ui) ease,
             transform var(--motion-ui) var(--motion-ease-emphasized)!important;
}
html.theme-is-transitioning body,
html.theme-is-transitioning .app-header,
html.theme-is-transitioning .sidebar,
html.theme-is-transitioning .card,
html.theme-is-transitioning .surface-panel,
html.theme-is-transitioning .topbar-movil,
html.theme-is-transitioning .bottom-nav-movil,
html.theme-is-transitioning .notificaciones-panel,
html.theme-is-transitioning .usuario-menu-panel{
  transition:background-color var(--motion-context) ease,
             border-color var(--motion-context) ease,
             color var(--motion-context) ease,
             box-shadow var(--motion-context) ease!important;
}

/* Attention Motion — campana no leída.
   Ciclo largo y sutil: llama la atención sin convertirse en alarma visual. */
@keyframes rh-notification-ring{
  0%,4%,10%,100%{transform:rotate(0deg)}
  5%{transform:rotate(11deg)}
  6.5%{transform:rotate(-9deg)}
  8%{transform:rotate(6deg)}
  9%{transform:rotate(-3deg)}
}
@keyframes rh-notification-badge-pulse{
  0%,8%,100%{transform:scale(1)}
  4%{transform:scale(1.10)}
}
.notificaciones > [data-toggle-notificaciones][data-notification-state="unread"] > svg{
  animation:rh-notification-ring 4.8s ease-in-out infinite;
  transform-origin:50% 12%;
}
.notificaciones > [data-toggle-notificaciones][data-notification-state="unread"] .notificacion-contador{
  animation:rh-notification-badge-pulse 4.8s ease-in-out infinite;
  transform-origin:center;
}
.notificaciones.abierto > [data-toggle-notificaciones] > svg,
.notificaciones.abierto > [data-toggle-notificaciones] .notificacion-contador{
  animation-play-state:paused;
}

/* Menús flotantes: aparición física corta, sin dramatismo. */
.notificaciones-panel,
.usuario-menu-panel{
  transform-origin:top right;
  transition:opacity var(--motion-ui) ease,
             transform var(--motion-ui) var(--motion-ease-emphasized),
             visibility 0s linear var(--motion-ui);
}
.notificaciones:not(.abierto) > .notificaciones-panel,
.usuario-menu:not(.abierto) > .usuario-menu-panel{
  transform:translateY(-5px) scale(.985);
}
.notificaciones.abierto > .notificaciones-panel,
.usuario-menu.abierto > .usuario-menu-panel{
  transform:translateY(0) scale(1);
  transition-delay:0s;
}

/* Quick actions: el icono acompaña al hover, no la tarjeta completa. */
.global-create-grid :is(a,button) .global-create-icon,
.quick-action-row > svg:first-child{
  transition:transform var(--motion-micro) var(--motion-ease-standard),
             background-color var(--motion-micro) ease;
}
@media (hover:hover){
  .global-create-grid :is(a,button):hover .global-create-icon{transform:translateY(-2px) scale(1.03);}
  .quick-action-row:hover > svg:first-child{transform:translateY(-1px) scale(1.03);}
}

/* Botones globales: microfeedback táctil coherente. */
.btn:not(:disabled):not([aria-disabled="true"]){
  transition:background-color var(--motion-micro) ease,
             border-color var(--motion-micro) ease,
             color var(--motion-micro) ease,
             box-shadow var(--motion-micro) ease,
             transform var(--motion-micro) var(--motion-ease-standard);
}
.btn:not(:disabled):not([aria-disabled="true"]):active{transform:translateY(1px) scale(.99);}

/* Reduced motion: el estado continúa visible, desaparece la cinética. */
@media(prefers-reduced-motion:reduce){
  html.theme-is-transitioning body,
  html.theme-is-transitioning .app-header,
  html.theme-is-transitioning .sidebar,
  html.theme-is-transitioning .card,
  html.theme-is-transitioning .surface-panel,
  html.theme-is-transitioning .topbar-movil,
  html.theme-is-transitioning .bottom-nav-movil,
  html.theme-is-transitioning .notificaciones-panel,
  html.theme-is-transitioning .usuario-menu-panel,
  .theme-toggle .theme-icon,
  .btn-icono-cabecera > svg,
  .global-create-grid :is(a,button) .global-create-icon,
  .quick-action-row > svg:first-child,
  .btn{
    transition:none!important;
  }
  .notificaciones > [data-toggle-notificaciones][data-notification-state="unread"] > svg,
  .notificaciones > [data-toggle-notificaciones][data-notification-state="unread"] .notificacion-contador{
    animation:none!important;
  }
  .btn:not(:disabled):not([aria-disabled="true"]):active{transform:none!important;}
}

/* Ajuste de visibilidad para que la apertura no espere el delay de cierre. */
.notificaciones.abierto > .notificaciones-panel,
.usuario-menu.abierto > .usuario-menu-panel{
  visibility:visible;
  transition:opacity var(--motion-ui) ease,
             transform var(--motion-ui) var(--motion-ease-emphasized),
             visibility 0s linear 0s;
}

/* Navegación: respuesta mínima que confirma hover sin desplazar el layout. */
.nav-link > svg,
.bottom-nav-movil :is(a,button) > svg{
  transition:transform var(--motion-micro) var(--motion-ease-standard),
             color var(--motion-micro) ease;
  transform-origin:center;
}
@media (hover:hover){
  .nav-link:hover > svg{transform:translateX(2px);}
  .bottom-nav-movil :is(a,button):hover > svg{transform:translateY(-1px);}
}
@media(prefers-reduced-motion:reduce){
  .nav-link > svg,
  .bottom-nav-movil :is(a,button) > svg{transition:none!important;transform:none!important;}
}


/* =========================================================
   v2.5.10 · Navigation Tone & Quick Action Motion
   Navegación neutral por defecto; marca sólo para estado/acción.
   ========================================================= */
:root{
  --nav-foreground:var(--text-main,var(--gris-800));
  --nav-muted:var(--text-muted,var(--gris-400));
}

/* Sidebar desktop + Top Sheet móvil comparten la misma voz visual que
   el menú de usuario. Iconos heredan currentColor para evitar tonos paralelos. */
.sidebar .nav-link{
  color:var(--nav-foreground);
}
.sidebar .nav-link > svg{
  color:currentColor;
  opacity:.88;
}
.sidebar .nav-group-label{
  color:var(--nav-muted);
}
.sidebar .nav-link:hover{
  color:var(--nav-foreground);
  background:color-mix(in srgb,var(--nav-foreground) 5%,transparent);
}
.sidebar .nav-link.active{
  color:var(--color-primario);
  background:color-mix(in srgb,var(--color-primario) 10%,transparent);
}
.sidebar .nav-link.active > svg{opacity:1;}
html[data-theme="dark"] .sidebar .nav-link{
  color:var(--text-main);
}
html[data-theme="dark"] .sidebar .nav-link:hover{
  color:var(--text-main);
  background:color-mix(in srgb,var(--text-main) 7%,transparent);
}
html[data-theme="dark"] .sidebar .nav-link.active{
  color:color-mix(in srgb,var(--color-primario) 72%,white);
  background:color-mix(in srgb,var(--color-primario) 18%,transparent);
}

/* El + central confirma intención antes de desplegar Quick Actions:
   press -> compresión -> giro/impulso -> apertura del sheet. */
.bottom-nav-movil .bottom-nav-create-icon{
  transition:transform var(--motion-ui) var(--motion-ease-emphasized),
             box-shadow var(--motion-ui) ease,
             opacity var(--motion-micro) ease !important;
  transform-origin:center;
  will-change:transform;
}
.bottom-nav-movil .bottom-nav-create > span:last-child{
  transition:opacity var(--motion-micro) ease,color var(--motion-micro) ease;
}
body.global-create-activating .bottom-nav-movil .bottom-nav-create-icon{
  transform:scale(.91) rotate(38deg) !important;
  box-shadow:0 8px 24px color-mix(in srgb,var(--color-primario) 32%,transparent) !important;
}
body.global-create-activating .bottom-nav-movil .bottom-nav-create > span:last-child{
  opacity:.72;
}
/* El estado abierto conserva continuidad semántica sin un flash de desaparición. */
body.global-create-open .bottom-nav-create-icon{
  opacity:1 !important;
  transform:rotate(45deg) scale(.94) !important;
  transition:transform var(--motion-ui) var(--motion-ease-emphasized),opacity var(--motion-micro) ease !important;
}
body.global-create-open .bottom-nav-create > span:last-child{opacity:.55 !important;}

@media(prefers-reduced-motion:reduce){
  .bottom-nav-movil .bottom-nav-create-icon,
  .bottom-nav-movil .bottom-nav-create > span:last-child{transition:none!important;}
  body.global-create-activating .bottom-nav-movil .bottom-nav-create-icon,
  body.global-create-open .bottom-nav-create-icon{transform:none!important;}
}


/* =========================================================
   v2.5.11 · Navigation Tone & Mobile Motion Refinement
   ========================================================= */

/* 1) La navegación usa exactamente el foreground del menú de usuario.
      Se evita la reducción de opacidad que hacía que iconos/sidebar
      parecieran de una familia cromática distinta. */
.sidebar .nav-link:not(.active){
  color:var(--text-main,var(--gris-900)) !important;
}
.sidebar .nav-link:not(.active) > svg,
.sidebar .nav-link:not(.active) .nav-icon{
  color:var(--text-main,var(--gris-900)) !important;
  opacity:1 !important;
}
.sidebar .nav-group-label{
  color:var(--text-muted,var(--gris-400)) !important;
}
.sidebar .nav-link:not(.active):hover{
  color:var(--text-main,var(--gris-900)) !important;
  background:color-mix(in srgb,var(--text-main,var(--gris-900)) 5%,transparent) !important;
}
.sidebar .nav-link.active,
.sidebar .nav-link.active > svg,
.sidebar .nav-link.active .nav-icon{
  color:var(--color-primario) !important;
  opacity:1 !important;
}
html[data-theme="dark"] .sidebar .nav-link:not(.active),
html[data-theme="dark"] .sidebar .nav-link:not(.active) > svg,
html[data-theme="dark"] .sidebar .nav-link:not(.active) .nav-icon{
  color:var(--text-main) !important;
}

/* 2) El botón central permanece físicamente estable.
      Sólo el símbolo + responde al tap y al estado abierto. */
.bottom-nav-movil .bottom-nav-create-icon{
  transform:none !important;
  transition:box-shadow var(--motion-ui) ease,
             background-color var(--motion-micro) ease !important;
  will-change:auto;
}
.bottom-nav-movil .bottom-nav-create-icon > svg{
  transform-origin:center;
  will-change:transform;
  transition:transform 145ms var(--motion-ease-emphasized),
             opacity var(--motion-micro) ease !important;
}
body.global-create-activating .bottom-nav-movil .bottom-nav-create-icon{
  transform:none !important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--color-primario) 34%,transparent),
             0 3px 9px rgba(15,23,42,.14) !important;
}
body.global-create-activating .bottom-nav-movil .bottom-nav-create-icon > svg{
  transform:scale(.84) rotate(28deg) !important;
}
body.global-create-activating .bottom-nav-movil .bottom-nav-create > span:last-child{
  opacity:1 !important;
}
body.global-create-open .bottom-nav-create-icon{
  opacity:1 !important;
  transform:none !important;
}
body.global-create-open .bottom-nav-create-icon > svg{
  transform:rotate(45deg) scale(.92) !important;
}
body.global-create-open .bottom-nav-create > span:last-child{
  opacity:1 !important;
}

/* 3) Patrón común de entrada/salida para capas móviles.
      280 ms da presencia sin sentirse pesado. */
@media(max-width:860px){
  .sidebar{
    transition:
      transform 280ms var(--motion-ease-emphasized),
      opacity 200ms ease,
      visibility 0s linear 280ms !important;
  }
  .sidebar.abierto{
    transition:
      transform 280ms var(--motion-ease-emphasized),
      opacity 200ms ease,
      visibility 0s linear 0s !important;
  }
  .overlay-sidebar{
    transition:
      opacity 200ms ease,
      visibility 0s linear 280ms,
      -webkit-backdrop-filter 280ms ease,
      backdrop-filter 280ms ease !important;
  }
  .overlay-sidebar.abierto{
    transition:
      opacity 200ms ease,
      visibility 0s linear 0s,
      -webkit-backdrop-filter 280ms ease,
      backdrop-filter 280ms ease !important;
  }

  /* Quick Actions deja de aparecer de golpe.
     El sheet siempre existe visualmente, pero queda inert/oculto hasta abrir. */
  .global-create-sheet{
    display:block !important;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:
      opacity 200ms ease,
      visibility 0s linear 280ms !important;
  }
  .global-create-sheet.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:
      opacity 200ms ease,
      visibility 0s linear 0s !important;
  }
  .global-create-backdrop{
    opacity:0;
    -webkit-backdrop-filter:blur(0);
    backdrop-filter:blur(0);
    transition:
      opacity 200ms ease,
      -webkit-backdrop-filter 280ms ease,
      backdrop-filter 280ms ease !important;
  }
  .global-create-sheet.is-open .global-create-backdrop{
    opacity:1;
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
  }
  .global-create-panel{
    transform:translate3d(0,28px,0) scale(.99) !important;
    opacity:.98;
    transition:
      transform 280ms var(--motion-ease-emphasized),
      opacity 200ms ease !important;
    will-change:transform,opacity;
  }
  .global-create-sheet.is-open .global-create-panel{
    transform:translate3d(0,0,0) scale(1) !important;
    opacity:1;
  }
}

/* En desktop conservamos la aparición compacta, ahora también con salida real. */
@media(min-width:861px){
  .global-create-sheet{
    display:block !important;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity 180ms ease,visibility 0s linear 240ms !important;
  }
  .global-create-sheet.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:opacity 180ms ease,visibility 0s linear 0s !important;
  }
  .global-create-panel{
    opacity:0;
    transform:translate(-50%,-48%) scale(.985);
    transition:transform 240ms var(--motion-ease-emphasized),opacity 180ms ease !important;
  }
  .global-create-sheet.is-open .global-create-panel{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
}

@media(prefers-reduced-motion:reduce){
  .sidebar,
  .overlay-sidebar,
  .global-create-sheet,
  .global-create-backdrop,
  .global-create-panel,
  .bottom-nav-movil .bottom-nav-create-icon,
  .bottom-nav-movil .bottom-nav-create-icon > svg{
    transition:none !important;
  }
  body.global-create-activating .bottom-nav-movil .bottom-nav-create-icon > svg,
  body.global-create-open .bottom-nav-create-icon > svg{
    transform:none !important;
  }
}


/* =========================================================
   v2.5.12 · Subtle Motion & Unified Foreground
   Motion calibrado con referencia Fluent/Apple:
   transición de superficie ~250ms, breve, direccional y reversible.
   ========================================================= */
:root{
  --motion-surface:250ms;
  --motion-surface-fade:180ms;
  --motion-ease-surface:cubic-bezier(.2,.8,.2,1);
  --interactive-neutral:var(--text-main,var(--gris-950));
}

/* Shell global: hamburguesa, búsqueda, tema y campana comparten exactamente
   el mismo foreground neutral. El icono nunca introduce un gris paralelo. */
.app-header-menu,
.btn-menu-movil,
.btn-icono-cabecera,
.cabecera-command-trigger,
.theme-toggle,
.notificaciones > [data-toggle-notificaciones]{
  color:var(--interactive-neutral) !important;
}
.app-header-menu > svg,
.btn-menu-movil > svg,
.btn-icono-cabecera > svg,
.cabecera-command-trigger > svg,
.theme-toggle .theme-icon,
.notificaciones > [data-toggle-notificaciones] > svg{
  color:currentColor !important;
  opacity:1 !important;
}
@media(hover:hover){
  .app-header-menu:hover,
  .btn-menu-movil:hover,
  .btn-icono-cabecera:hover,
  .cabecera-command-trigger:hover,
  .theme-toggle:hover,
  .notificaciones > [data-toggle-notificaciones]:hover{
    color:var(--interactive-neutral) !important;
  }
}
/* Estados activos conservan semántica de marca; unread sigue distinguido por badge/motion. */
.btn-icono-cabecera[aria-expanded="true"],
.notificaciones.abierto > [data-toggle-notificaciones],
.app-header-menu[aria-expanded="true"],
.btn-menu-movil[aria-expanded="true"]{
  color:var(--color-primario,var(--primario)) !important;
}
html[data-theme="dark"] .app-header-menu,
html[data-theme="dark"] .btn-menu-movil,
html[data-theme="dark"] .btn-icono-cabecera,
html[data-theme="dark"] .cabecera-command-trigger,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .notificaciones > [data-toggle-notificaciones]{
  color:var(--interactive-neutral) !important;
}

/* Mobile surfaces: entrada y salida usan la MISMA trayectoria y easing.
   No hay cierre sólo por fade. */
@media(max-width:860px){
  /* Menú móvil Top Sheet: entra desde arriba y sale hacia arriba. */
  .sidebar{
    opacity:0 !important;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-14px) scale(.992) !important;
    transition:
      transform var(--motion-surface) var(--motion-ease-surface),
      opacity var(--motion-surface-fade) ease,
      visibility 0s linear var(--motion-surface) !important;
  }
  .sidebar.abierto{
    opacity:1 !important;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1) !important;
    transition:
      transform var(--motion-surface) var(--motion-ease-surface),
      opacity var(--motion-surface-fade) ease,
      visibility 0s linear 0s !important;
  }

  /* Overlay acompaña pero no sustituye el movimiento de la superficie. */
  .overlay-sidebar{
    display:block !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    -webkit-backdrop-filter:blur(0);
    backdrop-filter:blur(0);
    transition:
      opacity var(--motion-surface-fade) ease,
      -webkit-backdrop-filter var(--motion-surface) ease,
      backdrop-filter var(--motion-surface) ease,
      visibility 0s linear var(--motion-surface) !important;
  }
  .overlay-sidebar.abierto{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    transition:
      opacity var(--motion-surface-fade) ease,
      -webkit-backdrop-filter var(--motion-surface) ease,
      backdrop-filter var(--motion-surface) ease,
      visibility 0s linear 0s !important;
  }

  /* Acciones rápidas: entra desde abajo y sale por la misma ruta.
     Distancia corta: presencia sin efecto dramático. */
  .global-create-sheet{
    display:block !important;
    visibility:hidden;
    opacity:1 !important;
    pointer-events:none;
    transition:visibility 0s linear var(--motion-surface) !important;
  }
  .global-create-sheet.is-open{
    visibility:visible;
    pointer-events:auto;
    transition:visibility 0s linear 0s !important;
  }
  .global-create-backdrop{
    opacity:0 !important;
    -webkit-backdrop-filter:blur(0) !important;
    backdrop-filter:blur(0) !important;
    transition:
      opacity var(--motion-surface-fade) ease,
      -webkit-backdrop-filter var(--motion-surface) ease,
      backdrop-filter var(--motion-surface) ease !important;
  }
  .global-create-sheet.is-open .global-create-backdrop{
    opacity:1 !important;
    -webkit-backdrop-filter:blur(6px) !important;
    backdrop-filter:blur(6px) !important;
  }
  .global-create-panel{
    opacity:1 !important;
    transform:translate3d(0,18px,0) scale(.995) !important;
    transition:transform var(--motion-surface) var(--motion-ease-surface) !important;
    will-change:transform;
  }
  .global-create-sheet.is-open .global-create-panel{
    transform:translate3d(0,0,0) scale(1) !important;
  }
}

/* El + mantiene el feedback breve ya aprobado; sólo se mueve el símbolo. */
.bottom-nav-movil .bottom-nav-create-icon{
  transform:none !important;
}
.bottom-nav-movil .bottom-nav-create-icon > svg{
  transition:transform 145ms var(--motion-ease-standard) !important;
}
body.global-create-activating .bottom-nav-movil .bottom-nav-create-icon > svg{
  transform:scale(.88) rotate(22deg) !important;
}
body.global-create-open .bottom-nav-create-icon > svg{
  transform:rotate(45deg) scale(.94) !important;
}

/* Reduced motion: misma semántica, sin trayectoria ni espera visual. */
@media(prefers-reduced-motion:reduce){
  .sidebar,
  .overlay-sidebar,
  .global-create-sheet,
  .global-create-backdrop,
  .global-create-panel,
  .bottom-nav-movil .bottom-nav-create-icon > svg{
    transition:none !important;
  }
  .sidebar{transform:none !important;}
  .global-create-panel{transform:none !important;}
}


/* =========================================================
   v2.5.13 · Fase 2.2 — Component Motion & Interaction Feedback
   ========================================================= */
:root{
  --motion-component:180ms;
  --motion-component-emphasis:220ms;
  --motion-ease-component:cubic-bezier(.2,.8,.2,1);
  --motion-lift:-1px;
}

.tabs-global,
.tabs,
.tab-list{position:relative;}

.tabs-global :is(a,button),
.tabs :is(a,button),
.tab-list :is(a,button){
  transition:
    color var(--motion-component) ease,
    background-color var(--motion-component) ease,
    border-color var(--motion-component) ease,
    box-shadow var(--motion-component) ease !important;
}
.tabs-global :is(a,button)>svg,
.tabs :is(a,button)>svg,
.tab-list :is(a,button)>svg{
  transition:transform var(--motion-component) var(--motion-ease-component);
}
@media(hover:hover){
  .tabs-global :is(a,button):hover>svg,
  .tabs :is(a,button):hover>svg,
  .tab-list :is(a,button):hover>svg{transform:translateY(-1px);}
}

:is(.card-link,.action-card,.quick-card,[data-action-card]){
  transition:
    transform var(--motion-component-emphasis) var(--motion-ease-component),
    box-shadow var(--motion-component-emphasis) ease,
    border-color var(--motion-component) ease,
    background-color var(--motion-component) ease !important;
}
@media(hover:hover){
  :is(.card-link,.action-card,.quick-card,[data-action-card]):hover{
    transform:translateY(var(--motion-lift));
  }
}
:is(.card-link,.action-card,.quick-card,[data-action-card]):active{
  transform:translateY(0) scale(.995);
}

details>summary::after,
.accordion-trigger>svg:last-child,
[data-accordion-trigger]>svg:last-child{
  transition:transform var(--motion-component) var(--motion-ease-component) !important;
  transform-origin:center;
}
details[open]>summary::after{transform:rotate(180deg);}
[aria-expanded="true"].accordion-trigger>svg:last-child,
[data-accordion-trigger][aria-expanded="true"]>svg:last-child{transform:rotate(180deg);}

:is(.badge,.status-chip,.chip,.estado-badge){
  transition:
    background-color var(--motion-component) ease,
    color var(--motion-component) ease,
    border-color var(--motion-component) ease,
    box-shadow var(--motion-component) ease !important;
}

:is(.dropdown-menu,.popover,.context-menu,[data-popover-panel]){
  transform-origin:top center;
  transition:
    opacity var(--motion-component) ease,
    transform var(--motion-component-emphasis) var(--motion-ease-component),
    visibility 0s linear var(--motion-component-emphasis) !important;
}
/* v2.5.25 — Popover motion is opt-in.
   Generic menu classes must never become hidden just because they exist. */
[data-motion-popover]:not(.is-open):not(.abierto):not(.show):not([aria-hidden="false"]){
  opacity:0;
  transform:translateY(-4px) scale(.99);
}
[data-motion-popover].is-open,
[data-motion-popover].abierto,
[data-motion-popover].show,
[data-motion-popover][aria-hidden="false"]{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:0s !important;
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  transition:
    box-shadow var(--motion-component) ease,
    outline-color var(--motion-component) ease,
    border-color var(--motion-component) ease !important;
}

@keyframes rh-success-pop{
  0%{transform:scale(.94);opacity:.55}
  55%{transform:scale(1.04);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.motion-success{animation:rh-success-pop 280ms var(--motion-ease-component) both;}

@keyframes rh-skeleton-breathe{
  0%,100%{opacity:.58}
  50%{opacity:.82}
}
:is(.skeleton,[data-skeleton]){
  animation:rh-skeleton-breathe 1.5s ease-in-out infinite;
}

.tooltip,
[data-tooltip-panel]{
  transition:
    opacity 140ms ease,
    transform 160ms var(--motion-ease-component),
    visibility 0s linear 160ms !important;
  transform:translateY(2px);
}
.tooltip.is-visible,
[data-tooltip-panel].is-visible{
  opacity:1;
  transform:translateY(0);
  transition-delay:0s !important;
}

@media(prefers-reduced-motion:reduce){
  .tabs-global :is(a,button),
  .tabs :is(a,button),
  .tab-list :is(a,button),
  .tabs-global :is(a,button)>svg,
  .tabs :is(a,button)>svg,
  .tab-list :is(a,button)>svg,
  :is(.card-link,.action-card,.quick-card,[data-action-card]),
  details>summary::after,
  .accordion-trigger>svg:last-child,
  [data-accordion-trigger]>svg:last-child,
  :is(.badge,.status-chip,.chip,.estado-badge),
  :is(.dropdown-menu,.popover,.context-menu,[data-popover-panel]),
  :where(a,button,input,select,textarea,[tabindex]):focus-visible,
  .tooltip,
  [data-tooltip-panel]{
    transition:none !important;
    transform:none !important;
  }
  .motion-success,
  :is(.skeleton,[data-skeleton]){animation:none !important;}
}


/* =========================================================
   v2.5.14 · Motion Close Refinement + Theme Icon Restore
   ========================================================= */
:root{
  --motion-surface-open:240ms;
  --motion-surface-close:190ms;
  --motion-backdrop-open:180ms;
  --motion-backdrop-close:150ms;
}

/* RESTAURACIÓN DEL THEME TOGGLE
   v2.5.12 unificó color correctamente, pero la regla de opacity aplicada
   a .theme-icon hacía visibles simultáneamente luna y sol.
   Recuperamos la lógica visual original: un solo símbolo por estado. */
.theme-toggle .theme-icon{
  color:currentColor !important;
}
.theme-toggle .theme-icon-moon{
  opacity:1 !important;
  transform:translate(-50%,-50%) rotate(0deg) scale(1) !important;
}
.theme-toggle .theme-icon-sun{
  opacity:0 !important;
  transform:translate(-50%,-50%) rotate(-35deg) scale(.72) !important;
}
html[data-theme="dark"] .theme-toggle .theme-icon-moon{
  opacity:0 !important;
  transform:translate(-50%,-50%) rotate(35deg) scale(.72) !important;
}
html[data-theme="dark"] .theme-toggle .theme-icon-sun{
  opacity:1 !important;
  transform:translate(-50%,-50%) rotate(0deg) scale(1) !important;
}
@media(hover:hover){
  .theme-toggle:hover .theme-icon-moon{
    transform:translate(-50%,-50%) rotate(-8deg) scale(1.04) !important;
  }
  html[data-theme="dark"] .theme-toggle:hover .theme-icon-sun{
    transform:translate(-50%,-50%) rotate(10deg) scale(1.04) !important;
  }
}

/* QUICK ACTIONS
   Apertura con presencia; cierre más corto para evitar sensación torpe.
   Conserva exactamente la misma trayectoria espacial. */
@media(max-width:860px){
  .global-create-sheet{
    transition:visibility 0s linear var(--motion-surface-close) !important;
  }
  .global-create-sheet.is-open{
    transition:visibility 0s linear 0s !important;
  }

  .global-create-panel{
    transform:translate3d(0,14px,0) scale(.997) !important;
    transition:
      transform var(--motion-surface-close) var(--motion-ease-surface) !important;
  }
  .global-create-sheet.is-open .global-create-panel{
    transform:translate3d(0,0,0) scale(1) !important;
    transition-duration:var(--motion-surface-open) !important;
  }

  .global-create-backdrop{
    transition:
      opacity var(--motion-backdrop-close) ease,
      -webkit-backdrop-filter var(--motion-surface-close) ease,
      backdrop-filter var(--motion-surface-close) ease !important;
  }
  .global-create-sheet.is-open .global-create-backdrop{
    transition-duration:
      var(--motion-backdrop-open),
      var(--motion-surface-open),
      var(--motion-surface-open) !important;
  }
}

/* El + mantiene una lectura simple: signo + en reposo,
   giro únicamente durante activación/apertura. */
.bottom-nav-movil .bottom-nav-create-icon > svg{
  transition:transform 135ms var(--motion-ease-standard) !important;
}
body.global-create-activating .bottom-nav-movil .bottom-nav-create-icon > svg{
  transform:scale(.90) rotate(18deg) !important;
}
body.global-create-open .bottom-nav-create-icon > svg{
  transform:rotate(45deg) scale(.95) !important;
}

@media(prefers-reduced-motion:reduce){
  .theme-toggle .theme-icon,
  .global-create-panel,
  .global-create-backdrop,
  .bottom-nav-movil .bottom-nav-create-icon > svg{
    transition:none !important;
  }
}


/* =========================================================
   v2.5.15 · Mobile Surface Parity + Theme Tap Fix
   ========================================================= */

/* Android/Samsung: evita el rectángulo azul de tap sin retirar el focus
   visible para teclado. */
.theme-toggle,
.theme-toggle-mobile,
[data-theme-toggle]{
  -webkit-tap-highlight-color:transparent !important;
  tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
.theme-toggle:focus:not(:focus-visible),
.theme-toggle-mobile:focus:not(:focus-visible),
[data-theme-toggle]:focus:not(:focus-visible){
  outline:none !important;
  box-shadow:none !important;
}
.theme-toggle:active,
.theme-toggle-mobile:active,
[data-theme-toggle]:active{
  -webkit-tap-highlight-color:transparent !important;
}

/* Quick Actions adopta exactamente la misma gramática física del Top Sheet:
   250 ms, mismo easing, 14 px, opacity + transform simultáneos.
   La apertura comienza en el mismo frame del tap; el + se anima en paralelo. */
@media(max-width:860px){
  .global-create-sheet{
    display:block !important;
    opacity:1 !important;
    visibility:hidden;
    pointer-events:none;
    transition:visibility 0s linear var(--motion-surface) !important;
  }
  .global-create-sheet.is-open{
    visibility:visible;
    pointer-events:auto;
    transition:visibility 0s linear 0s !important;
  }

  .global-create-panel{
    opacity:0 !important;
    transform:translateY(14px) scale(.992) !important;
    transform-origin:50% 100%;
    transition:
      transform var(--motion-surface) var(--motion-ease-surface),
      opacity var(--motion-surface-fade) ease !important;
    will-change:transform,opacity;
  }
  .global-create-sheet.is-open .global-create-panel{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
    transition:
      transform var(--motion-surface) var(--motion-ease-surface),
      opacity var(--motion-surface-fade) ease !important;
  }

  .global-create-backdrop{
    opacity:0 !important;
    -webkit-backdrop-filter:blur(0) !important;
    backdrop-filter:blur(0) !important;
    transition:
      opacity var(--motion-surface-fade) ease,
      -webkit-backdrop-filter var(--motion-surface) ease,
      backdrop-filter var(--motion-surface) ease !important;
  }
  .global-create-sheet.is-open .global-create-backdrop{
    opacity:1 !important;
    -webkit-backdrop-filter:blur(6px) !important;
    backdrop-filter:blur(6px) !important;
  }
}

/* El botón no espera a que termine la microanimación del + para abrir. */
.bottom-nav-movil .bottom-nav-create-icon > svg{
  transition:transform 135ms var(--motion-ease-standard) !important;
}
body.global-create-activating .bottom-nav-movil .bottom-nav-create-icon > svg,
body.global-create-open .bottom-nav-create-icon > svg{
  transform:rotate(45deg) scale(.95) !important;
}

@media(prefers-reduced-motion:reduce){
  .global-create-panel,
  .global-create-backdrop,
  .bottom-nav-movil .bottom-nav-create-icon > svg{
    transition:none !important;
  }
}


/* =========================================================
   v2.5.16 · Fase 2.3 — Action Feedback & State Transitions
   ========================================================= */
:root{
  --motion-feedback-enter:220ms;
  --motion-feedback-exit:180ms;
  --motion-state:180ms;
  --motion-progress:280ms;
}

/* TOASTS / FEEDBACK GLOBAL
   Entran y salen con desplazamiento mínimo, sin rebote ni zoom. */
.app-toast[data-app-toast]{
  opacity:0;
  transform:translateY(-6px);
  transition:
    opacity var(--motion-feedback-enter) ease,
    transform var(--motion-feedback-enter) var(--motion-ease-standard),
    border-color var(--motion-state) ease,
    box-shadow var(--motion-state) ease !important;
}
.app-toast[data-app-toast].is-visible{
  opacity:1;
  transform:translateY(0);
}
.app-toast[data-app-toast].is-leaving{
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition-duration:var(--motion-feedback-exit) !important;
}
.app-toast[data-app-toast] > svg:first-child{
  transform-origin:center;
  transition:transform var(--motion-feedback-enter) var(--motion-ease-standard);
}
.app-toast-success[data-app-toast].is-visible > svg:first-child{
  transform:scale(1);
}
.app-toast-success[data-app-toast].is-entering > svg:first-child{
  transform:scale(.9);
}

/* Alertas inline: el estado cambia suavemente, pero nunca “salta”. */
:is(.alerta,.inline-alert,.form-alert){
  transition:
    background-color var(--motion-state) ease,
    color var(--motion-state) ease,
    border-color var(--motion-state) ease,
    box-shadow var(--motion-state) ease !important;
}

/* BUTTON BUSY STATE
   Hook global y no invasivo: funciona sólo cuando el componente marca aria-busy
   o data-ui-busy. Mantiene tamaño y contexto del botón. */
:is(.btn,button)[aria-busy="true"],
:is(.btn,button)[data-ui-busy="true"]{
  position:relative;
  cursor:wait;
  pointer-events:none;
  opacity:.78;
}
:is(.btn,button)[aria-busy="true"]::after,
:is(.btn,button)[data-ui-busy="true"]::after{
  content:"";
  flex:0 0 auto;
  width:14px;
  height:14px;
  margin-left:.45rem;
  border:1.7px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:rh-state-spin .72s linear infinite;
}
@keyframes rh-state-spin{to{transform:rotate(360deg)}}

/* Estado concluido opt-in para acciones asíncronas. */
[data-ui-state="success"]{
  transition:
    background-color var(--motion-state) ease,
    border-color var(--motion-state) ease,
    color var(--motion-state) ease,
    box-shadow var(--motion-state) ease !important;
}
[data-ui-state="error"]{
  transition:
    background-color var(--motion-state) ease,
    border-color var(--motion-state) ease,
    color var(--motion-state) ease,
    box-shadow var(--motion-state) ease !important;
}

/* Progress: el porcentaje cambia con continuidad, nunca a saltos visuales. */
:is(.progress-bar,.progress-fill,.release-upload-progress-bar,[data-progress-fill]){
  transition:
    width var(--motion-progress) var(--motion-ease-standard),
    background-color var(--motion-state) ease !important;
}

/* Loading: sustituye shimmer agresivo por respiración calmada. */
.command-skeleton,
:is(.skeleton,[data-skeleton]){
  background:var(--surface-app,var(--gris-100)) !important;
  background-image:none !important;
  animation:rh-skeleton-breathe 1.45s ease-in-out infinite !important;
}

/* Mensajes de validación/ayuda: cambios de estado discretos. */
:is(.field-error,.field-help,.form-error,.form-help,.input-help){
  transition:
    color var(--motion-state) ease,
    opacity var(--motion-state) ease !important;
}

/* Acción final: feedback táctil contenido. */
:is(.btn-primary,.btn-primario,.btn-danger,.btn-success):not(:disabled):active{
  transform:translateY(1px) scale(.99);
}

/* Evitamos animar cambios de layout o altura automáticamente.
   El Motion System sólo expresa estado, no oculta latencia. */

@media(max-width:620px){
  .app-toast[data-app-toast]{
    transform:translateY(-4px);
  }
  .app-toast[data-app-toast].is-visible{
    transform:translateY(0);
  }
  .app-toast[data-app-toast].is-leaving{
    transform:translateY(-3px);
  }
}

@media(prefers-reduced-motion:reduce){
  .app-toast[data-app-toast],
  .app-toast[data-app-toast] > svg:first-child,
  :is(.alerta,.inline-alert,.form-alert),
  :is(.btn,button)[aria-busy="true"]::after,
  :is(.btn,button)[data-ui-busy="true"]::after,
  [data-ui-state="success"],
  [data-ui-state="error"],
  :is(.progress-bar,.progress-fill,.release-upload-progress-bar,[data-progress-fill]),
  .command-skeleton,
  :is(.skeleton,[data-skeleton]),
  :is(.field-error,.field-help,.form-error,.form-help,.input-help){
    transition:none !important;
    animation:none !important;
  }
  .app-toast[data-app-toast].is-visible,
  .app-toast[data-app-toast].is-leaving{
    transform:none !important;
  }
}


/* =========================================================
   v2.5.17 · Fase 2.4 — Motion System Closure
   Modals · Dialogs · Date Picker · Cross-app normalization
   ========================================================= */
:root{
  /* Valores congelados de Fase 2 */
  --motion-instant:135ms;
  --motion-fast:180ms;
  --motion-standard:220ms;
  --motion-surface:250ms;
  --motion-progress:280ms;
  --motion-ease-standard:cubic-bezier(.2,.8,.2,1);
  --motion-distance-control:4px;
  --motion-distance-dialog:8px;
  --motion-distance-sheet:14px;
}

/* Modales legacy + modales App comparten una sola gramática:
   backdrop primero perceptualmente, superficie con recorrido corto, sin rebote. */
.modal-overlay,
.app-modal{
  opacity:0;
  transition:
    opacity var(--motion-fast) ease,
    -webkit-backdrop-filter var(--motion-standard) ease,
    backdrop-filter var(--motion-standard) ease !important;
}
.modal-overlay.is-open,
.app-modal.is-open{
  opacity:1;
}
.modal-overlay.is-closing,
.app-modal.is-closing{
  opacity:0;
  pointer-events:none;
}

.modal-overlay > :is(.modal-card,.movement-dialog),
.app-modal > .app-modal-dialog{
  opacity:0;
  transform:translateY(var(--motion-distance-dialog)) scale(.992);
  transform-origin:50% 50%;
  transition:
    transform var(--motion-standard) var(--motion-ease-standard),
    opacity var(--motion-fast) ease !important;
  will-change:transform,opacity;
}
.modal-overlay.is-open > :is(.modal-card,.movement-dialog),
.app-modal.is-open > .app-modal-dialog{
  opacity:1;
  transform:translateY(0) scale(1);
}
.modal-overlay.is-closing > :is(.modal-card,.movement-dialog),
.app-modal.is-closing > .app-modal-dialog{
  opacity:0;
  transform:translateY(calc(var(--motion-distance-dialog) * .65)) scale(.995);
}

/* Date Picker global: la capa Glass también pertenece al Motion System. */
.glass-date-picker{
  opacity:0;
  transform:translateY(-4px) scale(.992);
  transform-origin:50% 0;
  transition:
    opacity 160ms ease,
    transform var(--motion-standard) var(--motion-ease-standard),
    visibility 0s linear var(--motion-fast) !important;
  will-change:transform,opacity;
}
.glass-date-picker.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
}
.glass-date-picker.is-closing{
  opacity:0;
  transform:translateY(-3px) scale(.995);
  pointer-events:none;
}

/* El calendario interno comunica navegación sin mover la caja completa. */
.date-picker-day,
.date-picker-nav,
.date-picker-action{
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-instant) var(--motion-ease-standard) !important;
}
.date-picker-nav:active,
.date-picker-action:active,
.date-picker-day:not(:disabled):active{
  transform:scale(.96);
}

/* Inputs/selects: feedback visual consistente; nunca animamos tamaño. */
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  transition:
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

/* Disabled significa estabilidad: sin lift, press ni cinética residual. */
:where(button,.btn,[role="button"]):disabled,
:where(button,.btn,[role="button"])[aria-disabled="true"]{
  transform:none !important;
  animation:none !important;
}

/* Mobile dialogs se comportan como surfaces inferiores, pero con la misma
   duración/easing ya aprobados para Quick Actions. */
@media(max-width:720px){
  .modal-overlay > :is(.modal-card,.movement-dialog),
  .app-modal > .app-modal-dialog{
    transform:translateY(var(--motion-distance-sheet)) scale(.992);
    transform-origin:50% 100%;
  }
  .modal-overlay.is-open > :is(.modal-card,.movement-dialog),
  .app-modal.is-open > .app-modal-dialog{
    transform:translateY(0) scale(1);
  }
  .modal-overlay.is-closing > :is(.modal-card,.movement-dialog),
  .app-modal.is-closing > .app-modal-dialog{
    transform:translateY(calc(var(--motion-distance-sheet) * .7)) scale(.995);
  }

  .glass-date-picker{
    transform:translateY(var(--motion-distance-sheet)) scale(.992);
    transform-origin:50% 100%;
  }
  .glass-date-picker.is-open{
    transform:translateY(0) scale(1);
  }
  .glass-date-picker.is-closing{
    transform:translateY(10px) scale(.995);
  }
}

/* Fase 2 cerrada: reduced motion conserva todos los estados sin trayectoria. */
@media(prefers-reduced-motion:reduce){
  .modal-overlay,
  .app-modal,
  .modal-overlay > :is(.modal-card,.movement-dialog),
  .app-modal > .app-modal-dialog,
  .glass-date-picker,
  .date-picker-day,
  .date-picker-nav,
  .date-picker-action,
  :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    transition:none !important;
    animation:none !important;
  }
  .modal-overlay > :is(.modal-card,.movement-dialog),
  .app-modal > .app-modal-dialog,
  .glass-date-picker{
    transform:none !important;
  }
}


/* =========================================================
   v2.5.18 · Fase 3.1 — Forms & Data Entry UX Foundation
   ========================================================= */
:root{
  --form-control-h:44px;
  --form-control-radius:var(--radius-md,12px);
  --form-field-gap:6px;
  --form-row-gap:16px;
  --form-section-gap:24px;
  --form-label-size:var(--type-label,.76rem);
  --form-help-size:var(--type-meta,.72rem);
  --form-error-size:var(--type-meta,.72rem);
  --form-control-padding-x:12px;
}

/* Contrato global de campos.
   No se modifica checkbox/radio/file ni controles especializados. */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select
){
  min-height:var(--form-control-h) !important;
  height:var(--form-control-h);
  border-radius:var(--form-control-radius) !important;
  padding-left:var(--form-control-padding-x);
  padding-right:var(--form-control-padding-x);
  font:inherit;
}

textarea{
  min-height:104px;
  border-radius:var(--form-control-radius) !important;
  padding:10px var(--form-control-padding-x);
  font:inherit;
  line-height:1.5;
  resize:vertical;
}

/* Labels: lectura limpia, sin mayúsculas decorativas en captura. */
form label,
.field > label,
.form-field > label{
  color:var(--text-main);
  font-size:var(--form-label-size);
  font-weight:500;
  line-height:1.35;
}

/* Para el patrón común "label que envuelve el input". */
form label:has(> input),
form label:has(> select),
form label:has(> textarea){
  display:grid;
  align-content:start;
  gap:var(--form-field-gap);
  min-width:0;
}

/* Primitivas nuevas/reutilizables para no crear geometrías por módulo. */
.field,
.form-field{
  display:grid;
  align-content:start;
  gap:var(--form-field-gap);
  min-width:0;
}
.form-grid,
.form-grid-2,
.form-grid-3{
  display:grid;
  gap:var(--form-row-gap);
  align-items:start;
}
.form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}

/* Ayuda y error quedan vinculados visualmente al control. */
:is(.field-help,.form-help,.input-help,.field-guidance){
  margin:0;
  color:var(--text-muted);
  font-size:var(--form-help-size);
  font-weight:500;
  line-height:1.45;
}
:is(.field-error,.form-error,.input-error,[data-field-error]){
  margin:0;
  color:var(--semantic-danger,#dc2626);
  font-size:var(--form-error-size);
  font-weight:500;
  line-height:1.4;
}

/* Estados de validación semánticos sin depender del color exclusivamente:
   borde + ring + mensaje asociado. */
:where(input,select,textarea)[aria-invalid="true"],
:where(input,select,textarea).is-invalid{
  border-color:color-mix(in srgb,var(--semantic-danger,#dc2626) 62%,var(--line-soft)) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--semantic-danger,#dc2626) 10%,transparent) !important;
}
:where(input,select,textarea).is-valid{
  border-color:color-mix(in srgb,var(--semantic-success,#16a34a) 54%,var(--line-soft)) !important;
}

/* Readonly y disabled son distintos:
   readonly sigue siendo legible/copiable; disabled pierde protagonismo. */
:where(input,select,textarea)[readonly]{
  background:color-mix(in srgb,var(--surface-app) 72%,var(--surface-card)) !important;
  color:var(--text-main) !important;
  cursor:default;
}
:where(input,select,textarea):disabled{
  background:color-mix(in srgb,var(--surface-app) 82%,var(--surface-card)) !important;
  color:var(--text-muted) !important;
  border-color:var(--line-soft) !important;
  opacity:.72;
  cursor:not-allowed;
}

/* Required/optional helpers preparados para templates nuevos. */
.required-mark{
  color:var(--semantic-danger,#dc2626);
  font-weight:700;
  margin-left:2px;
}
.optional-label{
  color:var(--text-muted);
  font-size:var(--form-help-size);
  font-weight:500;
}

/* Checkbox/radio: área táctil mínima sin deformar el control nativo. */
.checkbox-row,
.radio-row,
.choice-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:44px;
  padding:9px 0;
}
:is(.checkbox-row,.radio-row,.choice-row) input[type="checkbox"],
:is(.checkbox-row,.radio-row,.choice-row) input[type="radio"]{
  flex:0 0 auto;
  margin-top:2px;
  accent-color:var(--color-primario);
}

/* Form sections: progressive disclosure visual.
   No añade acordeones ni oculta datos por JS; sólo crea jerarquía reutilizable. */
.form-section{
  display:grid;
  gap:var(--form-row-gap);
  padding:var(--panel-padding,20px);
  background:var(--surface-card);
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  box-shadow:var(--shadow-xs);
}
.form-section + .form-section{
  margin-top:var(--form-section-gap);
}
.form-section-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border-subtle,var(--line-soft));
}
.form-section-heading{
  display:grid;
  gap:3px;
  min-width:0;
}
.form-section-heading h2,
.form-section-heading h3{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-section-title,.96rem);
  line-height:1.3;
}
.form-section-heading p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.5;
}

/* Acciones: primario a la derecha en desktop, ancho cómodo en móvil. */
.form-actions,
.form-footer-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding-top:16px;
  margin-top:4px;
  border-top:1px solid var(--border-subtle,var(--line-soft));
}
.form-actions .btn,
.form-footer-actions .btn{
  min-height:44px;
}

/* Sticky actions es opt-in para formularios largos. */
.form-actions-sticky{
  position:sticky;
  bottom:12px;
  z-index:18;
  background:color-mix(in srgb,var(--surface-card) 92%,transparent);
  border:1px solid var(--glass-border,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  box-shadow:0 14px 40px rgba(15,23,42,.12);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  padding:10px 12px;
}

/* Fieldset semántico listo para pasos/segmentos de captura. */
.form-fieldset{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.form-fieldset > legend{
  width:100%;
  margin:0 0 14px;
  padding:0 0 10px;
  border-bottom:1px solid var(--border-subtle,var(--line-soft));
  color:var(--text-main);
  font-size:var(--type-component-title,.875rem);
  font-weight:700;
}

/* Dark mode se deriva de tokens, sin colores paralelos. */
html[data-theme="dark"] .form-actions-sticky{
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}

/* Responsive: formularios pasan a una sola columna antes de comprimirse. */
@media(max-width:760px){
  .form-grid-2,
  .form-grid-3{
    grid-template-columns:1fr;
  }
  .form-section{
    padding:16px;
    border-radius:var(--radius-lg,16px);
  }
  .form-section-header{
    display:grid;
    gap:10px;
  }
  .form-actions,
  .form-footer-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .form-actions .btn,
  .form-footer-actions .btn{
    width:100%;
    justify-content:center;
  }
  .form-actions-sticky{
    bottom:calc(76px + env(safe-area-inset-bottom));
  }
}

/* Evita que autofill rompa el contraste visual del DS. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text-main);
  caret-color:var(--text-main);
  box-shadow:0 0 0 1000px var(--surface-card) inset;
  border-color:var(--line-soft);
  transition:background-color 9999s ease-out 0s;
}


/* =========================================================
   v2.5.19 · Mobile Interaction Root Fix
   Elimina el highlight azul táctil desde la raíz del shell.
   ========================================================= */

/* WebKit/Chromium heredan este valor hacia los elementos interactivos.
   Esto evita el rectángulo azul nativo al tocar links/botones sin eliminar
   el focus-visible del Design System para teclado. */
html{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* Refuerzo explícito en superficies táctiles del sistema.
   Se incluye navegación, cabecera, menús, tarjetas/enlaces y controles con rol. */
@media (max-width:860px), (hover:none) and (pointer:coarse){
  :where(
    a,
    button,
    summary,
    [role="button"],
    [role="menuitem"],
    [tabindex]:not([tabindex="-1"]),
    .nav-link,
    .bottom-nav-movil a,
    .bottom-nav-movil button,
    .btn-icono-cabecera,
    .usuario-cabecera-btn,
    [data-toggle-notificaciones],
    [data-toggle-usuario],
    [data-toggle-nav-motion],
    [data-theme-toggle],
    [data-open-global-create]
  ){
    -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
    -webkit-touch-callout:none;
  }

  /* Algunos navegadores convierten el tap en :focus aunque no sea navegación
     por teclado. Se neutraliza sólo ese foco sintético. */
  :where(
    a,
    button,
    summary,
    [role="button"],
    [role="menuitem"],
    [tabindex]:not([tabindex="-1"])
  ):focus:not(:focus-visible){
    outline:none !important;
  }

  /* Mejora la respuesta táctil sin deshabilitar scroll/zoom de la página. */
  :where(
    a,
    button,
    summary,
    [role="button"],
    .nav-link,
    .bottom-nav-movil a,
    .bottom-nav-movil button
  ){
    touch-action:manipulation;
  }
}

/* El focus real sigue siendo deliberadamente visible y accesible. */
:where(a,button,summary,[role="button"],[role="menuitem"],[tabindex]):focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px var(--focus-ring);
}


/* =========================================================
   v2.5.20 · Fase 3.2 — Progressive Disclosure & Error Prevention
   ========================================================= */
:root{
  --form-disclosure-radius:var(--radius-lg,16px);
  --form-validation-gap:10px;
}

/* Stepper / progress de captura */
.form-stepper{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.form-stepper::-webkit-scrollbar{display:none;}
.form-step{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:max-content;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  font-weight:500;
}
.form-step::after{
  content:"";
  width:28px;
  height:1px;
  background:var(--line-soft);
}
.form-step:last-child::after{display:none;}
.form-step-index{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  border:1px solid var(--line-soft);
  background:var(--surface-card);
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:700;
}
.form-step.is-current{
  color:var(--text-main);
}
.form-step.is-current .form-step-index{
  border-color:color-mix(in srgb,var(--color-primario) 42%,var(--line-soft));
  background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card));
  color:var(--color-primario);
}
.form-step.is-complete .form-step-index{
  border-color:color-mix(in srgb,var(--semantic-success,#16a34a) 34%,var(--line-soft));
  background:color-mix(in srgb,var(--semantic-success,#16a34a) 8%,var(--surface-card));
  color:var(--semantic-success,#16a34a);
}

/* Disclosure: opt-in y semántico. */
.form-disclosure{
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--form-disclosure-radius);
  background:var(--surface-card);
  overflow:hidden;
}
.form-disclosure + .form-disclosure{
  margin-top:12px;
}
.form-disclosure-trigger,
.form-disclosure > summary{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin:0;
  border:0;
  background:transparent;
  color:var(--text-main);
  text-align:left;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}
.form-disclosure > summary::-webkit-details-marker{display:none;}
.form-disclosure-trigger::after,
.form-disclosure > summary::after{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-right:1.7px solid currentColor;
  border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--motion-fast) var(--motion-ease-standard);
}
.form-disclosure-trigger[aria-expanded="true"]::after,
.form-disclosure[open] > summary::after{
  transform:rotate(225deg);
}
.form-disclosure-content{
  padding:0 14px 14px;
}
.form-disclosure-content[hidden]{
  display:none !important;
}

/* Contexto “por qué se pide” sin convertirlo en alerta */
.field-context{
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:9px 10px;
  border-radius:var(--radius-md,12px);
  background:color-mix(in srgb,var(--surface-app) 72%,var(--surface-card));
  color:var(--text-muted);
  font-size:var(--form-help-size,.72rem);
  line-height:1.45;
}
.field-context > svg{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--color-primario);
}

/* Resumen de validación: errores agrupados y accionables */
.validation-summary{
  display:grid;
  gap:var(--form-validation-gap);
  margin:0 0 16px;
  padding:14px;
  border:1px solid color-mix(in srgb,var(--semantic-danger,#dc2626) 28%,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:color-mix(in srgb,var(--semantic-danger,#dc2626) 5%,var(--surface-card));
  color:var(--text-main);
}
.validation-summary[hidden]{display:none !important;}
.validation-summary-head{
  display:flex;
  align-items:flex-start;
  gap:9px;
}
.validation-summary-head > svg{
  flex:0 0 auto;
  color:var(--semantic-danger,#dc2626);
}
.validation-summary-head strong{
  display:block;
  font-size:var(--type-component-title,.875rem);
}
.validation-summary-head p{
  margin:2px 0 0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.45;
}
.validation-summary-list{
  display:grid;
  gap:4px;
  margin:0;
  padding-left:20px;
}
.validation-summary-link{
  appearance:none;
  padding:2px 0;
  border:0;
  background:none;
  color:var(--semantic-danger,#dc2626);
  font:inherit;
  font-size:var(--type-meta,.72rem);
  font-weight:500;
  text-align:left;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}

/* Character counter opt-in */
.field-character-count{
  display:block;
  justify-self:end;
  margin-top:2px;
  color:var(--text-muted);
  font-size:.68rem;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.field-character-count.is-near-limit{
  color:var(--semantic-warning,#d97706);
  font-weight:500;
}
.field-character-count.is-at-limit{
  color:var(--semantic-danger,#dc2626);
}

/* Confirmación/zonas sensibles */
.form-confirmation{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid color-mix(in srgb,var(--semantic-warning,#d97706) 26%,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:color-mix(in srgb,var(--semantic-warning,#d97706) 5%,var(--surface-card));
}
.form-confirmation.is-danger{
  border-color:color-mix(in srgb,var(--semantic-danger,#dc2626) 28%,var(--line-soft));
  background:color-mix(in srgb,var(--semantic-danger,#dc2626) 5%,var(--surface-card));
}
.form-confirmation h3{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-component-title,.875rem);
}
.form-confirmation p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.5;
}

/* Hidden dependency states never reserve space. */
[data-form-dependent][hidden],
[data-form-disclosure-panel][hidden]{
  display:none !important;
}

/* Móvil: stepper compacto y disclosure táctil */
@media(max-width:760px){
  .form-stepper{
    margin-bottom:16px;
    padding-bottom:2px;
  }
  .form-step::after{width:18px;}
  .form-disclosure-trigger,
  .form-disclosure > summary{
    min-height:52px;
    padding:13px 14px;
  }
  .validation-summary{
    padding:13px;
  }
}

/* Reduced motion: disclosure sigue claro sin rotación animada */
@media(prefers-reduced-motion:reduce){
  .form-disclosure-trigger::after,
  .form-disclosure > summary::after{
    transition:none !important;
  }
}


/* =========================================================
   v2.5.21 · Fase 3.3 — Tables, Filters & Bulk Actions
   ========================================================= */
:root{
  --table-row-h:48px;
  --table-cell-x:12px;
  --table-cell-y:10px;
  --table-head-size:.7rem;
  --table-body-size:.79rem;
  --table-toolbar-gap:10px;
}

/* Contenedor de datos: la tabla hace scroll dentro de su superficie, no la página. */
.data-table-shell,
.table-shell{
  min-width:0;
  width:100%;
  overflow:hidden;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}
.data-table-scroll,
.table-scroll,
.tabla-wrap{
  width:100%;
  max-width:100%;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Tabla Enterprise: compacta pero respirable. */
.data-table,
.table-enterprise{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--table-body-size);
  color:var(--text-main);
}
.data-table th,
.table-enterprise th{
  position:relative;
  padding:9px var(--table-cell-x);
  border-bottom:1px solid var(--border-subtle,var(--line-soft));
  background:color-mix(in srgb,var(--surface-app) 54%,var(--surface-card));
  color:var(--text-muted);
  font-size:var(--table-head-size);
  font-weight:700;
  letter-spacing:.035em;
  line-height:1.2;
  text-transform:uppercase;
  white-space:nowrap;
}
.data-table td,
.table-enterprise td{
  min-height:var(--table-row-h);
  padding:var(--table-cell-y) var(--table-cell-x);
  border-bottom:1px solid var(--border-subtle,var(--line-soft));
  vertical-align:middle;
}
.data-table tbody tr:last-child td,
.table-enterprise tbody tr:last-child td{
  border-bottom:0;
}
.data-table tbody tr,
.table-enterprise tbody tr{
  transition:
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}
@media(hover:hover){
  .data-table tbody tr:hover,
  .table-enterprise tbody tr:hover{
    background:color-mix(in srgb,var(--text-main) 2.8%,transparent);
  }
}
.data-table tbody tr.is-selected,
.table-enterprise tbody tr.is-selected{
  background:color-mix(in srgb,var(--color-primario) 6%,var(--surface-card));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--color-primario) 70%,transparent);
}

/* La primera/última columna puede ser utilitaria sin robar ancho. */
.data-table .col-select,
.table-enterprise .col-select{
  width:42px;
  min-width:42px;
  padding-left:14px;
  padding-right:8px;
  text-align:center;
}
.data-table .col-actions,
.table-enterprise .col-actions{
  width:1%;
  white-space:nowrap;
  text-align:right;
}

/* Celdas semánticas */
.table-primary{
  display:grid;
  gap:2px;
  min-width:0;
}
.table-primary strong{
  overflow:hidden;
  color:var(--text-main);
  font-weight:700;
  text-overflow:ellipsis;
}
.table-primary small,
.table-secondary{
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.35;
}
.table-number{
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.table-nowrap{white-space:nowrap;}

/* Toolbar global: búsqueda, filtros y acciones en una misma línea visual. */
.data-toolbar,
.table-toolbar{
  display:flex;
  align-items:center;
  gap:var(--table-toolbar-gap);
  width:100%;
  margin-bottom:12px;
}
.data-toolbar-main{
  display:flex;
  align-items:center;
  gap:var(--table-toolbar-gap);
  flex:1 1 auto;
  min-width:0;
}
.data-toolbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.table-search{
  position:relative;
  display:flex;
  align-items:center;
  flex:1 1 280px;
  min-width:180px;
}
.table-search > svg{
  position:absolute;
  left:12px;
  width:17px;
  height:17px;
  color:var(--text-muted);
  pointer-events:none;
}
.table-search input{
  width:100%;
  min-height:44px;
  padding-left:38px !important;
}

/* Filtros */
.filter-panel{
  display:grid;
  gap:12px;
  margin:0 0 14px;
  padding:14px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:var(--surface-card);
}
.filter-panel[hidden]{display:none !important;}
.filter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:end;
}
.filter-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  grid-column:1 / -1;
}
.filter-chip-row{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.filter-chip{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid color-mix(in srgb,var(--color-primario) 18%,var(--line-soft));
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-card));
  color:var(--text-main);
  font-size:var(--type-meta,.72rem);
  font-weight:500;
}
.filter-chip button{
  width:20px;
  height:20px;
  min-height:20px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--text-muted);
}

/* Bulk bar: aparece sólo si hay selección. Glass permitido por ser capa flotante. */
.bulk-action-bar{
  position:sticky;
  bottom:12px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:min(760px,calc(100% - 24px));
  margin:12px auto 0;
  padding:10px 12px;
  border:1px solid var(--glass-border,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:color-mix(in srgb,var(--surface-card) 92%,transparent);
  box-shadow:0 16px 46px rgba(15,23,42,.14);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
.bulk-action-bar[hidden]{display:none !important;}
.bulk-action-meta{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--text-main);
  font-size:var(--type-label,.76rem);
  font-weight:700;
}
.bulk-action-meta strong{
  min-width:24px;
  height:24px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--color-primario) 10%,var(--surface-card));
  color:var(--color-primario);
  font-variant-numeric:tabular-nums;
}
.bulk-action-buttons{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Paginación */
.table-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid var(--border-subtle,var(--line-soft));
}
.table-result-count{
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
}
.pagination{
  display:flex;
  align-items:center;
  gap:5px;
}
.pagination :is(a,button,span){
  min-width:36px;
  min-height:36px;
  display:grid;
  place-items:center;
  padding:0 8px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm,8px);
  background:var(--surface-card);
  color:var(--text-main);
  font-size:var(--type-meta,.72rem);
  text-decoration:none;
}
.pagination .is-current,
.pagination [aria-current="page"]{
  border-color:color-mix(in srgb,var(--color-primario) 35%,var(--line-soft));
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));
  color:var(--color-primario);
  font-weight:700;
}

/* Checkbox de tabla */
.data-table input[type="checkbox"],
.table-enterprise input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
  margin:0;
  accent-color:var(--color-primario);
}

/* Empty/loading dentro de la tabla */
.table-state{
  display:grid;
  place-items:center;
  gap:7px;
  min-height:180px;
  padding:28px 18px;
  text-align:center;
  color:var(--text-muted);
}
.table-state strong{
  color:var(--text-main);
  font-size:var(--type-component-title,.875rem);
}
.table-state p{
  max-width:420px;
  margin:0;
  font-size:var(--type-meta,.72rem);
  line-height:1.5;
}

/* Responsive: toolbar primero se apila; tabla conserva scroll interno. */
@media(max-width:900px){
  .filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:700px){
  .data-toolbar,
  .table-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  .data-toolbar-main,
  .data-toolbar-actions{
    width:100%;
  }
  .data-toolbar-actions > .btn{
    flex:1;
    justify-content:center;
  }
  .filter-grid{
    grid-template-columns:1fr;
  }
  .filter-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .filter-actions .btn{
    width:100%;
    justify-content:center;
  }
  .bulk-action-bar{
    bottom:calc(78px + env(safe-area-inset-bottom));
    width:calc(100% - 20px);
    align-items:stretch;
    flex-direction:column;
  }
  .bulk-action-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .bulk-action-buttons .btn{
    width:100%;
    justify-content:center;
  }
  .table-footer{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* Dark Mode: deriva de tokens globales. */
html[data-theme="dark"] .bulk-action-bar{
  box-shadow:0 18px 48px rgba(0,0,0,.30);
}

/* Reduced motion: la selección permanece clara sin transición. */
@media(prefers-reduced-motion:reduce){
  .data-table tbody tr,
  .table-enterprise tbody tr{
    transition:none !important;
  }
}


/* =========================================================
   v2.5.22 · Fase 3.4 — Empty States, Contextual Help & Guidance
   ========================================================= */
:root{
  --empty-state-max:480px;
  --guidance-icon-size:36px;
  --guidance-gap:10px;
}

/* Empty state global: una sola estructura para vacíos reales. */
.empty-state,
.empty-state-modern,
.empty-state-compact,
.table-state,
.vacio{
  box-sizing:border-box;
}
.empty-state,
.empty-state-modern{
  min-height:180px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  width:100%;
  padding:28px 20px;
  text-align:center;
  color:var(--text-muted);
}
.empty-state > *,
.empty-state-modern > *{
  max-width:var(--empty-state-max);
}
.empty-state-icon,
.empty-state-modern .empty-state-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto 2px;
  border-radius:var(--radius-lg,16px);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));
  color:var(--color-primario);
}
.empty-state h2,
.empty-state h3,
.empty-state-modern h2,
.empty-state-modern h3{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-component-title,.875rem);
  font-weight:700;
  line-height:1.3;
}
.empty-state p,
.empty-state-modern p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.55;
}
.empty-state-actions,
.empty-state-modern .empty-state-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:4px;
}

/* Vacío compacto para paneles pequeños y popovers. */
.empty-state-compact{
  min-height:112px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  padding:18px 14px;
  text-align:center;
  color:var(--text-muted);
}
.empty-state-compact > svg{
  color:var(--color-primario);
}
.empty-state-compact strong{
  color:var(--text-main);
  font-size:var(--type-label,.76rem);
}
.empty-state-compact span,
.empty-state-compact p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.45;
}

/* Guidance: información útil sin convertirse en alerta. */
.guidance-card,
.contextual-guidance{
  position:relative;
  display:grid;
  grid-template-columns:var(--guidance-icon-size) minmax(0,1fr) auto;
  gap:var(--guidance-gap);
  align-items:start;
  padding:12px 13px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:color-mix(in srgb,var(--surface-app) 62%,var(--surface-card));
}
.guidance-card > .guidance-icon,
.contextual-guidance > .guidance-icon{
  width:var(--guidance-icon-size);
  height:var(--guidance-icon-size);
  display:grid;
  place-items:center;
  border-radius:var(--radius-md,12px);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));
  color:var(--color-primario);
}
.guidance-copy{
  min-width:0;
}
.guidance-copy strong{
  display:block;
  margin:1px 0 2px;
  color:var(--text-main);
  font-size:var(--type-label,.76rem);
  line-height:1.35;
}
.guidance-copy p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.5;
}
.guidance-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:7px;
  flex-wrap:wrap;
}
.guidance-dismiss{
  width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:var(--radius-sm,8px);
  background:transparent;
  color:var(--text-muted);
}

/* Guidance semántica: sólo borde/icono, no bloques saturados. */
.guidance-card.is-info .guidance-icon{color:var(--semantic-info,#2563eb);}
.guidance-card.is-success .guidance-icon{color:var(--semantic-success,#16a34a);}
.guidance-card.is-warning .guidance-icon{color:var(--semantic-warning,#d97706);}
.guidance-card.is-danger .guidance-icon{color:var(--semantic-danger,#dc2626);}

/* Help trigger: icono pequeño, no CTA competitivo. */
.help-trigger,
[data-help-trigger]{
  width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:var(--radius-sm,8px);
  background:transparent;
  color:var(--text-muted);
}
@media(hover:hover){
  .help-trigger:hover,
  [data-help-trigger]:hover{
    background:color-mix(in srgb,var(--text-main) 4%,transparent);
    color:var(--text-main);
  }
}

/* Help popover: Glass permitido por ser capa flotante. */
.help-popover,
[data-help-panel]{
  position:absolute;
  z-index:90;
  width:min(320px,calc(100vw - 24px));
  padding:13px;
  border:1px solid var(--glass-border,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:var(--glass-bg-strong,color-mix(in srgb,var(--surface-card) 94%,transparent));
  box-shadow:var(--glass-shadow,0 16px 38px rgba(15,23,42,.16));
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  color:var(--text-main);
  opacity:0;
  transform:translateY(-4px) scale(.99);
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-standard) var(--motion-ease-standard);
}
.help-popover[hidden],
[data-help-panel][hidden]{
  display:none !important;
}
.help-popover.is-open,
[data-help-panel].is-open{
  opacity:1;
  transform:translateY(0) scale(1);
}
.help-popover strong,
[data-help-panel] strong{
  display:block;
  margin-bottom:3px;
  font-size:var(--type-label,.76rem);
}
.help-popover p,
[data-help-panel] p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.5;
}

/* Help row: título + icono alineados correctamente. */
.label-with-help,
.heading-with-help{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.label-with-help > :first-child,
.heading-with-help > :first-child{
  min-width:0;
}

/* "Next best action" para pantallas vacías/bloqueadas. */
.next-action{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:8px;
  padding:10px 11px;
  border-radius:var(--radius-md,12px);
  background:color-mix(in srgb,var(--color-primario) 4%,var(--surface-card));
  color:var(--text-muted);
  text-align:left;
}
.next-action > svg{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--color-primario);
}
.next-action strong{
  display:block;
  color:var(--text-main);
  font-size:var(--type-meta,.72rem);
}
.next-action span{
  display:block;
  margin-top:1px;
  font-size:.68rem;
  line-height:1.45;
}

/* Onboarding existente: refinamiento visual para que no compita con contenido. */
.onboarding-card{
  border-radius:var(--radius-xl,20px);
}
.onboarding-step-label{
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
}
.onboarding-card p{
  line-height:1.55;
}

/* Móvil */
@media(max-width:700px){
  .empty-state,
  .empty-state-modern{
    min-height:160px;
    padding:24px 16px;
  }
  .empty-state-actions,
  .empty-state-modern .empty-state-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .empty-state-actions .btn,
  .empty-state-modern .empty-state-actions .btn{
    width:100%;
    justify-content:center;
  }
  .guidance-card,
  .contextual-guidance{
    grid-template-columns:var(--guidance-icon-size) minmax(0,1fr);
  }
  .guidance-dismiss{
    position:absolute;
    top:8px;
    right:8px;
  }
  .guidance-copy{
    padding-right:24px;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .help-popover,
  [data-help-panel]{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   v2.5.23 · Fase 3.5 — Dashboard & KPI Information Hierarchy
   ========================================================= */
:root{
  --metric-value-size:1.65rem;
  --metric-card-min-h:112px;
  --dashboard-grid-gap:12px;
  --dashboard-section-gap:20px;
}

/* Retícula de KPIs: misma densidad independientemente del módulo. */
.metric-grid,
.dashboard-metrics,
.dashboard-stats-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--dashboard-grid-gap);
  align-items:stretch;
}
.metric-card,
.dashboard-stats-row > .stat-card{
  min-width:0;
  min-height:var(--metric-card-min-h);
  display:grid;
  align-content:space-between;
  gap:12px;
  padding:16px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}

/* KPI = contexto → valor → cambio. El color de marca no domina el número. */
.metric-label,
.metric-card .stat-label,
.dashboard-stats-row > .stat-card .stat-label{
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  font-weight:500;
  line-height:1.35;
}
.metric-value,
.metric-card .stat-value,
.dashboard-stats-row > .stat-card .stat-value{
  color:var(--text-main);
  font-size:var(--metric-value-size);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.metric-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
}
.metric-delta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:24px;
  padding:3px 7px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--text-main) 4%,transparent);
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.metric-delta.is-positive{
  background:color-mix(in srgb,var(--semantic-success,#16a34a) 8%,transparent);
  color:var(--semantic-success,#16a34a);
}
.metric-delta.is-negative{
  background:color-mix(in srgb,var(--semantic-danger,#dc2626) 8%,transparent);
  color:var(--semantic-danger,#dc2626);
}
.metric-delta.is-warning{
  background:color-mix(in srgb,var(--semantic-warning,#d97706) 8%,transparent);
  color:var(--semantic-warning,#d97706);
}

/* Icono secundario: acompaña al KPI, no se convierte en protagonista. */
.metric-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md,12px);
  background:color-mix(in srgb,var(--text-main) 4%,var(--surface-card));
  color:var(--text-muted);
}
.metric-card.is-actionable .metric-icon{
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card));
  color:var(--color-primario);
}

/* Secciones de dashboard: jerarquía estable. */
.dashboard-section{
  display:grid;
  gap:14px;
  margin:0;
}
.dashboard-section + .dashboard-section{
  margin-top:var(--dashboard-section-gap);
}
.dashboard-section-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  min-width:0;
}
.dashboard-section-heading{
  min-width:0;
}
.dashboard-section-heading h2{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-section-title,.96rem);
  font-weight:700;
  letter-spacing:-.012em;
  line-height:1.3;
}
.dashboard-section-heading p{
  margin:3px 0 0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.45;
}
.dashboard-section-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

/* Layout principal/secundario: prioriza la información accionable. */
.dashboard-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);
  gap:var(--dashboard-grid-gap);
  align-items:start;
}
.dashboard-primary,
.dashboard-secondary{
  display:grid;
  gap:var(--dashboard-grid-gap);
  min-width:0;
}

/* Insight card: explicación, no decoración. */
.insight-card{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  padding:13px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:var(--surface-card);
}
.insight-card-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md,12px);
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card));
  color:var(--color-primario);
}
.insight-card-copy{
  min-width:0;
}
.insight-card-copy strong{
  display:block;
  color:var(--text-main);
  font-size:var(--type-label,.76rem);
  line-height:1.35;
}
.insight-card-copy p{
  margin:3px 0 0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.5;
}

/* Quick actions del dashboard: neutrales salvo acción primaria. */
.dashboard-section .accesos-rapidos,
.dashboard-quick-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.dashboard-section .acceso-rapido,
.dashboard-quick-action{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-md,12px);
  background:var(--surface-subtle,var(--surface-card));
  color:var(--text-main);
  text-decoration:none;
}
.dashboard-section .acceso-rapido > svg,
.dashboard-quick-action > svg{
  flex:0 0 auto;
  color:var(--text-muted);
}
.dashboard-section .acceso-rapido.active > svg,
.dashboard-quick-action.is-primary > svg{
  color:var(--color-primario);
}

/* Chart shell: no inventa gráficos; estandariza su contenedor y leyenda. */
.chart-card,
.dashboard-chart{
  min-width:0;
  padding:16px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}
.chart-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.chart-title{
  min-width:0;
}
.chart-title strong{
  display:block;
  color:var(--text-main);
  font-size:var(--type-component-title,.875rem);
}
.chart-title span{
  display:block;
  margin-top:2px;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
}
.chart-legend{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:var(--text-muted);
  font-size:.68rem;
}
.chart-legend-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.chart-legend-dot{
  width:7px;
  height:7px;
  border-radius:var(--radius-pill);
  background:currentColor;
}

/* Densidad secundaria: listas operativas dentro del dashboard. */
.dashboard-list{
  display:grid;
}
.dashboard-list-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:52px;
  padding:9px 0;
  border-bottom:1px solid var(--border-subtle,var(--line-soft));
}
.dashboard-list-item:last-child{border-bottom:0;}
.dashboard-list-copy{
  min-width:0;
}
.dashboard-list-copy strong{
  display:block;
  overflow:hidden;
  color:var(--text-main);
  font-size:var(--type-label,.76rem);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-list-copy span{
  display:block;
  margin-top:2px;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
}

/* Responsive */
@media(max-width:1100px){
  .metric-grid,
  .dashboard-metrics,
  .dashboard-stats-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-content-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  :root{
    --metric-value-size:1.5rem;
    --metric-card-min-h:104px;
    --dashboard-section-gap:18px;
  }
  .dashboard-section-header{
    align-items:flex-start;
    flex-direction:column;
  }
  .dashboard-section-actions{
    width:100%;
  }
  .dashboard-section-actions .btn{
    flex:1;
    justify-content:center;
  }
  .dashboard-section .accesos-rapidos,
  .dashboard-quick-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .chart-header{
    flex-direction:column;
  }
}
@media(max-width:480px){
  .metric-grid,
  .dashboard-metrics,
  .dashboard-stats-row{
    grid-template-columns:1fr;
  }
  .metric-card,
  .dashboard-stats-row > .stat-card{
    min-height:96px;
  }
  .dashboard-section .accesos-rapidos,
  .dashboard-quick-actions{
    grid-template-columns:1fr;
  }
  .insight-card{
    grid-template-columns:36px minmax(0,1fr);
  }
}

/* Dark Mode hereda superficies globales; no hay paleta paralela. */
html[data-theme="dark"] :is(.metric-card,.chart-card,.dashboard-chart,.insight-card){
  border-color:var(--border-subtle,var(--line-soft));
  background:var(--surface-card);
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .metric-card,
  .dashboard-quick-action,
  .dashboard-section .acceso-rapido{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   v2.5.24 · Mobile KPI Density Fix
   Corrige regresión de v2.5.23: en móvil los KPIs no deben
   convertirse en tarjetas de contenido de ancho completo.
   ========================================================= */
@media(max-width:760px){
  :root{
    --mobile-kpi-h:118px;
    --mobile-kpi-gap:10px;
  }

  .dashboard-stats-wrap{
    gap:var(--mobile-kpi-gap) !important;
  }

  .dashboard-stats-row,
  .dashboard-stats-row-4,
  .dashboard-stats-row-3,
  .metric-grid,
  .dashboard-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:var(--mobile-kpi-gap) !important;
  }

  .dashboard-stats-row > .stat-card,
  .metric-card{
    height:var(--mobile-kpi-h) !important;
    min-height:var(--mobile-kpi-h) !important;
    max-height:var(--mobile-kpi-h) !important;
    padding:12px !important;
    gap:5px !important;
    align-content:start !important;
  }

  .dashboard-stats-row > .stat-card .icon-badge,
  .metric-card .metric-icon{
    width:32px !important;
    height:32px !important;
    min-width:32px;
    margin:0 0 5px !important;
    border-radius:10px !important;
  }

  .dashboard-stats-row > .stat-card .valor,
  .metric-card .stat-value,
  .metric-value{
    margin:0 !important;
    font-size:1.28rem !important;
    line-height:1 !important;
  }

  .dashboard-stats-row > .stat-card .etiqueta,
  .metric-card .stat-label,
  .metric-label{
    min-height:0 !important;
    margin:1px 0 0 !important;
    font-size:.62rem !important;
    line-height:1.15 !important;
    letter-spacing:.025em;
  }

  .dashboard-stats-row > .stat-card .subtitulo,
  .metric-meta{
    margin:0 !important;
    font-size:.61rem !important;
    line-height:1.15 !important;
  }
}

/* Pantallas extremadamente estrechas: sigue siendo preferible mantener
   dos KPIs por fila mientras exista espacio táctil/legible suficiente. */
@media(max-width:340px){
  .dashboard-stats-row,
  .dashboard-stats-row-4,
  .dashboard-stats-row-3,
  .metric-grid,
  .dashboard-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .dashboard-stats-row > .stat-card,
  .metric-card{
    padding:10px !important;
  }
}

/* Release Manager conserva su geometría específica; este fix sólo afecta
   métricas del dashboard/metric-grid, no sus stat cards dedicadas. */


/* =========================================================
   v2.5.25 · Regression Stabilization Layer
   ========================================================= */

/* Compatibility net: a legacy modal explicitly marked aria-hidden=false
   must remain visible even if an old module did not yet call RHMotionModal. */
.modal-overlay:not([hidden])[aria-hidden="false"]:not(.is-closing),
.app-modal[aria-hidden="false"]:not(.is-closing){
  opacity:1;
}
.modal-overlay:not([hidden])[aria-hidden="false"]:not(.is-closing) > :is(.modal-card,.movement-dialog),
.app-modal[aria-hidden="false"]:not(.is-closing) > .app-modal-dialog{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Generic popover/menu classes are visible by default.
   Motion visibility is only applied to [data-motion-popover]. */
:is(.dropdown-menu,.popover,.context-menu,[data-popover-panel]):not([data-motion-popover]){
  opacity:1;
  transform:none;
}

/* Form controls keep the common visual transition but specialized components
   are allowed to override it without fighting a global !important. */
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  transition:
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}


/* =========================================================
   v2.5.26 · Fase 3.6 — Responsive & Mobile UX System
   Mobile-first density contract. No business logic changes.
   ========================================================= */
:root{
  --mobile-page-gutter:14px;
  --mobile-page-gap:14px;
  --mobile-section-gap:18px;
  --mobile-card-padding:14px;
  --mobile-card-radius:16px;
  --mobile-topbar-h:64px;
  --mobile-bottom-nav-h:72px;
}

/* Tablet: reduce saltos antes de entrar a layout móvil completo. */
@media(max-width:1024px){
  .content{
    min-width:0;
  }
  .grid-4,
  .grid-5{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-content-grid,
  .master-detail-layout{
    grid-template-columns:1fr;
  }
}

/* Contrato móvil global */
@media(max-width:860px){
  html{
    scroll-padding-top:calc(var(--mobile-topbar-h) + 12px);
    scroll-padding-bottom:calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom) + 20px);
  }

  body{
    min-width:0;
  }

  .main{
    min-width:0;
    width:100%;
  }

  .content{
    width:100% !important;
    max-width:none !important;
    padding:
      16px
      max(var(--mobile-page-gutter),env(safe-area-inset-right))
      calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom) + 30px)
      max(var(--mobile-page-gutter),env(safe-area-inset-left)) !important;
  }

  /* Ritmo vertical: el viewport pequeño no debe heredar separación de desktop. */
  .content > :where(
    .card,
    .surface-panel,
    .grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .dashboard-stats-wrap,
    .dashboard-section,
    .roles-layout,
    .master-detail-layout,
    .data-table-shell,
    .table-shell
  ) + :where(
    .card,
    .surface-panel,
    .grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .dashboard-stats-wrap,
    .dashboard-section,
    .roles-layout,
    .master-detail-layout,
    .data-table-shell,
    .table-shell
  ){
    margin-top:var(--mobile-page-gap) !important;
  }

  /* Tarjetas de contenido: compactas; KPIs mantienen su contrato v2.5.24. */
  .content > .card:not(.stat-card),
  .surface-panel,
  .form-section,
  .chart-card,
  .dashboard-chart,
  .data-table-shell,
  .table-shell{
    border-radius:var(--mobile-card-radius) !important;
  }

  .surface-panel,
  .form-section,
  .chart-card,
  .dashboard-chart{
    padding:var(--mobile-card-padding) !important;
  }

  /* Encabezados de página: acción debajo sólo cuando ya no cabe. */
  :is(.page-header,.module-header,.dashboard-header,.module-hero){
    min-width:0;
  }

  :is(.page-header,.module-header,.dashboard-header) > :is(.actions,.page-actions,.header-actions){
    flex-wrap:wrap;
  }

  /* Formularios: siempre orden lógico y controles de ancho completo. */
  .form-grid,
  .form-grid-2,
  .form-grid-3,
  .grid-2:has(> label),
  .grid-3:has(> label){
    grid-template-columns:1fr !important;
  }

  form :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    max-width:100%;
  }

  .form-actions:not(.form-actions-inline),
  .form-footer-actions:not(.form-actions-inline){
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .form-actions:not(.form-actions-inline) > :is(.btn,button,a),
  .form-footer-actions:not(.form-actions-inline) > :is(.btn,button,a){
    width:100%;
    justify-content:center;
  }

  /* Tablas: sólo el contenedor desplaza horizontalmente. */
  .tabla-wrap,
  .data-table-scroll,
  .table-scroll{
    max-width:100%;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }

  .tabla-wrap > table,
  .data-table,
  .table-enterprise{
    width:max-content;
    min-width:100%;
  }

  /* Toolbars: no comprimen búsqueda + acciones en una línea imposible. */
  :is(.data-toolbar,.table-toolbar,.organization-toolbar,.status-strip){
    min-width:0;
  }

  .table-search,
  .organization-search{
    min-width:0;
    width:100%;
  }

  /* Modales se comportan como superficies móviles, sin tocar su lógica. */
  .modal-overlay > :is(.modal-card,.movement-dialog),
  .app-modal > .app-modal-dialog{
    width:min(100% - 20px,680px) !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow:auto;
    overscroll-behavior:contain;
  }

  /* Topbar: safe area y controles estables. */
  .topbar-movil{
    min-height:calc(var(--mobile-topbar-h) + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }

  .topbar-movil-logo{
    flex:0 0 auto;
  }

  .cabecera-acciones-movil{
    min-width:0;
    margin-left:auto;
  }

  /* Bottom navigation: altura visual estable y contenido por encima de gesture area. */
  .bottom-nav-movil{
  }

  .bottom-nav-movil > :is(a,button){
  }

  .bottom-nav-movil > :is(a,button) > span:last-child{
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Quick Actions y Activity Center respetan safe areas reales. */
  .global-create-panel{
    left:max(10px,env(safe-area-inset-left)) !important;
    right:max(10px,env(safe-area-inset-right)) !important;
    bottom:max(10px,env(safe-area-inset-bottom)) !important;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow:auto;
    overscroll-behavior:contain;
  }

  .notificaciones-panel.activity-center{
    top:calc(var(--mobile-topbar-h) + env(safe-area-inset-top) + 8px) !important;
    left:max(12px,env(safe-area-inset-left)) !important;
    right:max(12px,env(safe-area-inset-right)) !important;
    max-height:calc(100dvh - var(--mobile-topbar-h) - var(--mobile-bottom-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px) !important;
  }

  /* Top Sheet de navegación comparte exactamente los mismos márgenes. */
  .sidebar{
    left:max(12px,env(safe-area-inset-left)) !important;
    right:max(12px,env(safe-area-inset-right)) !important;
    top:calc(var(--mobile-topbar-h) + env(safe-area-inset-top) + 8px) !important;
    max-height:calc(100dvh - var(--mobile-topbar-h) - env(safe-area-inset-top) - 24px);
    overflow:auto;
    overscroll-behavior:contain;
  }

  /* Empty states: no ocupan una pantalla completa por falta de datos. */
  .empty-state,
  .empty-state-modern{
    min-height:148px;
    padding:22px 14px;
  }

  .table-state{
    min-height:148px;
  }
}

/* Teléfonos estrechos: densidad adicional sin cambiar columnas KPI. */
@media(max-width:480px){
  :root{
    --mobile-page-gutter:12px;
    --mobile-page-gap:12px;
    --mobile-card-padding:13px;
    --mobile-card-radius:15px;
  }

  .content{
    padding-top:14px !important;
  }

  .page-title,
  .module-hero h1,
  .dashboard-header h1{
    overflow-wrap:anywhere;
  }

  .dashboard-section-header,
  .form-section-header,
  .chart-header{
    gap:8px;
  }

  /* Acciones rápidas comunes: 2 columnas antes de caer a lista larga. */
  .dashboard-section .accesos-rapidos,
  .dashboard-quick-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .dashboard-section .acceso-rapido,
  .dashboard-quick-action{
    min-height:58px;
    padding:9px 10px;
  }
}

/* Sólo pantallas extremadamente estrechas reciben acciones rápidas en una columna.
   Los KPI siguen explícitamente en dos columnas por contrato v2.5.24. */
@media(max-width:330px){
  .dashboard-section .accesos-rapidos,
  .dashboard-quick-actions{
    grid-template-columns:1fr !important;
  }
}

/* Orientación horizontal móvil: evita que barras fijas consuman demasiado viewport. */
@media(max-width:860px) and (orientation:landscape) and (max-height:520px){
  :root{
    --mobile-bottom-nav-h:64px;
  }

  .bottom-nav-movil{
  }

  .bottom-nav-movil > :is(a,button){
  }

  .global-create-panel,
  .notificaciones-panel.activity-center,
  .sidebar{
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
  }
}


/* =========================================================
   v2.5.27 · Dashboard Deep UX Audit
   Jerarquía y densidad específicas del Dashboard.
   ========================================================= */
.dashboard-metrics-section{
  display:grid;
  gap:12px;
  margin-top:var(--dashboard-section-gap,20px);
}
.dashboard-metrics-header{
  margin-bottom:0;
}
.dashboard-metrics-primary,
.dashboard-metrics-secondary{
  margin:0;
}
.dashboard-metrics-secondary{
  opacity:.96;
}
.dashboard-operational-alert{
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:color-mix(in srgb,var(--semantic-danger,#dc2626) 7%,var(--surface-card)) !important;
  color:var(--text-main) !important;
  border:1px solid color-mix(in srgb,var(--semantic-danger,#dc2626) 20%,var(--line-soft));
}
.dashboard-operational-alert > svg{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--semantic-danger,#dc2626);
}

/* Spotlight: prioridad real, no hero de marketing. */
.dashboard-spotlight{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:18px;
}
.dashboard-spotlight-copy{
  min-width:0;
}
.dashboard-spotlight-copy h2{
  max-width:760px;
}
.dashboard-spotlight-copy p{
  max-width:720px;
}
.dashboard-spotlight .spotlight-cta{
  align-self:end;
  white-space:nowrap;
}

/* Accesos rápidos: el texto tiene el mismo peso visual que el icono. */
.dashboard-quick-section .accesos-rapidos{
  margin-top:0;
}
.dashboard-quick-section .acceso-rapido{
  font-size:var(--type-label,.76rem);
  font-weight:500;
}
.dashboard-quick-section .acceso-rapido .icon-badge{
  margin:0;
}

/* Actividad reciente: acción compacta y alineada. */
.dashboard-activity-section .tabla-wrap{
  border-radius:var(--radius-md,12px);
}
.dashboard-row-action{
  min-width:36px;
  width:36px;
  height:36px;
  min-height:36px;
  padding:0 !important;
  display:grid !important;
  place-items:center;
}

/* Tablet */
@media(max-width:900px){
  .dashboard-spotlight{
    grid-template-columns:1fr;
    align-items:start;
    gap:14px;
  }
  .dashboard-spotlight .spotlight-cta{
    width:max-content;
    max-width:100%;
  }
}

/* Móvil: prioridad compacta + jerarquía de métricas más clara. */
@media(max-width:760px){
  .dashboard-home-heading{
    gap:12px;
  }

  .dashboard-metrics-section{
    gap:9px;
    margin-top:16px;
  }

  .dashboard-metrics-header{
    margin-bottom:1px;
  }

  .dashboard-metrics-header .dashboard-section-heading p{
    max-width:36rem;
  }

  .dashboard-spotlight{
    gap:12px;
    padding:16px !important;
    border-radius:var(--mobile-card-radius,16px) !important;
  }

  .dashboard-spotlight-copy{
    display:grid;
    gap:6px;
  }

  .dashboard-spotlight-copy .spotlight-eyebrow{
    margin:0;
    font-size:.68rem;
    line-height:1.2;
  }

  .dashboard-spotlight-copy h2{
    margin:0;
    font-size:1.18rem;
    line-height:1.22;
    letter-spacing:-.018em;
  }

  .dashboard-spotlight-copy p{
    margin:0;
    font-size:.78rem;
    line-height:1.48;
  }

  .dashboard-spotlight .spotlight-cta{
    width:100%;
    min-height:44px;
    justify-content:center;
  }

  .command-hint-card{
    min-height:62px;
    padding:10px 12px !important;
  }
  .command-hint-card > kbd{
    display:none;
  }
  .command-hint-card strong{
    font-size:.78rem;
  }
  .command-hint-card small{
    font-size:.68rem;
  }

  .dashboard-quick-section,
  .dashboard-activity-section{
    margin-top:var(--mobile-page-gap,14px) !important;
  }

  .dashboard-quick-section .card-header,
  .dashboard-activity-section .card-header{
    margin-bottom:10px;
  }

  .dashboard-quick-section .accesos-rapidos{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .dashboard-quick-section .acceso-rapido{
    min-height:56px;
    padding:9px 10px;
    gap:8px;
  }

  .dashboard-quick-section .acceso-rapido .icon-badge{
    width:30px;
    height:30px;
    min-width:30px;
  }

  /* Segunda fila de KPI sigue visible pero ligeramente más calmada. */
  .dashboard-metrics-secondary > .stat-card{
    background:color-mix(in srgb,var(--surface-card) 96%,var(--surface-app));
  }
}

/* Teléfonos estrechos: no reintroducir KPI a una columna. */
@media(max-width:480px){
  .dashboard-home-heading{
    align-items:flex-start;
  }

  .dashboard-home-heading > .btn{
    min-height:42px;
    padding-inline:12px;
  }

  .dashboard-spotlight{
    padding:14px !important;
  }

  .dashboard-quick-section .accesos-rapidos{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v2.5.28 · Fase 4.2 — Personas & Expediente 360 Deep UX Audit
   ========================================================= */

/* Personas / listado */
.personas-page-heading{
  margin-bottom:14px;
}
.personas-page-heading > div{
  min-width:0;
}
.personas-page-heading p{
  margin:.25rem 0 0;
  color:var(--text-muted);
  font-size:var(--type-body,.84rem);
}
.personas-list-card{
  padding:16px !important;
}
.personas-filter-bar{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(180px,220px) auto auto;
  gap:8px;
  align-items:center;
  margin:0 0 14px;
}
.personas-search-field{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
}
.personas-search-field > svg{
  position:absolute;
  left:12px;
  z-index:1;
  color:var(--text-muted);
  pointer-events:none;
}
.personas-search-field input{
  width:100%;
  padding-left:38px !important;
}
.personas-filter-bar > select{
  width:100%;
}
.personas-clear-filter{
  min-height:44px;
}
.personas-table-wrap{
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px) !important;
}
.personas-table{
  min-width:780px !important;
}
.personas-table td:first-child{
  min-width:190px;
  font-weight:500;
  color:var(--text-main);
}
.personas-row-action{
  min-width:52px;
  justify-content:center;
}

/* Expediente hero */
.expediente-hero{
  margin:0 0 14px !important;
  padding:16px 18px !important;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}
.expediente-hero-actions > form{
  margin:0;
}
.expediente-number{
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  font-weight:500;
}
.expediente-hero-avatar{
  background:color-mix(in srgb,var(--color-primario) 6%,var(--surface-card));
  border-color:var(--border-subtle,var(--line-soft));
  color:var(--color-primario);
}

/* Tabs del expediente: una sola banda consistente y navegable. */
.expediente-section-tabs{
  position:sticky;
  top:12px;
  z-index:28;
  display:flex;
  gap:5px;
  width:100%;
  max-width:100%;
  margin:0 0 14px !important;
  padding:5px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-md,12px);
  background:color-mix(in srgb,var(--surface-card) 94%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
}
.expediente-section-tabs::-webkit-scrollbar{display:none;}
.expediente-section-tabs .section-tab{
  flex:0 0 auto;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 11px;
  white-space:nowrap;
}
.expediente-section-tabs .section-tab em{
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--text-main) 5%,transparent);
  color:var(--text-muted);
  font-size:.64rem;
  font-style:normal;
  font-variant-numeric:tabular-nums;
}
.expediente-section-tabs .section-tab.active em{
  background:color-mix(in srgb,var(--color-primario) 11%,transparent);
  color:var(--color-primario);
}

/* HR Core: reducir ruido y hacer vigente > histórico. */
.expediente-laboral-summary{
  border-color:var(--border-subtle,var(--line-soft));
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}
.expediente-laboral-summary .hrcore-heading{
  padding-bottom:12px;
  border-bottom:1px solid var(--border-subtle,var(--line-soft));
}
.expediente-laboral-summary .hrcore-heading p{
  max-width:680px;
  line-height:1.5;
}
.expediente-laboral-summary .hrcore-kpis > div{
  border:1px solid var(--border-subtle,var(--line-soft));
  background:var(--surface-subtle,var(--surface-card));
}
.expediente-laboral-summary .hrcore-current-strip > div{
}
.expediente-laboral-summary .hrcore-history{
  min-width:0;
}

/* Móvil */
@media(max-width:760px){
  .personas-page-heading{
    align-items:flex-start;
    gap:10px;
  }
  .personas-page-heading > .btn{
    width:100%;
    justify-content:center;
  }
  .personas-list-card{
    padding:13px !important;
  }
  .personas-filter-bar{
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:12px;
  }
  .personas-filter-bar > :is(.btn,a){
    width:100%;
    justify-content:center;
  }
  .personas-table{
    min-width:720px !important;
  }

  .expediente-hero{
    padding:14px !important;
    gap:12px !important;
  }
  .expediente-hero-identity{
    grid-template-columns:52px minmax(0,1fr) !important;
    gap:10px !important;
  }
  .expediente-hero-avatar{
    width:52px !important;
    height:52px !important;
    border-radius:15px !important;
  }
  .expediente-hero-copy h1{
    font-size:1.16rem !important;
    line-height:1.18;
  }
  .expediente-hero-photo-form{
    grid-column:1 / -1;
  }
  .expediente-hero-photo-form .btn{
    min-height:40px;
  }
  .expediente-hero-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:7px !important;
  }
  .expediente-hero-actions > :is(form,button,.btn,.badge){
    min-width:0;
  }
  .expediente-hero-actions > form > .btn,
  .expediente-hero-actions > .btn{
    width:100%;
    justify-content:center;
  }
  .expediente-hero-actions > .badge{
    min-height:38px;
    justify-content:center;
  }

  .expediente-section-tabs{
    top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 6px);
    margin-inline:0 !important;
  }

  .expediente-laboral-summary{
    padding:13px !important;
  }
  .expediente-laboral-summary .hrcore-heading{
    display:grid;
    gap:10px;
    margin-bottom:12px;
  }
  .expediente-laboral-summary .hrcore-heading-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .expediente-laboral-summary .hrcore-heading-actions .btn{
    width:100%;
    justify-content:center;
  }

  /* Información vigente en 2×2; evita cuatro tarjetas verticales innecesarias. */
  .expediente-laboral-summary .hrcore-kpis,
  .expediente-laboral-summary .hrcore-current-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .expediente-laboral-summary .hrcore-kpis > div,
  .expediente-laboral-summary .hrcore-current-strip > div{
    min-height:82px;
    padding:10px !important;
  }
  .expediente-laboral-summary .hrcore-current-strip span{
    font-size:.64rem;
  }
  .expediente-laboral-summary .hrcore-current-strip strong{
    font-size:.8rem;
    line-height:1.25;
  }
  .expediente-laboral-summary .hrcore-current-strip small{
    font-size:.66rem;
  }

  .expediente-laboral-summary .hrcore-history-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .document-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Pantallas muy estrechas: se preservan 2 columnas sólo para resúmenes
   de dato corto; acciones del hero sí pasan a una columna si hace falta. */
@media(max-width:360px){
  .expediente-hero-actions{
    grid-template-columns:1fr;
  }
  .expediente-laboral-summary .hrcore-kpis,
  .expediente-laboral-summary .hrcore-current-strip,
  .document-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v2.5.30 · Fase 4.3 — Alta individual + Alta masiva
   ========================================================= */

/* Alta individual — legacy shared form baseline; guided wizard authority is v2.7.31. */
.alta-form{
  padding:18px !important;
  scroll-margin-top:80px;
}
.alta-form-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:end;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-subtle,var(--line-soft));
}
.alta-form-intro-copy{
  min-width:0;
}
.alta-form-intro-copy strong{
  display:block;
  margin-top:4px;
  color:var(--text-main);
  font-size:var(--type-component-title,.875rem);
}
.alta-form-intro-copy p{
  max-width:680px;
  margin:3px 0 0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  line-height:1.5;
}
.alta-section-nav{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.alta-section-nav a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-sm,8px);
  background:var(--surface-card);
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:500;
  text-decoration:none;
}
@media(hover:hover){
  .alta-section-nav a:hover{
    border-color:color-mix(in srgb,var(--color-primario) 22%,var(--line-soft));
    background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-card));
    color:var(--text-main);
  }
}

.alta-section-header{
  scroll-margin-top:90px;
  min-height:0 !important;
  margin-top:20px !important;
  margin-bottom:12px !important;
  padding-top:18px !important;
  border-top:1px solid var(--border-subtle,var(--line-soft)) !important;
}
.alta-section-header:first-of-type{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}
.alta-section-header > div{
  min-width:0;
}
.alta-section-header .section-kicker{
  display:block;
  margin-bottom:3px;
}
.alta-section-header h2{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-section-title,.96rem);
}
.alta-section-header p{
  max-width:680px;
  margin:3px 0 0;
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  font-weight:500;
  line-height:1.45;
}
.alta-form .form-grupo{
  margin-bottom:0;
}
.alta-form > .grid{
  gap:14px !important;
  margin-bottom:14px !important;
  align-items:start;
}
.alta-form > .form-grupo{
  margin-bottom:14px;
}
.alta-form .identidad-auto-hint{
  line-height:1.4;
}
.alta-validation-summary{
  margin-bottom:16px;
}
.alta-validation-summary .validation-summary-head > span{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--semantic-danger,#dc2626) 10%,transparent);
  color:var(--semantic-danger,#dc2626);
  font-weight:700;
}
.alta-form-actions{
  margin-top:20px !important;
}
.alta-form-actions > .btn{
  min-width:150px;
}

/* Carga masiva — página e historial. */
.carga-flow-layout{
  align-items:start;
}
.cargas-page-heading{
  margin-bottom:14px;
}
.cargas-page-heading p{
  margin:.25rem 0 0;
  color:var(--text-muted);
  font-size:var(--type-body,.84rem);
}
.cargas-page-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.cargas-page-actions form{
  margin:0;
}
.cargas-pending-alert{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:14px;
  border:1px solid color-mix(in srgb,var(--semantic-warning,#d97706) 22%,var(--line-soft));
  background:color-mix(in srgb,var(--semantic-warning,#d97706) 6%,var(--surface-card)) !important;
  color:var(--text-main) !important;
}
.cargas-pending-alert > svg{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--semantic-warning,#d97706);
}
.cargas-history-card{
  padding:16px !important;
}
.cargas-history-wrap{
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px) !important;
}
.cargas-history-table{
  min-width:780px !important;
}
.cargas-history-table td:first-child{
  min-width:190px;
  color:var(--text-main);
  font-weight:500;
}
.cargas-row-action{
  min-width:52px;
  justify-content:center;
}

/* Dropzone: state clarity without visual noise. */
.carga-drop-form{
  min-width:0;
}
.dropzone-carga-premium{
  min-height:220px;
  border-radius:var(--radius-lg,16px) !important;
}
.archivo-seleccionado-premium{
  border-radius:var(--radius-md,12px) !important;
}
.carga-footer{
  gap:10px;
}
.carga-footer > .btn,
.carga-footer .app-modal-footer-actions{
  min-width:0;
}

/* Mobile */
@media(max-width:760px){
  .alta-form{
    padding:13px !important;
  }
  .alta-form-intro{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:14px;
    padding-bottom:13px;
  }
  .alta-section-nav{
    flex-wrap:nowrap;
    width:100%;
    padding-bottom:2px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  .alta-section-nav::-webkit-scrollbar{display:none;}
  .alta-section-nav a{
    flex:0 0 auto;
  }

  .alta-section-header{
    margin-top:16px !important;
    padding-top:15px !important;
    scroll-margin-top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 12px);
  }
  .alta-form > .grid{
    grid-template-columns:1fr !important;
    gap:11px !important;
    margin-bottom:11px !important;
  }
  .alta-form-actions{
    grid-template-columns:1fr 1fr !important;
    bottom:calc(var(--mobile-bottom-nav-h,72px) + env(safe-area-inset-bottom) + 12px) !important;
  }
  .alta-form-actions > .btn{
    min-width:0;
    width:100%;
    justify-content:center;
  }

  .cargas-page-heading{
    align-items:flex-start;
    gap:10px;
  }
  .cargas-page-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .cargas-page-actions > :is(a,form),
  .cargas-page-actions form > .btn,
  .cargas-page-actions > .btn{
    width:100%;
  }
  .cargas-page-actions :is(.btn){
    justify-content:center;
  }
  .cargas-history-card{
    padding:13px !important;
  }

  .carga-flow-layout{
    grid-template-columns:1fr !important;
  }
  .carga-info-card{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }
  .carga-info-step{
    min-height:0;
    padding:10px 0 !important;
  }
  .dropzone-carga-premium{
    min-height:190px;
    padding:18px 14px !important;
  }
  .carga-footer{
    display:grid !important;
    grid-template-columns:1fr;
  }
  .carga-footer > .btn,
  .carga-footer .app-modal-footer-actions{
    width:100%;
  }
  .carga-footer .app-modal-footer-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .carga-footer .btn{
    width:100%;
    justify-content:center;
  }
}

/* Tiny phones: keep action priority but avoid a cramped 2-column footer. */
@media(max-width:380px){
  .alta-form-actions{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   v2.5.31 · Fase 4.4 — Supervisión & Validaciones
   ========================================================= */
.supervision-page-heading,
.supervision-report-heading{
  margin-bottom:14px;
}
.supervision-page-heading p,
.supervision-report-heading p{
  margin:.25rem 0 0;
  color:var(--text-muted);
  font-size:var(--type-body,.84rem);
}
.supervision-tabs{
  display:flex;
  gap:5px;
  max-width:100%;
  margin:0 0 14px;
  padding:5px;
  overflow-x:auto;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-md,12px);
  background:var(--surface-card);
  scrollbar-width:none;
}
.supervision-tabs::-webkit-scrollbar{display:none;}
.supervision-tabs .tab{
  flex:0 0 auto;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:var(--radius-sm,8px);
  color:var(--text-muted);
  font-size:var(--type-label,.76rem);
  font-weight:500;
  text-decoration:none;
}
.supervision-tabs .tab.active{
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));
  color:var(--color-primario);
}
.supervision-tabs .conteo{
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--text-main) 5%,transparent);
  color:inherit;
  font-size:.64rem;
  font-variant-numeric:tabular-nums;
}

.supervision-card{
  padding:16px !important;
}
.supervision-bulk-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:54px;
  margin-bottom:12px;
  padding:9px 10px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-md,12px);
  background:color-mix(in srgb,var(--surface-app) 58%,var(--surface-card));
}
.supervision-selection-meta{
  min-width:0;
}
.supervision-selection-meta strong{
  display:block;
  color:var(--text-main);
  font-size:var(--type-label,.76rem);
}
.supervision-selection-meta span{
  display:block;
  margin-top:2px;
  color:var(--text-muted);
  font-size:.68rem;
}
.supervision-bulk-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}
.supervision-table-wrap,
.supervision-history-wrap{
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px) !important;
}
.supervision-table{
  min-width:930px !important;
}
.supervision-history-table{
  min-width:720px !important;
}
.supervision-table td:nth-child(2),
.supervision-history-table td:nth-child(2){
  min-width:190px;
  color:var(--text-main);
  font-weight:500;
}
.supervision-row-action{
  justify-content:center;
}
.supervision-table tbody tr.is-selected{
  background:color-mix(in srgb,var(--color-primario) 6%,var(--surface-card)) !important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--color-primario) 72%,transparent);
}
.supervision-table input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
  margin:0;
  accent-color:var(--color-primario);
}

/* SLA mantiene significado semántico sin colorear toda la fila. */
.supervision-table .badge-red{
  white-space:nowrap;
}

/* Rechazo en lote usa modal global. */
.supervision-reject-dialog{
  width:min(460px,calc(100vw - 24px));
}
.supervision-reject-dialog textarea{
  min-height:112px;
}
.supervision-reject-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* Histórico */
.supervision-report-filters{
  padding:16px !important;
}
.supervision-filter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:10px;
  align-items:end;
}
.supervision-filter-grid .form-grupo{
  margin:0;
}
.supervision-period-presets{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border-subtle,var(--line-soft));
}
.supervision-summary-section{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.supervision-summary-grid{
  gap:10px !important;
}
.supervision-summary-grid > .stat-card{
  min-width:0;
}
.supervision-chart-card{
  padding:16px !important;
}
.supervision-chart-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
.supervision-chart-legend{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  color:var(--text-muted);
  font-size:.72rem;
}
.supervision-chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.supervision-chart-legend i{
  width:9px;
  height:9px;
  display:inline-block;
  border-radius:3px;
  background:var(--line-soft);
}
.supervision-chart-legend i.is-success{background:var(--semantic-success,#16a34a);}
.supervision-chart-legend i.is-danger{background:var(--semantic-danger,#dc2626);}
.supervision-chart-legend i.is-neutral{background:var(--line-soft);}

/* Mobile */
@media(max-width:760px){
  .supervision-page-heading,
  .supervision-report-heading{
    align-items:flex-start;
    gap:10px;
  }
  .supervision-page-heading > .btn,
  .supervision-report-heading > .btn{
    width:100%;
    justify-content:center;
  }
  .supervision-tabs{
    margin-bottom:12px;
  }
  .supervision-card{
    padding:13px !important;
  }
  .supervision-bulk-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  .supervision-bulk-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .supervision-bulk-actions .btn{
    width:100%;
    justify-content:center;
  }

  .supervision-reject-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .supervision-reject-actions .btn{
    width:100%;
    justify-content:center;
  }

  .supervision-report-filters{
    padding:13px !important;
  }
  .supervision-filter-grid{
    grid-template-columns:1fr;
  }
  .supervision-filter-grid > .btn{
    width:100%;
    justify-content:center;
  }
  .supervision-period-presets{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .supervision-period-presets::-webkit-scrollbar{display:none;}
  .supervision-period-presets .btn{
    flex:0 0 auto;
  }

  /* Reporte tiene muchas métricas: 2 columnas compactas, nunca 1 card gigante. */
  .supervision-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .supervision-summary-grid > .stat-card{
    height:118px !important;
    min-height:118px !important;
    max-height:118px !important;
    padding:12px !important;
  }
  .supervision-chart-card{
    padding:13px !important;
  }
}
@media(max-width:360px){
  .supervision-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v2.5.32 · Fase 4.5 — Periodos, Incidencias & Prenómina
   ========================================================= */
.nomina-page-header{
  margin-bottom:14px;
}
.payroll-metric-grid,
.payroll-period-metrics{
  gap:10px !important;
  margin-bottom:14px;
}
.payroll-metric-card{
  min-width:0;
  min-height:108px;
  display:grid;
  align-content:space-between;
  padding:15px !important;
  border:1px solid var(--border-subtle,var(--line-soft));
  box-shadow:var(--shadow-xs);
}
.payroll-metric-card small{
  color:var(--text-muted);
  font-size:var(--type-meta,.72rem);
  font-weight:500;
}
.payroll-metric-card h2{
  margin:8px 0 0;
  color:var(--text-main);
  font-size:1.55rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.payroll-metric-card.is-open,
.payroll-metric-card.is-success{
  border-color:color-mix(in srgb,var(--semantic-success,#16a34a) 20%,var(--line-soft));
}
.payroll-metric-card.is-review{
  border-color:color-mix(in srgb,var(--semantic-warning,#d97706) 24%,var(--line-soft));
}

.payroll-period-list,
.payroll-incidencias-card,
.payroll-snapshot-card{
  padding:16px !important;
}
.payroll-period-table-wrap,
.payroll-incidence-table-wrap,
.payroll-snapshot-table-wrap{
  max-width:100%;
  overflow:auto;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px);
  overscroll-behavior-inline:contain;
}
.payroll-period-table{min-width:760px !important;}
.payroll-incidence-table{min-width:960px !important;}
.payroll-snapshot-table{min-width:860px !important;}
.payroll-period-table td:first-child,
.payroll-incidence-table td:first-child,
.payroll-snapshot-table td:first-child{
  min-width:180px;
  color:var(--text-main);
}
.payroll-period-table .col-actions{
  text-align:right;
}

.payroll-page-header{
  margin-bottom:14px;
}
.payroll-header-actions{
  align-items:center;
}
.payroll-header-actions form{margin:0;}
.payroll-status{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-pill);
  background:var(--surface-card);
  color:var(--text-main);
  font-size:.7rem;
  font-weight:700;
}
.payroll-status-dot{
  width:7px;
  height:7px;
  border-radius:var(--radius-pill);
  background:var(--text-muted);
}
.payroll-status-abierto .payroll-status-dot{background:var(--semantic-success,#16a34a);}
.payroll-status-revision .payroll-status-dot{background:var(--semantic-warning,#d97706);}
.payroll-status-autorizado .payroll-status-dot{background:var(--semantic-info,#2563eb);}

.payroll-incidence-summary{
  gap:9px !important;
  margin-bottom:12px !important;
}
.payroll-incidence-summary .metric-soft{
  min-height:96px;
  padding:12px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-md,12px);
  background:var(--surface-subtle,var(--surface-card));
}
.payroll-incidence-summary .metric-soft small{
  display:block;
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:500;
}
.payroll-incidence-summary .metric-soft strong{
  display:block;
  margin-top:5px;
  color:var(--text-main);
  font-size:1.18rem;
  font-variant-numeric:tabular-nums;
}
.payroll-incidence-summary .metric-soft span{
  display:block;
  margin-top:3px;
  color:var(--text-muted);
  font-size:.66rem;
  line-height:1.35;
}

.payroll-lock-alert{
  margin-top:12px;
}
.payroll-protected-period{
  border:1px solid color-mix(in srgb,var(--semantic-danger,#dc2626) 20%,var(--line-soft));
  background:color-mix(in srgb,var(--semantic-danger,#dc2626) 4%,var(--surface-card));
}
.payroll-protected-period h3{
  margin-top:0;
}
.payroll-protected-period form{
  margin-top:12px;
}

.payroll-period-modal,
.payroll-incidence-modal,
.payroll-resolve-modal{
  width:min(680px,calc(100vw - 24px));
}
.payroll-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.payroll-incidence-modal .incidencia-field-help{
  margin-top:-2px;
}

/* Mobile density */
@media(max-width:760px){
  .nomina-page-header,
  .payroll-page-header{
    align-items:flex-start;
    gap:10px;
  }
  .nomina-page-header > .btn{
    width:100%;
    justify-content:center;
  }

  .payroll-metric-grid,
  .payroll-period-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .payroll-metric-card{
    min-height:104px !important;
    height:104px !important;
    max-height:104px !important;
    padding:12px !important;
  }
  .payroll-metric-card h2{
    font-size:1.28rem;
  }

  .payroll-period-list,
  .payroll-incidencias-card,
  .payroll-snapshot-card{
    padding:13px !important;
  }

  .payroll-header-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    gap:8px;
  }
  .payroll-header-actions > .payroll-status{
    justify-self:start;
  }
  .payroll-header-actions form,
  .payroll-header-actions .btn{
    width:100%;
  }
  .payroll-header-actions .btn{
    justify-content:center;
  }

  .payroll-incidencias-card > .card-header{
    display:grid;
    grid-template-columns:1fr;
    gap:10px !important;
  }
  .payroll-incidencias-card > .card-header .btn{
    width:100%;
    justify-content:center;
  }
  .payroll-incidence-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .payroll-incidence-summary .metric-soft:first-child{
    grid-column:1 / -1;
    min-height:82px;
  }

  .payroll-modal-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .payroll-modal-actions .btn{
    width:100%;
    justify-content:center;
  }
  .payroll-protected-period form .btn{
    width:100%;
    justify-content:center;
  }
}
@media(max-width:360px){
  .payroll-metric-grid,
  .payroll-period-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v2.5.33 · Fase 4.6 — Organización / Directorio / Organigrama
   ========================================================= */
.organization-page-hero{
  margin-bottom:12px;
  padding:18px 20px !important;
}
.organization-page-hero h1{
  font-size:1.45rem;
}
.organization-page-hero p{
  max-width:720px;
}

.organization-tabs{
  position:sticky;
  top:12px;
  z-index:24;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  background:color-mix(in srgb,var(--surface-card) 94%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  backdrop-filter:blur(14px) saturate(135%);
}
.organization-tabs::-webkit-scrollbar{display:none;}
.organization-tabs .section-tab{
  flex:0 0 auto;
  white-space:nowrap;
}
.organization-tabs .section-tab em{
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--text-main) 5%,transparent);
  color:inherit;
  font-size:.64rem;
  font-style:normal;
  font-variant-numeric:tabular-nums;
}

.organization-directory-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.organization-directory-toolbar .organization-search{
  flex:1 1 320px;
  min-width:0;
}
.organization-directory-toolbar .organization-count{
  flex:0 0 auto;
  white-space:nowrap;
}

.organization-directory{
  display:grid;
  gap:8px;
}
.directory-person-card{
  min-height:72px;
  padding:11px 12px;
  border-radius:var(--radius-md,12px);
}
.directory-person-main{
  min-width:0;
}
.directory-person-main strong,
.directory-person-main span,
.directory-person-main small{
  overflow:hidden;
  text-overflow:ellipsis;
}
.directory-person-main strong{
  white-space:nowrap;
}
.directory-profile-action{
  flex:0 0 auto;
}

/* Teams: denser cards, calm hierarchy. */
.organization-team-grid{
  gap:12px;
}
.organization-team-grid .team-card{
  padding:14px !important;
  box-shadow:var(--shadow-xs);
}
.organization-team-grid .team-card-head{
  margin-bottom:10px;
}
.organization-team-grid .team-members{
  gap:6px;
}
.organization-team-grid .team-members > div{
  min-height:48px;
  padding:7px 8px;
  border-radius:var(--radius-sm,8px);
}

/* Org chart controls + editor */
.organization-chart-card{
  padding:0 !important;
  overflow:hidden;
}
.organization-chart-card .org-chart-head{
  padding:14px 16px;
}
.org-chart-controls{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.org-chart-controls .btn{
  min-width:38px;
  justify-content:center;
}
.organization-structure-editor{
  margin:0 14px 12px;
  border-radius:var(--radius-md,12px);
}
.organization-structure-editor > summary{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 12px;
  cursor:pointer;
}
.organization-structure-editor .org-inline-form{
  gap:10px;
  padding:0 12px 12px;
}
.org-chart-viewport{
  max-width:100%;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.org-chart-viewport:focus-visible{
  box-shadow:inset 0 0 0 3px var(--focus-ring);
}
.org-person-node{
  min-width:180px;
  max-width:220px;
}

/* Announcements */
.organization-announcements-layout{
  align-items:start;
  gap:12px;
}
.organization-announcements-card,
.organization-compose-card,
.organization-celebration-card{
  padding:15px !important;
}
.announcement-list{
  display:grid;
  gap:9px;
}
.announcement-card{
  padding:13px;
  border-radius:var(--radius-md,12px);
}
.announcement-card h3{
  margin:6px 0 4px;
  font-size:.88rem;
}
.announcement-card p{
  margin:0;
  font-size:.76rem;
  line-height:1.5;
}
.announcement-card footer{
  margin-top:10px;
  padding-top:9px;
}
.announcement-footer-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.announcement-pin-action{
  min-height:30px;
  padding:4px 7px;
}

.organization-compose-card{
  position:sticky;
  top:74px;
}
.organization-announcement-form{
  display:grid;
  gap:10px;
}
.organization-announcement-form > label{
  display:grid;
  gap:6px;
  margin:0;
}
.organization-announcement-form textarea{
  min-height:120px;
}
.organization-compose-actions{
  margin-top:2px !important;
  padding-top:12px !important;
}
.organization-compose-actions .btn{
  width:100%;
  justify-content:center;
}

/* Celebrations */
.organization-celebration-card .celebration-list{
  gap:7px;
}
.organization-celebration-card .celebration-list article{
  min-height:64px;
  padding:9px 10px;
}

/* Mobile */
@media(max-width:760px){
  .organization-page-hero{
    padding:14px !important;
    gap:12px;
  }
  .organization-page-hero h1{
    font-size:1.2rem;
  }
  .organization-page-hero > .btn{
    width:100%;
    justify-content:center;
  }

  .organization-tabs{
    top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 6px);
  }

  .organization-directory-toolbar{
    align-items:stretch;
    flex-direction:column;
    gap:7px;
  }
  .organization-directory-toolbar .organization-count{
    padding-left:2px;
  }

  .directory-person-card{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:9px;
    min-height:66px;
    padding:9px 10px;
  }
  .directory-person-card .org-avatar{
    width:44px;
    height:44px;
  }
  .directory-person-card .directory-profile-action{
    grid-column:1 / -1;
    width:100%;
    justify-content:center;
    display:flex !important;
  }

  .organization-team-grid{
    grid-template-columns:1fr !important;
  }

  .organization-chart-card .org-chart-head{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    padding:13px;
  }
  .org-chart-controls{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    width:100%;
  }
  .org-chart-controls .btn{
    width:100%;
  }
  .organization-structure-editor{
    margin:0 10px 10px;
  }
  .organization-structure-editor .org-inline-form{
    grid-template-columns:1fr !important;
  }
  .org-chart-viewport{
    min-height:320px;
  }
  .org-chart-canvas{
    padding:28px 14px !important;
  }

  .organization-announcements-layout{
    grid-template-columns:1fr !important;
  }
  .organization-compose-card{
    position:static;
  }
  .organization-announcements-card,
  .organization-compose-card,
  .organization-celebration-card{
    padding:13px !important;
  }

  .announcement-footer-actions{
    align-items:flex-start !important;
    flex-direction:row !important;
    justify-content:space-between;
    width:100%;
  }

  .organization-announcement-form .toggle-row{
    min-height:44px;
    padding:7px 0;
  }

  .organization-celebration-card .celebration-list article{
    grid-template-columns:auto minmax(0,1fr) !important;
  }
  .organization-celebration-card .semantic-badge{
    grid-column:2;
    justify-self:start;
  }
}

@media(max-width:380px){
  .announcement-footer-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .inline-pin-form{
    width:100%;
  }
  .announcement-pin-action{
    width:100%;
    text-align:left;
  }
}


/* =========================================================
   v2.5.34 · Fase 4.7 — Usuarios, Roles & Permisos
   ========================================================= */
.users-page-heading,
.roles-page-heading{margin-bottom:14px;}
.users-page-heading p,
.roles-page-heading p{margin:.25rem 0 0;color:var(--text-muted);font-size:var(--type-body,.84rem);}

.users-access-layout,
.roles-management-layout{align-items:start;gap:12px;}
.users-invite-card,
.users-list-card,
.roles-create-card{padding:15px !important;}
.users-invite-form{display:grid;gap:10px;}
.users-invite-form .form-grupo{margin:0;}
.users-invite-actions,
.roles-create-actions,
.role-edit-actions{margin-top:4px !important;padding-top:12px !important;}
.users-invite-actions .btn,
.roles-create-actions .btn{width:100%;justify-content:center;}
.users-count{
  min-height:28px;display:inline-flex;align-items:center;padding:4px 8px;
  border:1px solid var(--border-subtle,var(--line-soft));border-radius:var(--radius-pill);
  color:var(--text-muted);font-size:.68rem;font-weight:700;white-space:nowrap;
}
.users-table-wrap{
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px) !important;
}
.usuarios-table{min-width:760px !important;}
.usuarios-table td:first-child{min-width:190px;}
.users-email{display:inline-block;margin-top:2px;font-size:.72rem !important;}
.usuarios-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;}
.usuarios-actions form{margin:0;}
.usuarios-reset-card{padding:15px !important;margin-bottom:12px;}
.reset-request-item{min-height:58px;padding:10px 0;}
.reset-request-item + .reset-request-item{border-top:1px solid var(--border-subtle,var(--line-soft));}
.reset-request-item .inline-actions{display:flex;gap:6px;flex-wrap:wrap;}
.reset-request-item form{margin:0;}

.users-modal-actions{display:flex;justify-content:flex-end;gap:8px;}

/* Roles */
.roles-intro{padding:16px !important;box-shadow:var(--shadow-xs);}
.roles-intro h2{font-size:1rem;}
.roles-intro-badge{
  border:1px solid color-mix(in srgb,var(--color-primario) 14%,var(--line-soft));
  background:color-mix(in srgb,var(--color-primario) 4%,var(--surface-card));
}
.role-builder-form{display:grid;gap:10px;}
.role-builder-form .form-grupo{margin:0;}
.roles-permission-groups,
.permission-groups.compact{display:grid;gap:7px;}
.permission-group{
  overflow:hidden;border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-md,12px);background:var(--surface-card);
}
.permission-group > summary{
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;cursor:pointer;color:var(--text-main);
}
.permission-group > summary span{color:var(--text-muted);font-size:.68rem;font-weight:500;}
.permission-list{border-top:1px solid var(--border-subtle,var(--line-soft));}
.permission-toggle{
  min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 11px;margin:0 !important;
}
.permission-toggle + .permission-toggle{border-top:1px solid color-mix(in srgb,var(--line-soft) 65%,transparent);}
.permission-toggle > span{min-width:0;}
.permission-toggle strong{display:block;font-size:.76rem;}
.permission-toggle small{display:block;margin-top:2px;color:var(--text-muted);font-size:.62rem;font-family:var(--font-ui);}
.permission-toggle input[type="checkbox"]{flex:0 0 auto;}

.roles-existing-list{display:grid;gap:10px;}
.role-management-card{padding:14px !important;box-shadow:var(--shadow-xs);}
.role-card-head{gap:12px;}
.role-card-head h2{font-size:.92rem;}
.role-card-head p{margin-top:4px;font-size:.74rem;line-height:1.45;}
.role-users-count{
  min-height:28px;display:inline-flex;align-items:center;padding:4px 8px;
  border:1px solid var(--border-subtle,var(--line-soft));border-radius:var(--radius-pill);
  color:var(--text-muted);font-size:.66rem;font-weight:700;white-space:nowrap;
}
.role-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}
.role-meta > span{
  min-height:28px;display:inline-flex;align-items:center;padding:4px 7px;
  border-radius:var(--radius-sm,8px);background:var(--surface-subtle,var(--surface-card));
  color:var(--text-muted);font-size:.66rem;
}
.role-edit-panel{margin-top:10px;}
.role-edit-panel > summary{display:inline-flex;align-items:center;gap:6px;}
.role-edit-panel[open] > summary{margin-bottom:4px;}
.role-edit-panel form{
  padding:12px;border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-md,12px);background:var(--surface-subtle,var(--surface-card));
}
.role-edit-actions .btn{min-width:150px;}

@media(max-width:760px){
  .users-page-heading,.roles-page-heading{align-items:flex-start;gap:10px;}
  .users-page-heading > .btn,.roles-page-heading > .btn{width:100%;justify-content:center;}
  .users-access-layout,.roles-management-layout{grid-template-columns:1fr !important;}
  .users-invite-card,.users-list-card,.roles-create-card{padding:13px !important;}
  .usuarios-reset-card{padding:13px !important;}
  .reset-request-item{display:grid;grid-template-columns:1fr;gap:9px;}
  .reset-request-item .inline-actions{display:grid;grid-template-columns:1fr;}
  .reset-request-item .inline-actions form,.reset-request-item .inline-actions .btn{width:100%;}
  .reset-request-item .inline-actions .btn{justify-content:center;}

  .users-modal-actions{display:grid;grid-template-columns:1fr;}
  .users-modal-actions .btn{width:100%;justify-content:center;}

  .roles-intro{display:grid !important;grid-template-columns:1fr !important;gap:10px;}
  .roles-intro-badge{width:100%;}
  .role-builder-form .grid-2,.role-edit-panel .grid-2{grid-template-columns:1fr !important;}
  .permission-toggle{min-height:54px;}
  .role-card-head{display:grid;grid-template-columns:1fr;}
  .role-users-count{justify-self:start;}
  .role-edit-panel > summary{width:100%;justify-content:center;}
  .role-edit-panel form{padding:10px;}
  .role-edit-actions .btn{width:100%;justify-content:center;}
  .role-management-card > form.mt-2 .btn{width:100%;justify-content:center;}
}


/* =========================================================
   v2.5.35 · Fase 4.8 — Configuración & White Label
   ========================================================= */
.settings-page{
  display:grid;
  gap:0;
}
.settings-hero{
  margin-bottom:12px;
  padding:18px 20px !important;
}
.settings-section-nav{
  position:sticky;
  top:10px;
  z-index:24;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  background:color-mix(in srgb,var(--surface-card) 94%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  backdrop-filter:blur(14px) saturate(135%);
}
.settings-section-nav::-webkit-scrollbar{display:none;}
.settings-section-nav .section-tab{
  flex:0 0 auto;
  white-space:nowrap;
}
.settings-section{
  scroll-margin-top:84px;
}
.settings-section-heading{
  margin-bottom:12px;
}
.settings-section-heading h2{
  margin:.2rem 0 .25rem;
}
.settings-section-heading p{
  max-width:760px;
}

.brand-studio-audit{
  gap:12px;
}
.brand-editor-card,
.brand-live-preview{
  padding:15px !important;
}
.brand-editor-card form{
  display:grid;
  gap:0;
}
.settings-block{
  padding:0 0 16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border-subtle,var(--line-soft));
}
.settings-block:last-of-type{
  margin-bottom:0;
}
.settings-block-title{
  margin-bottom:11px;
}
.settings-block-title > span{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-card));
  color:var(--color-primario);
  font-size:.64rem;
  font-weight:700;
}
.brand-upload-grid-v2{
  gap:10px;
}
.brand-upload-tile{
  min-height:154px;
  border-radius:var(--radius-md,12px) !important;
}
.brand-upload-preview{
  min-height:78px;
}
.brand-color-grid-v2{
  gap:10px;
}
.color-field{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:7px;
  align-items:center;
}
.color-field input[type="color"]{
  width:44px !important;
  height:44px !important;
  min-height:44px !important;
  padding:4px !important;
  border-radius:var(--radius-md,12px) !important;
  cursor:pointer;
}
.color-field input[type="text"]{
  font-family:var(--font-ui);
  text-transform:uppercase;
}
.brand-token-contract{
  align-items:flex-start;
  gap:8px;
  padding:10px 11px;
  border-radius:var(--radius-md,12px);
}
.brand-token-contract strong{
  color:var(--text-main);
}

.brand-live-preview{
  top:76px;
}
.brand-preview-head{
  gap:10px;
}
.brand-preview-switch{
  margin:0;
}
.brand-preview-switch button[role="tab"]{
  min-height:36px;
}
.brand-preview-switch button:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--focus-ring);
}
.brand-preview-pane[hidden]{
  display:none !important;
}
.brand-preview-stage{
  border-radius:var(--radius-lg,16px);
  overflow:hidden;
}

/* Operation / communications */
.settings-sla-card{
  max-width:560px;
  padding:15px !important;
}
.settings-short-number{
  width:120px !important;
  max-width:100%;
}
.settings-catalog-grid{
  gap:10px !important;
}
.settings-catalog-grid > .card{
  min-width:0;
  padding:15px !important;
}
.settings-catalog-grid textarea{
  min-height:180px;
  resize:vertical;
}

.settings-communications-section{
  margin-top:20px;
}
.settings-report-card{
  padding:15px !important;
}
.settings-report-recipient-form{
  display:grid;
  grid-template-columns:minmax(140px,.8fr) minmax(190px,1.1fr) minmax(130px,.65fr) minmax(190px,1fr) auto;
  gap:9px;
  align-items:end;
  margin-bottom:16px;
}
.settings-report-recipient-form .form-grupo{
  min-width:0;
  margin:0;
}
.settings-report-recipient-form .form-grupo:nth-child(5){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}
.settings-module-check{
  min-height:34px;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
  padding:4px 7px;
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-sm,8px);
  background:var(--surface-subtle,var(--surface-card));
  color:var(--text-main);
  font-weight:500 !important;
}
.settings-module-check input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
  margin:0;
}
.settings-report-table-wrap{
  border:1px solid var(--border-subtle,var(--line-soft));
  border-radius:var(--radius-lg,16px) !important;
}
.settings-report-table{
  min-width:760px !important;
}
.settings-report-email{
  font-size:.72rem !important;
}
.settings-report-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.settings-report-row-actions form{
  margin:0;
}

/* Mobile */
@media(max-width:900px){
  .settings-report-recipient-form{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .settings-report-recipient-form > .btn{
    width:100%;
    justify-content:center;
  }
}
@media(max-width:760px){
  .settings-hero{
    padding:14px !important;
  }
  .settings-section-nav{
    top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 6px);
  }
  .settings-section{
    scroll-margin-top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 68px);
  }
  .brand-studio-audit{
    grid-template-columns:1fr !important;
  }
  .brand-editor-card,
  .brand-live-preview,
  .settings-sla-card,
  .settings-catalog-grid > .card,
  .settings-report-card{
    padding:13px !important;
  }
  .brand-live-preview{
    position:static !important;
  }
  .brand-preview-head{
    display:grid !important;
    grid-template-columns:1fr;
  }
  .brand-preview-switch{
    width:100%;
  }
  .brand-preview-switch button{
    flex:1;
  }
  .brand-upload-grid-v2,
  .brand-color-grid-v2,
  .settings-catalog-grid{
    grid-template-columns:1fr !important;
  }
  .brand-editor-actions .btn{
    width:100%;
    justify-content:center;
  }
  .settings-report-recipient-form{
    grid-template-columns:1fr;
  }
  .settings-report-recipient-form > .btn{
    width:100%;
    justify-content:center;
  }
  .settings-report-recipient-form .form-grupo:nth-child(5){
    align-items:stretch;
  }
  .settings-module-check{
    width:100%;
  }
}


/* =========================================================
   v2.5.36 · Hotfix — Roles & Permisos density refinement
   ========================================================= */
.roles-permission-groups .permission-group > summary,
.permission-groups.compact .permission-group > summary{
  min-height:40px;
  padding:8px 10px;
}
.roles-permission-groups .permission-group > summary strong,
.permission-groups.compact .permission-group > summary strong{
  font-size:.84rem;
  font-weight:700;
  letter-spacing:-.005em;
}
.roles-permission-groups .permission-group > summary span{
  font-size:.66rem;
  font-weight:500;
  color:var(--text-muted);
}
.roles-permission-groups .permission-toggle,
.permission-groups.compact .permission-toggle{
  min-height:46px;
  padding:7px 10px;
  gap:10px;
}
.roles-permission-groups .permission-toggle strong,
.permission-groups.compact .permission-toggle strong{
  font-size:.72rem;
  line-height:1.28;
  font-weight:500;
  letter-spacing:0;
}
.roles-permission-groups .permission-toggle small,
.permission-groups.compact .permission-toggle small{
  margin-top:2px;
  font-size:.58rem;
  line-height:1.25;
  font-weight:500;
  color:color-mix(in srgb,var(--text-muted) 80%,transparent);
  letter-spacing:.01em;
}
.roles-permission-groups .permission-list,
.permission-groups.compact .permission-list{
  background:color-mix(in srgb,var(--surface-card) 98%,var(--surface-subtle));
}
.roles-permission-groups .permission-toggle + .permission-toggle,
.permission-groups.compact .permission-toggle + .permission-toggle{
  border-top-color:color-mix(in srgb,var(--line-soft) 58%,transparent);
}
@media(max-width:760px){
  .roles-permission-groups .permission-toggle,
  .permission-groups.compact .permission-toggle{
    min-height:48px;
    padding:8px 9px;
  }
  .roles-permission-groups .permission-toggle strong,
  .permission-groups.compact .permission-toggle strong{
    font-size:.71rem;
  }
  .roles-permission-groups .permission-toggle small,
  .permission-groups.compact .permission-toggle small{
    font-size:.57rem;
  }
}


/* =========================================================
   v2.5.37 · Hotfix Organización — toggles + conectores árbol
   ========================================================= */

/* Comunicados: los booleanos son una unidad checkbox + etiqueta.
   Esta regla corrige el grid genérico de .organization-announcement-form > label. */
.organization-announcement-form > label.toggle-row{
  display:grid !important;
  grid-template-columns:20px minmax(0,1fr);
  align-items:center !important;
  justify-content:start;
  column-gap:9px;
  row-gap:0;
  min-height:42px;
  padding:5px 0;
  margin:0 !important;
  font-weight:500 !important;
  cursor:pointer;
}
.organization-announcement-form > label.toggle-row input[type="checkbox"]{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  align-self:center;
  width:18px !important;
  height:18px !important;
  min-height:18px !important;
  margin:0 !important;
  accent-color:var(--color-primario);
}
.organization-announcement-form > label.toggle-row > span{
  grid-column:2;
  grid-row:1;
  min-width:0;
  line-height:1.35;
  color:var(--text-main);
  font-size:.74rem;
}
.organization-announcement-form > label.toggle-row:focus-within{
  border-radius:var(--radius-sm,8px);
}

/* Organigrama:
   reconstruye el tramo horizontal entre hermanos.
   El conector vertical del padre termina a 2rem y los segmentos de cada
   hijo se encuentran sobre esa misma coordenada. */
.org-tree-children{
  --org-branch-gap:1.25rem;
  gap:var(--org-branch-gap);
}
.org-tree-children > .org-tree-node::before,
.org-tree-children > .org-tree-node::after{
  content:"";
  position:absolute;
  top:-1.2rem;
  height:1.2rem;
  width:calc(50% + (var(--org-branch-gap) / 2));
  pointer-events:none;
  border-top:1px solid var(--line-soft,var(--gris-300,#cbd5e1));
  box-sizing:border-box;
}
.org-tree-children > .org-tree-node::before{
  right:50%;
  border-right:1px solid var(--line-soft,var(--gris-300,#cbd5e1));
}
.org-tree-children > .org-tree-node::after{
  left:50%;
}
.org-tree-children > .org-tree-node:first-child::before{
  border-top-color:transparent;
}
.org-tree-children > .org-tree-node:last-child::after{
  border-top-color:transparent;
}
.org-tree-children > .org-tree-node:only-child::before{
  width:0;
  right:50%;
  border-top:0;
  border-right:1px solid var(--line-soft,var(--gris-300,#cbd5e1));
}
.org-tree-children > .org-tree-node:only-child::after{
  display:none;
}

/* Parent -> sibling rail uses the same token, including Dark Mode later. */
.org-tree-children::before{
  border-left-color:var(--line-soft,var(--gris-300,#cbd5e1)) !important;
}

/* Ensure branch lines remain above the dotted canvas but below person cards. */
.org-tree-children > .org-tree-node::before,
.org-tree-children > .org-tree-node::after,
.org-tree-children::before{
  z-index:0;
}
.org-person-node{
  position:relative;
  z-index:1;
}

@media(max-width:760px){
  .organization-announcement-form > label.toggle-row{
    min-height:44px;
    padding:6px 0;
  }
}


/* =========================================================
   v2.5.38 · Hotfix — Permission group header alignment
   ========================================================= */
.roles-permission-groups .permission-group > summary{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 92px 20px;
  align-items:center;
  column-gap:12px;
}
.roles-permission-groups .permission-group > summary > strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.roles-permission-groups .permission-group > summary > span{
  width:92px;
  justify-self:end;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.roles-permission-groups .permission-group > summary::marker{
  content:"";
}
.roles-permission-groups .permission-group > summary::-webkit-details-marker{
  display:none;
}
/* Keep a dedicated chevron column even when browser renders the native disclosure marker. */
.roles-permission-groups .permission-group > summary::after{
  content:"⌄";
  width:20px;
  display:grid;
  place-items:center;
  justify-self:end;
  color:var(--text-muted);
  font-size:.9rem;
  line-height:1;
  transition:transform var(--motion-fast,160ms) var(--motion-ease-standard,ease);
}
.roles-permission-groups .permission-group[open] > summary::after{
  transform:rotate(180deg);
}

@media(max-width:760px){
  .roles-permission-groups .permission-group > summary{
    grid-template-columns:minmax(0,1fr) 78px 18px;
    column-gap:9px;
  }
  .roles-permission-groups .permission-group > summary > span{
    width:78px;
  }
}


/* =========================================================
   v2.5.39 · Fase 5.1 — Dark Mode Transversal Audit
   ========================================================= */

/* Canonical dark tokens. Modules should consume these instead of fixed whites. */
html[data-theme="dark"]{
  --surface-app:#0f141c;
  --surface-card:#171e28;
  --surface-elevated:#1d2632;
  --surface-subtle:#202a37;
  --surface-overlay:#222d3a;
  --text-main:#f1f5f9;
  --text-muted:#a9b6c7;
  --text-subtle:#8190a4;
  --line-soft:rgba(203,213,225,.14);
  --border-subtle:rgba(203,213,225,.14);
  --border-default:rgba(203,213,225,.22);
  --border-strong:rgba(203,213,225,.34);
  --focus-ring:color-mix(in srgb,var(--color-primario) 38%,transparent);
  --shadow-xs:0 1px 2px rgba(0,0,0,.22);
  --shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --shadow-md:0 18px 42px rgba(0,0,0,.25);
  --brand-soft:color-mix(in srgb,var(--color-primario) 18%,var(--surface-card));
  --brand-softer:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card));
}

/* Base surfaces */
html[data-theme="dark"] :is(
  .card,.surface-panel,.panel,.form-section,.table-toolbar,.data-toolbar,
  .metric-soft,.payroll-metric-card,.document-summary-item,
  .hrcore-current-strip > div,.hrcore-kpis > div,.hrcore-history,
  .hrcore-movement-item,.technical-history,.document-category-card,
  .permission-group,.role-edit-panel form,.reset-request-item,
  .settings-module-check,.brand-upload-tile,.brand-upload-preview,
  .settings-report-table-wrap,.users-table-wrap,.supervision-table-wrap,
  .supervision-history-wrap,.payroll-period-table-wrap,
  .payroll-incidence-table-wrap,.payroll-snapshot-table-wrap
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
  color:var(--text-main) !important;
}

/* HR Core / Expediente 360 — fixes the light islands reported in production. */
html[data-theme="dark"] .expediente-laboral-summary{
  background:color-mix(in srgb,var(--surface-card) 92%,var(--color-primario) 8%) !important;
  border-color:var(--line-soft) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] .expediente-laboral-summary .hrcore-current-strip > div{
  background:var(--surface-elevated) !important;
  border:1px solid var(--line-soft) !important;
}
html[data-theme="dark"] .expediente-laboral-summary .hrcore-current-strip :is(span,small),
html[data-theme="dark"] .expediente-laboral-summary .hrcore-kpis :is(span,small),
html[data-theme="dark"] .hrcore-history :is(span,small),
html[data-theme="dark"] .hrcore-movement-item :is(span,small){
  color:var(--text-muted) !important;
}
html[data-theme="dark"] .expediente-laboral-summary .hrcore-current-strip strong,
html[data-theme="dark"] .expediente-laboral-summary .hrcore-kpis strong,
html[data-theme="dark"] .hrcore-history strong,
html[data-theme="dark"] .hrcore-movement-item strong{
  color:var(--text-main) !important;
}
html[data-theme="dark"] .hrcore-history,
html[data-theme="dark"] .hrcore-movement-item{
  background:var(--surface-card) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .expediente-info-table,
html[data-theme="dark"] .expediente-info-wrap{
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .expediente-hero-avatar{
  background:var(--brand-soft) !important;
  border-color:color-mix(in srgb,var(--color-primario) 24%,var(--line-soft)) !important;
}

/* Forms: same geometry, differentiated readonly/disabled without white surfaces. */
html[data-theme="dark"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select,textarea
){
  background:var(--surface-elevated) !important;
  border-color:var(--border-default) !important;
  color:var(--text-main) !important;
  caret-color:var(--text-main);
}
html[data-theme="dark"] :where(input,textarea)::placeholder{
  color:var(--text-subtle) !important;
  opacity:1;
}
html[data-theme="dark"] :where(input,select,textarea):disabled,
html[data-theme="dark"] :where(input,select,textarea)[readonly]{
  background:color-mix(in srgb,var(--surface-elevated) 72%,var(--surface-app)) !important;
  color:var(--text-muted) !important;
  border-color:var(--line-soft) !important;
  opacity:1;
}
html[data-theme="dark"] input[type="color"]{
  background:var(--surface-elevated) !important;
  border-color:var(--border-default) !important;
}
html[data-theme="dark"] :where(label,.form-label){
  color:var(--text-main);
}

/* Tables */
html[data-theme="dark"] :is(.table-enterprise,.usuarios-table,.data-table) {
  background:var(--surface-card) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] :is(.table-enterprise,.usuarios-table,.data-table) thead th{
  background:var(--surface-elevated) !important;
  color:var(--text-muted) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] :is(.table-enterprise,.usuarios-table,.data-table) tbody td{
  background:transparent !important;
  color:var(--text-main);
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] :is(.table-enterprise,.usuarios-table,.data-table) tbody tr:hover td{
  background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-card)) !important;
}

/* Tabs / segmented controls */
html[data-theme="dark"] :is(
  .tabs,.section-tabs,.expediente-section-tabs,.organization-tabs,
  .settings-section-nav,.supervision-tabs,.segmented-control
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] :is(.tab,.section-tab,.segment-option){
  color:var(--text-muted) !important;
}
html[data-theme="dark"] :is(.tab.active,.section-tab.active,.segment-option.active,.segment-option.is-active){
  background:var(--brand-soft) !important;
  color:color-mix(in srgb,var(--color-primario) 72%,white) !important;
  border-color:color-mix(in srgb,var(--color-primario) 28%,var(--line-soft)) !important;
}

/* Roles & permissions */
html[data-theme="dark"] .permission-group{
  background:var(--surface-card) !important;
}
html[data-theme="dark"] .permission-group > summary{
  background:var(--surface-card) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] .permission-list{
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .permission-toggle{
  color:var(--text-main) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .permission-toggle small{
  color:var(--text-subtle) !important;
}

/* Organization */
html[data-theme="dark"] .organization-page-hero,
html[data-theme="dark"] .organization-dashboard-strip{
  background:linear-gradient(135deg,var(--brand-soft),var(--surface-card) 68%) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .org-chart-viewport{
  background-color:var(--surface-app) !important;
  background-image:radial-gradient(circle at 1px 1px,rgba(148,163,184,.16) 1px,transparent 0) !important;
}
html[data-theme="dark"] .org-person-node,
html[data-theme="dark"] .directory-person-card,
html[data-theme="dark"] .announcement-card,
html[data-theme="dark"] .team-members > div,
html[data-theme="dark"] .organization-structure-editor{
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] .organization-announcement-form > label.toggle-row > span{
  color:var(--text-main) !important;
}

/* Payroll / supervision */
html[data-theme="dark"] :is(
  .payroll-metric-card,.payroll-incidence-summary .metric-soft,
  .supervision-bulk-toolbar,.supervision-chart-card,
  .supervision-report-filters,.supervision-summary-grid > .stat-card
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .payroll-status{
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .payroll-protected-period{
  background:color-mix(in srgb,var(--semantic-danger,#ef4444) 7%,var(--surface-card)) !important;
  border-color:color-mix(in srgb,var(--semantic-danger,#ef4444) 28%,var(--line-soft)) !important;
}

/* Settings / White Label editor. Preview itself remains a deliberate simulation. */
html[data-theme="dark"] :is(
  .brand-editor-card,.brand-live-preview,.settings-sla-card,
  .settings-catalog-grid > .card,.settings-report-card,
  .ai-provider-config,.ai-provider-status,.ai-provider-card,.module-control-card
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] .brand-upload-tile{
  background:var(--surface-elevated) !important;
}
html[data-theme="dark"] .brand-token-contract{
  background:var(--brand-softer) !important;
  border-color:color-mix(in srgb,var(--color-primario) 18%,var(--line-soft)) !important;
}

/* Modals and floating layers: glass only where intended. */
html[data-theme="dark"] :is(.modal-overlay,.app-modal){
  background:rgba(3,7,18,.62);
}
html[data-theme="dark"] :is(.modal-card,.app-modal-dialog,.movement-dialog){
  background:var(--glass-bg-strong,var(--surface-overlay)) !important;
  border-color:var(--glass-border,var(--line-soft)) !important;
  color:var(--text-main) !important;
  box-shadow:var(--glass-shadow,var(--shadow-overlay)) !important;
}
html[data-theme="dark"] :is(.notificaciones-panel,.usuario-menu-panel,.glass-date-picker,.help-popover,[data-help-panel]){
  color:var(--text-main) !important;
}

/* Semantic badges keep meaning and gain dark-compatible contrast. */
html[data-theme="dark"] :is(.badge-green,.badge-success,.status-pill.is-active){
  background:rgba(34,197,94,.16) !important;
  color:#86efac !important;
}
html[data-theme="dark"] :is(.badge-red,.badge-danger){
  background:rgba(239,68,68,.16) !important;
  color:#fca5a5 !important;
}
html[data-theme="dark"] :is(.badge-amber,.badge-warning){
  background:rgba(245,158,11,.16) !important;
  color:#fcd34d !important;
}
html[data-theme="dark"] :is(.badge-blue,.badge-info){
  background:rgba(59,130,246,.16) !important;
  color:#93c5fd !important;
}
html[data-theme="dark"] :is(.badge-gray,.badge-neutral){
  background:var(--surface-elevated) !important;
  color:var(--text-muted) !important;
}

/* Light <-> dark transition: surfaces and text transition together, never layout. */
html.theme-is-transitioning,
html.theme-is-transitioning body,
html.theme-is-transitioning :is(
  .main,.content,.sidebar,.app-header,.topbar-movil,.card,.surface-panel,
  .section-tabs,.tabs,.segmented-control,.permission-group,.permission-list,
  .org-person-node,.directory-person-card,.announcement-card,
  input,select,textarea,.btn-secundario,.table-enterprise th,.table-enterprise td
){
  transition:
    background-color 240ms var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1)),
    border-color 240ms var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1)),
    color 180ms ease,
    box-shadow 240ms var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1)) !important;
}
@media(prefers-reduced-motion:reduce){
  html.theme-is-transitioning,
  html.theme-is-transitioning *{
    transition:none !important;
  }
}


/* =========================================================
   v2.5.40 · Dark Mode Governance & Hardening
   Canonical contract: this block is the final authority for
   dark surfaces and legacy aliases.
   ========================================================= */
html[data-theme="dark"]{
  /* Complete neutral aliases retained for legacy components. */
  --gris-950:#f1f5f9;
  --gris-900:#e8eef5;
  --gris-800:#d8e1eb;
  --gris-700:#c3cedb;
  --gris-600:#a9b6c7;
  --gris-500:#93a2b5;
  --gris-400:#8190a4;
  --gris-300:#526174;
  --gris-200:#354252;
  --gris-100:#273240;
  --gris-50:#202a37;

  /* Compatibility aliases. New code must use surface-* / border-* tokens. */
  --surface:var(--surface-card);
  --surface-soft:var(--surface-subtle);
  --border:var(--border-default);
  --chart-neutral:#64748b;

  /* Floating-layer tokens. Glass is forbidden on content cards. */
  --glass-bg:rgba(23,30,40,.78);
  --glass-bg-strong:rgba(23,30,40,.92);
  --glass-border:rgba(255,255,255,.10);
  --glass-shadow:0 20px 52px rgba(0,0,0,.34);

  /* Semantic soft surfaces stay independent from White Label. */
  --verde-suave:rgba(34,197,94,.16);
  --rojo-suave:rgba(239,68,68,.16);
  --ambar-suave:rgba(245,158,11,.16);
  --azul-suave:rgba(59,130,246,.16);
  --violeta-suave:rgba(139,92,246,.16);
}

/* Residual light islands found by the v2.5.40 static audit. */
html[data-theme="dark"] :is(.dropzone-cta,.archivo-seleccionado-premium,.backup-policy-note){
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] .dropzone-cta:hover{
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-elevated)) !important;
}
html[data-theme="dark"] .archivo-seleccionado-premium{
  box-shadow:var(--shadow-xs) !important;
}
html[data-theme="dark"] .backup-policy-note{
  color:var(--text-muted) !important;
}

/* Authentication shell participates in the theme without changing the
   deliberately branded left panel. */
html[data-theme="dark"] .auth-access-panel{
  background:
    radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--color-primario) 8%,transparent),transparent 32%),
    var(--surface-app) !important;
}
html[data-theme="dark"] .auth-card-premium{
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] .auth-security-note,
html[data-theme="dark"] .auth-remember-copy small{
  color:var(--text-muted) !important;
}

/* Small avatar stacks should not retain a white separator in dark mode. */
html[data-theme="dark"] .org-avatar-sm{
  border-color:var(--surface-card) !important;
}

/* Important announcements retain emphasis instead of becoming a generic card. */
html[data-theme="dark"] .announcement-card.important{
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--color-primario) 12%,var(--surface-card)),
    var(--surface-card) 72%
  ) !important;
  border-color:color-mix(in srgb,var(--color-primario) 28%,var(--line-soft)) !important;
}

/* Native affordances and scrollbars inherit the resolved color scheme. */
html[data-theme="dark"] :where(input[type="checkbox"],input[type="radio"]){
  accent-color:var(--color-primario);
}
html[data-theme="dark"]{
  scrollbar-color:var(--gris-300) var(--surface-app);
}

/* Charts use theme-aware neutrals while semantic series keep their meaning. */
html[data-theme="dark"] .supervision-chart-card svg{
  color:var(--text-muted);
}

/* Contract marker consumed by tools/dark_mode_gate.php. */
:root{--dark-mode-contract-version:"5.1.1";}


/* =========================================================
   v2.5.41 · Dark residual closure + Global Upload System
   ========================================================= */

/* Dark Mode residual: KPI components that are not .card. */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stats-grid > .stat-card,
html[data-theme="dark"] .expenses-stats > .stat-card{
  background:var(--surface-card) !important;
  border:1px solid var(--line-soft) !important;
  color:var(--text-main) !important;
  box-shadow:var(--shadow-xs) !important;
}
html[data-theme="dark"] .stat-card :is(.valor,strong){ color:var(--text-main) !important; }
html[data-theme="dark"] .stat-card :is(.etiqueta,span){ color:var(--text-muted) !important; }
html[data-theme="dark"] .stat-card :is(.subtitulo,small){ color:var(--text-subtle) !important; }

/* Backups: close every surface, not only the policy note. */
html[data-theme="dark"] .backup-protection-item{
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] .backup-protection-item small{ color:var(--text-muted) !important; }
html[data-theme="dark"] .backup-policy-note{
  background:var(--surface-elevated) !important;
  border:1px solid var(--line-soft) !important;
  color:var(--text-muted) !important;
}
html[data-theme="dark"] .backup-policy-note strong{ color:var(--text-main) !important; }

/* Expense/absence static sections consume canonical surfaces. */
html[data-theme="dark"] :is(.section-card,.expenses-card,.absence-card,.empty-state-modern){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] :is(.section-card-head,.empty-state-modern) p{
  color:var(--text-muted) !important;
}

/* ---------------- Global Upload HUD ---------------- */
.global-upload-hud{
  position:fixed;
  top:max(18px,env(safe-area-inset-top));
  left:50%;
  z-index:4200;
  width:min(560px,calc(100vw - 28px));
  padding:15px 16px 14px;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-14px) scale(.985);
  border:1px solid var(--glass-border);
  border-radius:18px;
  background:color-mix(in srgb,var(--glass-bg-strong) 92%,transparent);
  box-shadow:0 22px 64px rgba(15,23,42,.20);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
  backdrop-filter:blur(24px) saturate(155%);
  color:var(--text-main);
  transition:
    opacity 220ms ease,
    transform 280ms var(--motion-ease-emphasized,cubic-bezier(.22,1,.36,1)),
    border-color 220ms ease,
    background-color 220ms ease;
}
.global-upload-hud.is-visible{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
.global-upload-hud.is-leaving{
  opacity:0;
  transform:translate(-50%,-8px) scale(.99);
}
.global-upload-glow{
  position:absolute;
  width:180px;
  height:180px;
  top:-120px;
  left:38px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--color-primario) 26%,transparent);
  filter:blur(35px);
  opacity:.72;
  pointer-events:none;
}
.global-upload-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
}
.global-upload-status-icon{
  position:relative;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--brand-soft);
  color:var(--color-primario);
  overflow:hidden;
}
.global-upload-ring{
  position:absolute;
  inset:7px;
  border:2px solid color-mix(in srgb,var(--color-primario) 20%,transparent);
  border-top-color:var(--color-primario);
  border-radius:var(--radius-pill);
  animation:rh-upload-orbit .9s linear infinite;
}
.global-upload-arrow{
  position:relative;
  z-index:1;
  font-size:16px;
  font-weight:700;
  animation:rh-upload-arrow 1.15s var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1)) infinite;
}
.global-upload-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.global-upload-copy strong{
  overflow:hidden;
  color:var(--text-main);
  font-size:.78rem;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.global-upload-copy span{
  overflow:hidden;
  color:var(--text-muted);
  font-size:.68rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.global-upload-percent{
  color:var(--text-main);
  font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
.global-upload-track{
  position:relative;
  z-index:1;
  height:9px;
  margin-top:12px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line-soft) 76%,transparent);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--surface-app) 76%,transparent);
}
.global-upload-track > span{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--color-primario) 76%,white),
      var(--color-primario) 52%,
      color-mix(in srgb,var(--color-primario) 76%,white)
    );
  background-size:180% 100%;
  box-shadow:
    0 0 16px color-mix(in srgb,var(--color-primario) 34%,transparent),
    inset 0 1px rgba(255,255,255,.28);
  transition:width 240ms var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1));
  animation:rh-upload-gradient 1.8s linear infinite;
}
.global-upload-track > i{
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.18) 48%,transparent 72%);
  transform:translateX(-110%);
  animation:rh-upload-scan 1.65s ease-in-out infinite;
}
.global-upload-meta{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:7px;
  color:var(--text-muted);
  font-size:.64rem;
}
.global-upload-meta span:last-child{ text-align:right; }
.global-upload-hud.is-processing .global-upload-track > span{
  width:100% !important;
  animation:rh-upload-processing 1.25s ease-in-out infinite alternate;
}
.global-upload-hud.is-processing .global-upload-ring{ animation-duration:.62s; }
.global-upload-hud.is-success{
  border-color:color-mix(in srgb,var(--semantic-success,#22c55e) 32%,var(--glass-border));
}
.global-upload-hud.is-success .global-upload-status-icon{
  background:rgba(34,197,94,.14);
  color:var(--semantic-success,#22c55e);
}
.global-upload-hud.is-success .global-upload-ring{
  border-color:var(--semantic-success,#22c55e);
  animation:none;
}
.global-upload-hud.is-success .global-upload-arrow{ animation:none; }
.global-upload-hud.is-error{
  pointer-events:auto;
  border-color:color-mix(in srgb,var(--semantic-danger,#ef4444) 34%,var(--glass-border));
}
.global-upload-hud.is-error .global-upload-status-icon{
  background:rgba(239,68,68,.14);
  color:var(--semantic-danger,#ef4444);
}
.global-upload-hud.is-error .global-upload-ring{
  border-color:var(--semantic-danger,#ef4444);
  animation:none;
}
.global-upload-hud.is-error .global-upload-track > span{
  background:var(--semantic-danger,#ef4444);
  animation:none;
}

/* Release Manager now uses the same global HUD. */
.release-upload-form .release-upload-progress{ display:none !important; }

@keyframes rh-upload-orbit{ to{transform:rotate(360deg);} }
@keyframes rh-upload-arrow{
  0%,100%{transform:translateY(2px);opacity:.72;}
  48%{transform:translateY(-2px);opacity:1;}
}
@keyframes rh-upload-gradient{ to{background-position:-180% 0;} }
@keyframes rh-upload-scan{
  0%,18%{transform:translateX(-110%);}
  72%,100%{transform:translateX(110%);}
}
@keyframes rh-upload-processing{
  from{filter:saturate(.92);opacity:.72;}
  to{filter:saturate(1.18);opacity:1;}
}

html[data-theme="dark"] .global-upload-hud{
  background:color-mix(in srgb,var(--glass-bg-strong) 94%,transparent);
  border-color:var(--glass-border);
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}
html[data-theme="dark"] .global-upload-track{
  background:color-mix(in srgb,var(--surface-app) 84%,transparent);
}

@media(max-width:620px){
  .global-upload-hud{
    top:auto;
    bottom:calc(var(--mobile-bottom-nav-h,72px) + env(safe-area-inset-bottom) + 12px);
    width:calc(100vw - 24px);
    padding:13px 13px 12px;
    border-radius:var(--radius-lg);
    transform:translate(-50%,10px) scale(.985);
  }
  .global-upload-hud.is-visible{ transform:translate(-50%,0) scale(1); }
  .global-upload-head{ grid-template-columns:38px minmax(0,1fr) auto; }
  .global-upload-status-icon{ width:38px;height:38px; }
  .global-upload-meta{
    display:grid;
    grid-template-columns:1fr;
    gap:2px;
  }
  .global-upload-meta span:last-child{ text-align:left; }
}

@media(prefers-reduced-motion:reduce){
  .global-upload-hud,
  .global-upload-track > span,
  .global-upload-track > i,
  .global-upload-ring,
  .global-upload-arrow{
    animation:none !important;
    transition:none !important;
  }
}


/* =========================================================
   v2.5.42 · Dark expense readability + Org tree geometry fix
   ========================================================= */

/* Gastos: the legacy component used --text-primary, which is not the
   canonical dark token and resolved to a near-black fallback. */
html[data-theme="dark"] .expense-dropzone{
  background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-elevated)) !important;
  border-color:color-mix(in srgb,var(--color-primario) 34%,var(--border-default)) !important;
}
html[data-theme="dark"] .expense-dropzone strong{
  color:var(--text-main) !important;
}
html[data-theme="dark"] .expense-dropzone > span:last-child{
  color:var(--text-muted) !important;
}
html[data-theme="dark"] .expense-scan-icon{
  background:color-mix(in srgb,var(--color-primario) 15%,var(--surface-elevated)) !important;
  color:color-mix(in srgb,var(--color-primario) 72%,white) !important;
}
html[data-theme="dark"] .expense-dropzone:hover{
  background:color-mix(in srgb,var(--color-primario) 8%,var(--surface-elevated)) !important;
  border-color:color-mix(in srgb,var(--color-primario) 58%,var(--border-default)) !important;
}

/*
 * Organigrama — conector geométrico estable.
 *
 * Geometría:
 *   padre
 *     │ 24px
 *     ┴──────────── rail
 *     │            │ 24px
 *   hijo         hijo
 *
 * El rail se construye con las mitades de los nodos hermanos, no con una
 * línea absoluta calculada sobre el ancho del canvas. Esto mantiene uniones
 * correctas con 1, 2 o N hijos y también en árboles anidados.
 */
.org-tree-children{
  --org-branch-gap:1.25rem;
  --org-connector-leg:24px;
  display:flex !important;
  align-items:flex-start !important;
  gap:var(--org-branch-gap) !important;
  padding-top:calc(var(--org-connector-leg) * 2) !important;
  position:relative !important;
}

/* Parent down to sibling rail. */
.org-tree-children::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  width:0 !important;
  height:var(--org-connector-leg) !important;
  border:0 !important;
  border-left:1px solid var(--line-soft,var(--gris-300,#cbd5e1)) !important;
  transform:none !important;
  z-index:0 !important;
  pointer-events:none !important;
}

/* Every child owns the rail half on each side and the vertical drop. */
.org-tree-children > .org-tree-node{
  position:relative !important;
}
.org-tree-children > .org-tree-node::before,
.org-tree-children > .org-tree-node::after{
  content:"" !important;
  position:absolute !important;
  top:calc(var(--org-connector-leg) * -1) !important;
  height:var(--org-connector-leg) !important;
  width:calc(50% + (var(--org-branch-gap) / 2)) !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* Left rail half + vertical leg into the node. */
.org-tree-children > .org-tree-node::before{
  right:50% !important;
  left:auto !important;
  border:0 !important;
  border-top:1px solid var(--line-soft,var(--gris-300,#cbd5e1)) !important;
  border-right:1px solid var(--line-soft,var(--gris-300,#cbd5e1)) !important;
}

/* Right rail half only. */
.org-tree-children > .org-tree-node::after{
  left:50% !important;
  right:auto !important;
  border:0 !important;
  border-top:1px solid var(--line-soft,var(--gris-300,#cbd5e1)) !important;
}

/* Do not draw rail beyond the outermost children. Keep their vertical legs. */
.org-tree-children > .org-tree-node:first-child::before{
  border-top-color:transparent !important;
}
.org-tree-children > .org-tree-node:last-child::after{
  border-top-color:transparent !important;
}

/* A single child needs no horizontal rail, only one continuous vertical leg. */
.org-tree-children > .org-tree-node:only-child::before{
  top:calc(var(--org-connector-leg) * -1) !important;
  right:50% !important;
  left:auto !important;
  width:0 !important;
  height:var(--org-connector-leg) !important;
  border:0 !important;
  border-right:1px solid var(--line-soft,var(--gris-300,#cbd5e1)) !important;
}
.org-tree-children > .org-tree-node:only-child::after{
  display:none !important;
}

.org-person-node{
  position:relative !important;
  z-index:1 !important;
}

html[data-theme="dark"] .org-tree-children::before,
html[data-theme="dark"] .org-tree-children > .org-tree-node::before,
html[data-theme="dark"] .org-tree-children > .org-tree-node::after{
  border-color:var(--border-default) !important;
}
html[data-theme="dark"] .org-tree-children > .org-tree-node:first-child::before{
  border-top-color:transparent !important;
}
html[data-theme="dark"] .org-tree-children > .org-tree-node:last-child::after{
  border-top-color:transparent !important;
}


/* =========================================================
   v2.5.43 · Fase 5.4 — Analítica & Reportes Deep UX Audit
   ========================================================= */
.analytics-page-heading{
  margin-bottom:14px;
}
.analytics-page-heading p{
  margin:.25rem 0 0;
  color:var(--text-muted);
  font-size:var(--type-body,.84rem);
}
.analytics-period-presets{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.analytics-section-card{
  padding:16px !important;
}
.analytics-section-head{
  align-items:flex-start !important;
  gap:12px;
}
.analytics-section-head h2{
  margin:.15rem 0 .2rem;
}
.analytics-section-head p{
  max-width:680px;
  margin:0;
  color:var(--text-muted);
  font-size:.72rem;
  line-height:1.45;
}
.analytics-kpi-grid{
  gap:10px !important;
}
.analytics-kpi-grid > .stat-card{
  min-height:112px;
}
.analytics-chart-grid{
  gap:12px !important;
}
.analytics-chart-panel{
  min-width:0;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg,16px);
  background:var(--surface-subtle,var(--surface-card));
}
.analytics-chart-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.analytics-chart-heading h3{
  margin:0;
  color:var(--text-main);
  font-size:.82rem;
}
.analytics-chart-heading span{
  color:var(--text-muted);
  font-size:.66rem;
  white-space:nowrap;
}
.analytics-chart-scroll{
  width:100%;
  max-width:100%;
  min-height:150px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
.analytics-bar-chart{
  display:block;
  min-width:max-content;
  color:var(--text-muted);
}
.analytics-donut-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,.8fr);
  align-items:center;
  column-gap:16px;
}
.analytics-donut-panel .analytics-chart-heading{
  grid-column:1 / -1;
}
.analytics-donut-chart{
  display:block;
  margin:auto;
  color:var(--text-main);
}
.analytics-legend{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
  color:var(--text-muted);
  font-size:.7rem;
}
.analytics-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.analytics-legend i,
.analytics-status-dot{
  width:9px;
  height:9px;
  flex:0 0 auto;
  display:inline-block;
  border-radius:3px;
}
.analytics-legend i.is-success{background:var(--semantic-success,#16a34a);}
.analytics-legend i.is-danger{background:var(--semantic-danger,#dc2626);}
.analytics-status-legend{
  display:grid;
  gap:6px;
}
.analytics-status-legend > div{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  min-height:28px;
  padding:3px 0;
  border-bottom:1px solid color-mix(in srgb,var(--line-soft) 62%,transparent);
  color:var(--text-muted);
  font-size:.7rem;
}
.analytics-status-legend > div:last-child{
  border-bottom:0;
}
.analytics-status-dot{
  border-radius:var(--radius-pill);
  background:var(--analytics-dot);
}
.analytics-status-legend strong{
  color:var(--text-main);
  font-variant-numeric:tabular-nums;
}
.analytics-empty-card{
  padding:13px !important;
}

/* Dark mode uses the same structure; only canonical tokens change. */
html[data-theme="dark"] .analytics-chart-panel{
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .analytics-bar-chart{
  color:var(--text-muted);
}
html[data-theme="dark"] .analytics-donut-chart{
  color:var(--text-main);
}

@media(max-width:760px){
  .analytics-section-card{
    padding:13px !important;
  }
  .analytics-period-presets{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .analytics-period-presets::-webkit-scrollbar{display:none;}
  .analytics-period-presets .btn{
    flex:0 0 auto;
  }
  .analytics-section-head{
    display:grid !important;
    grid-template-columns:1fr;
  }
  .analytics-section-head .btn{
    width:100%;
    justify-content:center;
  }
  .analytics-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  /* KPI card block-size is owned by Design System Authority. Legacy fixed
     106px geometry clipped the canonical footer/microvisual on mobile. */
  .analytics-chart-grid{
    grid-template-columns:1fr !important;
  }
  .analytics-chart-panel{
    padding:12px;
  }
  .analytics-donut-panel{
    grid-template-columns:1fr;
  }
  .analytics-status-legend{
    margin-top:8px;
  }
}


/* =========================================================
   v2.5.44 · Fase 5.5 — Ausencias + Gastos Deep UX Audit
   ========================================================= */
.timeoff-card,.expenses-card{overflow:hidden}
.timeoff-stats,.expenses-stats{margin-bottom:14px!important}
.timeoff-stats>.stat-card,.expenses-stats>.stat-card{
  min-height:108px!important;
  padding:15px 17px!important;
}
.timeoff-stats>.stat-card>strong,.expenses-stats>.stat-card>strong{
  font-size:clamp(1.35rem,2vw,1.7rem)!important;
}
.section-card-head{
  padding:17px 18px!important;
}
.section-card-head p{
  max-width:720px;
  font-size:.76rem;
  line-height:1.45;
}
.compact-filter{
  flex:0 0 auto;
}
.compact-filter select{
  min-width:150px;
  min-height:44px;
}
.row-action-group{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.timeoff-table tbody tr,.expenses-table tbody tr{
  transition:background-color var(--motion-micro,160ms) ease;
}
.timeoff-table tbody tr:hover,.expenses-table tbody tr:hover{
  background:color-mix(in srgb,var(--color-primario) 3%,transparent);
}
.timeoff-empty,.expenses-empty{
  min-height:210px!important;
}
.timeoff-empty h3,.timeoff-empty p{
  margin:0;
}
.action-approve{
  border-color:color-mix(in srgb,var(--semantic-success,#16a34a) 30%,var(--line-soft))!important;
}
.expense-scan-panel{
  position:sticky;
  top:18px;
  padding:16px;
  border:1px solid var(--line-soft)!important;
  border-radius:var(--radius-xl,20px)!important;
  background:var(--surface-card)!important;
  box-shadow:none!important;
}
.expense-dropzone{
  min-height:220px;
  padding:20px;
}
.expense-dropzone:focus-within{
  border-color:color-mix(in srgb,var(--color-primario) 58%,var(--line-soft))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primario) 12%,transparent);
}
.expense-dropzone.has-file{
  border-style:solid;
  background:color-mix(in srgb,var(--semantic-success,#16a34a) 5%,var(--surface-card))!important;
  border-color:color-mix(in srgb,var(--semantic-success,#16a34a) 34%,var(--line-soft))!important;
}
.expense-file-selection{
  display:none;
  max-width:100%;
  margin-top:3px;
  padding:5px 8px;
  border-radius:var(--radius-sm);
  background:var(--surface-soft);
  color:var(--text-main)!important;
  font-size:.68rem!important;
  font-weight:500;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.expense-dropzone.has-file .expense-file-selection{display:block}
.expense-ai-button{
  width:100%;
  justify-content:center;
  margin-top:10px;
}
.expense-ai-status{
  margin-top:10px;
  line-height:1.45;
}
.expense-fields{
  gap:12px!important;
}
.expense-fields .field textarea{
  min-height:104px;
  resize:vertical;
}
html[data-theme="dark"] :is(.timeoff-card,.expenses-card,.expense-scan-panel){
  background:var(--surface-card)!important;
  border-color:var(--line-soft)!important;
}
html[data-theme="dark"] :is(.timeoff-table,.expenses-table) tbody tr:hover{
  background:color-mix(in srgb,var(--color-primario) 7%,transparent);
}

@media(max-width:800px){
  .timeoff-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .timeoff-stats>.stat-card{
    min-height:102px!important;
    height:102px!important;
    padding:13px!important;
  }
  .timeoff-stats>.stat-card:last-child{
    grid-column:1/-1;
    height:94px!important;
    min-height:94px!important;
  }
  .section-card-head{
    padding:14px!important;
    gap:12px!important;
  }
  .compact-filter,.compact-filter select{width:100%}
  .timeoff-form{gap:12px!important}
  .row-action-group{justify-content:flex-start}
  .expense-scan-panel{position:static;padding:13px}
}
@media(max-width:640px){
  .expenses-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .expenses-stats>.stat-card{
    min-height:102px!important;
    height:102px!important;
    padding:13px!important;
  }
  .expense-modal{
    padding:16px!important;
  }
  .expense-dropzone{min-height:170px;padding:16px}
}


/* =========================================================
   v2.5.45 · Mobile Upload ↔ Quick Action choreography
   ========================================================= */
:root{
  --mobile-quick-create-overhang:36px;
  --mobile-upload-clearance:14px;
}

/* The upload HUD clears the protruding central action, not only the nav bar. */
@media(max-width:620px){
  .global-upload-hud{
    bottom:calc(
      var(--mobile-bottom-nav-h,72px)
      + var(--mobile-quick-create-overhang)
      + var(--mobile-upload-clearance)
      + env(safe-area-inset-bottom)
    ) !important;
  }

  /* Quick Action remains fully interactive; only its visual mass compresses. */
  .bottom-nav-movil .bottom-nav-create,
  .bottom-nav-movil .bottom-nav-create-icon,
  .bottom-nav-movil .bottom-nav-create-icon > svg,
  .bottom-nav-movil .bottom-nav-create > span:last-child{
    transition:
      width 240ms var(--motion-ease-emphasized,cubic-bezier(.22,1,.36,1)),
      height 240ms var(--motion-ease-emphasized,cubic-bezier(.22,1,.36,1)),
      margin 240ms var(--motion-ease-emphasized,cubic-bezier(.22,1,.36,1)),
      border-radius 240ms var(--motion-ease-emphasized,cubic-bezier(.22,1,.36,1)),
      box-shadow 220ms ease,
      transform 220ms var(--motion-ease-emphasized,cubic-bezier(.22,1,.36,1)),
      opacity 180ms ease !important;
  }

  body.upload-hud-active .bottom-nav-movil .bottom-nav-create{
    transform:none !important;
    pointer-events:auto !important;
  }
  body.upload-hud-active .bottom-nav-movil .bottom-nav-create-icon{
    margin-top:-20px !important;
    transform:none !important;
    box-shadow:
      0 8px 20px color-mix(in srgb,var(--color-primario) 24%,transparent),
      0 2px 6px rgba(15,23,42,.12) !important;
  }
  body.upload-hud-active .bottom-nav-movil .bottom-nav-create-icon > svg{
    transform:scale(.82) !important;
  }
  body.upload-hud-active .bottom-nav-movil .bottom-nav-create > span:last-child{
    opacity:.82 !important;
  }

  /* Opening Quick Actions during an upload still communicates the + → × state. */
  body.upload-hud-active.global-create-open .bottom-nav-movil .bottom-nav-create-icon > svg{
    transform:rotate(45deg) scale(.82) !important;
  }
}

/* Landscape has less vertical room: keep separation but use a smaller reserve. */
@media(max-width:860px) and (orientation:landscape) and (max-height:520px){
  :root{
    --mobile-quick-create-overhang:28px;
    --mobile-upload-clearance:10px;
  }
}

/* Reduced motion keeps the collision fix but removes the choreography. */
@media(max-width:620px) and (prefers-reduced-motion:reduce){
  .bottom-nav-movil .bottom-nav-create,
  .bottom-nav-movil .bottom-nav-create-icon,
  .bottom-nav-movil .bottom-nav-create-icon > svg,
  .bottom-nav-movil .bottom-nav-create > span:last-child{
    transition:none !important;
  }
}


/* =========================================================
   v2.5.46 · Fase 5.6 — Supervisión + Histórico Deep UX Audit
   ========================================================= */
.supervision-page-heading,
.supervision-report-heading{
  margin-bottom:14px;
}
.supervision-page-heading p,
.supervision-report-heading p{
  max-width:760px;
}

/* Status tabs: compact, scroll-safe and calm. */
.supervision-status-tabs{
  margin-bottom:12px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
}
.supervision-status-tabs::-webkit-scrollbar{display:none;}
.supervision-status-tabs .tab{
  flex:0 0 auto;
  white-space:nowrap;
  min-height:42px;
}
.supervision-status-tabs .conteo{
  min-width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  padding:0 6px;
  margin-left:4px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--text-main) 5%,transparent);
  color:inherit;
  font-size:.64rem;
  font-variant-numeric:tabular-nums;
}

.supervision-queue-card{
  padding:0 !important;
  overflow:hidden;
}
.supervision-queue-card > .empty-state-modern{
  margin:14px;
}
.supervision-bulk-toolbar{
  position:sticky;
  top:0;
  z-index:6;
  min-height:64px;
  margin:0 !important;
  padding:11px 14px !important;
  border:0 !important;
  border-bottom:1px solid var(--line-soft) !important;
  border-radius:0 !important;
  background:color-mix(in srgb,var(--surface-card) 96%,transparent) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.supervision-selection-meta{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.supervision-selection-meta > div{
  min-width:0;
  display:grid;
  gap:2px;
}
.supervision-selection-icon{
  width:32px;
  height:32px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--surface-elevated);
  color:var(--text-muted);
}
.supervision-selection-meta strong{
  color:var(--text-main);
  font-size:.75rem;
}
.supervision-selection-meta span:not(.supervision-selection-icon){
  color:var(--text-muted);
  font-size:.66rem;
  line-height:1.4;
}
.supervision-bulk-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.supervision-bulk-actions .btn{
  min-width:92px;
  justify-content:center;
}
.supervision-bulk-actions .btn:disabled{
  opacity:.48;
  cursor:not-allowed;
}

.supervision-table-wrap{
  border:0 !important;
  border-radius:0 !important;
}
.supervision-table{
  min-width:900px;
}
.supervision-table thead th{
  position:sticky;
  top:64px;
  z-index:4;
}
.supervision-table .col-select{
  width:46px;
  text-align:center;
}
.supervision-table input[type="checkbox"]{
  width:18px;
  height:18px;
  min-height:18px;
  margin:0;
  accent-color:var(--color-primario);
}
.supervision-person-name{
  display:block;
  max-width:260px;
  color:var(--text-main);
  font-size:.74rem;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.supervision-row-action{
  min-width:78px;
  justify-content:center;
}
.visually-hidden-form{
  display:none !important;
}

/* History filters */
.supervision-history-filter-card{
  padding:15px !important;
}
.supervision-filter-grid{
  display:grid !important;
  grid-template-columns:minmax(145px,.7fr) minmax(145px,.7fr) minmax(190px,1fr) minmax(190px,1.15fr) auto !important;
  align-items:end;
  gap:9px !important;
}
.supervision-filter-grid .form-grupo{
  min-width:0;
}
.supervision-filter-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.supervision-period-presets{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  padding-top:12px;
  overflow-x:auto;
  border-top:1px solid var(--line-soft);
  scrollbar-width:none;
}
.supervision-period-presets::-webkit-scrollbar{display:none;}
.supervision-period-presets .btn{
  flex:0 0 auto;
}

/* KPI density: 4 columns desktop, 2 columns mobile. */
.supervision-history-summary{
  margin-top:16px;
}
.supervision-summary-grid{
  gap:9px !important;
}
.supervision-summary-grid > .stat-card{
  min-height:108px !important;
  padding:14px 15px !important;
}

/* Chart */
.supervision-history-chart{
  padding:15px !important;
}
.supervision-history-chart .card-header{
  margin-bottom:10px;
}
.supervision-chart-scroll{
  min-height:165px;
  padding:8px 4px 0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
.supervision-chart-scroll svg{
  display:block;
  color:var(--text-muted);
}
.supervision-chart-legend{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
  color:var(--text-muted);
  font-size:.68rem;
}
.supervision-chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.supervision-chart-legend i{
  width:9px;
  height:9px;
  display:inline-block;
  border-radius:3px;
}
.supervision-chart-legend .is-success{background:var(--semantic-success,#16a34a);}
.supervision-chart-legend .is-danger{background:var(--semantic-danger,#dc2626);}
.supervision-chart-legend .is-neutral{background:var(--chart-neutral,#64748b);}

/* Detail */
.supervision-history-detail{
  padding:15px !important;
}
.supervision-detail-head{
  margin-bottom:10px;
}
.supervision-detail-head h2{
  margin:.15rem 0 .2rem;
}
.supervision-detail-head p{
  margin:0;
  color:var(--text-muted);
  font-size:.7rem;
}
.supervision-history-table{
  min-width:760px;
}
.supervision-history-table tbody td:first-child{
  white-space:nowrap;
}

/* Dark mode */
html[data-theme="dark"] .supervision-bulk-toolbar{
  background:color-mix(in srgb,var(--surface-card) 96%,transparent) !important;
  border-bottom-color:var(--line-soft) !important;
}
html[data-theme="dark"] .supervision-selection-icon{
  background:var(--surface-elevated) !important;
  color:var(--text-muted) !important;
}
html[data-theme="dark"] .supervision-status-tabs .conteo{
  background:var(--surface-elevated);
}

/* Mobile */
@media(max-width:820px){
  .supervision-page-heading,
  .supervision-report-heading{
    gap:10px;
  }
  .supervision-page-heading > .btn,
  .supervision-report-heading > .btn{
    width:100%;
    justify-content:center;
  }

  .supervision-bulk-toolbar{
    position:relative;
    top:auto;
    display:grid !important;
    grid-template-columns:1fr;
    gap:9px;
    min-height:0;
  }
  .supervision-bulk-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .supervision-bulk-actions .btn{
    width:100%;
  }
  .supervision-table thead th{
    position:static;
  }

  .supervision-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .supervision-filter-actions{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .supervision-filter-actions .btn{
    width:100%;
    justify-content:center;
  }

  .supervision-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .supervision-summary-grid > .stat-card{
    height:104px !important;
    min-height:104px !important;
    max-height:104px !important;
    padding:12px !important;
  }
}

@media(max-width:520px){
  .supervision-history-filter-card,
  .supervision-history-chart,
  .supervision-history-detail{
    padding:13px !important;
  }
  .supervision-filter-grid{
    grid-template-columns:1fr !important;
  }
  .supervision-filter-actions{
    grid-column:auto;
    grid-template-columns:1fr;
  }
  .supervision-bulk-actions{
    grid-template-columns:1fr 1fr;
  }
  .supervision-selection-meta span:not(.supervision-selection-icon){
    font-size:.64rem;
  }
}


/* =========================================================
   v2.5.47 · Mobile Upload HUD — centered glass treatment
   ========================================================= */
@media(max-width:620px){
  /* The upload state becomes a centered global surface.
     Bottom navigation and Quick Actions keep their original geometry. */
  .global-upload-hud{
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    left:50% !important;
    width:min(420px,calc(100vw - 28px)) !important;
    max-height:calc(100dvh - 40px);
    padding:16px 16px 15px !important;
    border:1px solid color-mix(in srgb,var(--glass-border) 88%,transparent) !important;
    border-radius:var(--radius-xl) !important;
    background:
      linear-gradient(
        145deg,
        color-mix(in srgb,var(--glass-bg-strong) 96%,transparent),
        color-mix(in srgb,var(--glass-bg) 90%,transparent)
      ) !important;
    box-shadow:
      0 26px 72px rgba(15,23,42,.24),
      0 8px 24px rgba(15,23,42,.12),
      inset 0 1px 0 rgba(255,255,255,.12) !important;
    -webkit-backdrop-filter:blur(28px) saturate(165%) !important;
    backdrop-filter:blur(28px) saturate(165%) !important;
    transform:translate(-50%,-47%) scale(.975) !important;
  }
  .global-upload-hud.is-visible{
    transform:translate(-50%,-50%) scale(1) !important;
  }
  .global-upload-hud.is-leaving{
    transform:translate(-50%,-53%) scale(.985) !important;
  }

  /* Make the centered state feel intentional and not like a toast. */
  .global-upload-glow{
    width:220px;
    height:220px;
    top:-140px;
    left:50%;
    transform:translateX(-50%);
    opacity:.62;
  }
  .global-upload-head{
    grid-template-columns:42px minmax(0,1fr) auto !important;
    gap:11px !important;
  }
  .global-upload-status-icon{
    width:42px !important;
    height:42px !important;
  }
  .global-upload-track{
    height:10px;
    margin-top:13px;
  }
  .global-upload-meta{
    display:flex !important;
    grid-template-columns:none !important;
    justify-content:space-between;
    gap:10px !important;
    margin-top:8px;
  }
  .global-upload-meta span:last-child{
    text-align:right !important;
  }

  /* Neutralize v2.5.45 quick-action compression entirely. */
  body.upload-hud-active .bottom-nav-movil .bottom-nav-create,
  body.upload-hud-active .bottom-nav-movil .bottom-nav-create-icon,
  body.upload-hud-active .bottom-nav-movil .bottom-nav-create-icon > svg,
  body.upload-hud-active .bottom-nav-movil .bottom-nav-create > span:last-child{
    margin-top:revert !important;
    transform:none !important;
    opacity:1 !important;
    box-shadow:revert !important;
    pointer-events:auto !important;
  }

  /* Restore the original create-action geometry explicitly so later legacy
     selectors cannot re-compress it. */
  .bottom-nav-movil .bottom-nav-create-icon{
    margin-top:-34px !important;
    box-shadow:
      0 12px 30px color-mix(in srgb,var(--color-primario) 32%,transparent),
      0 4px 10px rgba(15,23,42,.14) !important;
  }
  .bottom-nav-movil .bottom-nav-create-icon > svg{
    transform:none !important;
  }
  .global-create-open .bottom-nav-movil .bottom-nav-create-icon > svg{
    transform:rotate(45deg) !important;
  }
}

html[data-theme="dark"] .global-upload-hud{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--glass-bg-strong) 97%,transparent),
      color-mix(in srgb,var(--surface-overlay) 90%,transparent)
    ) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:
    0 30px 84px rgba(0,0,0,.42),
    0 10px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

@media(max-width:620px) and (prefers-reduced-motion:reduce){
  .global-upload-hud,
  .global-upload-hud.is-visible,
  .global-upload-hud.is-leaving{
    transform:translate(-50%,-50%) scale(1) !important;
  }
}


/* =========================================================
   v2.5.48 · Fase 5.7 — Administración técnica / Release / Backups
   ========================================================= */
.system-page-heading,
.release-page-heading{
  margin-bottom:14px;
}
.system-page-heading p,
.release-page-heading p{
  margin:.25rem 0 0;
  max-width:760px;
  color:var(--text-muted);
  font-size:.8rem;
  line-height:1.45;
}

.system-summary-grid,
.release-kpi-grid{
  gap:10px !important;
}
.system-summary-grid > .stat-card,
.release-kpi-grid > .stat-card{
  min-height:108px;
  padding:14px 15px !important;
}

.system-diagnostic-grid{
  align-items:start;
  gap:12px !important;
}
.system-status-card,
.system-integrations-card,
.system-logs-card,
.system-backups-card,
.release-step-card{
  padding:15px !important;
}
.system-table-wrap,
.backup-table-wrap,
.release-restore-table-wrap{
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg,16px) !important;
  overflow:auto;
}
.system-table{min-width:620px;}
.backup-table{min-width:680px;}
.release-restore-table{min-width:760px;}

.system-integration-row{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
.system-integration-row:last-of-type{
  border-bottom:0;
}
.system-integration-row strong{
  min-width:0;
  color:var(--text-main);
}
.system-log-item{
  margin:0;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md,12px);
  overflow:hidden;
}
.system-log-item + .system-log-item{
  margin-top:8px;
}
.system-log-item > summary{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:9px 11px;
  cursor:pointer;
  color:var(--text-main);
}
.system-log-output{
  max-height:280px;
  margin:0;
  padding:12px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  border-top:1px solid var(--line-soft);
  background:var(--surface-app);
  color:var(--text-muted);
  font-size:.68rem;
  line-height:1.5;
}

.system-backups-card > .card-header{
  align-items:flex-start;
  gap:12px;
}
.backup-manual-form{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.backup-code-check{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 !important;
  padding:5px 8px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm,8px);
  background:var(--surface-subtle);
  color:var(--text-main);
  font-size:.7rem;
  font-weight:500;
}
.backup-code-check input{
  width:17px !important;
  height:17px !important;
  min-height:17px !important;
  margin:0;
}
.backup-protection-grid{
  gap:10px;
}
.backup-protection-item{
  min-height:82px;
  padding:13px !important;
}
.backup-policy-note{
  margin-top:12px;
  padding:11px 12px !important;
  border-radius:var(--radius-md,12px);
}
.system-backups-card code{
  overflow-wrap:anywhere;
}

/* Release Manager */
.release-step-card > .card-header{
  margin-bottom:12px;
}
.release-card-description{
  margin:.25rem 0 0 !important;
  max-width:780px;
  line-height:1.5;
}
.release-upload-form{
  display:grid;
  gap:10px;
}
.release-dropzone{
  min-height:190px;
  padding:20px;
  border-radius:var(--radius-lg,16px);
}
.release-upload-form > .btn{
  width:100%;
  min-height:46px;
  justify-content:center;
}
.release-check-grid{
  gap:8px !important;
}
.release-check{
  min-height:64px;
  padding:10px 11px !important;
  border-radius:var(--radius-md,12px);
}
.release-check strong{
  font-size:.72rem;
}
.release-check small{
  margin-top:2px;
  line-height:1.4;
}
.release-list{
  display:grid;
  gap:10px;
}
.release-item{
  padding:14px !important;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg,16px);
  background:var(--surface-card);
}
.release-item-head{
  gap:12px;
}
.release-title-row{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.release-title-row strong{
  color:var(--text-main);
  font-size:.78rem;
}
.release-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.release-actions form{
  margin:0;
}
.release-test-summary{
  min-height:40px;
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm,8px);
  background:var(--surface-subtle);
  color:var(--text-muted);
  font-size:.7rem;
}
.release-test-summary strong{
  color:var(--text-main);
  font-variant-numeric:tabular-nums;
}
.release-tests{
  margin-top:8px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md,12px);
  overflow:hidden;
}
.release-tests > summary{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  cursor:pointer;
  color:var(--text-main);
  font-size:.7rem;
  font-weight:500;
}
.release-tests > .release-check-grid{
  padding:0 10px 10px;
}
.release-history-row{
  min-height:58px;
  padding:10px 0 !important;
  border-bottom:1px solid var(--line-soft);
}
.release-history-row:last-child{
  border-bottom:0;
}

/* Dark */
html[data-theme="dark"] :is(
  .system-status-card,.system-integrations-card,.system-logs-card,.system-backups-card,
  .release-step-card,.release-item,.release-tests,.system-log-item
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .system-log-output{
  background:var(--surface-app) !important;
  color:var(--text-muted) !important;
}
html[data-theme="dark"] :is(.backup-code-check,.release-test-summary){
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}

@media(max-width:820px){
  .system-summary-grid,
  .release-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .system-summary-grid > .stat-card,
  .release-kpi-grid > .stat-card{
    min-height:104px !important;
    height:104px !important;
    max-height:104px !important;
    padding:12px !important;
  }
  .system-diagnostic-grid{
    grid-template-columns:1fr !important;
  }
  .system-backups-card > .card-header,
  .release-item-head{
    display:grid !important;
    grid-template-columns:1fr;
  }
  .backup-manual-form,
  .release-actions{
    width:100%;
  }
  .backup-manual-form{
    display:grid;
    grid-template-columns:1fr;
  }
  .backup-manual-form .btn,
  .backup-code-check{
    width:100%;
    justify-content:center;
  }
  .release-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .release-actions form,
  .release-actions .btn{
    width:100%;
  }
  .release-actions .btn{
    justify-content:center;
  }
}

@media(max-width:520px){
  .system-status-card,
  .system-integrations-card,
  .system-logs-card,
  .system-backups-card,
  .release-step-card{
    padding:13px !important;
  }
  .release-dropzone{
    min-height:160px;
    padding:16px;
  }
  .backup-protection-grid{
    grid-template-columns:1fr !important;
  }
  .backup-protection-item{
    min-height:70px;
  }
}


/* =========================================================
   v2.5.49 · Fase 5.8 — Document Hub / Expediente documental
   ========================================================= */
.document-hub-audit{
  padding:0 !important;
  overflow:hidden;
}
.document-hub-audit .document-hub-header{
  padding:18px 18px 14px;
}
.document-hub-audit .document-hub-title p{
  max-width:720px;
  line-height:1.45;
}
.document-summary-grid-audit{
  gap:9px !important;
  padding:0 18px 14px !important;
}
.document-summary-grid-audit .document-summary-item{
  min-height:84px;
  padding:11px 12px !important;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md,12px);
  background:var(--surface-card);
}
.document-summary-grid-audit .document-summary-item strong{
  font-size:1.15rem;
  font-variant-numeric:tabular-nums;
}
.document-summary-grid-audit .document-summary-item > div > span{
  margin-top:2px;
  color:var(--text-muted);
  font-size:.66rem;
  line-height:1.3;
}

.document-category-grid-modern{
  gap:10px !important;
  padding:0 18px 18px !important;
}
.document-category-audit{
  overflow:hidden;
  border:1px solid var(--line-soft) !important;
  border-radius:var(--radius-lg,16px) !important;
  background:var(--surface-card) !important;
  box-shadow:none !important;
}
.document-category-audit .document-category-head-modern{
  min-height:66px;
  padding:11px 12px;
  border-bottom:1px solid var(--line-soft);
  background:var(--surface-subtle);
}
.document-category-audit.is-empty .document-category-head-modern{
  border-bottom:0;
}
.document-category-copy{
  min-width:0;
}
.document-category-copy strong{
  color:var(--text-main);
  font-size:.76rem;
}
.document-category-copy span{
  display:block;
  margin-top:2px;
  color:var(--text-muted);
  font-size:.64rem;
  line-height:1.35;
}
.document-count-pill{
  min-width:26px;
  height:26px;
  display:grid;
  place-items:center;
  padding:0 7px;
  border-radius:var(--radius-pill);
  background:var(--surface-elevated);
  color:var(--text-muted);
  font-size:.66rem;
  font-variant-numeric:tabular-nums;
}
.document-list-modern{
  display:grid;
}
.document-row-modern{
  min-height:72px;
  padding:10px 12px !important;
  border-bottom:1px solid color-mix(in srgb,var(--line-soft) 72%,transparent);
}
.document-row-modern:last-child{
  border-bottom:0;
}
.document-row-modern.is-history{
  opacity:.68;
}
.document-file-meta{
  min-width:0;
}
.document-file-meta strong{
  color:var(--text-main);
  font-size:.72rem;
  font-weight:500;
}
.document-file-meta span{
  max-width:100%;
  overflow:hidden;
  color:var(--text-muted);
  font-size:.66rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.document-file-meta small{
  color:var(--text-subtle);
  font-size:.61rem;
}
.document-row-actions-modern{
  gap:7px;
}
.document-view-btn{
  min-height:34px;
  border-color:var(--line-soft);
}
.document-empty-modern{
  min-height:92px;
  padding:14px 12px;
}

/* Upload modal */
.document-upload-dialog{
  width:min(660px,calc(100vw - 24px));
}
.document-upload-form{
  display:grid;
  gap:0;
}
.document-dropzone-modern{
  min-height:174px;
  margin:0;
  padding:18px;
  border:1.5px dashed var(--border-default);
  border-radius:var(--radius-lg,16px);
  background:var(--surface-subtle);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}
.document-dropzone-modern:focus-within{
  border-color:color-mix(in srgb,var(--color-primario) 58%,var(--border-default));
  box-shadow:0 0 0 3px var(--focus-ring);
}
.document-dropzone-modern.has-file{
  border-style:solid;
  border-color:color-mix(in srgb,var(--semantic-success,#16a34a) 34%,var(--line-soft));
  background:color-mix(in srgb,var(--semantic-success,#16a34a) 5%,var(--surface-card));
}
.document-file-selection{
  display:none;
  max-width:100%;
  margin-top:4px;
  padding:5px 8px;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:var(--surface-elevated);
  color:var(--text-main) !important;
  font-size:.65rem !important;
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.document-dropzone-modern.has-file .document-file-selection{
  display:block;
}
.document-upload-fields{
  gap:10px !important;
}
.document-upload-fields .form-grupo{
  margin-bottom:10px;
}
.document-upload-actions{
  position:sticky;
  bottom:0;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:8px -20px -20px !important;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--surface-card) 94%,transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* Timeline / audit history */
.document-timeline-card{
  padding:15px !important;
}
.document-timeline-card .card-header{
  margin-bottom:10px;
}
.document-timeline-card .empty-state-modern,
.document-timeline-card .vacio{
  min-height:150px;
}
.document-technical-history{
  background:var(--surface-card);
  border-color:var(--line-soft);
}
.document-technical-history > summary{
  min-height:54px;
}
.technical-history-table-wrap{
  margin:12px !important;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg,16px);
}
.technical-history-table{
  min-width:680px;
}

/* Dark Mode */
html[data-theme="dark"] :is(
  .document-summary-grid-audit .document-summary-item,
  .document-category-audit,
  .document-timeline-card,
  .document-technical-history
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .document-category-audit .document-category-head-modern,
html[data-theme="dark"] .document-dropzone-modern{
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .document-dropzone-modern.has-file{
  background:color-mix(in srgb,var(--semantic-success,#22c55e) 7%,var(--surface-elevated)) !important;
  border-color:color-mix(in srgb,var(--semantic-success,#22c55e) 32%,var(--line-soft)) !important;
}
html[data-theme="dark"] .document-upload-actions{
  background:color-mix(in srgb,var(--surface-card) 95%,transparent);
}

/* Mobile */
@media(max-width:760px){
  .document-hub-audit .document-hub-header{
    padding:14px 14px 12px !important;
  }
  .document-summary-grid-audit{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:0 14px 12px !important;
  }
  .document-summary-grid-audit .document-summary-item{
    min-height:78px;
    padding:10px !important;
  }
  .document-category-grid-modern{
    grid-template-columns:1fr !important;
    padding:0 14px 14px !important;
  }
  .document-row-modern{
    grid-template-columns:38px minmax(0,1fr) !important;
    gap:8px !important;
  }
  .document-row-actions-modern{
    grid-column:2;
    justify-content:flex-start;
    width:100%;
  }
  .document-row-actions-modern .badge{
    flex:0 0 auto;
  }
  .document-view-btn{
    width:auto !important;
    min-width:34px;
    padding:0 9px !important;
  }
  .document-view-btn span{
    display:inline !important;
  }

  .document-upload-dialog{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 28px);
  }
  .document-upload-dialog .app-modal-body,
  .document-upload-form{
    min-height:0;
  }
  .document-dropzone-modern{
    min-height:146px;
    padding:15px;
  }
  .document-upload-fields{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }
  .document-upload-actions{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    margin:8px -16px -16px !important;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  }
  .document-upload-actions .btn{
    width:100%;
    justify-content:center;
  }

  .document-timeline-card{
    padding:13px !important;
  }
}

@media(max-width:390px){
  .document-upload-actions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   v2.5.50 · Fase 5.9 — Activity Center + Global Search
   ========================================================= */

/* Activity Center */
.activity-center{
  width:min(390px,calc(100vw - 24px));
  max-height:min(620px,calc(100dvh - 96px));
  overflow:hidden;
}
.activity-center .notificaciones-header{
  min-height:66px;
  padding:13px 14px 11px !important;
  border-bottom:1px solid var(--line-soft);
}
.activity-center .notificaciones-header strong{
  color:var(--text-main);
  font-size:.78rem;
}
.activity-center .notificaciones-header small{
  margin-top:2px;
  color:var(--text-muted);
  font-size:.63rem;
}
.activity-total{
  min-width:58px;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px !important;
  border:1px solid var(--line-soft) !important;
  border-radius:var(--radius-pill) !important;
  background:var(--surface-elevated) !important;
  color:var(--text-muted) !important;
  font-size:.62rem !important;
  font-variant-numeric:tabular-nums;
}
.activity-group{
  padding:8px 8px 9px !important;
}
.activity-group + .activity-group{
  padding-top:9px !important;
}
.activity-group-heading{
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 6px 5px;
}
.activity-group-label{
  padding:0 !important;
  color:var(--text-muted);
  font-size:.59rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.activity-group-heading > span{
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:var(--radius-pill);
  background:var(--surface-elevated);
  color:var(--text-muted);
  font-size:.58rem;
  font-variant-numeric:tabular-nums;
}
.activity-group-attention .activity-group-heading > span{
  background:color-mix(in srgb,var(--semantic-warning,#f59e0b) 12%,var(--surface-card));
  color:color-mix(in srgb,var(--semantic-warning,#f59e0b) 78%,var(--text-main));
}
.activity-center .notificacion-item{
  min-height:62px;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) 20px;
  align-items:center;
  gap:9px;
  margin:2px 0 !important;
  padding:8px 7px !important;
  border:1px solid transparent !important;
  border-radius:var(--radius-md) !important;
}
.activity-center .notificacion-item:hover,
.activity-center .notificacion-item:focus-visible{
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
.activity-center .notificacion-icono{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
}
.notificacion-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.notificacion-copy strong{
  overflow:hidden;
  color:var(--text-main);
  font-size:.69rem;
  font-weight:500;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.notificacion-copy small{
  display:-webkit-box;
  overflow:hidden;
  color:var(--text-muted);
  font-size:.62rem;
  line-height:1.4;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.notificacion-action-icon{
  display:grid;
  place-items:center;
  color:var(--text-subtle);
  transition:transform var(--motion-micro,160ms) ease,color var(--motion-micro,160ms) ease;
}
.notificacion-item:hover .notificacion-action-icon,
.notificacion-item:focus-visible .notificacion-action-icon{
  transform:translateX(2px);
  color:var(--text-main);
}
.activity-center-footer{
  position:sticky;
  bottom:0;
  z-index:2;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
  border-top:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--glass-bg-strong) 94%,transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.activity-center-footer a{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:10px;
  color:var(--text-main);
  font-size:.68rem;
  font-weight:500;
}

/* Command Center */
.command-center-dialog{
  width:min(680px,calc(100vw - 28px));
  padding:0 !important;
  overflow:hidden;
  border:1px solid var(--glass-border);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
}
.command-center-topline{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px 8px;
}
.command-center-topline h2{
  margin:2px 0 0;
  color:var(--text-main);
  font-size:.92rem;
}
.command-center-close{
  flex:0 0 auto;
}
.command-search-wrap{
  margin:0 12px 10px;
  min-height:48px;
  border:1px solid var(--border-default);
  border-radius:14px;
  background:var(--surface-elevated);
}
.command-search-wrap:focus-within{
  border-color:color-mix(in srgb,var(--color-primario) 55%,var(--border-default));
  box-shadow:0 0 0 3px var(--focus-ring);
}
.command-search-wrap input{
  min-height:46px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.command-search-wrap kbd{
  margin-right:9px;
}
.command-results{
  max-height:min(430px,52dvh);
  padding:2px 8px 8px;
  overflow:auto;
  overscroll-behavior:contain;
}
.command-result{
  min-height:62px;
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:8px 9px !important;
  border:1px solid transparent;
  border-radius:var(--radius-md);
}
.command-result:hover,
.command-result.is-active,
.command-result[aria-selected="true"]{
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
.command-result-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--brand-soft);
  color:var(--color-primario);
  font-size:.72rem;
  font-weight:700;
}
.command-result-icon-accion{
  background:var(--surface-subtle);
  color:var(--text-muted);
}
.command-result-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.command-result-copy strong{
  overflow:hidden;
  color:var(--text-main);
  font-size:.72rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.command-result-copy small{
  overflow:hidden;
  color:var(--text-muted);
  font-size:.62rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.command-result-kind{
  min-width:62px;
  min-height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 7px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);
  color:var(--text-muted);
  font-size:.58rem;
  font-weight:500;
}
.command-empty{
  min-height:170px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:4px;
  padding:24px;
  text-align:center;
}
.command-empty strong{
  color:var(--text-main);
  font-size:.78rem;
}
.command-empty span{
  max-width:360px;
  color:var(--text-muted);
  font-size:.67rem;
  line-height:1.45;
}
.command-loading{
  display:grid;
  gap:7px;
  padding:8px 2px;
}
.command-footer{
  min-height:40px;
  padding:8px 12px !important;
  border-top:1px solid var(--line-soft);
  background:var(--surface-subtle);
  color:var(--text-muted);
  font-size:.58rem;
}

/* Dark mode */
html[data-theme="dark"] .activity-center,
html[data-theme="dark"] .command-center-dialog{
  background:var(--glass-bg-strong) !important;
  border-color:var(--glass-border) !important;
  color:var(--text-main) !important;
}
html[data-theme="dark"] :is(.activity-total,.activity-group-heading > span,.command-search-wrap,.command-result:hover,.command-result.is-active){
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}

/* Mobile: Activity Center behaves as a controlled top sheet; Command Center fills safely. */
@media(max-width:760px){
  .activity-center{
    position:fixed !important;
    top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 6px) !important;
    right:12px !important;
    left:12px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - var(--mobile-topbar-h,64px) - var(--mobile-bottom-nav-h,72px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
    border-radius:18px !important;
  }
  .activity-center .notificacion-item{
    min-height:60px;
  }
  .activity-center-footer a{
    min-height:42px;
  }

  .command-center-dialog{
    width:calc(100vw - 20px);
    margin:10px auto 0 !important;
    max-height:calc(100dvh - 20px) !important;
    border-radius:var(--radius-xl);
  }
  .command-center-topline{
    min-height:56px;
  }
  .command-search-wrap{
    margin:0 10px 8px;
  }
  .command-search-wrap kbd{
    display:none;
  }
  .command-results{
    max-height:calc(100dvh - 190px);
  }
  .command-result{
    grid-template-columns:36px minmax(0,1fr);
  }
  .command-result-kind{
    display:none;
  }
  .command-footer{
    justify-content:center;
  }
  .command-footer span:last-child{
    display:none;
  }
}


/* =========================================================
   v2.5.51 · Release Manager — post-upload next-step guidance
   ========================================================= */
.release-item{
  scroll-margin-top:96px;
}
.release-item.is-release-guided{
  border-color:color-mix(in srgb,var(--color-primario) 42%,var(--line-soft)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--color-primario) 10%,transparent),
    0 14px 34px color-mix(in srgb,var(--color-primario) 8%,transparent) !important;
}
.release-actions{
  position:relative;
}
.release-actions [data-release-activate].is-next-action{
  position:relative;
  z-index:1;
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--color-primario) 16%,transparent),
    0 10px 24px color-mix(in srgb,var(--color-primario) 22%,transparent) !important;
  animation:release-next-action-pulse 1.15s var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1)) 2;
}
.release-next-step-hint{
  flex:1 1 100%;
  margin-top:2px;
  color:var(--text-muted);
  font-size:.63rem;
  line-height:1.4;
  text-align:right;
}
@keyframes release-next-action-pulse{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primario) 14%,transparent),0 10px 24px color-mix(in srgb,var(--color-primario) 20%,transparent);}
  50%{transform:translateY(-1px);box-shadow:0 0 0 7px color-mix(in srgb,var(--color-primario) 8%,transparent),0 14px 30px color-mix(in srgb,var(--color-primario) 24%,transparent);}
}
html[data-theme="dark"] .release-item.is-release-guided{
  border-color:color-mix(in srgb,var(--color-primario) 55%,var(--line-soft)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--color-primario) 13%,transparent),
    0 16px 38px rgba(0,0,0,.24) !important;
}
@media(max-width:820px){
  .release-next-step-hint{
    text-align:center;
  }
}
@media(prefers-reduced-motion:reduce){
  .release-actions [data-release-activate].is-next-action{
    animation:none !important;
  }
  .release-item.is-release-guided{
    scroll-behavior:auto;
  }
}


/* =========================================================
   v2.5.52 · Fase 6.0 — Perfil, seguridad & autoservicio
   ========================================================= */
.profile-page-heading{
  margin-bottom:14px;
}
.profile-page-heading h1{
  margin:.15rem 0 0;
}
.profile-page-heading p{
  margin:.25rem 0 0;
  max-width:720px;
  color:var(--text-muted);
  font-size:.78rem;
  line-height:1.45;
}
.profile-grid-audit{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:12px;
}
.profile-identity-card,
.profile-security-card{
  padding:16px !important;
}
.profile-card-heading{
  min-height:58px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.profile-card-heading h2{
  margin:.15rem 0 0;
  color:var(--text-main);
  font-size:.9rem;
}
.profile-card-heading p{
  margin:.25rem 0 0;
  max-width:520px;
  color:var(--text-muted);
  font-size:.68rem;
  line-height:1.45;
}
.profile-hero-audit{
  margin:0 0 14px;
  padding:13px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg,16px);
  background:var(--surface-subtle);
}
.profile-avatar-xl{
  width:72px;
  height:72px;
  flex:0 0 72px;
  border-radius:var(--radius-xl);
  background:var(--brand-soft);
  color:var(--color-primario);
  border:1px solid color-mix(in srgb,var(--color-primario) 14%,var(--line-soft));
}
.profile-hero-copy{
  min-width:0;
}
.profile-hero-copy h3{
  margin:0;
  overflow:hidden;
  color:var(--text-main);
  font-size:.92rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-hero-copy p{
  margin:.2rem 0 0;
  color:var(--text-muted);
  font-size:.7rem;
}
.profile-hero-copy > span{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:var(--text-subtle);
  font-size:.64rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-form,
.profile-password-form{
  display:grid;
}
.profile-form .form-grupo,
.profile-password-form .form-grupo{
  margin-bottom:11px;
}
.profile-photo-dropzone{
  min-height:78px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:1px dashed var(--border-default);
  border-radius:var(--radius-md,12px);
  background:var(--surface-subtle);
  cursor:pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}
.profile-photo-dropzone:hover{
  border-color:color-mix(in srgb,var(--color-primario) 42%,var(--border-default));
  background:color-mix(in srgb,var(--color-primario) 4%,var(--surface-subtle));
}
.profile-photo-dropzone:focus-within{
  border-color:color-mix(in srgb,var(--color-primario) 55%,var(--border-default));
  box-shadow:0 0 0 3px var(--focus-ring);
}
.profile-photo-dropzone.has-file{
  border-style:solid;
  border-color:color-mix(in srgb,var(--semantic-success,#16a34a) 38%,var(--line-soft));
  background:color-mix(in srgb,var(--semantic-success,#16a34a) 5%,var(--surface-card));
}
.profile-photo-dropzone input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none;
}
.profile-photo-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--brand-soft);
  color:var(--color-primario);
}
.profile-photo-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.profile-photo-copy strong{
  color:var(--text-main);
  font-size:.7rem;
}
.profile-photo-copy small{
  color:var(--text-muted);
  font-size:.62rem;
}
.profile-photo-copy em{
  display:none;
  overflow:hidden;
  color:var(--text-main);
  font-size:.62rem;
  font-style:normal;
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-photo-dropzone.has-file .profile-photo-copy em{
  display:block;
}
.profile-photo-action{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 9px;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:var(--surface-card);
  color:var(--text-main);
  font-size:.62rem;
  font-weight:500;
}
.profile-form-actions{
  display:flex;
  justify-content:flex-end;
  padding-top:4px;
}
.profile-form-actions .btn{
  min-width:160px;
  justify-content:center;
}

.profile-security-badge{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--semantic-success,#16a34a) 24%,var(--line-soft));
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--semantic-success,#16a34a) 6%,var(--surface-card));
  color:var(--semantic-success,#16a34a);
  font-size:.61rem;
  font-weight:700;
  white-space:nowrap;
}
.profile-security-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-bottom:13px;
  padding:10px 11px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md,12px);
  background:var(--surface-subtle);
  color:var(--text-muted);
}
.profile-security-note > svg{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--color-primario);
}
.profile-security-note strong{
  display:block;
  color:var(--text-main);
  font-size:.68rem;
}
.profile-security-note span{
  display:block;
  margin-top:2px;
  font-size:.62rem;
  line-height:1.4;
}
.profile-password-wrap{
  position:relative;
}
.profile-password-wrap input{
  padding-right:48px !important;
}
.profile-password-toggle{
  position:absolute;
  top:50%;
  right:6px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
}
.profile-password-toggle:hover,
.profile-password-toggle.is-visible{
  background:var(--surface-elevated);
  color:var(--text-main);
}
.profile-password-toggle:focus-visible{
  box-shadow:0 0 0 3px var(--focus-ring);
}

/* Dark */
html[data-theme="dark"] :is(
  .profile-identity-card,
  .profile-security-card,
  .profile-photo-action
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] :is(
  .profile-hero-audit,
  .profile-photo-dropzone,
  .profile-security-note
){
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .profile-photo-dropzone.has-file{
  background:color-mix(in srgb,var(--semantic-success,#22c55e) 7%,var(--surface-elevated)) !important;
  border-color:color-mix(in srgb,var(--semantic-success,#22c55e) 30%,var(--line-soft)) !important;
}

/* Responsive */
@media(max-width:900px){
  .profile-grid-audit{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .profile-identity-card,
  .profile-security-card{
    padding:13px !important;
  }
  .profile-card-heading{
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    margin-bottom:10px;
  }
  .profile-security-badge{
    width:max-content;
  }
  .profile-hero-audit{
    padding:11px;
  }
  .profile-avatar-xl{
    width:64px;
    height:64px;
    flex-basis:64px;
    border-radius:18px;
  }
  .profile-photo-dropzone{
    grid-template-columns:38px minmax(0,1fr);
  }
  .profile-photo-icon{
    width:38px;
    height:38px;
  }
  .profile-photo-action{
    grid-column:2;
    width:max-content;
  }
  .profile-form-actions{
    display:block;
  }
  .profile-form-actions .btn{
    width:100%;
  }
}


/* =========================================================
   v2.5.53 · Fase 6.1 — Acceso, recuperación & sesión
   ========================================================= */
.auth-access-panel{
  position:relative;
}
.auth-theme-toggle{
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  color:var(--text-muted);
  box-shadow:var(--shadow-sm,0 4px 14px rgba(15,23,42,.08));
  cursor:pointer;
}
.auth-theme-toggle:hover{
  background:var(--surface-elevated);
  color:var(--text-main);
}
.auth-theme-toggle:focus-visible{
  box-shadow:0 0 0 3px var(--focus-ring);
}
.auth-theme-toggle .theme-icon{
  position:absolute;
}

.auth-card-premium{
  width:min(430px,100%);
}
.auth-access-heading{
  margin-bottom:16px;
}
.auth-access-heading h2{
  margin:.25rem 0 0;
  color:var(--text-main);
  font-size:1.25rem;
}
.auth-access-heading p{
  margin:.4rem 0 0;
  color:var(--text-muted);
  font-size:.73rem;
  line-height:1.5;
}
.auth-access-form{
  display:grid;
}
.auth-access-form .form-grupo{
  margin-bottom:12px;
}
.auth-input-wrap{
  min-height:46px;
  border-radius:var(--radius-md);
}
.auth-input-wrap input{
  min-height:44px !important;
}
.auth-input-icon{
  color:var(--text-subtle);
}
.auth-password-toggle{
  width:36px !important;
  height:36px !important;
  display:grid;
  place-items:center;
  color:var(--text-muted);
  font-size:0 !important;
}
.auth-password-toggle svg{
  width:17px;
  height:17px;
}
.auth-password-toggle:hover,
.auth-password-toggle.is-visible{
  background:var(--surface-elevated) !important;
  color:var(--text-main);
}
.auth-submit{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:2px;
}
.auth-label-row{
  min-height:22px;
}
.auth-label-row a,
.auth-inline-link{
  color:var(--color-primario);
}
.auth-back-link{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.auth-remember{
  min-height:68px;
  align-items:center;
  margin:2px 0 12px;
  padding:9px 10px !important;
  border:1px solid var(--line-soft) !important;
  border-radius:var(--radius-md) !important;
  background:var(--surface-subtle) !important;
}
.auth-remember-box{
  width:22px !important;
  height:22px !important;
  flex:0 0 22px;
  display:grid !important;
  place-items:center;
  border-radius:7px !important;
}
.auth-remember-box svg{
  width:13px;
  height:13px;
}
.auth-remember-copy strong{
  color:var(--text-main);
  font-size:.69rem;
}
.auth-remember-copy small{
  margin-top:2px;
  color:var(--text-muted);
  font-size:.61rem;
  line-height:1.4;
}

.auth-context-note,
.auth-password-guidance{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:13px;
  padding:10px 11px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.auth-context-note > svg,
.auth-password-guidance > svg{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--color-primario);
}
.auth-context-note strong{
  display:block;
  color:var(--text-main);
  font-size:.68rem;
}
.auth-context-note span,
.auth-password-guidance span{
  display:block;
  color:var(--text-muted);
  font-size:.62rem;
  line-height:1.45;
}
.auth-password-guidance{
  align-items:center;
}

.auth-welcome-user{
  min-height:68px;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin-bottom:12px !important;
  padding:10px !important;
  border:1px solid var(--line-soft) !important;
  border-radius:var(--radius-md) !important;
  background:var(--surface-subtle) !important;
}
.auth-welcome-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--brand-soft);
  color:var(--color-primario);
  font-size:.8rem;
  font-weight:700;
}
.auth-welcome-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.auth-welcome-copy strong{
  overflow:hidden;
  color:var(--text-main);
  font-size:.72rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.auth-welcome-copy small{
  overflow:hidden;
  color:var(--text-muted);
  font-size:.63rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.auth-invalid-state,
.auth-session-state{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:8px 0 2px;
  text-align:center;
}
.auth-invalid-icon,
.auth-session-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:color-mix(in srgb,var(--semantic-warning,#f59e0b) 10%,var(--surface-card));
  color:var(--semantic-warning,#f59e0b);
}
.auth-session-icon{
  background:var(--brand-soft);
  color:var(--color-primario);
}
.auth-invalid-state h3,
.auth-session-state h3{
  margin:3px 0 0;
  color:var(--text-main);
  font-size:.9rem;
}
.auth-invalid-state p,
.auth-session-copy{
  max-width:330px;
  margin:0 0 3px;
  color:var(--text-muted);
  font-size:.68rem;
  line-height:1.5;
}
.auth-invalid-state .btn,
.auth-session-action{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.auth-session-helper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:2px 0 0 !important;
  color:var(--text-subtle) !important;
  font-size:.61rem !important;
}

/* Static auth surfaces remain solid — no glass on content cards. */
html[data-theme="dark"] :is(
  .auth-card-premium,
  .auth-theme-toggle,
  .auth-remember,
  .auth-context-note,
  .auth-password-guidance,
  .auth-welcome-user
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .auth-input-wrap{
  background:var(--surface-elevated) !important;
  border-color:var(--border-default) !important;
}
html[data-theme="dark"] .auth-input-wrap input{
  color:var(--text-main) !important;
}

@media(max-width:760px){
  .auth-theme-toggle{
    top:12px;
    right:12px;
    width:40px;
    height:40px;
  }
  .auth-access-panel{
    padding-top:58px !important;
  }
  .auth-card-premium{
    width:100%;
  }
  .auth-access-heading{
    margin-bottom:14px;
  }
}


/* =========================================================
   v2.5.54 · Fase 6.2 — Employee Experience / Autoservicio
   ========================================================= */
.employee-home-hero,
.employee-record-hero{
  min-height:132px;
  align-items:center;
  padding:18px 20px !important;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-xl,20px);
  background:linear-gradient(135deg,var(--brand-softer),var(--surface-card) 72%);
}
.employee-home-hero h1,
.employee-record-hero h1{
  margin:.18rem 0 0;
  color:var(--text-main);
  font-size:1.28rem;
}
.employee-home-hero p,
.employee-record-hero p{
  max-width:680px;
  margin:.35rem 0 0;
  color:var(--text-muted);
  font-size:.76rem;
  line-height:1.5;
}
.employee-primary-cta,
.employee-account-cta{
  flex:0 0 auto;
}

.employee-summary-grid{
  gap:10px !important;
}
.employee-summary-grid > .stat-card{
  min-height:118px !important;
  height:auto !important;
  padding:14px !important;
  border:1px solid var(--line-soft);
  box-shadow:none !important;
}
.employee-home-grid{
  align-items:start;
  gap:12px !important;
}
.employee-actions-card,
.employee-announcements-card,
.employee-record-card{
  padding:15px !important;
}
.employee-section-heading,
.employee-record-heading{
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.employee-section-heading h2,
.employee-record-heading h2{
  margin:.15rem 0 0;
  color:var(--text-main);
  font-size:.88rem;
}
.employee-section-heading p,
.employee-record-heading p{
  margin:.25rem 0 0;
  color:var(--text-muted);
  font-size:.65rem;
  line-height:1.45;
}

.employee-quick-actions{
  display:grid;
  gap:6px;
}
.employee-quick-actions .quick-action-row{
  min-height:66px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 22px;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  color:var(--text-main);
}
.employee-quick-actions .quick-action-row:hover,
.employee-quick-actions .quick-action-row:focus-visible{
  border-color:var(--line-soft);
  background:var(--surface-elevated);
}
.employee-quick-actions .quick-action-row > svg:first-child{
  width:36px;
  height:36px;
  padding:9px;
  border-radius:10px;
  background:var(--brand-soft);
  color:var(--color-primario);
}
.employee-quick-actions .quick-action-row > span:nth-child(2){
  min-width:0;
  display:grid;
  gap:2px;
}
.employee-quick-actions strong{
  color:var(--text-main);
  font-size:.7rem;
}
.employee-quick-actions small{
  color:var(--text-muted);
  font-size:.62rem;
}
.employee-action-arrow{
  display:grid;
  place-items:center;
  color:var(--text-subtle);
  transition:transform var(--motion-micro,160ms) ease;
}
.employee-quick-actions .quick-action-row:hover .employee-action-arrow,
.employee-quick-actions .quick-action-row:focus-visible .employee-action-arrow{
  transform:translateX(2px);
}

.employee-announcement-list{
  gap:7px !important;
}
.employee-announcement-list .announcement-card{
  padding:11px 12px !important;
}
.employee-announcement-list .announcement-card h3{
  margin:4px 0 3px;
  font-size:.76rem;
}
.employee-announcement-list .announcement-card p{
  display:-webkit-box;
  overflow:hidden;
  color:var(--text-muted);
  font-size:.65rem;
  line-height:1.45;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.employee-empty-state{
  min-height:190px;
}
.employee-link-alert{
  align-items:flex-start;
}

/* Employee record */
.employee-record-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:10px 12px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.employee-record-note > svg{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--color-primario);
}
.employee-record-note strong{
  display:block;
  color:var(--text-main);
  font-size:.68rem;
}
.employee-record-note span{
  display:block;
  margin-top:2px;
  color:var(--text-muted);
  font-size:.62rem;
  line-height:1.45;
}
.employee-record-grid{
  align-items:start;
  gap:12px !important;
}
.employee-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.employee-detail-grid > div{
  min-width:0;
  min-height:68px;
  display:grid;
  align-content:center;
  gap:4px;
  padding:9px 10px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.employee-detail-grid span{
  color:var(--text-subtle);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.employee-detail-grid strong{
  overflow-wrap:anywhere;
  color:var(--text-main);
  font-size:.7rem;
  line-height:1.4;
}
.employee-record-restriction{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line-soft);
  color:var(--text-muted);
  font-size:.61rem;
  line-height:1.45;
}
.employee-record-restriction > svg{
  flex:0 0 auto;
  margin-top:1px;
}
.employee-record-empty{
  min-height:280px;
  margin-top:12px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-xl,20px);
  background:var(--surface-card);
}
.employee-record-empty .btn{
  margin-top:5px;
}

/* Dark Mode */
html[data-theme="dark"] :is(
  .employee-home-hero,
  .employee-record-hero
){
  background:linear-gradient(135deg,var(--brand-softer),var(--surface-card) 72%) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] :is(
  .employee-actions-card,
  .employee-announcements-card,
  .employee-record-card,
  .employee-record-empty,
  .employee-summary-grid > .stat-card
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] :is(
  .employee-record-note,
  .employee-detail-grid > div
){
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}

/* Responsive */
@media(max-width:820px){
  .employee-home-grid,
  .employee-record-grid{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:620px){
  .employee-home-hero,
  .employee-record-hero{
    min-height:0;
    display:grid !important;
    grid-template-columns:1fr;
    gap:12px;
    padding:14px !important;
  }
  .employee-home-hero h1,
  .employee-record-hero h1{
    font-size:1.12rem;
  }
  .employee-primary-cta,
  .employee-account-cta{
    width:100%;
    justify-content:center;
  }

  .employee-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .employee-summary-grid > .stat-card{
    min-height:104px !important;
    padding:11px !important;
  }
  .employee-summary-grid > .stat-card:nth-child(3){
    grid-column:1 / -1;
  }

  .employee-actions-card,
  .employee-announcements-card,
  .employee-record-card{
    padding:13px !important;
  }
  .employee-section-heading{
    display:grid;
    grid-template-columns:1fr;
  }
  .employee-section-heading > .btn{
    width:100%;
    justify-content:center;
  }

  .employee-detail-grid{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .employee-detail-grid > div{
    min-height:64px;
    padding:8px 9px;
  }
}
@media(max-width:380px){
  .employee-detail-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   v2.5.55 · Fase 6.3 — Centro de ayuda & documentación
   ========================================================= */
.help-page-heading{
  margin-bottom:14px;
}
.help-page-heading h1{
  margin:.15rem 0 0;
}
.help-page-heading p{
  margin:.28rem 0 0;
  max-width:760px;
  color:var(--text-muted);
  font-size:.76rem;
  line-height:1.5;
}

.help-intro-card{
  padding:16px !important;
}
.help-intro-copy{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
  align-items:end;
  gap:18px;
}
.help-intro-copy h2{
  margin:.2rem 0 0;
  color:var(--text-main);
  font-size:1rem;
}
.help-intro-copy p{
  margin:.35rem 0 0;
  max-width:650px;
  color:var(--text-muted);
  font-size:.7rem;
  line-height:1.5;
}
.help-search{
  min-height:46px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 34px;
  align-items:center;
  gap:5px;
  padding:0 7px 0 11px;
  border:1px solid var(--border-default);
  border-radius:13px;
  background:var(--surface-elevated);
  color:var(--text-subtle);
}
.help-search:focus-within{
  border-color:color-mix(in srgb,var(--color-primario) 55%,var(--border-default));
  box-shadow:0 0 0 3px var(--focus-ring);
}
.help-search input{
  min-height:44px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--text-main);
}
.help-search button{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
}
.help-search button:hover{
  background:var(--surface-subtle);
  color:var(--text-main);
}

.help-topic-nav{
  display:flex;
  gap:7px;
  margin-top:14px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
.help-topic-nav::-webkit-scrollbar{
  display:none;
}
.help-topic-nav a{
  min-height:38px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);
  background:var(--surface-card);
  color:var(--text-muted);
  font-size:.64rem;
  font-weight:500;
  text-decoration:none;
}
.help-topic-nav a:hover,
.help-topic-nav a:focus-visible{
  border-color:color-mix(in srgb,var(--color-primario) 24%,var(--line-soft));
  background:var(--brand-softer);
  color:var(--text-main);
}

.help-content{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.help-section{
  padding:16px !important;
  scroll-margin-top:90px;
}
.help-section[hidden]{
  display:none !important;
}
.help-section-heading{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:11px;
  align-items:start;
  margin-bottom:13px;
}
.help-section-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--brand-soft);
  color:var(--color-primario);
}
.help-section-icon.warning{
  background:color-mix(in srgb,var(--semantic-warning,#f59e0b) 10%,var(--surface-card));
  color:var(--semantic-warning,#f59e0b);
}
.help-section-heading h2{
  margin:.15rem 0 0;
  color:var(--text-main);
  font-size:.94rem;
}
.help-section-heading p{
  margin:.25rem 0 0;
  color:var(--text-muted);
  font-size:.67rem;
  line-height:1.45;
}

.help-role-grid,
.help-topic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.help-topic-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.help-topic-card{
  min-width:0;
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.help-topic-wide{
  margin-top:9px;
}
.help-topic-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:7px;
  color:var(--color-primario);
}
.help-topic-title h3{
  margin:0;
  color:var(--text-main);
  font-size:.74rem;
}
.help-topic-card p,
.help-copy-stack p{
  margin:0;
  color:var(--text-muted);
  font-size:.66rem;
  line-height:1.55;
}
.help-copy-stack{
  display:grid;
  gap:8px;
}
.help-topic-card strong{
  color:var(--text-main);
  font-weight:700;
}

.help-code-reference{
  margin-top:10px;
  padding:11px 12px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  background:var(--surface-card);
}
.help-code-reference > strong{
  display:block;
  margin-bottom:8px;
  color:var(--text-main);
  font-size:.68rem;
}
.help-code-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.help-code-grid span{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:var(--surface-subtle);
  color:var(--text-muted);
  font-size:.61rem;
}
.help-code-grid b{
  color:var(--text-main);
}

.help-status-table-wrap{
  overflow:auto;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
}
.help-status-table{
  min-width:620px;
}
.help-status-table td:first-child{
  width:230px;
}
.help-status-table td{
  vertical-align:middle;
}
.help-no-results{
  padding:18px 0;
}
.help-no-results .empty-state-modern{
  min-height:230px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
}

/* Dark Mode */
html[data-theme="dark"] :is(
  .help-intro-card,
  .help-section,
  .help-code-reference,
  .help-no-results .empty-state-modern
){
  background:var(--surface-card) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] :is(
  .help-search,
  .help-topic-card,
  .help-code-grid span
){
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .help-topic-nav a{
  background:var(--surface-elevated) !important;
  border-color:var(--line-soft) !important;
}

/* Responsive */
@media(max-width:900px){
  .help-intro-copy{
    grid-template-columns:1fr;
    align-items:start;
  }
  .help-topic-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .help-intro-card,
  .help-section{
    padding:13px !important;
  }
  .help-topic-nav{
    margin-inline:-2px;
  }
  .help-role-grid,
  .help-topic-grid{
    grid-template-columns:1fr;
  }
  .help-section-heading{
    grid-template-columns:38px minmax(0,1fr);
    gap:9px;
  }
  .help-section-icon{
    width:38px;
    height:38px;
    border-radius:var(--radius-md);
  }
  .help-search{
    grid-template-columns:22px minmax(0,1fr) 32px;
  }
}


/* =========================================================
   v2.5.56 · Fase 6.4 — Search & Activity Center final audit
   ========================================================= */
.activity-center{
  width:min(390px,calc(100vw - 28px));
  max-height:min(620px,calc(100dvh - 96px));
  overflow:hidden;
}
.activity-center .notificaciones-header{
  position:sticky;
  top:0;
  z-index:2;
  min-height:62px;
  padding:11px 12px !important;
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--glass-bg-strong) 88%,var(--surface-overlay));
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}
.activity-center .notificaciones-header strong{
  color:var(--text-main);
  font-size:.76rem;
}
.activity-center .notificaciones-header small{
  display:block;
  margin-top:2px;
  color:var(--text-muted);
  font-size:.6rem;
}
.activity-total{
  min-width:48px;
  min-height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 7px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);
  background:var(--surface-elevated);
  color:var(--text-muted);
  font-size:.58rem;
  font-weight:700;
}
.activity-group{
  padding:7px 8px 2px;
}
.activity-group + .activity-group{
  margin-top:2px;
  border-top:1px solid var(--line-soft);
}
.activity-group-heading{
  min-height:32px;
  padding:3px 4px;
}
.activity-group-label{
  color:var(--text-subtle);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.activity-group-heading > span{
  min-width:24px;
  min-height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-pill);
  font-size:.56rem;
}
.activity-center .notificacion-item{
  appearance:none;
  width:100%;
  min-height:62px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 20px;
  align-items:center;
  gap:9px;
  margin-bottom:3px;
  padding:8px;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.activity-center .notificacion-item:hover,
.activity-center .notificacion-item:focus-visible{
  border-color:var(--line-soft);
  background:var(--surface-elevated);
}
.activity-group-attention .notificacion-item{
  background:color-mix(in srgb,var(--semantic-warning,#f59e0b) 3%,transparent);
}
.activity-center .notificacion-icono{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
}
.activity-center .notificacion-copy{
  min-width:0;
}
.activity-center .notificacion-copy strong{
  display:block;
  overflow:hidden;
  color:var(--text-main);
  font-size:.67rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.activity-center .notificacion-copy small{
  display:-webkit-box;
  overflow:hidden;
  margin-top:2px;
  color:var(--text-muted);
  font-size:.59rem;
  line-height:1.4;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.activity-center .notificacion-action-icon{
  display:grid;
  place-items:center;
  color:var(--text-subtle);
  transition:transform var(--motion-micro,160ms) var(--motion-ease-standard,ease);
}
.activity-center .notificacion-item:hover .notificacion-action-icon,
.activity-center .notificacion-item:focus-visible .notificacion-action-icon{
  transform:translateX(2px);
}
.activity-center-footer{
  position:sticky;
  bottom:0;
  z-index:2;
  border-top:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--glass-bg-strong) 90%,var(--surface-overlay));
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}
.activity-center-footer a{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:var(--color-primario);
  font-size:.62rem;
  font-weight:700;
}

/* Command Center */
.command-center-dialog{
  width:min(620px,calc(100vw - 32px));
  overflow:hidden;
}
.command-center-topline{
  min-height:64px;
  padding:11px 12px 8px !important;
}
.command-center-topline h2{
  margin:.12rem 0 0;
  color:var(--text-main);
  font-size:.86rem;
}
.command-center-close{
  width:40px !important;
  height:40px !important;
}
.command-search-wrap{
  min-height:48px;
  margin:0 12px 0;
  border-radius:13px;
}
.command-search-wrap input{
  min-height:46px !important;
}
.command-search-meta{
  min-height:31px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:5px 14px 7px;
  color:var(--text-subtle);
  font-size:.57rem;
}
.command-search-meta [data-command-status]{
  flex:0 0 auto;
  color:var(--text-muted);
  font-weight:700;
}
.command-results{
  max-height:min(430px,calc(100dvh - 230px));
  overflow:auto;
  padding:5px 8px 8px;
  overscroll-behavior:contain;
}
.command-result{
  min-height:58px;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:9px;
  margin-bottom:3px;
  padding:7px 8px;
  border:1px solid transparent;
  border-radius:var(--radius-md);
}
.command-result:hover,
.command-result.is-active,
.command-result:focus-visible{
  border-color:var(--line-soft);
  background:var(--surface-elevated);
}
.command-result-icon{
  width:36px;
  height:36px;
  border-radius:10px;
}
.command-result-copy strong{
  font-size:.68rem;
}
.command-result-copy small{
  margin-top:2px;
  font-size:.59rem;
}
.command-result-kind{
  min-width:58px;
  min-height:23px;
  font-size:.55rem;
}
.command-empty{
  min-height:180px;
}
.command-footer{
  position:sticky;
  bottom:0;
  z-index:2;
  min-height:42px;
  background:color-mix(in srgb,var(--glass-bg-strong) 90%,var(--surface-overlay));
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
}

/* Overlay-only glass remains intentional. */
html[data-theme="dark"] :is(
  .activity-center .notificaciones-header,
  .activity-center-footer,
  .command-footer
){
  background:color-mix(in srgb,var(--glass-bg-strong) 90%,var(--surface-overlay)) !important;
  border-color:var(--glass-border) !important;
}

@media(max-width:760px){
  .activity-center{
    max-height:calc(100dvh - var(--mobile-topbar-h,64px) - var(--mobile-bottom-nav-h,72px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 22px) !important;
  }
  .activity-center .notificaciones-header{
    min-height:58px;
  }
  .activity-center .notificacion-item{
    min-height:58px;
  }

  .command-center-dialog{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
  }
  .command-search-meta{
    min-height:28px;
    padding-inline:12px;
  }
  .command-search-meta > span:first-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .command-results{
    max-height:calc(100dvh - 215px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
@media(max-width:420px){
  .command-search-meta > span:first-child{
    display:none;
  }
  .command-search-meta{
    justify-content:flex-end;
  }
}
@media(prefers-reduced-motion:reduce){
  .activity-center .notificacion-action-icon{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   v2.5.57 · Fase 6.5 — Shell & Navigation closure
   ========================================================= */
.sidebar-mobile-close{
  display:none;
  margin-left:auto;
}
.sidebar-logout-form{
  margin-top:8px;
}
.sidebar-logout-button{
  width:100%;
  min-height:42px;
  border:0 !important;
  background:transparent !important;
  cursor:pointer;
  text-align:left;
}

/* Desktop shell rhythm */
.app-header{
  min-height:72px;
  padding-inline:18px;
  border-bottom:1px solid var(--line-soft);
}
.app-header .cabecera-acciones{
  gap:6px;
}
.app-header .btn-icono-cabecera{
  flex:0 0 44px;
}
.sidebar{
  border-right:1px solid var(--line-soft);
}
.sidebar nav{
  scrollbar-gutter:stable;
}
.sidebar .nav-group{
  margin-bottom:5px;
}
.sidebar .nav-group-label{
  padding:8px 12px 4px;
  color:var(--text-subtle);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.sidebar .nav-link{
  min-height:40px;
  margin:1px 6px;
  padding:8px 10px;
  border-radius:10px;
}
.sidebar .nav-link.active{
  background:var(--brand-soft);
  color:var(--color-primario);
}
.sidebar-footer{
  border-top:1px solid var(--line-soft);
}
.sidebar-footer .user-chip{
  min-height:48px;
}
.sidebar-logout-button:hover,
.sidebar-logout-button:focus-visible{
  background:var(--surface-subtle) !important;
}

/* Bottom navigation is a stable app chrome surface. */
.bottom-nav-movil{
}
.bottom-nav-movil > :is(a,button){
}
.bottom-nav-movil > a span,
.bottom-nav-movil > button > span:last-child{
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bottom-nav-movil > a.active{
  color:var(--color-primario);
}
.bottom-nav-create{
  width:56px !important;
  height:56px !important;
  min-height:56px !important;
  flex:0 0 56px !important;
}
.bottom-nav-create-icon{
  width:56px !important;
  height:56px !important;
}

/* Quick Actions remains an overlay and may use glass. */
.global-create-panel{
  max-height:min(72dvh,620px);
  overflow:auto;
  overscroll-behavior:contain;
}
.global-create-header{
  position:sticky;
  top:0;
  z-index:2;
  background:color-mix(in srgb,var(--glass-bg-strong) 91%,var(--surface-overlay));
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
}
.global-create-grid > :is(a,button){
  min-height:64px;
  border-radius:var(--radius-md);
}
.global-create-grid > :is(a,button):focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--focus-ring);
}

/* All shell icon controls share the same interaction geometry. */
:is(
  .app-header,
  .topbar-movil,
  .global-create-header
) .btn-icono-cabecera{
  border-radius:var(--radius-md);
}
:is(
  .app-header,
  .topbar-movil,
  .global-create-header
) .btn-icono-cabecera:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--focus-ring);
}

/* Dark shell consumes canonical tokens; no independent dark palette. */
html[data-theme="dark"] :is(.app-header,.sidebar,.sidebar-footer){
  border-color:var(--line-soft) !important;
}
html[data-theme="dark"] .sidebar-logout-button:hover,
html[data-theme="dark"] .sidebar-logout-button:focus-visible{
  background:var(--surface-subtle) !important;
}
html[data-theme="dark"] .global-create-header{
  background:color-mix(in srgb,var(--glass-bg-strong) 91%,var(--surface-overlay)) !important;
  border-color:var(--glass-border) !important;
}

@media(max-width:900px){
  .sidebar-mobile-close{
    display:grid;
  }
}
@media(max-width:760px){
  .app-header{
    display:none;
  }
  .topbar-movil{
    min-height:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }
  .topbar-movil-logo,
  .topbar-movil .btn-icono-cabecera,
  .topbar-movil .btn-menu-movil{
    flex:0 0 42px;
    width:42px;
    height:42px;
  }
  .bottom-nav-movil{
  }
  .global-create-panel{
    max-height:calc(100dvh - var(--mobile-topbar-h,64px) - env(safe-area-inset-top) - 16px);
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }
}
@media(max-width:390px){
  .bottom-nav-movil > a span,
  .bottom-nav-movil > button > span:last-child{
    font-size:.52rem;
  }
}
@media(prefers-reduced-motion:reduce){
  .global-create-grid > :is(a,button),
  .sidebar .nav-link,
  .bottom-nav-movil > :is(a,button){
    transition:none !important;
  }
}

/* =========================================================
   v2.5.60 · RC2 Visual Validation Hotfix
   Surface integrity · mobile scroll ownership · bottom sheet
   gestures · modal safe areas · dropzone invitation motion ·
   analytics presence · supervision geometry.
   ========================================================= */

/* Scroll ownership: data surfaces may pan horizontally, but never freeze page Y. */
.tabla-wrap,
.data-table-scroll,
.table-scroll,
.supervision-table-wrap{
  overflow-x:auto !important;
  overflow-y:visible !important;
  overscroll-behavior-x:contain !important;
  overscroll-behavior-y:auto !important;
  touch-action:pan-x pan-y !important;
  scrollbar-gutter:auto;
}
.supervision-table thead th{
  top:0 !important;
}

/* Dropzones: one global invitation language, calm/Apple-like and token driven. */
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone){
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--surface-subtle) !important;
  border-color:var(--border-default,var(--line-soft)) !important;
}
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone)::before,
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone)::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:var(--radius-pill);
}
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone)::before{
  width:58%;
  aspect-ratio:1;
  left:21%;
  top:48%;
  background:radial-gradient(circle,color-mix(in srgb,var(--color-primario) 14%,transparent) 0%,color-mix(in srgb,var(--color-primario) 5%,transparent) 42%,transparent 72%);
  filter:blur(18px);
  opacity:.72;
  transform:translateY(-50%) scale(.86);
  animation:rh-dropzone-breathe 4.8s cubic-bezier(.4,0,.2,1) infinite;
}
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone)::after{
  width:36%;
  height:180%;
  top:-40%;
  left:-46%;
  background:linear-gradient(100deg,transparent 10%,color-mix(in srgb,var(--color-primario) 10%,white) 48%,transparent 86%);
  filter:blur(8px);
  opacity:.42;
  transform:rotate(10deg);
  animation:rh-dropzone-sheen 6.4s ease-in-out infinite;
}
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone):hover,
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone).arrastrando,
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone).is-dragging{
  border-color:color-mix(in srgb,var(--color-primario) 56%,var(--border-default)) !important;
  background:color-mix(in srgb,var(--color-primario) 5%,var(--surface-subtle)) !important;
}
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone).arrastrando::before,
:is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone).is-dragging::before{
  opacity:1;
  transform:translateY(-50%) scale(1.08);
}
@keyframes rh-dropzone-breathe{
  0%,100%{transform:translateY(-50%) scale(.84);opacity:.48}
  50%{transform:translateY(-50%) scale(1.03);opacity:.82}
}
@keyframes rh-dropzone-sheen{
  0%,14%{left:-46%;opacity:0}
  38%{opacity:.38}
  58%{left:112%;opacity:.18}
  59%,100%{left:112%;opacity:0}
}
html[data-theme="dark"] :is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone){
  background:var(--surface-subtle) !important;
  color:var(--text-main) !important;
  border-color:var(--border-default) !important;
}
html[data-theme="dark"] :is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone) :is(strong,small){
  color:inherit;
}
html[data-theme="dark"] :is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone) small{
  color:var(--text-muted) !important;
}

/* White Label file inputs keep native semantics but use DS geometry. */
[data-brand-studio] input[type="file"]{
  width:100%;
  min-height:44px;
  padding:5px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-md,12px);
  background:var(--surface-card);
  color:var(--text-muted);
}
[data-brand-studio] input[type="file"]::file-selector-button{
  min-height:34px;
  margin-right:9px;
  padding:0 12px;
  border:0;
  border-radius:9px;
  background:var(--surface-subtle);
  color:var(--text-main);
  font:inherit;
  font-weight:500;
  cursor:pointer;
}

/* Surface integrity + mobile sheet geometry. */
.global-create-panel{
  overflow:hidden !important;
}
.global-create-header{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-color:transparent !important;
}
@media(max-width:860px){
  :root{
    --mobile-chrome-inset:18px;
    --mobile-bottom-nav-h:78px;
  }
  .bottom-nav-movil{
    border:1px solid var(--glass-border) !important;
    background:var(--glass-bg-strong) !important;
    box-shadow:0 16px 42px rgba(15,23,42,.14) !important;
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    backdrop-filter:blur(24px) saturate(150%);
  }
  .bottom-nav-movil > :is(a,button){
    justify-content:center !important;
    transform:translateY(2px);
  }
  .bottom-nav-movil .bottom-nav-create{
    transform:none !important;
    align-self:center;
  }
  .global-create-sheet{
    position:fixed !important;
    inset:0 !important;
    min-height:100dvh;
    z-index:2600;
    overflow:hidden;
  }
  .global-create-backdrop{
    position:absolute !important;
    inset:0 !important;
    min-height:100dvh;
    background:rgba(15,23,42,.20) !important;
    opacity:calc(1 - var(--sheet-drag-progress,0)) !important;
  }
  .global-create-panel{
    left:var(--mobile-chrome-inset) !important;
    right:var(--mobile-chrome-inset) !important;
    width:auto !important;
    top:auto !important;
    bottom:calc(100px + env(safe-area-inset-bottom)) !important;
    max-height:calc(100dvh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding:8px 10px 12px !important;
    border-radius:28px !important;
    background:var(--glass-bg-strong) !important;
    border:1px solid var(--glass-border) !important;
    box-shadow:0 24px 70px rgba(15,23,42,.22) !important;
    -webkit-backdrop-filter:blur(28px) saturate(155%) !important;
    backdrop-filter:blur(28px) saturate(155%) !important;
    overflow:auto !important;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
  }
  .global-create-panel::-webkit-scrollbar{display:none}
  .global-create-panel.is-dragging{
    transform:translate3d(0,var(--sheet-drag-y,0px),0) scale(1) !important;
    transition:none !important;
  }
  .global-create-handle{
    display:block !important;
    width:42px;
    height:20px;
    min-height:20px;
    margin:0 auto 2px;
    padding:0;
    border:0;
    background:transparent;
    position:relative;
    touch-action:none;
    cursor:grab;
  }
  .global-create-handle::before{
    content:"";
    position:absolute;
    left:4px;
    right:4px;
    top:7px;
    height:4px;
    border-radius:var(--radius-pill);
    background:color-mix(in srgb,var(--text-muted) 36%,transparent);
  }
  .global-create-handle:active{cursor:grabbing}
  .global-create-header{
    position:relative !important;
    top:auto !important;
    padding:2px 4px 9px !important;
  }
  .global-create-grid{
    padding:0 !important;
  }
  .global-create-grid > :is(a,button){
    background:color-mix(in srgb,var(--surface-card) 78%,transparent) !important;
    border-color:var(--glass-border) !important;
  }

  /* Mobile drawer: account/logout remains permanently reachable. */
  .sidebar{
    height:100dvh !important;
    max-height:100dvh !important;
    display:flex !important;
    flex-direction:column;
    overflow:hidden !important;
    padding-bottom:0 !important;
  }
  .sidebar > nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overscroll-behavior-y:contain;
  }
  .sidebar-footer{
    position:relative;
    z-index:3;
    flex:0 0 auto;
    padding-bottom:max(12px,env(safe-area-inset-bottom)) !important;
    background:var(--surface-card);
    box-shadow:0 -12px 28px color-mix(in srgb,var(--surface-app) 9%,transparent);
  }
  .sidebar-logout-form,
  .sidebar-logout-button{
    width:100%;
  }

  /* Generic mobile modals stay above the floating app chrome. */
  .app-modal,
  .modal-overlay{
    padding:
      max(10px,env(safe-area-inset-top))
      10px
      calc(104px + env(safe-area-inset-bottom)) !important;
    align-items:flex-end !important;
    overflow:hidden !important;
  }
  .app-modal > .app-modal-dialog,
  .modal-overlay > :is(.modal-card,.movement-dialog){
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    border-radius:24px !important;
    overflow:auto !important;
    overscroll-behavior-y:contain;
    scrollbar-gutter:auto;
  }

  /* Scroll ownership for rich interactive canvases. */
  .org-chart-viewport{
    height:var(--org-mobile-content-h,360px) !important;
    min-height:300px !important;
    max-height:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-x pan-y !important;
  }
  .org-chart-canvas{
    padding:24px 14px 18px !important;
  }
  .analytics-chart-scroll,
  .supervision-chart-scroll{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-x pan-y !important;
  }
}

/* Analytics: stronger hierarchy and more presentation-ready visual language. */
.analytics-section-card{
  border-color:color-mix(in srgb,var(--border-default) 78%,transparent) !important;
  box-shadow:0 18px 48px rgba(15,23,42,.055);
}
.analytics-chart-panel{
  position:relative;
  min-height:300px;
  padding:18px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 4%,color-mix(in srgb,var(--color-primario) 8%,transparent),transparent 34%),
    var(--surface-card) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text-main) 4%,transparent),0 12px 32px rgba(15,23,42,.055);
}
.analytics-chart-panel::after{
  content:"";
  position:absolute;
  inset:auto -14% -56% 40%;
  height:70%;
  pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--color-primario) 9%,transparent),transparent 68%);
  filter:blur(20px);
}
.analytics-chart-heading{
  position:relative;
  z-index:2;
  margin-bottom:18px;
}
.analytics-chart-heading h3{
  font-size:.95rem;
  letter-spacing:-.015em;
}
.analytics-chart-heading span{
  padding:5px 8px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--surface-elevated) 72%,transparent);
}
.analytics-chart-scroll{
  position:relative;
  z-index:1;
  min-height:205px;
  padding:8px 4px 2px;
}
.analytics-bar-chart{
  min-height:190px;
  filter:drop-shadow(0 10px 18px rgba(15,23,42,.06));
}
.analytics-bar-chart rect{
  transition:opacity var(--motion-micro,160ms) ease,filter var(--motion-micro,160ms) ease;
}
.analytics-bar-chart g:hover rect{
  filter:brightness(1.04) saturate(1.08);
}
.analytics-donut-panel{
  min-height:300px;
}
.analytics-donut-chart{
  width:178px;
  height:178px;
  filter:drop-shadow(0 12px 24px rgba(15,23,42,.08));
}
.analytics-donut-chart circle:not(.analytics-donut-track){
  transition:opacity var(--motion-micro,160ms) ease,stroke-width var(--motion-micro,160ms) ease;
}
.analytics-donut-chart circle:not(.analytics-donut-track):hover{
  stroke-width:26px;
}
html[data-theme="dark"] .analytics-chart-panel{
  background:
    radial-gradient(circle at 12% 4%,color-mix(in srgb,var(--color-primario) 11%,transparent),transparent 34%),
    var(--surface-elevated) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 16px 40px rgba(0,0,0,.18);
}
@media(max-width:760px){
  .analytics-chart-panel{
    min-height:272px;
    padding:14px !important;
  }
  .analytics-chart-scroll{min-height:188px}
  .analytics-donut-panel{min-height:0}
}

/* Reduced motion keeps every final state and gesture usable. */
@media(prefers-reduced-motion:reduce){
  :is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone)::before,
  :is(.dropzone-carga,.dropzone-carga-premium,.release-dropzone,.document-dropzone-modern,.expense-dropzone)::after{
    animation:none !important;
  }
  .analytics-bar-chart rect,
  .analytics-donut-chart circle{
    transition:none !important;
  }
}


/* =========================================================
   v2.5.61 · RC3 — Premium Login + Calm Onboarding
   ========================================================= */
.auth-body-premium{
  min-height:100dvh;
  background:var(--surface-app);
  overflow-x:hidden;
}
.auth-shell-premium{
  min-height:100dvh;
}
.auth-brand-panel-premium{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--color-primario) 90%,#0b1020) 0%,
      color-mix(in srgb,var(--color-primario) 62%,#111827) 48%,
      color-mix(in srgb,var(--color-secundario) 82%,#050914) 100%) !important;
}
.auth-brand-panel-premium::after{
  background:
    linear-gradient(180deg,transparent 0%,rgba(3,7,18,.06) 55%,rgba(3,7,18,.24) 100%) !important;
  opacity:1 !important;
}
.auth-ambient{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.auth-ambient::before{
  content:"";
  position:absolute;
  inset:-18%;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.58),transparent 78%);
  transform:perspective(900px) rotateX(64deg) translateY(-8%);
  transform-origin:50% 0;
  opacity:.42;
}
.auth-ambient-orb{
  position:absolute;
  display:block;
  border-radius:var(--radius-pill);
  filter:blur(16px);
  will-change:transform;
}
.auth-ambient-orb-a{
  width:min(42vw,620px); aspect-ratio:1; left:-10%; top:-14%;
  background:radial-gradient(circle at 42% 42%,rgba(255,255,255,.30),rgba(255,255,255,.08) 34%,transparent 70%);
  animation:auth-orbit-a 14s ease-in-out infinite alternate;
}
.auth-ambient-orb-b{
  width:min(34vw,500px); aspect-ratio:1; right:-9%; top:30%;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--color-acento) 24%,white),rgba(255,255,255,.06) 34%,transparent 72%);
  opacity:.66;
  animation:auth-orbit-b 18s ease-in-out infinite alternate;
}
.auth-ambient-orb-c{
  width:min(30vw,430px); aspect-ratio:1; left:30%; bottom:-24%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%);
  opacity:.48;
  animation:auth-orbit-c 16s ease-in-out infinite alternate;
}
.auth-ambient-line{
  position:absolute;
  display:block;
  width:46%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transform-origin:center;
  opacity:.45;
}
.auth-ambient-line-a{left:10%;top:24%;transform:rotate(-18deg);animation:auth-line 10s ease-in-out infinite alternate}
.auth-ambient-line-b{right:2%;bottom:27%;transform:rotate(16deg);animation:auth-line 13s ease-in-out 1.4s infinite alternate}
.auth-brand-content,.auth-brand-footer{position:relative;z-index:2}
.auth-brand-copy .auth-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.84);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.auth-brand-copy h1{
  max-width:620px;
  font-size:clamp(2.8rem,5.4vw,5.7rem) !important;
  line-height:.94 !important;
  letter-spacing:-.065em !important;
  text-wrap:balance;
}
.auth-brand-copy h1 span{
  display:block;
  color:rgba(255,255,255,.70);
}
.auth-brand-copy p{
  max-width:600px !important;
  margin-top:1.35rem !important;
  color:rgba(255,255,255,.72) !important;
  font-size:clamp(.95rem,1.2vw,1.12rem) !important;
  line-height:1.65 !important;
  text-wrap:pretty;
}
.auth-feature-list{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px !important;
  margin-top:clamp(2rem,5vh,3.5rem) !important;
}
.auth-feature{
  min-width:0;
  align-items:flex-start !important;
  gap:9px !important;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.auth-feature svg{flex:0 0 auto;margin-top:1px;color:#fff !important}
.auth-feature span{font-size:.72rem;line-height:1.4;color:rgba(255,255,255,.82)}
.auth-brand-footer{color:rgba(255,255,255,.55) !important;letter-spacing:.02em}
.auth-access-panel{
  background:
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--color-primario) 5%,transparent),transparent 28%),
    var(--surface-app) !important;
}
.auth-card-premium{
  width:min(440px,100%) !important;
  border:1px solid var(--border-default,var(--line-soft)) !important;
  border-radius:24px !important;
  background:var(--surface-card) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.10) !important;
}
.auth-access-heading h2{font-size:1.55rem !important;letter-spacing:-.025em}
.auth-access-heading p{font-size:.78rem !important;line-height:1.55}
.auth-submit{position:relative;overflow:hidden}
.auth-submit::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.18) 48%,transparent 74%);
  transform:translateX(-130%);
  transition:transform .62s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.auth-submit:hover::after{transform:translateX(130%)}
@keyframes auth-orbit-a{to{transform:translate3d(9%,7%,0) scale(1.08)}}
@keyframes auth-orbit-b{to{transform:translate3d(-12%,-8%,0) scale(.94)}}
@keyframes auth-orbit-c{to{transform:translate3d(8%,-9%,0) scale(1.06)}}
@keyframes auth-line{to{opacity:.16;transform:translate3d(7%,12px,0) rotate(-11deg)}}

/* Onboarding: compact, voluntary by section, animated only as feedback. */
.onboarding-card{
  width:min(480px,calc(100vw - 32px)) !important;
  padding:18px !important;
}
.onboarding-visual{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin:14px 0 4px;
  border-radius:14px;
  background:var(--brand-soft);
  color:var(--color-primario);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primario) 12%,transparent);
}
.onboarding-visual.is-pulsing{animation:onboarding-visual-pulse .42s cubic-bezier(.2,.8,.2,1)}
.onboarding-shell.has-target .onboarding-spotlight{
  animation:onboarding-target-breathe 2.2s ease-in-out infinite;
}
.onboarding-skip{
  min-height:34px;
  padding:6px 10px;
  border-radius:9px;
  color:var(--text-muted) !important;
  font-weight:500;
}
.onboarding-skip:hover{background:var(--surface-subtle);color:var(--text-main) !important}
.onboarding-shell:not(.is-general-tour) .onboarding-skip{display:none}
@keyframes onboarding-visual-pulse{
  0%{transform:scale(.92);opacity:.55}
  70%{transform:scale(1.04);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes onboarding-target-breathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}
html[data-theme="dark"] .auth-access-panel{
  background:
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--color-primario) 8%,transparent),transparent 30%),
    var(--surface-app) !important;
}
html[data-theme="dark"] .auth-card-premium{box-shadow:0 32px 86px rgba(0,0,0,.24) !important}

@media(max-width:1024px){
  .auth-brand-copy h1{font-size:clamp(2.35rem,6vw,4rem) !important}
  .auth-feature-list{grid-template-columns:1fr !important}
  .auth-feature{padding:10px 12px}
}
@media(max-width:760px){
  .auth-shell-premium{display:block !important;min-height:100dvh}
  .auth-brand-panel-premium{
    min-height:250px !important;
    padding:28px 22px 34px !important;
  }
  .auth-brand-logo{margin-bottom:26px !important}
  .auth-brand-copy h1{font-size:2.45rem !important;line-height:.98 !important}
  .auth-brand-copy p{margin-top:12px !important;font-size:.84rem !important;line-height:1.55 !important}
  .auth-feature-list{display:none !important}
  .auth-access-panel{
    min-height:auto !important;
    margin-top:-18px;
    padding:20px 16px max(24px,env(safe-area-inset-bottom)) !important;
    border-radius:24px 24px 0 0;
    position:relative;
    z-index:3;
  }
  .auth-theme-toggle{top:14px;right:14px}
  .auth-card-premium{border-radius:var(--radius-xl) !important;box-shadow:none !important}
}
@media(max-width:420px){
  .auth-brand-panel-premium{min-height:225px !important;padding:22px 18px 30px !important}
  .auth-brand-logo{margin-bottom:20px !important}
  .auth-brand-copy .auth-eyebrow{font-size:.62rem;padding:6px 8px}
  .auth-brand-copy h1{font-size:2.08rem !important}
  .auth-brand-copy p{font-size:.78rem !important}
  .auth-access-panel{padding-inline:12px !important}
  .auth-card-premium{padding:20px !important}
  .onboarding-card{bottom:calc(88px + env(safe-area-inset-bottom));width:calc(100vw - 24px) !important;padding:16px !important}
  .onboarding-visual{width:38px;height:38px;border-radius:var(--radius-md)}
}
@media(prefers-reduced-motion:reduce){
  .auth-ambient-orb,.auth-ambient-line,.onboarding-visual.is-pulsing,.onboarding-shell.has-target .onboarding-spotlight{animation:none !important}
  .auth-submit::after{display:none}
}

/* =========================================================
   v2.5.62 · RC4 — Tablet Login + Mobile Drawer Reliability
   ========================================================= */

/* Tablet login is a first-class composition, not a squeezed desktop. */
@media (min-width: 761px) and (max-width: 1366px) {
  .auth-shell-premium{
    display:grid !important;
    grid-template-columns:minmax(360px,42%) minmax(0,58%) !important;
    min-height:100dvh;
  }
  .auth-brand-panel-premium{
    min-height:100dvh !important;
    padding:clamp(28px,4vw,52px) !important;
  }
  .auth-brand-logo{
    margin-bottom:clamp(42px,8vh,88px) !important;
  }
  .auth-brand-copy h1{
    max-width:520px;
    font-size:clamp(3rem,5.8vw,5.2rem) !important;
    line-height:.94 !important;
  }
  .auth-brand-copy p{
    max-width:500px !important;
    font-size:clamp(.92rem,1.35vw,1.06rem) !important;
  }
  .auth-feature-list{
    grid-template-columns:1fr !important;
    max-width:440px;
    margin-top:clamp(24px,4vh,44px) !important;
  }
  .auth-feature{
    min-height:48px;
    padding:10px 12px !important;
  }
  .auth-access-panel{
    min-width:0;
    padding:clamp(34px,5vw,72px) clamp(28px,5vw,72px) !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .auth-card-premium{
    width:min(100%,480px) !important;
    max-width:480px !important;
    padding:clamp(26px,3.2vw,38px) !important;
    border-radius:26px !important;
  }
  .auth-access-heading{
    margin-bottom:1.6rem !important;
  }
  .auth-access-heading h2{
    font-size:clamp(1.7rem,2.6vw,2.15rem) !important;
  }
  .auth-access-heading p{
    font-size:.88rem !important;
  }
  .auth-form-modern .form-grupo{
    margin-bottom:1.15rem;
  }
  .auth-input-wrap input,
  .auth-submit{
    min-height:50px;
  }

  /* Make the White Label ambience clearly perceptible on tablet. */
  .auth-ambient-orb{filter:blur(12px);}
  .auth-ambient-orb-a{
    width:min(70vw,720px);
    left:-26%;
    top:-10%;
    opacity:.92;
  }
  .auth-ambient-orb-b{
    width:min(58vw,620px);
    right:-30%;
    top:32%;
    opacity:.78;
  }
  .auth-ambient-orb-c{
    width:min(52vw,560px);
    left:18%;
    bottom:-25%;
    opacity:.62;
  }
  .auth-ambient-line{opacity:.58;}
}

/* Portrait tablets receive a compact brand hero plus a generous access surface. */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  .auth-shell-premium{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(300px,38dvh) minmax(0,1fr) !important;
  }
  .auth-brand-panel-premium{
    min-height:0 !important;
    padding:28px 40px 34px !important;
  }
  .auth-brand-logo{
    margin-bottom:24px !important;
  }
  .auth-brand-copy h1{
    max-width:720px;
    font-size:clamp(2.8rem,7vw,4.4rem) !important;
  }
  .auth-brand-copy p{max-width:680px !important;}
  .auth-feature-list,
  .auth-brand-footer{display:none !important;}
  .auth-access-panel{
    min-height:0 !important;
    padding:34px 40px max(40px,env(safe-area-inset-bottom)) !important;
    align-items:flex-start !important;
  }
  .auth-card-premium{
    width:min(100%,560px) !important;
    max-width:560px !important;
  }
}

/* Mobile navigation: the drawer owns one bounded viewport and never hides its footer. */
@media (max-width: 900px) {
  .sidebar{
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  .sidebar > nav{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    touch-action:pan-y;
    padding-bottom:14px;
  }
  .sidebar-footer{
    position:sticky !important;
    bottom:0 !important;
    z-index:5 !important;
    flex:0 0 auto !important;
    margin-top:0 !important;
    padding:10px 6px max(12px,env(safe-area-inset-bottom)) !important;
    border-top:1px solid var(--line-soft) !important;
    background:var(--surface-card) !important;
    box-shadow:0 -14px 30px color-mix(in srgb,var(--surface-app) 12%,transparent) !important;
  }
  .sidebar-footer .user-chip{
    min-height:46px;
    margin-bottom:6px;
  }
  .sidebar-logout-form{margin-top:4px !important;}
  .sidebar-logout-button{
    display:flex !important;
    align-items:center !important;
    gap:.65rem !important;
    min-height:44px !important;
    margin:0 !important;
    padding:10px 12px !important;
    border-radius:var(--radius-md) !important;
    color:var(--text-main) !important;
  }
}

@media (max-width: 760px) {
  .sidebar{
    top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 8px) !important;
    bottom:calc(var(--mobile-bottom-nav-h,78px) + env(safe-area-inset-bottom) + 20px) !important;
    height:auto !important;
    max-height:none !important;
    left:max(12px,env(safe-area-inset-left)) !important;
    right:max(12px,env(safe-area-inset-right)) !important;
    border-radius:24px !important;
    contain:layout paint;
  }
  .sidebar > nav{
    padding-bottom:10px !important;
    scroll-padding-bottom:18px;
  }
  .overlay-sidebar{
    inset:0 !important;
    height:100dvh !important;
  }
  .overlay-sidebar.abierto{
    bottom:0 !important;
  }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 520px) {
  .sidebar{
    top:calc(env(safe-area-inset-top) + 8px) !important;
    bottom:calc(var(--mobile-bottom-nav-h,64px) + env(safe-area-inset-bottom) + 12px) !important;
  }
  .sidebar-footer .user-chip{display:none;}
}

@media (prefers-reduced-motion: reduce) {
  .auth-ambient-orb,
  .auth-ambient-line{animation:none !important;}
}

/* RC4 refinement: the mobile sheet uses the viewport gutters, not legacy drawer width. */
@media (max-width: 760px) {
  .sidebar{
    width:auto !important;
    max-width:none !important;
  }
  .sidebar-footer{
    background:color-mix(in srgb,var(--glass-bg-strong) 94%,var(--surface-overlay)) !important;
    -webkit-backdrop-filter:blur(20px) saturate(145%);
    backdrop-filter:blur(20px) saturate(145%);
  }
}

/* =========================================================
   v2.5.63 · RC5 — Authoritative Tablet Login Form-Factor Fix
   ========================================================= */
/*
 * Large Android/iPad-class tablets can expose desktop-sized CSS viewports.
 * data-auth-device is set from coarse/no-hover input + physical short side,
 * so the tablet composition remains authoritative even in "desktop site" mode.
 */
html[data-auth-device="tablet"] .auth-shell-premium{
  display:grid !important;
  min-height:100dvh !important;
  grid-template-columns:minmax(390px,40%) minmax(0,60%) !important;
}
html[data-auth-device="tablet"] .auth-brand-panel-premium{
  min-height:100dvh !important;
  padding:clamp(34px,4.2vw,64px) !important;
}
html[data-auth-device="tablet"] .auth-brand-content{
  max-width:560px !important;
}
html[data-auth-device="tablet"] .auth-brand-logo{
  margin-bottom:clamp(38px,7vh,72px) !important;
}
html[data-auth-device="tablet"] .auth-brand-logo img{
  max-width:min(220px,66%) !important;
  max-height:62px !important;
}
html[data-auth-device="tablet"] .auth-brand-copy h1{
  max-width:520px !important;
  font-size:clamp(3.15rem,5.1vw,5.35rem) !important;
  line-height:.93 !important;
  letter-spacing:-.062em !important;
}
html[data-auth-device="tablet"] .auth-brand-copy p{
  max-width:510px !important;
  margin-top:1.2rem !important;
  font-size:clamp(.98rem,1.25vw,1.12rem) !important;
  line-height:1.62 !important;
}
html[data-auth-device="tablet"] .auth-feature-list{
  grid-template-columns:1fr !important;
  max-width:450px !important;
  gap:9px !important;
  margin-top:clamp(26px,4.5vh,42px) !important;
}
html[data-auth-device="tablet"] .auth-feature{
  min-height:50px !important;
  padding:11px 13px !important;
}
html[data-auth-device="tablet"] .auth-feature span{
  font-size:.76rem !important;
}
html[data-auth-device="tablet"] .auth-access-panel{
  min-width:0 !important;
  min-height:100dvh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(38px,5vw,76px) !important;
}
html[data-auth-device="tablet"] .auth-card-premium{
  width:min(100%,520px) !important;
  max-width:520px !important;
  padding:clamp(32px,3.6vw,44px) !important;
  border:1px solid var(--border-default,var(--line-soft)) !important;
  border-radius:28px !important;
  background:var(--surface-card) !important;
  box-shadow:0 34px 90px rgba(15,23,42,.12) !important;
}
html[data-theme="dark"][data-auth-device="tablet"] .auth-card-premium{
  box-shadow:0 36px 96px rgba(0,0,0,.28) !important;
}
html[data-auth-device="tablet"] .auth-access-heading{
  margin-bottom:1.75rem !important;
}
html[data-auth-device="tablet"] .auth-access-heading h2{
  margin-top:.42rem !important;
  font-size:clamp(1.9rem,2.4vw,2.35rem) !important;
}
html[data-auth-device="tablet"] .auth-access-heading p{
  margin-top:.5rem !important;
  font-size:.9rem !important;
  line-height:1.55 !important;
}
html[data-auth-device="tablet"] .auth-access-form .form-grupo{
  margin-bottom:1.25rem !important;
}
html[data-auth-device="tablet"] .auth-form-modern .form-grupo label,
html[data-auth-device="tablet"] .auth-label-row a{
  font-size:.82rem !important;
}
html[data-auth-device="tablet"] .auth-input-wrap,
html[data-auth-device="tablet"] .auth-input-wrap input,
html[data-auth-device="tablet"] .auth-submit{
  min-height:54px !important;
}
html[data-auth-device="tablet"] .auth-input-wrap input{
  font-size:.92rem !important;
  padding-left:44px !important;
}
html[data-auth-device="tablet"] .auth-remember{
  min-height:76px !important;
  margin:4px 0 16px !important;
  padding:11px 12px !important;
}
html[data-auth-device="tablet"] .auth-remember-copy strong{
  font-size:.74rem !important;
}
html[data-auth-device="tablet"] .auth-remember-copy small{
  font-size:.66rem !important;
}
html[data-auth-device="tablet"] .auth-security-note{
  margin-top:1.15rem !important;
  font-size:.72rem !important;
}

/* Ambient depth stays visible even in a still frame; motion remains subtle. */
html[data-auth-device="tablet"] .auth-ambient::before{
  opacity:.58 !important;
  background-size:64px 64px !important;
}
html[data-auth-device="tablet"] .auth-ambient-orb{
  filter:blur(10px) !important;
  will-change:transform,opacity;
}
html[data-auth-device="tablet"] .auth-ambient-orb-a{
  width:min(78vw,780px) !important;
  left:-32% !important;
  top:-17% !important;
  opacity:1 !important;
  animation-duration:11s !important;
}
html[data-auth-device="tablet"] .auth-ambient-orb-b{
  width:min(68vw,680px) !important;
  right:-38% !important;
  top:26% !important;
  opacity:.9 !important;
  animation-duration:14s !important;
}
html[data-auth-device="tablet"] .auth-ambient-orb-c{
  width:min(60vw,610px) !important;
  left:14% !important;
  bottom:-31% !important;
  opacity:.74 !important;
  animation-duration:12s !important;
}
html[data-auth-device="tablet"] .auth-ambient-line{
  opacity:.72 !important;
}

/* Portrait tablet: brand becomes a deliberate hero, not a squeezed split view. */
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-shell-premium{
  grid-template-columns:1fr !important;
  grid-template-rows:minmax(290px,36dvh) minmax(0,1fr) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-brand-panel-premium{
  min-height:0 !important;
  padding:28px 42px 34px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-brand-logo{
  margin-bottom:20px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-brand-copy h1{
  max-width:760px !important;
  font-size:clamp(2.85rem,6.8vw,4.6rem) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-brand-copy p{
  max-width:720px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-feature-list,
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-brand-footer{
  display:none !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-access-panel{
  min-height:0 !important;
  align-items:flex-start !important;
  padding:38px 42px max(44px,env(safe-area-inset-bottom)) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="portrait"] .auth-card-premium{
  width:min(100%,590px) !important;
  max-width:590px !important;
}

/* Do not suppress accessibility choices: static ambience remains composed. */
@media (prefers-reduced-motion: reduce){
  html[data-auth-device="tablet"] .auth-ambient-orb,
  html[data-auth-device="tablet"] .auth-ambient-line{
    animation:none !important;
  }
}

/* =========================================================
   v2.5.64 · RC6 — Large Tablet Premium Login Pass 2
   Scope: large landscape tablets only. Mobile remains unchanged.
   ========================================================= */
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-shell-premium{
  grid-template-columns:minmax(430px,44%) minmax(0,56%) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-brand-panel-premium{
  padding:clamp(40px,4.2vw,68px) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-brand-content{
  max-width:620px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-brand-logo{
  margin-bottom:clamp(46px,7vh,78px) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-brand-copy h1{
  max-width:590px !important;
  font-size:clamp(3.4rem,5.35vw,5.7rem) !important;
  line-height:.92 !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-brand-copy p{
  max-width:560px !important;
  font-size:clamp(1rem,1.18vw,1.12rem) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-feature-list{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  max-width:610px !important;
  gap:10px !important;
  margin-top:clamp(28px,4.2vh,44px) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-feature{
  min-height:58px !important;
  padding:12px 13px !important;
  border-radius:var(--radius-lg) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-feature span{
  font-size:.74rem !important;
}

/* The access side gets a deliberate composition instead of a small card in a blank canvas. */
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-panel{
  position:relative !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(44px,5vw,84px) clamp(42px,5.5vw,92px) !important;
  background:
    radial-gradient(circle at 16% 24%,color-mix(in srgb,var(--color-primario) 7%,transparent),transparent 34%),
    radial-gradient(circle at 86% 84%,color-mix(in srgb,var(--color-primario) 4%,transparent),transparent 28%),
    var(--surface-app) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-card-premium{
  width:min(100%,600px) !important;
  max-width:600px !important;
  min-height:0 !important;
  padding:clamp(40px,3.7vw,52px) !important;
  border-radius:30px !important;
  border:1px solid color-mix(in srgb,var(--border-default) 82%,transparent) !important;
  box-shadow:
    0 36px 92px rgba(15,23,42,.12),
    0 2px 8px rgba(15,23,42,.035) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-heading{
  margin-bottom:2rem !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-heading .auth-eyebrow{
  font-size:.72rem !important;
  letter-spacing:.12em !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-heading h2{
  margin-top:.52rem !important;
  font-size:clamp(2.15rem,2.65vw,2.6rem) !important;
  line-height:1.04 !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-heading p{
  margin-top:.62rem !important;
  max-width:470px !important;
  font-size:.96rem !important;
  line-height:1.58 !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-form .form-grupo{
  margin-bottom:1.45rem !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-form-modern .form-grupo label,
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-label-row a{
  font-size:.86rem !important;
  line-height:1.3 !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-label-row{
  margin-bottom:.58rem !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-input-wrap,
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-input-wrap input,
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-submit{
  min-height:60px !important;
  border-radius:15px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-input-wrap input{
  padding-left:48px !important;
  padding-right:48px !important;
  font-size:1rem !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-input-icon{
  left:16px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-password-toggle{
  width:44px !important;
  min-width:44px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-remember{
  min-height:88px !important;
  margin:2px 0 20px !important;
  padding:14px 16px !important;
  border-radius:17px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-remember-copy strong{
  font-size:.8rem !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-remember-copy small{
  margin-top:4px !important;
  font-size:.7rem !important;
  line-height:1.4 !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-submit{
  margin-top:0 !important;
  font-size:.92rem !important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--color-primario) 22%,transparent) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-security-note{
  margin-top:1.35rem !important;
  font-size:.76rem !important;
}

/* White Label aurora: visibly alive after 2–3 seconds, still calm and enterprise. */
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient::before{
  opacity:.5 !important;
  animation:auth-tablet-grid-drift 16s ease-in-out infinite alternate;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient::after{
  content:"";
  position:absolute;
  width:92%;
  aspect-ratio:1.45;
  left:-26%;
  top:28%;
  border-radius:46% 54% 62% 38% / 48% 42% 58% 52%;
  background:
    radial-gradient(circle at 30% 34%,rgba(255,255,255,.28),transparent 34%),
    radial-gradient(circle at 67% 56%,color-mix(in srgb,var(--color-acento) 34%,white),transparent 42%),
    linear-gradient(125deg,color-mix(in srgb,var(--color-primario) 38%,transparent),transparent 72%);
  filter:blur(24px);
  opacity:.52;
  transform:rotate(-10deg) scale(.96);
  transform-origin:50% 50%;
  mix-blend-mode:screen;
  animation:auth-tablet-aurora 9s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  will-change:transform,opacity;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient-orb{
  filter:blur(18px) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient-orb-a{
  width:min(72vw,820px) !important;
  left:-34% !important;
  top:-20% !important;
  opacity:.96 !important;
  animation:auth-tablet-orb-a 9.5s ease-in-out infinite alternate !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient-orb-b{
  width:min(64vw,740px) !important;
  right:-36% !important;
  top:18% !important;
  opacity:.86 !important;
  animation:auth-tablet-orb-b 11.5s ease-in-out infinite alternate !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient-orb-c{
  width:min(58vw,650px) !important;
  left:18% !important;
  bottom:-28% !important;
  opacity:.76 !important;
  animation:auth-tablet-orb-c 10.5s ease-in-out infinite alternate !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient-line-a{
  animation:auth-tablet-line-a 8s ease-in-out infinite alternate !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient-line-b{
  animation:auth-tablet-line-b 10s ease-in-out 1.1s infinite alternate !important;
}

@keyframes auth-tablet-aurora{
  0%{transform:translate3d(-3%,-2%,0) rotate(-11deg) scale(.94);opacity:.42}
  55%{transform:translate3d(8%,-7%,0) rotate(-3deg) scale(1.05);opacity:.62}
  100%{transform:translate3d(14%,5%,0) rotate(7deg) scale(1.11);opacity:.5}
}
@keyframes auth-tablet-grid-drift{
  to{transform:perspective(900px) rotateX(64deg) translate3d(3%,-13%,0)}
}
@keyframes auth-tablet-orb-a{
  to{transform:translate3d(18%,12%,0) scale(1.12)}
}
@keyframes auth-tablet-orb-b{
  to{transform:translate3d(-20%,-10%,0) scale(.88)}
}
@keyframes auth-tablet-orb-c{
  to{transform:translate3d(11%,-18%,0) scale(1.13)}
}
@keyframes auth-tablet-line-a{
  to{opacity:.18;transform:translate3d(14%,20px,0) rotate(-7deg)}
}
@keyframes auth-tablet-line-b{
  to{opacity:.22;transform:translate3d(-12%,-18px,0) rotate(7deg)}
}

html[data-theme="dark"][data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-card-premium{
  box-shadow:0 38px 100px rgba(0,0,0,.32),0 2px 10px rgba(0,0,0,.16) !important;
}

@media (prefers-reduced-motion: reduce){
  html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient::before,
  html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient::after,
  html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient-orb,
  html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-ambient-line{
    animation:none !important;
  }
}


/* =========================================================
   v2.5.65 · RC7 — Mobile Login Motion + Display Typography
   ========================================================= */
:root{
  --font-display:var(--font-brand,var(--font-ui));
}

/* Display typography: expressive hierarchy without changing operational UI text. */
:is(.page-header,.dashboard-section-heading,.employee-section-heading,.settings-section-heading,.help-section-heading,.section-title-row) :is(h1,h2),
.auth-brand-copy h1,
.auth-access-heading h2{
  font-family:var(--font-display);
  font-feature-settings:"ss01" 1,"kern" 1;
}
.auth-brand-copy h1,
.page-header h1{
  font-weight:700;
}
:is(.dashboard-section-heading,.employee-section-heading,.settings-section-heading,.help-section-heading,.section-title-row) h2,
.auth-access-heading h2{
  font-weight:700;
}

@media(max-width:760px){
  /* Theme control gets its own predictable rail and aligns to the content inset. */
  .auth-access-panel{
    padding-top:64px !important;
  }
  .auth-theme-toggle{
    top:16px !important;
    right:16px !important;
    width:40px !important;
    height:40px !important;
    border-radius:var(--radius-md) !important;
    margin:0 !important;
    transform:none !important;
  }
  .auth-theme-toggle .theme-icon{
    inset:50% auto auto 50% !important;
  }

  /* The hero pill is part of the branded surface: keep its label unequivocally white. */
  .auth-brand-copy .auth-eyebrow,
  .auth-brand-copy .auth-eyebrow svg{
    color:#fff !important;
  }
  .auth-brand-copy .auth-eyebrow{
    background:rgba(255,255,255,.10) !important;
    border-color:rgba(255,255,255,.20) !important;
    text-shadow:0 1px 1px rgba(0,0,0,.08);
  }

  /* Small scroll-linked depth. Values are written by JS and capped to avoid a marketing-style parallax. */
  .auth-brand-panel-premium{
    --auth-parallax-bg:0px;
    --auth-parallax-copy:0px;
    --auth-parallax-copy-opacity:1;
  }
  .auth-brand-panel-premium .auth-ambient{
    transform:translate3d(0,var(--auth-parallax-bg),0) scale(1.035);
    transform-origin:50% 38%;
  }
  .auth-brand-panel-premium .auth-brand-content{
    transform:translate3d(0,var(--auth-parallax-copy),0);
    opacity:var(--auth-parallax-copy-opacity);
  }
  .auth-brand-panel-premium .auth-ambient,
  .auth-brand-panel-premium .auth-brand-content{
    will-change:transform,opacity;
  }
}

@media(prefers-reduced-motion:reduce){
  .auth-brand-panel-premium .auth-ambient,
  .auth-brand-panel-premium .auth-brand-content{
    transform:none !important;
    opacity:1 !important;
    will-change:auto !important;
  }
}

/* =========================================================
   v2.5.66 · RC8 Mobile Navigation Layer Contract
   Full-height More sheet + floating bottom nav + account popover.
   ========================================================= */
@media (max-width:760px){
  :root{
    --mobile-chrome-inset:18px;
    --mobile-sheet-top-gap:8px;
    --mobile-nav-safe-zone:112px;
  }

  /* Root fix: the decorative sheen used to become a square white layer
     once overflow was opened for the elevated Create button. */
  .bottom-nav-movil{
    isolation:isolate;
  }
  .bottom-nav-movil::before{
    clip-path:inset(0 round 28px);
  }
  .bottom-nav-movil > :is(a,button){
  }
  .bottom-nav-movil .bottom-nav-create{
  }

  /* More is a navigation sheet, not an account drawer. The surface extends
     behind the floating bottom navigation to recover usable viewport height. */
  .sidebar{
    top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + var(--mobile-sheet-top-gap)) !important;
    bottom:max(8px,env(safe-area-inset-bottom)) !important;
    left:var(--mobile-chrome-inset) !important;
    right:var(--mobile-chrome-inset) !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    z-index:64 !important;
    padding:10px 10px 0 !important;
    border-radius:28px !important;
    overflow:hidden !important;
    contain:layout paint;
  }
  .sidebar > nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:0 0 var(--mobile-nav-safe-zone) !important;
    scroll-padding-bottom:var(--mobile-nav-safe-zone) !important;
    overscroll-behavior-y:contain;
    touch-action:pan-y;
    scrollbar-width:none;
  }
  .sidebar > nav::-webkit-scrollbar{display:none}

  /* Account actions moved to the avatar; hiding this duplicate footer gives
     the navigation sheet substantially more room on small phones. */
  .sidebar > .sidebar-footer{
    display:none !important;
  }

  /* Backdrop stays continuous behind both layers; the nav itself floats above. */
  .overlay-sidebar{
    inset:0 !important;
    height:100dvh !important;
    z-index:55 !important;
  }

  /* Compact account popover from the avatar in the mobile topbar. */
  .mobile-account-menu{
    position:relative;
    display:block;
  }
  .mobile-account-trigger{
    width:42px !important;
    height:42px !important;
    min-width:42px;
    padding:0;
    border:1px solid transparent;
    cursor:pointer;
    font:inherit;
  }
  .mobile-account-trigger:focus-visible{
    outline:0;
    box-shadow:0 0 0 3px var(--focus-ring);
  }
  .mobile-account-panel{
    position:fixed !important;
    top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 8px) !important;
    right:max(12px,env(safe-area-inset-right)) !important;
    left:auto !important;
    width:min(300px,calc(100vw - 24px)) !important;
    max-height:calc(100dvh - var(--mobile-topbar-h,64px) - env(safe-area-inset-top) - 24px);
    overflow:auto;
    border-radius:var(--radius-xl) !important;
    z-index:1400 !important;
  }
  .mobile-account-summary{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 14px 11px;
    border-bottom:1px solid var(--line-soft);
    background:color-mix(in srgb,var(--surface-card) 74%,transparent);
  }
  .mobile-account-summary .user-avatar{
    width:38px;
    height:38px;
    flex:0 0 38px;
  }
  .mobile-account-summary > div:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .mobile-account-summary strong{
    color:var(--text-main);
    font-size:.82rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-account-summary small{
    color:var(--text-muted);
    font-size:.68rem;
  }
  .mobile-account-panel > :is(a,button),
  .mobile-account-panel form > button{
    min-height:52px;
  }
}

@media (max-width:390px){
  .sidebar{
    left:12px !important;
    right:12px !important;
  }
  .mobile-account-panel{
    width:calc(100vw - 20px) !important;
    right:10px !important;
  }
}

/* =========================================================
   v2.5.67 · RC9 — Adaptive White Label Contrast + Large Tablet Form Rhythm
   ========================================================= */

/* Brand-facing copy must derive contrast from the tenant brand, never from a
   hard-coded light foreground. Semantic UI colors remain untouched. */
.auth-brand-copy .auth-eyebrow,
.auth-brand-copy h1,
.auth-brand-copy h1 span,
.auth-brand-copy p,
.auth-feature,
.auth-feature span,
.auth-feature svg,
.auth-brand-footer{
  color:var(--auth-brand-fg) !important;
}
.auth-brand-copy h1 span,
.auth-brand-copy p,
.auth-feature span{
  color:var(--auth-brand-fg-muted) !important;
}
.auth-brand-footer{
  color:var(--auth-brand-fg-soft) !important;
}
.auth-brand-copy .auth-eyebrow{
  color:var(--auth-brand-fg) !important;
  border-color:color-mix(in srgb,var(--auth-brand-fg) 22%,transparent) !important;
  background:color-mix(in srgb,var(--auth-brand-fg) 9%,transparent) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--auth-brand-fg) 7%,transparent);
}
.auth-brand-copy .auth-eyebrow svg{
  color:var(--auth-brand-fg) !important;
}
.auth-feature{
  border-color:color-mix(in srgb,var(--auth-brand-fg) 16%,transparent) !important;
  background:color-mix(in srgb,var(--auth-brand-fg) 6%,transparent) !important;
}

/* Light brand colors receive a light composition so the server-selected dark
   foreground has a real contrast-safe surface behind it. */
html[data-auth-brand-tone="light"] .auth-brand-panel-premium{
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--color-primario) 88%,white) 0%,
      color-mix(in srgb,var(--color-primario) 64%,white) 52%,
      color-mix(in srgb,var(--color-secundario) 30%,white) 100%) !important;
}
html[data-auth-brand-tone="light"] .auth-brand-panel-premium::after{
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.02) 52%,rgba(17,24,39,.08) 100%) !important;
}
html[data-auth-brand-tone="light"] .auth-ambient::before{
  background-image:
    linear-gradient(rgba(17,24,39,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,24,39,.045) 1px,transparent 1px) !important;
}
html[data-auth-brand-tone="light"] .auth-ambient-line{
  background:linear-gradient(90deg,transparent,rgba(17,24,39,.18),transparent) !important;
}
html[data-auth-brand-tone="light"] .auth-ambient-orb-a{
  background:radial-gradient(circle at 42% 42%,rgba(255,255,255,.58),rgba(17,24,39,.05) 36%,transparent 70%) !important;
}
html[data-auth-brand-tone="light"] .auth-ambient-orb-b{
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--color-acento) 18%,white),rgba(17,24,39,.035) 38%,transparent 72%) !important;
}
html[data-auth-brand-tone="light"] .auth-ambient-orb-c{
  background:radial-gradient(circle,rgba(255,255,255,.42),transparent 68%) !important;
}

/* Authoritative large-tablet landscape composition. The data attribute is
   emitted synchronously in <head>; the coarse-pointer media fallback covers
   browsers that expose tablet interaction without stable screen metrics. */
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-shell-premium{
  grid-template-columns:minmax(500px,44%) minmax(0,56%) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-panel{
  padding:clamp(48px,5vh,76px) clamp(52px,5vw,92px) !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-card-premium{
  width:min(100%,620px) !important;
  max-width:620px !important;
  padding:48px 50px 44px !important;
  border-radius:30px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-heading{
  margin-bottom:30px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-heading h2{
  margin:.58rem 0 .58rem !important;
  font-size:2.45rem !important;
  line-height:1.04 !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-heading p{
  max-width:500px !important;
  font-size:1rem !important;
  line-height:1.62 !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-form{
  display:grid !important;
  gap:0 !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-access-form .form-grupo{
  margin-bottom:22px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-form-modern .form-grupo > label,
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-label-row label,
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-label-row a{
  font-size:.9rem !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-label-row{
  margin-bottom:10px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-input-wrap,
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-input-wrap input,
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-submit{
  min-height:60px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-remember{
  min-height:82px !important;
  margin:2px 0 24px !important;
  padding:16px 18px !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-remember-copy strong{
  font-size:.84rem !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-remember-copy small{
  font-size:.74rem !important;
  line-height:1.48 !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-submit{
  margin-top:0 !important;
  font-size:.96rem !important;
}
html[data-auth-device="tablet"][data-auth-orientation="landscape"] .auth-security-note{
  margin-top:22px !important;
  padding-top:4px !important;
  font-size:.78rem !important;
}

@media (min-width:1000px) and (max-width:1900px) and (min-height:700px) and (orientation:landscape) and (pointer:coarse){
  .auth-shell-premium{
    grid-template-columns:minmax(500px,44%) minmax(0,56%) !important;
  }
  .auth-access-panel{
    padding:clamp(48px,5vh,76px) clamp(52px,5vw,92px) !important;
  }
  .auth-card-premium{
    width:min(100%,620px) !important;
    max-width:620px !important;
    padding:48px 50px 44px !important;
    border-radius:30px !important;
  }
  .auth-access-heading{margin-bottom:30px !important;}
  .auth-access-heading h2{
    margin:.58rem 0 .58rem !important;
    font-size:2.45rem !important;
    line-height:1.04 !important;
  }
  .auth-access-heading p{
    max-width:500px !important;
    font-size:1rem !important;
    line-height:1.62 !important;
  }
  .auth-access-form .form-grupo{margin-bottom:22px !important;}
  .auth-form-modern .form-grupo > label,
  .auth-label-row label,
  .auth-label-row a{font-size:.9rem !important;}
  .auth-label-row{margin-bottom:10px !important;}
  .auth-input-wrap,.auth-input-wrap input,.auth-submit{min-height:60px !important;}
  .auth-remember{
    min-height:82px !important;
    margin:2px 0 24px !important;
    padding:16px 18px !important;
  }
  .auth-security-note{margin-top:22px !important;}
}


/* =========================================================
   v2.5.68 · RC10 — Report Design System
   Screen, responsive and print/PDF share one visual language.
   ========================================================= */
.report-print-brand{display:none}
.report-design-heading{align-items:flex-start!important;gap:18px}
.report-design-heading>div:first-child{min-width:0}
.report-design-heading .section-kicker{display:inline-block;margin-bottom:5px}
.report-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.report-heading-actions .btn{min-height:44px}
.report-filter-summary{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.report-filter-summary-label{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.055em}
.report-filter-chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:5px 9px;border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--text-muted);font-size:.7rem;line-height:1}
.report-filter-chip strong{color:var(--text-main);font-weight:700}
.report-filter-clear{display:inline-flex;align-items:center;min-height:30px;padding:4px 6px;color:var(--color-primario);font-size:.7rem;font-weight:700;text-decoration:none}
.report-filter-clear:hover{text-decoration:underline}
.report-chart-header{align-items:flex-start!important;gap:16px}
.report-chart-header>div{min-width:0}
.report-chart-header h2{margin:.15rem 0 .2rem}
.report-chart-header p{margin:0;max-width:680px;color:var(--text-muted);font-size:.72rem;line-height:1.45}
.report-chart-context{flex:0 0 auto;padding:5px 9px;border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--text-muted);font-size:.66rem;white-space:nowrap}
.supervision-history-chart{overflow:hidden}
.supervision-history-chart .supervision-chart-scroll{min-height:230px;padding:14px 6px 4px}
.supervision-history-chart .supervision-chart-scroll svg{min-height:210px;filter:drop-shadow(0 10px 20px rgba(15,23,42,.05))}
.supervision-history-chart .supervision-chart-scroll rect{transition:opacity var(--motion-micro,160ms) ease,filter var(--motion-micro,160ms) ease}
.supervision-history-chart .supervision-chart-scroll g:hover rect{filter:brightness(1.04) saturate(1.06)}
.supervision-history-detail .table-enterprise{font-variant-numeric:tabular-nums}
html[data-theme="dark"] .report-filter-chip,html[data-theme="dark"] .report-chart-context{background:var(--surface-elevated);border-color:var(--line-soft)}

@media(max-width:760px){
  .report-design-heading{display:grid!important;grid-template-columns:1fr}
  .report-heading-actions{justify-content:stretch}
  .report-heading-actions .btn{flex:1 1 150px;justify-content:center}
  .report-filter-summary{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
  .report-filter-summary::-webkit-scrollbar{display:none}
  .report-filter-summary>*{flex:0 0 auto}
  .report-chart-header{display:grid!important;grid-template-columns:1fr}
  .report-chart-context{justify-self:start}
  .supervision-history-chart .supervision-chart-scroll{min-height:210px}
}

@media print{
  @page{size:auto;margin:12mm}
  html,body{background:#fff!important;color:#111827!important}
  html{color-scheme:light!important}
  body{font-size:10pt!important}
  .sidebar,.topbar-movil,.app-header,.bottom-nav-movil,.overlay-sidebar,.global-create-sheet,.modal-overlay,.command-center-overlay,.toast-container,.onboarding-overlay,.activity-panel,.notificaciones-panel{display:none!important}
  .app-shell,.main,.contenido,.content{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important}
  .report-print-brand{display:flex!important;align-items:center;justify-content:space-between;gap:16px;margin:0 0 8mm;padding:0 0 5mm;border-bottom:1px solid #d8dee8;color:#111827}
  .report-print-brand-mark{display:flex;align-items:center;min-width:0}
  .report-print-brand-mark img{display:block;max-width:120px;max-height:42px;object-fit:contain}
  .report-print-brand>div:last-child{display:grid;text-align:right;gap:2px}
  .report-print-brand strong{font-size:10pt}
  .report-print-brand span{font-size:8pt;color:#64748b}
  .report-design-heading{display:block!important;margin:0 0 6mm!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
  .report-design-heading h1{font-size:22pt!important;line-height:1.08!important;color:#111827!important}
  .report-design-heading p{max-width:150mm!important;color:#475569!important;font-size:9pt!important}
  .report-design-heading .section-kicker{color:#64748b!important}
  .report-heading-actions,.analytics-filter-card,.supervision-report-filters,.report-filter-clear,.supervision-row-action{display:none!important}
  .report-filter-summary{display:none!important}
  .card,.analytics-section-card,.analytics-chart-panel,.supervision-chart-card,.stat-card{background:#fff!important;color:#111827!important;box-shadow:none!important;border-color:#d8dee8!important;break-inside:avoid}
  .analytics-section-card,.supervision-chart-card,.supervision-history-detail{margin-top:5mm!important}
  .analytics-chart-panel::after{display:none!important}
  .analytics-chart-panel,.supervision-history-chart{min-height:0!important}
  .analytics-chart-scroll,.supervision-chart-scroll,.tabla-wrap,.supervision-history-wrap{overflow:visible!important;max-width:none!important}
  .analytics-bar-chart,.analytics-donut-chart,.supervision-chart-scroll svg{filter:none!important}
  .analytics-chart-heading h3,.report-chart-header h2,.dashboard-section-heading h2,.supervision-detail-head h2{color:#111827!important}
  .analytics-chart-heading span,.analytics-legend,.analytics-status-legend,.report-chart-header p,.report-chart-context,.dashboard-section-heading p,.supervision-detail-head p{color:#475569!important}
  .analytics-kpi-grid,.supervision-summary-grid{grid-template-columns:repeat(4,1fr)!important;gap:3mm!important}
  .stat-card{min-height:28mm!important;height:auto!important;padding:4mm!important}
  .stat-card .valor{color:#111827!important}
  table{width:100%!important;border-collapse:collapse!important;font-size:8pt!important}
  thead{display:table-header-group!important}
  tr{break-inside:avoid}
  th,td{padding:2.4mm!important;border-bottom:1px solid #e2e8f0!important;color:#111827!important}
  a{color:inherit!important;text-decoration:none!important}
  .badge{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}


/* =========================================================
   v2.5.69 · RC11 — Mobile Profile Glass + Layer Alignment
   One geometry contract for More + bottom nav. Account is a
   persistent floating glass layer with explicit close affordance.
   ========================================================= */
@media (max-width:860px){
  :root{
    --mobile-layer-inset:18px;
    --mobile-layer-radius:28px;
  }

  /* One source of truth: More and bottom navigation must align pixel-perfect. */
  .sidebar,
  .bottom-nav-movil{
  }
  .bottom-nav-movil::before{
    clip-path:inset(0 round var(--mobile-layer-radius)) !important;
  }

  /* The account panel is true floating chrome: it stays anchored while the
     document can continue scrolling behind it, exactly like Quick Actions. */
  .mobile-account-panel{
    position:fixed !important;
    top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 10px) !important;
    right:var(--mobile-layer-inset) !important;
    left:auto !important;
    width:min(320px,calc(100vw - (var(--mobile-layer-inset) * 2))) !important;
    max-height:calc(100dvh - var(--mobile-topbar-h,64px) - env(safe-area-inset-top) - 28px) !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    border:1px solid var(--glass-border) !important;
    border-radius:22px !important;
    background:color-mix(in srgb,var(--glass-bg-strong) 88%,transparent) !important;
    box-shadow:0 22px 60px rgba(15,23,42,.20),0 2px 12px rgba(15,23,42,.08) !important;
    -webkit-backdrop-filter:blur(24px) saturate(155%) !important;
    backdrop-filter:blur(24px) saturate(155%) !important;
    isolation:isolate;
    z-index:1450 !important;
  }
  .mobile-account-panel::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 42%);
    opacity:.7;
    z-index:-1;
  }
  .mobile-account-summary{
    position:sticky;
    top:0;
    z-index:2;
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) 38px;
    align-items:center;
    gap:10px;
    min-height:66px;
    padding:12px 12px 12px 14px !important;
    background:color-mix(in srgb,var(--glass-bg-strong) 91%,transparent) !important;
    -webkit-backdrop-filter:blur(24px) saturate(155%);
    backdrop-filter:blur(24px) saturate(155%);
    border-bottom:1px solid var(--glass-border) !important;
  }
  .mobile-account-identity{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .mobile-account-close{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center;
    border:1px solid var(--glass-border) !important;
    border-radius:var(--radius-md) !important;
    background:color-mix(in srgb,var(--surface-card) 62%,transparent) !important;
    color:var(--text-main) !important;
    cursor:pointer;
  }
  .mobile-account-close:hover,
  .mobile-account-close:focus-visible{
    background:color-mix(in srgb,var(--surface-subtle) 82%,transparent) !important;
  }
  .mobile-account-close:focus-visible{
    outline:0;
    box-shadow:0 0 0 3px var(--focus-ring);
  }
  .mobile-account-panel > :is(a,button),
  .mobile-account-panel form > button{
    background:transparent !important;
    color:var(--text-main) !important;
  }
  .mobile-account-panel > :is(a,button):hover,
  .mobile-account-panel form > button:hover{
    background:color-mix(in srgb,var(--surface-subtle) 70%,transparent) !important;
  }
  .mobile-account-panel form{
    border-color:var(--glass-border) !important;
  }

  html[data-theme="dark"] .mobile-account-panel,
  html[data-theme="dark"] .mobile-account-summary{
    background:color-mix(in srgb,var(--surface-overlay) 82%,transparent) !important;
    border-color:var(--glass-border) !important;
  }
  html[data-theme="dark"] .mobile-account-panel::before{
    background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 46%);
  }
}

@media (max-width:390px){
  :root{--mobile-layer-inset:12px;}
  .sidebar,
  .bottom-nav-movil{
  }
  .mobile-account-panel{
    right:var(--mobile-layer-inset) !important;
    width:calc(100vw - (var(--mobile-layer-inset) * 2)) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .mobile-account-panel,
  .mobile-account-close{
    transition:none !important;
  }
}


/* =========================================================
   v2.5.70 · RC12 — Horizontal Card Rail + Dashboard Community
   Legacy discovery rail: desktop/tablet grid, mobile native
   horizontal discovery with snap + next-card peek.
   v2.7.33 adds the governed informational-card collection rule.
   ========================================================= */
:root{
  --horizontal-rail-gap:12px;
  --horizontal-rail-mobile-card:82%;
  --horizontal-rail-radius:var(--radius-card,18px);
}
.horizontal-card-rail{min-width:0;max-width:100%;position:relative}
.horizontal-card-track{display:grid;gap:var(--horizontal-rail-gap);min-width:0}
.horizontal-card{min-width:0;border-radius:var(--horizontal-rail-radius)}
.horizontal-card-rail-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.horizontal-card-rail-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--color-primario);font-size:.74rem;font-weight:700;text-decoration:none;white-space:nowrap}
.dashboard-birthday-section{padding:0 1px}
.dashboard-birthday-track{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.birthday-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:88px;padding:14px;border:1px solid var(--line-soft);background:var(--surface-card);box-shadow:var(--sombra-suave,0 8px 24px rgba(15,23,42,.06))}
.birthday-avatar{width:48px;height:48px;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-primario) 9%,var(--surface-subtle));color:var(--color-primario);font-weight:700}
.birthday-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.birthday-copy{min-width:0;display:grid;gap:3px}
.birthday-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-main);font-size:.84rem}
.birthday-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:.7rem}
.birthday-date-chip{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 8px;border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--text-muted);font-size:.65rem;font-weight:700;white-space:nowrap}
.dashboard-secondary-strip{margin-top:1rem!important}

@media(max-width:760px){
  .horizontal-card-rail{
    width:calc(100% + 2px);
    margin-inline:-1px;
    overflow-x:auto;
    overflow-y:visible;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:1px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }
  .horizontal-card-rail::-webkit-scrollbar{display:none}
  .horizontal-card-track{
    display:flex!important;
    width:max-content;
    min-width:100%;
    gap:var(--horizontal-rail-gap)!important;
    padding:1px max(1px,env(safe-area-inset-right)) 5px max(1px,env(safe-area-inset-left));
  }
  .horizontal-card-track>.horizontal-card{
    flex:0 0 min(var(--horizontal-rail-mobile-card),310px)!important;
    width:min(var(--horizontal-rail-mobile-card),310px)!important;
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }
  .dashboard-birthday-track>.birthday-card{flex-basis:min(78vw,300px)!important;width:min(78vw,300px)!important}
  .horizontal-card-rail-header{align-items:flex-start}
  .horizontal-card-rail-header .dashboard-section-heading p{max-width:30ch}
  .birthday-card{grid-template-columns:46px minmax(0,1fr);min-height:90px}
  .birthday-avatar{width:46px;height:46px}
  .birthday-date-chip{grid-column:2;justify-self:start;margin-top:1px}
}

@media(max-width:380px){
  :root{--horizontal-rail-mobile-card:84%;}
  .horizontal-card-rail-link{font-size:.68rem}
}

@media(prefers-reduced-motion:reduce){
  .horizontal-card-rail{scroll-behavior:auto!important}
}

html[data-theme="dark"] .birthday-card{background:var(--surface-card);border-color:var(--line-soft)}
html[data-theme="dark"] .birthday-date-chip{background:var(--surface-elevated);border-color:var(--line-soft)}


/* =========================================================
   v2.5.71 · RC13 — Mobile Floating Layers Precision Pass
   Near-opaque glass for account/activity, explicit close controls,
   and one bottom geometry contract for More + floating navigation.
   ========================================================= */
@media (max-width:860px){
  :root{
    --mobile-layer-inset:18px;
    --mobile-layer-radius:28px;
    --mobile-floating-glass:color-mix(in srgb,var(--surface-card) 94%,transparent);
    --mobile-floating-glass-header:color-mix(in srgb,var(--surface-card) 97%,transparent);
  }

  /* Profile: visually white/solid at first glance, but still reacts subtly
     to content behind it. Fixed positioning keeps it anchored while scrolling. */
  .mobile-account-panel{
    background:var(--mobile-floating-glass) !important;
    border:1px solid color-mix(in srgb,var(--border-default) 82%,transparent) !important;
    -webkit-backdrop-filter:blur(30px) saturate(145%) !important;
    backdrop-filter:blur(30px) saturate(145%) !important;
    box-shadow:0 24px 64px rgba(15,23,42,.18),0 2px 12px rgba(15,23,42,.06) !important;
  }
  .mobile-account-summary{
    background:var(--mobile-floating-glass-header) !important;
    -webkit-backdrop-filter:blur(30px) saturate(145%) !important;
    backdrop-filter:blur(30px) saturate(145%) !important;
  }

  /* Activity Center uses the same floating-layer language as Quick Actions
     and account: fixed, scroll-contained, sticky header, explicit close. */
  .notificaciones-panel.activity-center{
    position:fixed !important;
    top:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top) + 10px) !important;
    left:var(--mobile-layer-inset) !important;
    right:var(--mobile-layer-inset) !important;
    width:auto !important;
    max-height:calc(100dvh - var(--mobile-topbar-h,64px) - env(safe-area-inset-top) - 28px) !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    border-radius:var(--mobile-layer-radius) !important;
    border:1px solid color-mix(in srgb,var(--border-default) 82%,transparent) !important;
    background:var(--mobile-floating-glass) !important;
    box-shadow:0 24px 64px rgba(15,23,42,.18),0 2px 12px rgba(15,23,42,.06) !important;
    -webkit-backdrop-filter:blur(30px) saturate(145%) !important;
    backdrop-filter:blur(30px) saturate(145%) !important;
    isolation:isolate;
    z-index:1450 !important;
  }
  .notificaciones-panel.activity-center::before{
    opacity:.34 !important;
    background:linear-gradient(135deg,rgba(255,255,255,.24),transparent 44%) !important;
  }
  .notificaciones-panel.activity-center .notificaciones-header{
    position:sticky !important;
    top:0;
    z-index:4;
    background:var(--mobile-floating-glass-header) !important;
    -webkit-backdrop-filter:blur(30px) saturate(145%) !important;
    backdrop-filter:blur(30px) saturate(145%) !important;
  }
  .activity-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex:0 0 auto;
  }
  .activity-center-close{
    width:38px !important;
    height:38px !important;
    min-width:38px;
    min-height:38px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center;
    border:1px solid var(--glass-border) !important;
    border-radius:var(--radius-control,12px) !important;
    background:color-mix(in srgb,var(--surface-card) 78%,transparent) !important;
    color:var(--text-main) !important;
    cursor:pointer;
  }
  .activity-center-close:hover,
  .activity-center-close:focus-visible{
    background:color-mix(in srgb,var(--surface-subtle) 88%,transparent) !important;
  }
  .activity-center-close:focus-visible{
    outline:0;
    box-shadow:0 0 0 3px var(--focus-ring);
  }

  /* More and bottom navigation share exact outer geometry. The navigation
     masks the sheet's lower edge so no white border/shadow can protrude. */
  .sidebar,
  .bottom-nav-movil{
  }
  .sidebar{
    bottom:max(10px,env(safe-area-inset-bottom)) !important;
    border-bottom-color:transparent !important;
    box-shadow:0 -12px 42px rgba(15,23,42,.10) !important;
  }
  .bottom-nav-movil{
  }
}

@media (max-width:390px){
  :root{--mobile-layer-inset:12px;}
  .notificaciones-panel.activity-center,
  .mobile-account-panel{
    left:var(--mobile-layer-inset) !important;
    right:var(--mobile-layer-inset) !important;
    width:auto !important;
  }
}

html[data-theme="dark"]{
  --mobile-floating-glass:color-mix(in srgb,var(--surface-overlay) 92%,transparent);
  --mobile-floating-glass-header:color-mix(in srgb,var(--surface-overlay) 96%,transparent);
}
html[data-theme="dark"] .notificaciones-panel.activity-center::before{
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 46%) !important;
}

@media(prefers-reduced-motion:reduce){
  .activity-center-close{transition:none !important}
}

/* =========================================================
   v2.5.72 · RC14 — Unified Mobile Glass + Sticky Anchor
   Account and Activity Center consume the exact floating-nav glass recipe.
   They anchor to the sticky mobile header instead of using viewport-fixed
   positioning inside a backdrop-filter containing block.
   ========================================================= */
@media (max-width:860px){
  :root{
    --mobile-layer-inset:18px;
    --mobile-layer-radius:28px;
    --mobile-layer-bottom:max(10px,env(safe-area-inset-bottom));
  }

  /* The sticky topbar is the authoritative anchor for its floating menus. */
  .topbar-movil{
    overflow:visible !important;
  }
  .topbar-movil .notificaciones,
  .topbar-movil .mobile-account-menu{
    position:static !important;
  }

  /* One visual recipe: exactly the same glass chrome used by bottom nav. */
  .mobile-account-panel,
  .notificaciones-panel.activity-center{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    left:var(--mobile-layer-inset) !important;
    right:var(--mobile-layer-inset) !important;
    width:auto !important;
    margin:0 !important;
    border:1px solid var(--glass-border) !important;
    border-radius:var(--mobile-layer-radius) !important;
    background:var(--glass-bg) !important;
    box-shadow:var(--glass-shadow) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
    isolation:isolate;
    z-index:1450 !important;
  }
  .mobile-account-panel{
    max-height:calc(100dvh - var(--mobile-topbar-h,64px) - env(safe-area-inset-top) - 26px) !important;
    overflow:auto !important;
    overscroll-behavior:contain;
  }
  .notificaciones-panel.activity-center{
    max-height:calc(100dvh - var(--mobile-topbar-h,64px) - env(safe-area-inset-top) - 26px) !important;
    overflow:auto !important;
    overscroll-behavior:contain;
  }

  /* No independent white veil: the glass itself provides the subtle tint. */
  .mobile-account-panel::before,
  .notificaciones-panel.activity-center::before{
    opacity:.16 !important;
    background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 46%) !important;
  }
  .mobile-account-summary,
  .notificaciones-panel.activity-center .notificaciones-header{
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
    background:var(--glass-bg) !important;
    border-color:var(--glass-border) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
  }

  /* More + bottom nav: same outer box, including the lower edge. */
  .sidebar,
  .bottom-nav-movil{
  }
  .sidebar{
    border-bottom-color:transparent !important;
    box-shadow:0 -12px 42px rgba(15,23,42,.10) !important;
    clip-path:inset(0 round var(--mobile-layer-radius));
  }
  .bottom-nav-movil{
    background:var(--glass-bg) !important;
    border-color:var(--glass-border) !important;
    box-shadow:var(--glass-shadow) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
  }
}

@media (max-width:390px){
  :root{--mobile-layer-inset:12px;}
}

html[data-theme="dark"] .mobile-account-panel,
html[data-theme="dark"] .notificaciones-panel.activity-center,
html[data-theme="dark"] .mobile-account-summary,
html[data-theme="dark"] .notificaciones-panel.activity-center .notificaciones-header,
html[data-theme="dark"] .bottom-nav-movil{
  background:var(--glass-bg) !important;
  border-color:var(--glass-border) !important;
}

@media (prefers-reduced-motion:reduce){
  .mobile-account-panel,
  .notificaciones-panel.activity-center{transition:none !important;}
}


/* =========================================================
   v2.5.73 · RC15 — TRUE Mobile Glass Portal
   Perfil + Centro de actividad: SAME visual recipe as bottom nav.
   These rules are authoritative and intentionally last in app.css.
   ========================================================= */
@media (max-width:860px){
  /* Shared portal panel contract. Exact surface recipe = bottom nav. */
  body > .rh-mobile-glass-portal{
    position:fixed !important;
    top:var(--rh-mobile-overlay-top,82px) !important;
    left:var(--mobile-layer-inset,18px) !important;
    right:var(--mobile-layer-inset,18px) !important;
    width:auto !important;
    margin:0 !important;
    max-height:calc(100dvh - var(--rh-mobile-overlay-top,82px) - 14px - env(safe-area-inset-bottom)) !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    border:1px solid var(--glass-border) !important;
    border-radius:var(--mobile-layer-radius,28px) !important;

    /* EXACTLY the bottom-nav surface */
    background:var(--glass-bg) !important;
    border-color:var(--glass-border) !important;
    box-shadow:var(--glass-shadow) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;

    isolation:isolate;
    z-index:1600 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-6px) scale(.992) !important;
    transition:
      opacity var(--motion-ui,240ms) ease,
      transform var(--motion-ui,240ms) var(--motion-ease-emphasized,cubic-bezier(.22,1,.36,1)),
      visibility 0s linear var(--motion-ui,240ms) !important;
  }
  body > .rh-mobile-glass-portal.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
    transition-delay:0s !important;
  }

  /* Remove legacy decorative veils: the bottom nav does not need a second
     opaque layer, therefore portal panels must not have one either. */
  body > .rh-mobile-glass-portal::before{
    content:none !important;
    display:none !important;
  }

  body > .rh-mobile-glass-portal .mobile-account-summary,
  body > .rh-mobile-glass-portal .notificaciones-header{
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;

    /* Same glass again; no alternate header transparency */
    background:var(--glass-bg) !important;
    border-color:var(--glass-border) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
  }

  /* Account panel must not inherit old absolute/fixed sizing after portal. */
  body > .mobile-account-panel.rh-mobile-glass-portal,
  body > .notificaciones-panel.activity-center.rh-mobile-glass-portal{
    display:block !important;
  }

  /* Bottom navigation remains the visual source of truth. */
  .bottom-nav-movil{
    background:var(--glass-bg) !important;
    border-color:var(--glass-border) !important;
    box-shadow:var(--glass-shadow) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
  }
}

@media (max-width:390px){
  body > .rh-mobile-glass-portal{
    left:var(--mobile-layer-inset,12px) !important;
    right:var(--mobile-layer-inset,12px) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  body > .rh-mobile-glass-portal{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   v2.5.74 · RC16 — Auth Composition Root Contract
   One authoritative layout for desktop/tablet + stable internal rhythm.
   Mobile remains intentionally separate.
   ========================================================= */
@media (min-width:861px){
  .auth-shell-premium{
    display:grid !important;
    grid-template-columns:minmax(390px,44%) minmax(0,56%) !important;
    min-height:100dvh !important;
    height:auto !important;
  }

  .auth-brand-panel-premium{
    min-height:100dvh !important;
  }

  .auth-access-panel{
    box-sizing:border-box !important;
    min-width:0 !important;
    min-height:100dvh !important;
    height:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow-y:auto !important;
    padding:
      clamp(44px,6vh,84px)
      clamp(38px,5vw,88px) !important;
  }

  .auth-card-premium{
    box-sizing:border-box !important;
    flex:0 1 auto !important;
    width:clamp(500px,46vw,620px) !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    margin:auto !important;
    padding:clamp(38px,4.4vw,52px) !important;
    border:1px solid var(--border-default,var(--line-soft)) !important;
    border-radius:var(--radius-xl,30px) !important;
    background:var(--surface-card) !important;
    box-shadow:0 34px 88px rgba(15,23,42,.11),0 2px 8px rgba(15,23,42,.035) !important;
    overflow:visible !important;
  }

  html[data-theme="dark"] .auth-card-premium{
    box-shadow:0 36px 96px rgba(0,0,0,.30),0 2px 10px rgba(0,0,0,.14) !important;
  }

  .auth-access-heading{
    margin:0 0 28px !important;
  }

  .auth-access-heading h2{
    margin:.55rem 0 .5rem !important;
    font-size:clamp(2rem,2.35vw,2.45rem) !important;
    line-height:1.06 !important;
  }

  .auth-access-heading p{
    margin:.5rem 0 0 !important;
    max-width:500px !important;
    font-size:.96rem !important;
    line-height:1.58 !important;
  }

  .auth-access-form{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
  }

  .auth-access-form .form-grupo{
    margin:0 !important;
  }

  .auth-form-modern .form-grupo > label,
  .auth-label-row label,
  .auth-label-row a{
    font-size:.88rem !important;
    line-height:1.35 !important;
  }

  .auth-input-wrap{
    min-height:58px !important;
  }

  .auth-input-wrap input{
    min-height:58px !important;
  }

  .auth-remember{
    min-height:78px !important;
    margin:0 !important;
    padding:15px 17px !important;
    border-radius:var(--radius-lg,16px) !important;
  }

  .auth-remember-copy strong{
    font-size:.82rem !important;
  }

  .auth-remember-copy small{
    margin-top:4px !important;
    font-size:.72rem !important;
    line-height:1.45 !important;
  }

  .auth-submit{
    min-height:56px !important;
    margin:0 !important;
  }

  .auth-security-note{
    margin-top:20px !important;
    padding-top:16px !important;
  }
}

/* Short desktop windows: preserve breathing room by scrolling the access side,
   never by compressing the card. */
@media (min-width:861px) and (max-height:760px){
  .auth-access-panel{
    align-items:flex-start !important;
    padding-top:36px !important;
    padding-bottom:36px !important;
  }

  .auth-card-premium{
    margin:0 auto !important;
    padding:34px 40px !important;
  }

  .auth-access-heading{
    margin-bottom:22px !important;
  }

  .auth-access-form{
    gap:16px !important;
  }

  .auth-input-wrap,
  .auth-input-wrap input{
    min-height:54px !important;
  }

  .auth-remember{
    min-height:70px !important;
  }
}

/* Wide screens get more negative space around the card without changing
   the internal rhythm. */
@media (min-width:1600px){
  .auth-access-panel{
    padding-inline:clamp(72px,7vw,120px) !important;
  }
}

/* The approved mobile composition remains compact and independent. */
@media (max-width:860px){
  .auth-card-premium{
    height:auto !important;
    overflow:visible !important;
  }
}


/* v2.5.75 — isolated mobile notification trigger visual contract */
@media(max-width:860px){
  [data-mobile-notifications-toggle]{
    position:relative;
  }
  [data-mobile-notifications-toggle][aria-expanded="true"]{
    background:var(--shell-control-active) !important;
    color:var(--color-primario,var(--primario)) !important;
  }
  [data-mobile-notifications-toggle][data-notification-state="unread"]{
    color:var(--text-main);
  }
  [data-mobile-notifications-toggle][data-notification-state="unread"] svg{
    transform-origin:50% 10%;
  }
  body > [data-mobile-notifications-panel].rh-mobile-glass-portal{
    display:block !important;
  }
}


/* v2.5.79 — Migration Manager Foundation */
.migration-page-heading{align-items:flex-start;gap:var(--ui-section-gap,16px)}
.migration-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--ui-section-gap,16px)}
.migration-summary-grid>.stat-card{margin:0!important}
.migration-step-card{margin-top:var(--ui-section-gap,16px)}
.migration-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ui-section-gap,16px);align-items:start}
.migration-form>.campo{min-width:0}
.migration-form>.migration-toggle{min-height:72px;border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);padding:14px 16px;display:flex;align-items:flex-start;gap:12px;background:var(--surface-soft);cursor:pointer}
.migration-toggle input{margin-top:3px;accent-color:var(--color-primario)}
.migration-toggle span{display:grid;gap:4px}.migration-toggle strong{font-size:.86rem;color:var(--text-main)}.migration-toggle small{font-size:.74rem;color:var(--text-muted);line-height:1.45}
.migration-safety-note{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-md,12px);background:var(--surface-soft);border:1px solid var(--line-soft);color:var(--text-main)}
.migration-safety-note>svg{flex:0 0 auto;color:var(--color-primario)}.migration-safety-note div{display:grid;gap:3px}.migration-safety-note strong{font-size:.82rem}.migration-safety-note span{font-size:.74rem;color:var(--text-muted)}
.migration-form>.btn{grid-column:1/-1;justify-self:start;min-width:180px}
.migration-table-wrap{overflow-x:auto}.migration-table{min-width:820px}.migration-cell-meta{display:block;margin-top:3px}.migration-hash{display:inline-block;max-width:190px;padding:.18rem .38rem;border-radius:var(--radius-sm,8px);border:1px solid var(--line-soft);background:var(--surface-soft);color:var(--text-main);font-size:.68rem}
.migration-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:migration-step}
.migration-flow li{counter-increment:migration-step;min-width:0;padding:14px;border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);background:var(--surface-card);display:grid;gap:6px;position:relative}
.migration-flow li:before{content:counter(migration-step);width:28px;height:28px;border-radius:var(--radius-pill,999px);display:grid;place-items:center;background:color-mix(in srgb,var(--color-primario) 12%,transparent);color:var(--color-primario);font-weight:700;font-size:.74rem}
.migration-flow strong{font-size:.84rem;color:var(--text-main)}.migration-flow span{font-size:.74rem;color:var(--text-muted);line-height:1.45}
html[data-theme="dark"] .migration-form>.migration-toggle,html[data-theme="dark"] .migration-safety-note,html[data-theme="dark"] .migration-flow li,html[data-theme="dark"] .migration-hash{background:var(--surface-elevated);border-color:var(--line-soft);color:var(--text-main)}
@media(max-width:1180px){.migration-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.migration-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.migration-form{grid-template-columns:1fr}.migration-safety-note,.migration-form>.btn{grid-column:auto}.migration-form>.btn{width:100%}.migration-flow{grid-template-columns:1fr}.migration-page-heading>.btn{width:100%}}
@media(max-width:520px){.migration-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.migration-summary-grid>.stat-card{min-width:0}}


/* v2.6.0 — Core HR 3.0 / Compliance Center */
.compliance-hero{align-items:flex-start}.compliance-tabs{margin-top:var(--ui-section-gap,16px)}
.compliance-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:var(--ui-section-gap,16px) 0}
.compliance-kpis>.stat-card{margin:0;min-width:0}.compliance-list-card{margin-top:var(--ui-section-gap,16px)}
.compliance-list-head{align-items:flex-start}
.compliance-table{min-width:900px}.person-cell{display:grid;gap:3px}.person-cell small{color:var(--text-muted)}
.compliance-progress{display:grid;grid-template-columns:minmax(90px,1fr) auto;gap:8px;align-items:center}.compliance-progress progress{width:100%;height:7px;border:0;border-radius:var(--radius-pill,999px);overflow:hidden;background:var(--surface-subtle);accent-color:var(--color-primario)}.compliance-progress progress::-webkit-progress-bar{background:var(--surface-subtle);border-radius:var(--radius-pill,999px)}.compliance-progress progress::-webkit-progress-value{background:var(--color-primario);border-radius:var(--radius-pill,999px)}.compliance-progress progress::-moz-progress-bar{background:var(--color-primario);border-radius:var(--radius-pill,999px)}.compliance-progress>strong{font-size:.78rem;color:var(--text-main)}
.compliance-config-grid{margin-top:var(--ui-section-gap,16px);align-items:start}.compliance-requirement-list{display:grid;gap:8px}.compliance-requirement-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}.compliance-requirement-row:last-child{border-bottom:0}.compliance-requirement-row>div{display:grid;gap:3px}.compliance-requirement-row small{color:var(--text-muted);font-size:.74rem}.form-grid-2 .span-2{grid-column:1/-1}.toggle-row{min-height:44px;display:flex!important;align-items:center;gap:10px!important;padding:0 12px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle)}.toggle-row input{accent-color:var(--color-primario)}
.compliance-person-card{scroll-margin-top:110px}.compliance-person-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.compliance-score{min-width:96px;display:grid;justify-items:end;gap:2px}.compliance-score strong{font-size:1.55rem;line-height:1;color:var(--text-main)}.compliance-score span{font-size:.72rem;color:var(--text-muted)}
.compliance-requirements-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.compliance-requirement-card{border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);padding:14px;background:var(--surface-card);display:grid;gap:10px;min-width:0}.compliance-requirement-top{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:start}.compliance-status-icon{width:32px;height:32px;border-radius:var(--radius-md,12px);display:grid;place-items:center;background:var(--surface-subtle);color:var(--text-muted)}.compliance-requirement-top>div{display:grid;gap:2px}.compliance-requirement-top small,.compliance-doc-meta small{font-size:.72rem;color:var(--text-muted)}.compliance-doc-meta{display:grid;gap:3px;padding-top:9px;border-top:1px solid var(--line-soft);min-width:0}.compliance-doc-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compliance-doc-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.inline-form{display:inline-flex;margin:0}.status-ok .compliance-status-icon{color:var(--success,var(--verde))}.status-missing .compliance-status-icon,.status-expired .compliance-status-icon,.status-rejected .compliance-status-icon{color:var(--danger,var(--rojo))}.status-review .compliance-status-icon,.status-signature .compliance-status-icon,.status-expiring .compliance-status-icon{color:var(--warning,var(--amarillo))}
.employee-compliance-card{scroll-margin-top:100px}.employee-compliance-list{display:grid;gap:0}.employee-compliance-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)}.employee-compliance-row>div{display:grid;gap:3px}.employee-compliance-row small{color:var(--text-muted);font-size:.75rem}.employee-sign-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,2fr) auto;gap:12px;align-items:end;padding:14px;margin:8px 0 14px;border-radius:var(--radius-lg,16px);background:var(--surface-subtle);border:1px solid var(--line-soft)}.signature-consent{display:flex!important;align-items:flex-start;gap:9px!important;font-size:.75rem;line-height:1.4;color:var(--text-muted)}.signature-consent input{margin-top:2px;accent-color:var(--color-primario)}
html[data-theme="dark"] :is(.compliance-requirement-card,.employee-sign-form,.toggle-row){background:var(--surface-elevated);border-color:var(--line-soft)}
@media(max-width:1180px){.compliance-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.compliance-requirements-grid{grid-template-columns:1fr}.employee-sign-form{grid-template-columns:1fr}}
@media(max-width:860px){.compliance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.compliance-config-grid{grid-template-columns:1fr}.compliance-person-head{align-items:flex-start}.compliance-score{min-width:76px}.compliance-requirement-top{grid-template-columns:32px minmax(0,1fr)}.compliance-requirement-top>.badge{grid-column:2;justify-self:start}.employee-compliance-row{align-items:flex-start}.employee-sign-form>.btn{width:100%}}
@media(prefers-reduced-motion:reduce){.compliance-progress>span{transition:none!important}}

.compliance-reject{position:relative}.compliance-reject>summary{list-style:none;cursor:pointer}.compliance-reject>summary::-webkit-details-marker{display:none}.compliance-reject>form{position:absolute;z-index:30;right:0;top:calc(100% + 8px);width:min(320px,80vw);padding:12px;border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);background:color-mix(in srgb,var(--surface-overlay) 94%,transparent);box-shadow:var(--shadow-lg);backdrop-filter:blur(16px);display:grid;gap:9px}.employee-sign-actions{display:flex;gap:8px;align-items:center}.employee-sign-actions .btn{white-space:nowrap}@media(max-width:860px){.employee-sign-actions{display:grid;grid-template-columns:1fr 1fr}.compliance-reject>form{position:fixed;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));top:auto;width:auto}.employee-sign-actions .btn{width:100%}}

.compliance-bulk-form{margin-top:12px}.compliance-bulk-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);background:var(--surface-subtle);margin-bottom:10px}.compliance-bulk-bar>div{display:grid;gap:3px}.compliance-bulk-bar strong{font-size:.82rem}.compliance-bulk-bar span{font-size:.73rem;color:var(--text-muted)}.compliance-select-col{width:44px!important;text-align:center}.compliance-select-col input{accent-color:var(--color-primario);width:16px;height:16px}html[data-theme="dark"] .compliance-bulk-bar{background:var(--surface-elevated)}@media(max-width:860px){.compliance-bulk-bar{align-items:flex-start;flex-direction:column}.compliance-bulk-bar .btn{width:100%}}

/* v2.6.4 — Expediente 360: integridad compacta + visor seguro */
.compliance-person-compact{overflow:hidden}
.compliance-person-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;padding:20px 22px}
.compliance-person-main{min-width:0;display:grid;gap:8px}.compliance-person-main>p{margin:0;color:var(--text-muted);font-size:.78rem;line-height:1.5}
.compliance-person-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.compliance-person-title-row h2{margin:0;font-size:1.08rem;color:var(--text-main)}
.compliance-person-progress{max-width:520px;margin-top:4px}
.compliance-person-metrics{display:grid;grid-template-columns:repeat(2,minmax(92px,1fr));gap:8px}.compliance-person-metrics>span{display:grid;gap:2px;padding:9px 11px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle);color:var(--text-muted);font-size:.68rem;white-space:nowrap}.compliance-person-metrics strong{font-size:.92rem;color:var(--text-main)}
.compliance-attention-list{border-top:1px solid var(--line-soft)}.compliance-attention-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 22px;border-bottom:1px solid var(--line-soft)}.compliance-attention-row:last-child{border-bottom:0}.compliance-attention-copy{display:grid;gap:2px;min-width:0}.compliance-attention-copy strong{font-size:.78rem;color:var(--text-main)}.compliance-attention-copy small{font-size:.7rem;color:var(--text-muted)}.compliance-attention-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.compliance-person-complete{display:flex;align-items:center;gap:10px;padding:12px 22px;border-top:1px solid var(--line-soft);color:var(--success,var(--verde))}.compliance-person-complete>span{display:grid;gap:2px}.compliance-person-complete strong{font-size:.78rem;color:var(--text-main)}.compliance-person-complete small{font-size:.7rem;color:var(--text-muted)}
.compliance-complete-details{border-top:1px solid var(--line-soft);padding:0 22px}.compliance-complete-details>summary{display:flex;align-items:center;gap:7px;padding:11px 0;cursor:pointer;list-style:none;color:var(--text-muted);font-size:.72rem;font-weight:700}.compliance-complete-details>summary::-webkit-details-marker{display:none}.compliance-complete-pills{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 13px}.compliance-complete-pills>span{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:var(--radius-pill,999px);background:var(--surface-subtle);color:var(--text-muted);font-size:.68rem}
.document-view-btn{cursor:pointer;font-family:var(--font-ui)}
html[data-theme="dark"] :is(.compliance-person-metrics>span,.compliance-complete-pills>span){background:var(--surface-elevated)}
@media(max-width:860px){.compliance-person-summary{grid-template-columns:1fr;gap:14px;padding:16px}.compliance-person-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.compliance-attention-row{grid-template-columns:auto minmax(0,1fr);padding:12px 16px}.compliance-attention-actions{grid-column:2;justify-content:flex-start}.compliance-complete-details{padding:0 16px}.compliance-person-complete{padding:12px 16px}}
@media(max-width:520px){.compliance-person-metrics>span{min-width:0;white-space:normal}.compliance-attention-actions>.btn,.compliance-attention-actions>.inline-form>.btn{min-height:38px}}
@media(prefers-reduced-motion:reduce){.compliance-attention-row{transition:none!important}}

/* v2.6.6 — Core HR 3.1 / Employee Lifecycle */
.lifecycle-hero{align-items:flex-start}.lifecycle-tabs{margin-top:var(--ui-section-gap,16px)}
.lifecycle-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:var(--ui-section-gap,16px) 0}.lifecycle-kpis>.stat-card{margin:0}
.lifecycle-list-card{margin-top:var(--ui-section-gap,16px)}.lifecycle-list-head{align-items:flex-start}.lifecycle-filter{min-width:210px}.lifecycle-filter .campo{margin:0}.lifecycle-table{min-width:880px}.lifecycle-table td>small{display:block;margin-top:3px;color:var(--text-muted);font-size:.7rem}
.lifecycle-config-grid{align-items:start;margin-top:var(--ui-section-gap,16px)}.lifecycle-template-list{display:grid}.lifecycle-template-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}.lifecycle-template-row:last-child{border-bottom:0}.lifecycle-template-row>div{display:grid;gap:3px}.lifecycle-template-row small{font-size:.72rem;color:var(--text-muted)}.lifecycle-divider{border:0;border-top:1px solid var(--line-soft);margin:20px 0}
.lifecycle-person-card{scroll-margin-top:105px}.lifecycle-person-head{align-items:flex-start}.lifecycle-person-empty{display:flex;gap:10px;align-items:center;padding:14px 20px;border-top:1px solid var(--line-soft);color:var(--success,var(--verde))}.lifecycle-person-empty>span{display:grid;gap:2px}.lifecycle-person-empty strong{color:var(--text-main);font-size:.78rem}.lifecycle-person-empty small{color:var(--text-muted);font-size:.7rem}
.lifecycle-person-processes{display:grid;gap:0}.lifecycle-person-process{border-top:1px solid var(--line-soft);padding:15px 20px}.lifecycle-process-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,220px);gap:18px;align-items:center}.lifecycle-process-summary>div:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.lifecycle-process-summary small{flex-basis:100%;color:var(--text-muted);font-size:.7rem}.lifecycle-process-score{display:grid;grid-template-columns:auto minmax(80px,1fr);gap:8px;align-items:center}.lifecycle-process-score strong{font-size:.78rem}.lifecycle-process-score progress{width:100%;height:7px;border:0;border-radius:var(--radius-pill,999px);overflow:hidden;accent-color:var(--color-primario);background:var(--surface-subtle)}
.lifecycle-task-list{margin-top:12px;border-top:1px solid var(--line-soft)}.lifecycle-task-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft)}.lifecycle-task-row:last-child{border-bottom:0}.lifecycle-task-state{width:28px;height:28px;border-radius:var(--radius-md,12px);display:grid;place-items:center;background:var(--surface-subtle);color:var(--warning,var(--amarillo))}.lifecycle-task-row.is-done .lifecycle-task-state{color:var(--success,var(--verde))}.lifecycle-task-copy{display:grid;gap:2px}.lifecycle-task-copy strong{font-size:.76rem;color:var(--text-main)}.lifecycle-task-copy small{font-size:.68rem;color:var(--text-muted)}.lifecycle-start-modal{width:min(540px,calc(100vw - 32px))}
.employee-lifecycle-processes{display:grid}.employee-lifecycle-process{border-top:1px solid var(--line-soft);padding:16px 18px}.employee-lifecycle-summary{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.employee-lifecycle-summary>div:first-child{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.employee-lifecycle-tasks{margin-top:12px}.employee-lifecycle-task{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line-soft)}.employee-lifecycle-task>div:nth-child(2){display:grid;gap:3px}.employee-lifecycle-task small{font-size:.7rem;color:var(--text-muted);line-height:1.4}.employee-lifecycle-task.is-done{opacity:.72}
html[data-theme="dark"] :is(.lifecycle-task-state){background:var(--surface-elevated)}
@media(max-width:860px){.lifecycle-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.lifecycle-config-grid{grid-template-columns:1fr}.lifecycle-list-head{display:grid;gap:12px}.lifecycle-filter{min-width:0;width:100%}.lifecycle-process-summary{grid-template-columns:1fr}.lifecycle-task-row,.employee-lifecycle-task{grid-template-columns:28px minmax(0,1fr)}.lifecycle-task-row>form,.employee-lifecycle-task>form{grid-column:2}.lifecycle-task-row .btn,.employee-lifecycle-task .btn{width:100%}.employee-lifecycle-summary{align-items:flex-start}.lifecycle-person-head>.btn{width:100%}}
@media(max-width:520px){.lifecycle-kpis{grid-template-columns:1fr}.lifecycle-person-process{padding:14px 16px}.employee-lifecycle-process{padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.lifecycle-process-score progress{transition:none!important}}

/* v2.7.0 — Core HR 3.2 / Document Automation */
.docauto-tabs{margin-top:var(--ui-section-gap,16px)}
.docauto-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:var(--ui-section-gap,16px) 0}.docauto-kpis>.stat-card{margin:0}
.docauto-list-card,.docauto-config-grid,.docauto-generate-grid{margin-top:var(--ui-section-gap,16px)}.docauto-table{min-width:980px}.docauto-table td>small{display:block;margin-top:3px;color:var(--text-muted);font-size:.7rem}.docauto-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.docauto-config-grid,.docauto-generate-grid{align-items:start}.docauto-template-form code,.docauto-variable-palette code{font-family:var(--font-ui)}.docauto-variable-palette{display:grid;gap:8px;padding:12px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle)}.docauto-variable-palette>strong{font-size:.74rem;color:var(--text-main)}.docauto-variable-palette>div{display:flex;gap:7px;flex-wrap:wrap}
.docauto-fields-list{display:grid}.docauto-field-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}.docauto-field-row>div{display:grid;gap:3px}.docauto-field-row small{font-size:.7rem;color:var(--text-muted)}.docauto-field-form{margin-top:18px}.docauto-template-preview{padding:24px;line-height:1.65;color:var(--text-main);background:var(--surface-subtle);border-radius:var(--radius-md,12px);min-height:360px}.docauto-template-preview table{width:100%;border-collapse:collapse}.docauto-template-preview td,.docauto-template-preview th{padding:8px;border:1px solid var(--line-soft)}
.docauto-person-card{scroll-margin-top:105px}.docauto-person-head{align-items:flex-start}.docauto-person-generate{display:flex;align-items:flex-end;gap:8px}.docauto-person-generate label{display:grid;gap:5px;font-size:.7rem;color:var(--text-muted)}.docauto-person-generate select{min-width:220px}.docauto-person-empty{display:flex;gap:10px;align-items:center;padding:14px 20px;border-top:1px solid var(--line-soft);color:var(--text-muted)}.docauto-person-empty>span{display:grid;gap:2px}.docauto-person-empty strong{color:var(--text-main);font-size:.78rem}.docauto-person-empty small{font-size:.7rem}.docauto-person-list{border-top:1px solid var(--line-soft)}.docauto-person-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line-soft)}.docauto-person-row:last-child{border-bottom:0}.docauto-person-row>div:first-child{display:grid;gap:3px}.docauto-person-row strong{font-size:.78rem;color:var(--text-main)}.docauto-person-row small{font-size:.69rem;color:var(--text-muted)}
html[data-theme="dark"] :is(.docauto-variable-palette,.docauto-template-preview){background:var(--surface-elevated)}
@media(max-width:860px){.docauto-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.docauto-config-grid,.docauto-generate-grid{grid-template-columns:1fr}.docauto-person-head{display:grid;gap:12px}.docauto-person-generate{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto}.docauto-person-generate label,.docauto-person-generate select{width:100%;min-width:0}.docauto-person-row{grid-template-columns:1fr;padding:12px 16px}.docauto-row-actions{justify-content:flex-start}}
@media(max-width:520px){.docauto-kpis{grid-template-columns:1fr}.docauto-person-generate{grid-template-columns:1fr}.docauto-person-generate .btn{width:100%}.docauto-row-actions>.btn,.docauto-row-actions>form{flex:1 1 100%}.docauto-row-actions>form>.btn{width:100%}}
@media(prefers-reduced-motion:reduce){.docauto-person-row,.docauto-variable-palette{transition:none!important}}
.employee-generated-signatures{border-top:1px solid var(--line-soft);padding:16px 18px}.employee-generated-signatures h3{margin:0;color:var(--text-main);font-size:.92rem}.employee-generated-signature{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:18px;align-items:start;padding:14px 0;border-top:1px solid var(--line-soft)}.employee-generated-signature>div:first-child{display:grid;gap:3px}.employee-generated-signature strong{font-size:.78rem;color:var(--text-main)}.employee-generated-signature small{font-size:.7rem;color:var(--text-muted)}
@media(max-width:860px){.employee-generated-signature{grid-template-columns:1fr}.employee-generated-signatures{padding:14px 16px}}

/* v2.7.1 — Document Template Field Dock / low-interaction authoring */
.docauto-template-toolbar{margin-top:var(--ui-section-gap,16px);display:flex;align-items:end;justify-content:space-between;gap:20px}.docauto-template-toolbar-copy{max-width:720px}.docauto-template-toolbar-copy h2{margin:4px 0 5px}.docauto-template-toolbar-copy p{margin:0;color:var(--text-muted)}.docauto-template-picker{display:grid;gap:6px;min-width:280px;font-size:.72rem;color:var(--text-muted)}
.docauto-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:16px;align-items:start;margin-top:16px}.docauto-editor-card{min-width:0}.docauto-save-state{font-size:.68rem;color:var(--text-muted)}.docauto-advanced{border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle);overflow:hidden}.docauto-advanced>summary{cursor:pointer;padding:12px 14px;font-size:.74rem;font-weight:500;color:var(--text-main)}.docauto-advanced-grid{padding:0 14px 14px}.docauto-editor-shell{border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);overflow:hidden;background:var(--surface-card)}.docauto-editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line-soft);background:var(--surface-subtle)}.docauto-editor-toolbar>span{font-size:.72rem;font-weight:700;color:var(--text-main)}.docauto-editor-shell textarea{display:block;width:100%;min-height:520px;border:0!important;border-radius:0!important;resize:vertical;padding:24px!important;background:var(--surface-card)!important;font-family:var(--font-ui);line-height:1.7}.docauto-editor-shell textarea:focus{box-shadow:inset 0 0 0 2px var(--focus-ring)!important}.docauto-template-help{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle);color:var(--text-muted)}.docauto-template-help p{margin:0;font-size:.72rem;line-height:1.5}.docauto-template-help strong{color:var(--text-main)}.docauto-save-template{justify-self:start}
.docauto-field-dock{position:sticky;top:92px;max-height:calc(100vh - 112px);overflow:auto}.docauto-field-search{display:block;padding:0 16px 10px}.docauto-source-note{display:flex;align-items:center;gap:8px;padding:0 16px 12px;color:var(--text-muted);font-size:.68rem}.docauto-catalog{display:grid;gap:12px;padding:0 10px 14px}.docauto-catalog-group{display:grid;gap:6px}.docauto-catalog-group h3,.docauto-manual-fields h3{margin:0;padding:0 6px;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-subtle)}.docauto-catalog-group>div{display:grid;gap:4px}.docauto-catalog-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:10px 10px;border:1px solid transparent;border-radius:var(--radius-md,12px);background:transparent;color:var(--text-main);cursor:pointer}.docauto-catalog-item:hover,.docauto-catalog-item:focus-visible{background:var(--surface-subtle);border-color:var(--line-soft);outline:none}.docauto-catalog-item>span:first-child{display:grid;gap:2px;min-width:0}.docauto-catalog-item strong{font-size:.73rem;font-weight:500}.docauto-catalog-item small{font-size:.64rem;color:var(--text-muted);white-space:normal}.docauto-insert-mark{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--surface-elevated);border:1px solid var(--line-soft);font-weight:700;color:var(--text-main)}.docauto-catalog-item.is-manual .docauto-insert-mark{border-style:dashed}.docauto-manual-fields{display:grid;gap:5px;padding:14px 10px;border-top:1px solid var(--line-soft)}.docauto-dock-section-title{display:flex;align-items:center;justify-content:space-between;padding:0 6px 4px}.docauto-dock-section-title span{font-size:.65rem;color:var(--text-muted)}.docauto-dock-empty{margin:0;padding:6px;font-size:.68rem;line-height:1.5;color:var(--text-muted)}.docauto-manual-builder{margin:0 10px 14px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);overflow:hidden}.docauto-manual-builder>summary{cursor:pointer;padding:10px 12px;font-size:.7rem;font-weight:500}.docauto-manual-builder form{padding:0 12px 12px}.docauto-code-field{display:none}
.docauto-missing-data{margin-top:16px;padding:16px;border:1px solid var(--warning-border,var(--line-soft));border-radius:var(--radius-lg,16px);background:var(--surface-card);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}.docauto-missing-data>div:first-child{display:flex;align-items:flex-start;gap:10px}.docauto-missing-data p{margin:3px 0 0;color:var(--text-muted);font-size:.72rem}.docauto-missing-list{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}.docauto-missing-list>span{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle)}.docauto-missing-list strong{font-size:.7rem}.docauto-missing-list small{font-size:.62rem;color:var(--text-muted)}.docauto-generation-field{display:grid;gap:5px}.docauto-generation-label{display:flex;align-items:center;gap:7px}.docauto-generation-label em{font-style:normal;font-size:.6rem;font-weight:500;color:var(--text-muted);padding:2px 6px;border:1px solid var(--line-soft);border-radius:var(--radius-pill)}.docauto-generation-field.is-auto input,.docauto-generation-field.is-auto textarea{background:var(--surface-subtle);color:var(--text-muted)}.docauto-generation-blocked{color:var(--text-muted);font-size:.68rem}
html[data-theme="dark"] :is(.docauto-advanced,.docauto-template-help,.docauto-editor-toolbar,.docauto-missing-list>span){background:var(--surface-elevated)}
@media(max-width:1000px){.docauto-editor-layout{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:860px){.docauto-template-toolbar{display:grid;align-items:stretch}.docauto-template-picker{min-width:0}.docauto-editor-layout{grid-template-columns:1fr}.docauto-field-dock{position:static;max-height:none}.docauto-editor-shell textarea{min-height:420px}.docauto-missing-data{grid-template-columns:1fr}.docauto-missing-data .btn{justify-self:start}}
@media(max-width:520px){.docauto-editor-toolbar{align-items:flex-start}.docauto-editor-shell textarea{min-height:360px;padding:18px!important}.docauto-source-note{align-items:flex-start}.docauto-catalog-item{padding:11px 8px}.docauto-missing-data .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.docauto-catalog-item{transition:none!important}}

/* v2.7.2 — Employee-first Document Automation UX */
.docauto-quick-generate{margin-top:var(--ui-section-gap,16px)}.docauto-quick-grid{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(240px,.8fr) auto;gap:12px;align-items:end}.docauto-quick-grid>label,.docauto-employee-search-wrap>label,.docauto-test-person>label{display:grid;gap:6px;font-size:.72rem;color:var(--text-muted)}
.docauto-employee-search-wrap,.docauto-test-person{position:relative}.docauto-employee-search{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-card);padding:0 10px;min-height:42px}.docauto-employee-search:focus-within{border-color:var(--focus-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus-ring) 18%,transparent)}.docauto-employee-search input{border:0!important;background:transparent!important;box-shadow:none!important;padding:9px 0!important;min-width:0}.docauto-employee-search>span{color:var(--text-subtle);display:grid}.docauto-employee-clear{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--text-muted);cursor:pointer;font-size:1rem;line-height:1}
.docauto-employee-results{position:absolute;z-index:35;left:0;right:0;top:calc(100% + 6px);border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);background:var(--surface-overlay);box-shadow:var(--shadow-lg);padding:6px;max-height:320px;overflow:auto}.docauto-employee-option{width:100%;border:0;background:transparent;color:var(--text-main);border-radius:var(--radius-md,12px);padding:10px;text-align:left;cursor:pointer}.docauto-employee-option:hover,.docauto-employee-option:focus-visible{outline:none;background:var(--surface-subtle)}.docauto-employee-option>span{display:grid;gap:3px}.docauto-employee-option strong{font-size:.76rem}.docauto-employee-option small,.docauto-employee-empty{font-size:.66rem;color:var(--text-muted);line-height:1.45}.docauto-employee-empty{padding:12px}
.docauto-selected-employee{display:grid;gap:2px;margin-top:7px;padding:9px 10px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle)}.docauto-selected-employee strong{font-size:.73rem;color:var(--text-main)}.docauto-selected-employee small{font-size:.64rem;color:var(--text-muted)}
.docauto-test-person{margin:0 12px 12px;padding:12px;border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);background:var(--surface-subtle);display:grid;gap:9px}.docauto-test-person .module-eyebrow{font-size:.62rem}.docauto-test-generate{justify-self:start}.docauto-field-live-value{font-weight:500!important;color:var(--text-main)!important}.docauto-catalog-item.is-missing-preview .docauto-field-live-value{color:var(--warning-text,var(--text-main))!important}.docauto-catalog-item.is-missing-preview{border-color:var(--warning-border,var(--line-soft))}
html[data-theme="dark"] :is(.docauto-employee-search,.docauto-employee-results){background:var(--surface-elevated)}html[data-theme="dark"] :is(.docauto-selected-employee,.docauto-test-person){background:var(--surface-subtle)}
@media(max-width:860px){.docauto-quick-grid{grid-template-columns:1fr}.docauto-quick-grid>.btn{justify-self:start}.docauto-employee-results{position:static;margin-top:6px}.docauto-test-person .docauto-employee-results{position:static}}
@media(max-width:520px){.docauto-quick-grid>.btn,.docauto-test-generate{width:100%}.docauto-test-person{margin:0 10px 12px}}
@media(prefers-reduced-motion:reduce){.docauto-employee-option,.docauto-employee-search{transition:none!important}}

/* v2.7.3 — Visual Document Composer */
.docauto-composer{border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);overflow:hidden;background:var(--surface-subtle)}
.docauto-composer-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 10px;border-bottom:1px solid var(--line-soft);background:var(--surface-card);position:sticky;top:0;z-index:2}
.docauto-toolbar-group{display:flex;align-items:center;gap:4px;padding-right:8px;border-right:1px solid var(--line-soft)}
.docauto-toolbar-group:last-child{border-right:0;padding-right:0}.docauto-toolbar-actions{margin-left:auto}
.docauto-format-select{height:34px!important;min-width:108px;padding:0 30px 0 10px!important;font-size:.72rem!important}
.docauto-tool{width:34px;height:34px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-main);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:600 .78rem/1 var(--font-ui)}
.docauto-tool:hover,.docauto-tool:focus-visible{background:var(--surface-subtle);outline:none;box-shadow:0 0 0 2px var(--focus-ring)}
.docauto-page-wrap{padding:26px;max-height:760px;overflow:auto;background:var(--surface-subtle)}
.docauto-page{width:min(100%,794px);min-height:980px;margin:0 auto;padding:72px 68px;background:var(--surface-card);border:1px solid var(--line-soft);border-radius:var(--radius-xs,4px);box-shadow:var(--shadow-sm);color:var(--text-main);font-family:var(--font-ui);font-size:.92rem;line-height:1.75;outline:none;overflow-wrap:anywhere}
.docauto-page:focus{box-shadow:0 0 0 2px var(--focus-ring),var(--shadow-sm)}
.docauto-page h1{font-size:1.55rem;line-height:1.25;margin:0 0 18px}.docauto-page h2{font-size:1.3rem;line-height:1.3;margin:0 0 16px}.docauto-page h3{font-size:1.08rem;line-height:1.35;margin:0 0 12px}.docauto-page p{margin:0 0 13px}.docauto-page ul,.docauto-page ol{padding-left:24px;margin:0 0 14px}.docauto-page table{width:100%;border-collapse:collapse;margin:14px 0}.docauto-page th,.docauto-page td{border:1px solid var(--line-soft);padding:8px 10px;text-align:left}.docauto-page blockquote{margin:14px 0;padding:8px 14px;border-left:3px solid var(--brand-primary);color:var(--text-muted)}
.docauto-data-chip{display:inline-flex;align-items:center;vertical-align:baseline;max-width:100%;padding:2px 8px;border-radius:var(--radius-pill);background:var(--surface-subtle);border:1px solid var(--line-soft);color:var(--brand-primary);font-size:.88em;font-weight:500;white-space:nowrap;user-select:none}
.docauto-data-chip::before{content:'•';margin-right:5px;font-size:.8em}.docauto-data-chip.is-preview{background:var(--surface-elevated);color:var(--text-main);border-style:solid}.docauto-data-chip.is-preview::before{content:'✓';color:var(--success)}.docauto-data-chip.is-missing{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line-soft))}.docauto-data-chip.is-missing::before{content:'!'}
.docauto-logo-chip{display:flex;width:100%;min-height:70px;align-items:center;justify-content:flex-start;margin:4px 0 22px;user-select:none}.docauto-logo-chip img{display:block;max-width:210px;max-height:72px;object-fit:contain}.docauto-logo-chip:not(:has(img)){border:1px dashed var(--line-soft);border-radius:var(--radius-md);padding:12px;color:var(--text-muted);font-size:.74rem}
.docauto-brand-hint{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle);font-size:.72rem;color:var(--text-muted)}.docauto-brand-hint a{margin-left:auto;font-weight:500;color:var(--brand-primary)}
html[data-theme="dark"] .docauto-page{background:var(--surface-card)}
@media(max-width:860px){.docauto-composer-toolbar{position:static}.docauto-toolbar-actions{width:100%;margin-left:0}.docauto-toolbar-actions .btn{flex:1}.docauto-page-wrap{padding:14px;max-height:none}.docauto-page{min-height:720px;padding:42px 30px}.docauto-toolbar-group{padding-right:5px}}
@media(max-width:520px){.docauto-page{padding:34px 22px;font-size:.88rem}.docauto-page-wrap{padding:8px}.docauto-format-select{min-width:94px}.docauto-tool{width:32px;height:32px}.docauto-brand-hint{align-items:flex-start;flex-wrap:wrap}.docauto-brand-hint a{margin-left:24px}}
@media(prefers-reduced-motion:reduce){.docauto-page,.docauto-tool{scroll-behavior:auto;transition:none!important}}

/* v2.7.4 — Employee-aware field palette + Signature Layout */
.docauto-composer-toolbar{padding:11px 12px;gap:10px}.docauto-toolbar-group{gap:6px}.docauto-tool{width:42px;height:42px;font-size:1rem;border:1px solid transparent}.docauto-tool strong,.docauto-tool em,.docauto-tool u{font-size:1.05rem}.docauto-format-select{height:42px!important;font-size:.8rem!important;min-width:122px}.docauto-toolbar-actions .btn{min-height:42px;padding-inline:14px;font-size:.76rem}.docauto-toolbar-actions .btn svg{width:17px;height:17px}
.docauto-page{display:flex;flex-direction:column}.docauto-page-content{min-height:760px;outline:none}.docauto-page-content:focus{outline:none}.docauto-page:has(.docauto-page-content:focus){box-shadow:0 0 0 2px var(--focus-ring),var(--shadow-sm)}
.docauto-field-live-value{display:block!important;margin-top:5px;font-size:.72rem!important;line-height:1.35;color:var(--text-main)!important;white-space:normal}.docauto-field-proof{display:inline-flex;margin-top:5px;width:max-content;padding:2px 7px;border-radius:var(--radius-pill);font-size:.61rem!important;font-weight:700;color:var(--text-muted);background:var(--surface-subtle)}.docauto-field-proof[data-status="verified"]{color:var(--success);background:color-mix(in srgb,var(--success) 11%,transparent)}.docauto-catalog-item.is-verified-preview{border-color:color-mix(in srgb,var(--success) 30%,var(--line-soft))}.docauto-catalog-item.is-verified-preview .docauto-insert-mark{color:var(--success)}
.docauto-signature-config{border:1px solid var(--line-soft);border-radius:var(--radius-lg,16px);padding:16px;background:var(--surface-card);display:grid;gap:14px}.docauto-signature-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.docauto-signature-head h3{margin:3px 0 4px;font-size:1rem}.docauto-signature-head p{margin:0;color:var(--text-muted);font-size:.74rem;max-width:640px}.docauto-signature-toggle{flex:0 0 auto}.docauto-signers{display:grid;gap:9px}.docauto-signer-row{display:grid;grid-template-columns:28px minmax(130px,.9fr) minmax(130px,1fr) minmax(150px,1.2fr) minmax(130px,1fr) 36px;gap:8px;align-items:end;padding:10px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle)}.docauto-signer-row label{font-size:.66rem;color:var(--text-muted)}.docauto-signer-row :is(input,select){margin-top:4px}.docauto-signer-order{width:28px;height:28px;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--surface-elevated);font-size:.7rem;font-weight:700;color:var(--text-muted);align-self:center}.docauto-signer-remove{width:34px;height:34px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-size:1.25rem;cursor:pointer}.docauto-signer-remove:hover,.docauto-signer-remove:focus-visible{background:var(--surface-elevated);color:var(--danger);outline:none;box-shadow:0 0 0 2px var(--focus-ring)}.docauto-signature-actions{display:flex;align-items:center;gap:12px}.docauto-signature-actions span{font-size:.68rem;color:var(--text-muted)}.docauto-signature-method{padding-top:4px;border-top:1px solid var(--line-soft)}
.docauto-signature-preview{margin-top:auto;padding-top:60px}.docauto-signature-preview[hidden]{display:none}.docauto-signature-preview-title{font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:22px;text-transform:uppercase;letter-spacing:.08em}.docauto-signature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 36px}.docauto-signature-box{display:grid;gap:4px;text-align:center;min-height:84px;align-content:end}.docauto-signature-line{display:block;border-top:1px solid var(--text-main);margin-bottom:7px}.docauto-signature-box strong{font-size:.76rem}.docauto-signature-box small{font-size:.65rem;color:var(--text-muted)}
html[data-theme="dark"] .docauto-signature-config{background:var(--surface-card)}
@media(max-width:1100px){.docauto-signer-row{grid-template-columns:28px repeat(2,minmax(0,1fr)) 36px}.docauto-signer-row label:nth-of-type(3),.docauto-signer-row label:nth-of-type(4){grid-column:auto}.docauto-signer-remove{grid-column:-2/-1;grid-row:1}}
@media(max-width:860px){.docauto-tool{width:40px;height:40px}.docauto-signature-head{display:grid}.docauto-signature-toggle{justify-self:start}.docauto-signer-row{grid-template-columns:28px 1fr 36px}.docauto-signer-row label{grid-column:2}.docauto-signer-remove{grid-column:3;grid-row:1}.docauto-signature-method{grid-template-columns:1fr!important}.docauto-signature-grid{grid-template-columns:1fr;gap:38px}.docauto-page-content{min-height:600px}}
@media(max-width:520px){.docauto-composer-toolbar{gap:7px}.docauto-toolbar-group{gap:3px}.docauto-tool{width:38px;height:38px}.docauto-format-select{height:38px!important;min-width:104px}.docauto-toolbar-actions .btn{min-height:40px}.docauto-signature-config{padding:12px}.docauto-signature-actions{align-items:flex-start;flex-direction:column}.docauto-signature-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.docauto-signer-remove{transition:none!important}}

/* v2.7.5 — clearer document composer controls and employee-bound field catalog */
.docauto-composer-toolbar{padding:12px 14px;gap:10px;min-height:64px}
.docauto-tool{width:48px!important;height:48px!important;min-width:48px;display:inline-grid!important;place-items:center;padding:0!important;border-radius:var(--radius-md,12px)!important}
.docauto-tool-glyph{display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem!important;line-height:1;font-weight:500;color:var(--text-main)}
.docauto-tool-glyph.is-bold{font-weight:700}.docauto-tool-glyph.is-italic{font-family:serif;font-style:italic;font-weight:700}.docauto-tool-glyph.is-underline{text-decoration:underline;text-underline-offset:3px}.docauto-tool-glyph.is-list{font-size:1.18rem!important;letter-spacing:-.06em}.docauto-tool-glyph.is-align{font-size:1.4rem!important;transform:scaleX(1.15);transform-origin:left}.docauto-tool-glyph.is-align.is-center{transform:scaleX(.9);transform-origin:center}.docauto-tool-glyph.is-align.is-right{transform:scaleX(1.15);transform-origin:right}
.docauto-format-select{height:48px!important;min-width:130px!important;font-size:.86rem!important}.docauto-toolbar-actions .btn{min-height:48px!important;font-size:.82rem!important;padding-inline:15px!important;gap:7px}.docauto-toolbar-actions .btn svg{width:19px!important;height:19px!important}
.docauto-field-dock{max-height:calc(100vh - 96px)}.docauto-catalog-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 16px 10px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle)}.docauto-catalog-summary strong{font-size:.76rem}.docauto-catalog-summary span{font-size:.66rem;color:var(--text-muted)}
.docauto-catalog{gap:14px;padding:0 12px 18px}.docauto-catalog-group h3{font-size:.7rem;padding:0 4px 3px}.docauto-catalog-item.is-employee-field{padding:12px!important;border-color:var(--line-soft);background:var(--surface-card)}.docauto-catalog-item.is-employee-field:hover,.docauto-catalog-item.is-employee-field:focus-visible{background:var(--surface-subtle)}.docauto-catalog-item.is-employee-field strong{font-size:.78rem!important}.docauto-catalog-item.is-employee-field .docauto-field-live-value{font-size:.8rem!important;font-weight:700!important;margin-top:4px;color:var(--text-main)!important}.docauto-catalog-item.is-employee-field [data-doc-field-origin]{margin-top:3px;font-size:.62rem!important}.docauto-catalog-item.is-employee-field .docauto-insert-mark{width:32px;height:32px;font-size:1rem}.docauto-catalog-item.is-missing-preview .docauto-field-live-value{font-weight:500!important}.docauto-source-note{font-size:.72rem;line-height:1.45}
@media(max-width:860px){.docauto-tool{width:46px!important;height:46px!important;min-width:46px}.docauto-toolbar-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.docauto-toolbar-actions .btn{min-width:0;padding-inline:10px!important}}
@media(max-width:520px){.docauto-tool{width:44px!important;height:44px!important;min-width:44px}.docauto-tool-glyph{font-size:1.2rem!important}.docauto-toolbar-actions{grid-template-columns:1fr 1fr 1fr}.docauto-toolbar-actions .btn{font-size:.72rem!important}.docauto-catalog-summary{align-items:flex-start;flex-direction:column}}


/* =========================================================
   v2.7.6 · Pre-2.8 Design System Unification
   Authoritative consolidation for Core HR 3.x + shell mobile.
   ========================================================= */
.test-mode-shell-alert{margin-bottom:var(--ui-section-gap,16px)}

/* Recent modules keep the global mobile KPI density: two useful cards per row. */
@media(max-width:520px){
  .lifecycle-kpis,
  .docauto-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:360px){
  .lifecycle-kpis,
  .docauto-kpis{
    gap:8px;
  }
}

/* Recent module controls consume the same global control geometry. */
.docauto-format-select,
.docauto-toolbar-actions .btn{
  min-height:var(--control-height-md,44px);
}

/* Notification trigger is an explicit mobile interaction surface. */
@media(max-width:860px){
  .topbar-movil [data-mobile-notifications]{
    position:relative !important;
    z-index:3;
    pointer-events:auto !important;
  }
  .topbar-movil [data-mobile-notifications-toggle]{
    position:relative;
    z-index:4;
    pointer-events:auto !important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
}


/* =========================================================
   v2.7.7 · Pre-2.8 Visual Unification — Iconography + DataViz
   ========================================================= */
/* Emphasis icons use one White Label-owned tile. Semantic status icons remain semantic. */
:is(.empty-state-icon,.empty-state-modern .empty-state-icon,.empty-state-card .empty-state-icon){
  width:var(--icon-emphasis-size)!important;
  height:var(--icon-emphasis-size)!important;
  border-radius:var(--icon-emphasis-radius)!important;
  display:grid!important;
  place-items:center!important;
  background:var(--icon-emphasis-bg)!important;
  color:var(--icon-emphasis-fg)!important;
  border:1px solid color-mix(in srgb,var(--color-primario) 13%,var(--line-soft))!important;
  box-shadow:0 8px 24px color-mix(in srgb,var(--color-primario) 7%,transparent);
}
/* Legacy `vacio` is normalized without forcing per-view rewrites. */
.vacio{
  min-height:180px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:28px 20px;
  text-align:center;
  color:var(--text-muted);
}
.vacio>svg{
  box-sizing:border-box;
  width:var(--icon-emphasis-size)!important;
  height:var(--icon-emphasis-size)!important;
  padding:12px;
  border-radius:var(--icon-emphasis-radius);
  background:var(--icon-emphasis-bg);
  color:var(--icon-emphasis-fg);
  border:1px solid color-mix(in srgb,var(--color-primario) 13%,var(--line-soft));
  box-shadow:0 8px 24px color-mix(in srgb,var(--color-primario) 7%,transparent);
}
.vacio h2,.vacio h3{margin:0;color:var(--text-main);font-size:var(--type-component-title,.875rem);line-height:1.3}
.vacio p{margin:0;max-width:var(--empty-state-max,480px);color:var(--text-muted);font-size:var(--type-meta,.72rem);line-height:1.55}

/* Existing brand-emphasis icon families share the same physics. */
:is(.command-hint-icon,.global-create-icon,.module-control-icon,.org-dash-icon){
  background:var(--icon-emphasis-bg);
  color:var(--icon-emphasis-fg);
  border-color:color-mix(in srgb,var(--color-primario) 13%,var(--line-soft));
}

/* Data visualization: brand-owned series, semantic colors only where meaning is semantic. */
.analytics-bar-chart .series-brand-1,.supervision-history-chart .series-brand-1{fill:var(--chart-brand-1)}
.analytics-bar-chart .series-brand-2,.supervision-history-chart .series-brand-2{fill:var(--chart-brand-2)}
.analytics-bar-chart .series-brand-3,.supervision-history-chart .series-brand-3{fill:var(--chart-brand-3)}
.analytics-legend i.is-brand-1,.supervision-chart-legend i.is-brand-1{background:var(--chart-brand-1)}
.analytics-legend i.is-brand-2,.supervision-chart-legend i.is-brand-2{background:var(--chart-brand-2)}
.analytics-legend i.is-brand-3,.supervision-chart-legend i.is-brand-3{background:var(--chart-brand-3)}
.analytics-chart-panel{
  --chart-panel-accent:var(--chart-brand-soft);
}
.analytics-bar-chart rect,.analytics-donut-chart circle,.supervision-history-chart rect{
  transition:opacity .16s ease,filter .16s ease;
}
.analytics-bar-chart rect:hover,.analytics-donut-chart circle:hover,.supervision-history-chart rect:hover{
  filter:saturate(1.08);
  opacity:.9;
}
html[data-theme="dark"]{
  --chart-brand-2:color-mix(in srgb,var(--color-primario) 74%,white);
  --chart-brand-3:color-mix(in srgb,var(--color-primario) 52%,white);
  --chart-brand-4:color-mix(in srgb,var(--color-primario) 32%,white);
  --icon-emphasis-bg:color-mix(in srgb,var(--color-primario) 18%,var(--surface-card));
}
@media(prefers-reduced-motion:reduce){
  .analytics-bar-chart rect,.analytics-donut-chart circle,.supervision-history-chart rect{transition:none!important}
}


/* v2.7.19 · Floow typography prerequisite bootstrap */
.release-font-prereq-head{align-items:flex-start;gap:14px}
.release-font-prereq-head>.badge{flex:0 0 auto}
.release-font-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.release-font-status{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:10px 11px;border:1px solid var(--line-soft);border-radius:var(--radius-md,12px);background:var(--surface-subtle)}
.release-font-status>span{flex:0 0 auto;margin-top:1px;color:var(--text-subtle)}
.release-font-status.ok>span{color:var(--semantic-success,var(--verde))}
.release-font-status>div{display:grid;gap:2px;min-width:0}
.release-font-status strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;color:var(--text-main)}
.release-font-status small{font-size:.68rem;color:var(--text-muted)}
.release-font-upload-form{display:flex;align-items:center;gap:10px;margin-top:14px}
.release-font-upload-form .release-font-dropzone{flex:1;min-height:96px}
.release-font-admin-note{margin:14px 0 0}
@media(max-width:860px){
  .release-font-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .release-font-upload-form{display:grid}
  .release-font-upload-form>.btn{justify-self:start}
}
@media(max-width:520px){
  .release-font-status-grid{grid-template-columns:1fr}
}


/* ============================================================
   v2.7.26 · Pre-2.8 Visual System Consolidation
   Cross-cutting geometry, icon rhythm and semantic view cleanup.
   ============================================================ */
:root{
  --icon-ui-sm:16px;
  --icon-ui-md:18px;
  --icon-ui-lg:22px;
  --icon-text-gap:8px;
  --control-action-height:var(--control-height-md);
  --surface-control:var(--surface-card);
  --surface-control-disabled:color-mix(in srgb,var(--surface-subtle) 88%,var(--surface-card));
}

/* Icon + text rhythm: one shared visual grammar. */
:where(.btn,.tab,.nav-link,.document-view-btn){
  gap:var(--icon-text-gap);
}
:where(.btn,.tab,.nav-link,.document-view-btn) > svg{
  width:var(--icon-ui-md);
  height:var(--icon-ui-md);
  flex:0 0 var(--icon-ui-md);
}
.btn-sm > svg{
  width:var(--icon-ui-sm);
  height:var(--icon-ui-sm);
  flex-basis:var(--icon-ui-sm);
}
:where(.empty-state-icon,.empty-state-modern .empty-state-icon,.icon-badge) > svg{
  width:var(--icon-ui-lg);
  height:var(--icon-ui-lg);
}

/* Capture controls: preserve global geometry and align primary form actions. */
:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="file"],
  select
){
  min-height:var(--control-height-md);
  border-radius:var(--radius-md);
}
:where(.form-actions,.form-footer-actions,.filter-actions) .btn:not(.btn-sm),
form > .btn[type="submit"],
form .form-actions .btn[type="submit"]{
  min-height:var(--control-action-height);
}
:where(input,select,textarea):disabled,
:where(input,select,textarea)[readonly]{
  background:var(--surface-control-disabled);
  color:var(--text-muted);
}
:where(input,select,textarea)::placeholder{
  color:var(--text-subtle);
  opacity:1;
}

/* Tabs and compact states must align without changing routing semantics. */
.tabs > .tab,
.tabs-global > :is(a,button),
.tab-list > :is(a,button){
  min-height:40px;
  display:inline-flex;
  align-items:center;
}
.badge,
.status-badge,
.semantic-badge{
  min-height:24px;
  align-items:center;
}

/* Dense tables: alignment belongs to cells; overflow remains owned by table wrappers. */
:where(.data-table,.table-enterprise) :is(th,td){
  vertical-align:middle;
}
:where(.data-table,.table-enterprise) th > :is(svg,.sort-icon){
  width:var(--icon-ui-sm);
  height:var(--icon-ui-sm);
}

/* Migrated semantic helpers replacing legacy inline typography. */
.comparacion-head{
  color:var(--text-muted);
  font-size:var(--type-table-head,.6875rem);
  font-weight:700;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.internal-notes-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.internal-note-card{
  padding:10px 14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.internal-note-meta{
  margin-bottom:var(--space-1);
  color:var(--text-muted);
  font-size:var(--type-caption,.75rem);
}
.internal-note-meta strong{
  color:var(--text-main);
}
.internal-note-body{
  color:var(--text-main);
  font-size:var(--type-body,.875rem);
  line-height:1.5;
  white-space:pre-wrap;
}

html[data-theme="dark"] .internal-note-card{
  background:var(--surface-elevated);
  border-color:var(--border-subtle);
}

@media(max-width:700px){
  :where(.btn,.tab,.nav-link,.document-view-btn) > svg{
    flex-shrink:0;
  }
  .internal-note-card{
    padding:10px 12px;
  }
}


/* ============================================================
   v2.7.27 · Pre-2.8 Surface, Spacing & Density Consolidation
   One authoritative rhythm for shared product surfaces.
   ============================================================ */
:root{
  --surface-stack-gap:var(--space-4);
  --surface-card-padding:var(--space-5);
  --surface-card-padding-compact:var(--space-4);
  --surface-header-gap:var(--space-3);
  --surface-copy-gap:var(--space-1);
  --surface-section-gap:var(--space-5);
  --surface-radius:var(--radius-lg);
  --surface-radius-compact:var(--radius-md);

  --state-min-h:40px;
  --state-padding-y:10px;
  --state-padding-x:12px;
  --state-gap:8px;

  --density-table-row:48px;
  --density-table-x:12px;
  --density-table-y:10px;

  /* Final mobile authority. Earlier generations may remain for compatibility,
     but these are the values consumed by shared surfaces from this layer on. */
  --mobile-page-gap:12px;
  --mobile-card-padding:13px;
  --mobile-card-radius:15px;
  --mobile-section-gap:14px;
}

/* Shared static surfaces: calm, token-driven, never glass. */
:where(
  .surface-panel,
  .form-section,
  .chart-card,
  .dashboard-section,
  .data-table-shell,
  .table-shell
){
  border-color:var(--border-subtle);
  border-radius:var(--surface-radius);
  background:var(--surface-card);
}

/* Do not force bespoke component internals; normalize only top-level card rhythm. */
.content > .card:not(.stat-card):not(.auth-card):not(.auth-card-premium){
  border-radius:var(--surface-radius);
}
.surface-panel,
.form-section{
  padding:var(--surface-card-padding);
}

/* Header stacks across cards/modules. */
:where(
  .card-header,
  .dashboard-section-header,
  .section-title-row,
  .chart-header,
  .report-chart-header
){
  gap:var(--surface-header-gap);
}
:where(
  .card-header,
  .dashboard-section-header,
  .section-title-row
) > :where(div,.heading-copy,.section-heading){
  min-width:0;
}
:where(
  .card-header,
  .dashboard-section-header,
  .section-title-row
) :where(h1,h2,h3){
  margin-top:0;
  margin-bottom:0;
}
:where(
  .card-header,
  .dashboard-section-header,
  .section-title-row
) :where(h1,h2,h3) + p{
  margin-top:var(--surface-copy-gap);
}

/* Shared vertical stacking for explicitly structured page groups. */
:where(
  .dashboard-primary,
  .dashboard-secondary,
  .settings-page,
  .profile-page,
  .help-page,
  .document-hub-audit
){
  gap:var(--surface-stack-gap);
}

/* Enterprise table density has a single authority. */
:root{
  --table-row-h:var(--density-table-row);
  --table-cell-x:var(--density-table-x);
  --table-cell-y:var(--density-table-y);
}
.data-table td,
.table-enterprise td{
  min-height:var(--density-table-row);
  padding:var(--density-table-y) var(--density-table-x);
}
.data-table th,
.table-enterprise th{
  padding:9px var(--density-table-x);
}

/* Semantic state surfaces: same geometry, semantic color remains semantic. */
:where(.alerta,.validation-summary,.form-validation-summary){
  min-height:var(--state-min-h);
  gap:var(--state-gap);
  padding:var(--state-padding-y) var(--state-padding-x);
  border-radius:var(--surface-radius-compact);
}
.alerta-error{
  border:1px solid color-mix(in srgb,var(--semantic-danger) 22%,transparent);
}
.alerta-exito{
  border:1px solid color-mix(in srgb,var(--semantic-success) 22%,transparent);
}
:where(.alerta-warning,.alerta-aviso){
  border:1px solid color-mix(in srgb,var(--semantic-warning) 24%,transparent);
}
:where(.alerta-info,.alerta-informacion){
  border:1px solid color-mix(in srgb,var(--semantic-info) 22%,transparent);
}

/* Empty states share the same calm spacing hierarchy. */
.empty-state,
.empty-state-modern{
  gap:var(--surface-header-gap);
  padding:calc(var(--surface-card-padding) + var(--space-2)) var(--surface-card-padding);
}
.empty-state :where(p,.empty-state-copy),
.empty-state-modern :where(p,.empty-state-copy){
  line-height:1.5;
}

/* Tabs/segmented surfaces share outer geometry without changing active logic. */
:where(.section-tabs,.expediente-section-tabs,.supervision-tabs,.segmented-control){
  border-radius:var(--surface-radius-compact);
}

/* Dark mode follows exactly the same hierarchy. */
html[data-theme="dark"] :where(
  .surface-panel,
  .form-section,
  .chart-card,
  .dashboard-section,
  .data-table-shell,
  .table-shell
){
  background:var(--surface-card);
  border-color:var(--border-subtle);
}

/* Mobile: explicit final authority for shared surfaces and page cadence. */
@media(max-width:860px){
  :root{
    --surface-card-padding:var(--mobile-card-padding);
    --surface-stack-gap:var(--mobile-page-gap);
    --surface-section-gap:var(--mobile-section-gap);
    --surface-radius:var(--mobile-card-radius);
  }

  .content > :where(
    .card,
    .surface-panel,
    .form-section,
    .chart-card,
    .dashboard-section,
    .data-table-shell,
    .table-shell
  ) + :where(
    .card,
    .surface-panel,
    .form-section,
    .chart-card,
    .dashboard-section,
    .data-table-shell,
    .table-shell
  ){
    margin-top:var(--mobile-page-gap) !important;
  }

  .surface-panel,
  .form-section,
  .chart-card,
  .dashboard-chart{
    padding:var(--mobile-card-padding) !important;
    border-radius:var(--mobile-card-radius) !important;
  }

  .data-table-shell,
  .table-shell{
    border-radius:var(--mobile-card-radius) !important;
  }

  :where(.card-header,.dashboard-section-header,.section-title-row){
    gap:10px;
  }

  .empty-state,
  .empty-state-modern{
    min-height:156px;
    padding:20px 14px;
  }
}

@media(max-width:520px){
  :root{
    --density-table-x:10px;
    --density-table-y:9px;
  }
}


/* ============================================================
   v2.7.28 · Pre-2.8 Interactive States & Visual Accessibility
   Shared hover / pressed / focus / disabled / selected grammar.
   ============================================================ */
:root{
  --interactive-hover:color-mix(in srgb,var(--text-main) 5%,transparent);
  --interactive-pressed:color-mix(in srgb,var(--text-main) 8%,transparent);
  --interactive-selected:color-mix(in srgb,var(--color-primario) 9%,var(--surface-card));
  --interactive-selected-strong:color-mix(in srgb,var(--color-primario) 14%,var(--surface-card));
  --interactive-border-hover:color-mix(in srgb,var(--color-primario) 28%,var(--border-default));
  --interactive-disabled-opacity:.46;
  --interactive-focus-width:3px;
  --interactive-touch-min:44px;
}

/* Keyboard focus is always visible and token-driven. */
:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 var(--interactive-focus-width) var(--focus-ring);
}

/* Buttons: semantic appearance is preserved; state behavior is unified. */
.btn{
  transition:
    background-color var(--motion-fast,.14s) ease,
    border-color var(--motion-fast,.14s) ease,
    color var(--motion-fast,.14s) ease,
    box-shadow var(--motion-fast,.14s) ease,
    transform var(--motion-fast,.14s) ease;
}
@media(hover:hover){
  .btn-secundario:not(:disabled):not([aria-disabled="true"]):hover{
    background:var(--surface-subtle);
    border-color:var(--interactive-border-hover);
    color:var(--text-main);
  }
  .btn-primario:not(:disabled):not([aria-disabled="true"]):hover{
    filter:none;
    background:color-mix(in srgb,var(--color-primario) 90%,black);
  }
  .btn-peligro:not(:disabled):not([aria-disabled="true"]):hover{
    background:color-mix(in srgb,var(--semantic-danger) 14%,var(--surface-card));
  }
  .btn-exito:not(:disabled):not([aria-disabled="true"]):hover{
    background:color-mix(in srgb,var(--semantic-success) 14%,var(--surface-card));
  }
}
.btn:not(:disabled):not([aria-disabled="true"]):active{
  transform:translateY(1px) scale(.99);
}
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:var(--interactive-disabled-opacity);
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
}

/* Form controls: focus, invalid, disabled and read-only all communicate state. */
:where(input,select,textarea):focus-visible{
  border-color:var(--color-primario);
  box-shadow:0 0 0 var(--interactive-focus-width) var(--focus-ring);
}
:where(input,select,textarea):disabled{
  opacity:.72;
  cursor:not-allowed;
}
:where(input,select,textarea)[aria-invalid="true"],
:where(input,select,textarea).is-invalid{
  border-color:var(--semantic-danger);
}
:where(input,select,textarea)[aria-invalid="true"]:focus-visible,
:where(input,select,textarea).is-invalid:focus-visible{
  box-shadow:0 0 0 var(--interactive-focus-width) color-mix(in srgb,var(--semantic-danger) 20%,transparent);
}

/* Tabs / segmented controls: active/selected state works with class or ARIA. */
:where(.tab,.section-tab,.segment-option,[role="tab"]){
  transition:
    background-color var(--motion-fast,.14s) ease,
    border-color var(--motion-fast,.14s) ease,
    color var(--motion-fast,.14s) ease,
    box-shadow var(--motion-fast,.14s) ease;
}
@media(hover:hover){
  :where(.tab,.section-tab,.segment-option,[role="tab"]):not(.active):not(.is-active):not([aria-selected="true"]):hover{
    background:var(--interactive-hover);
    color:var(--text-main);
  }
}
:where(
  .tab.active,
  .section-tab.active,
  .segment-option.active,
  .segment-option.is-active,
  [role="tab"][aria-selected="true"]
){
  background:var(--interactive-selected);
  color:var(--color-primario);
  border-color:color-mix(in srgb,var(--color-primario) 32%,var(--border-subtle));
}
:where(.tab,.section-tab,.segment-option,[role="tab"]):active{
  background:var(--interactive-pressed);
}

/* Selectable/interactable data rows. Passive rows keep their existing calm hover. */
:where(
  .data-table tbody tr[data-href],
  .table-enterprise tbody tr[data-href],
  .data-table tbody tr[role="button"],
  .table-enterprise tbody tr[role="button"],
  .data-table tbody tr.is-clickable,
  .table-enterprise tbody tr.is-clickable
){
  cursor:pointer;
}
@media(hover:hover){
  :where(
    .data-table tbody tr[data-href],
    .table-enterprise tbody tr[data-href],
    .data-table tbody tr[role="button"],
    .table-enterprise tbody tr[role="button"],
    .data-table tbody tr.is-clickable,
    .table-enterprise tbody tr.is-clickable
  ):hover{
    background:var(--interactive-hover);
  }
}
:where(
  .data-table tbody tr.is-selected,
  .table-enterprise tbody tr.is-selected,
  .data-table tbody tr[aria-selected="true"],
  .table-enterprise tbody tr[aria-selected="true"]
){
  background:var(--interactive-selected);
  box-shadow:inset 3px 0 0 var(--color-primario);
}

/* Icon controls and summaries retain a minimum tactile target. */
:where(
  .btn-icono-cabecera,
  .global-create-trigger,
  .date-picker-nav,
  .activity-center-close,
  .drawer-close,
  summary[role="button"]
){
  touch-action:manipulation;
}
:where(.btn-icono-cabecera,.global-create-trigger,.activity-center-close,.drawer-close){
  min-width:var(--interactive-touch-min);
  min-height:var(--interactive-touch-min);
}

/* Dark mode changes contrast, not interaction hierarchy. */
html[data-theme="dark"]{
  --interactive-hover:color-mix(in srgb,var(--text-main) 7%,transparent);
  --interactive-pressed:color-mix(in srgb,var(--text-main) 11%,transparent);
  --interactive-selected:color-mix(in srgb,var(--color-primario) 15%,var(--surface-card));
  --interactive-selected-strong:color-mix(in srgb,var(--color-primario) 20%,var(--surface-card));
}
html[data-theme="dark"] .btn-secundario{
  background:var(--surface-elevated) !important;
  color:var(--text-main) !important;
  border-color:var(--border-default) !important;
}
@media(hover:hover){
  html[data-theme="dark"] .btn-secundario:not(:disabled):not([aria-disabled="true"]):hover{
    background:var(--surface-subtle) !important;
    border-color:var(--interactive-border-hover) !important;
  }
}

/* Touch screens must not depend on hover to communicate selection. */
@media(hover:none){
  :where(.tab,.section-tab,.segment-option,[role="tab"]):active,
  .btn:not(:disabled):not([aria-disabled="true"]):active{
    transition-duration:80ms;
  }
}

/* Motion preference always wins. */
@media(prefers-reduced-motion:reduce){
  .btn,
  :where(.tab,.section-tab,.segment-option,[role="tab"]),
  :where(.data-table,.table-enterprise) tbody tr{
    transition:none !important;
  }
  .btn:active{
    transform:none !important;
  }
}


/* ============================================================
   v2.7.29 · Pre-2.8 Responsive & Mobile Product UX
   Final responsive authority for app chrome, scroll ownership,
   safe areas, mobile sheets and action ergonomics.
   ============================================================ */
:root{
  --app-breakpoint-mobile:860px;
  --mobile-content-gutter:12px;
  --mobile-chrome-inset:18px;
  --mobile-topbar-h:64px;
  --mobile-bottom-nav-h:78px;
  --mobile-content-top:14px;
  --mobile-content-bottom-extra:30px;
  --mobile-sheet-radius:24px;
  --mobile-sheet-max-h:calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* Page-level overflow is never the escape hatch for wide module content. */
html,
body,
.app-shell,
.main,
.contenido,
.content{
  max-width:100%;
}
html,
body{
  overflow-x:clip;
}
.main,
.contenido,
.content{
  min-width:0;
}

/* Data/timeline/navigation surfaces own their horizontal pan. */
:where(
  .tabla-wrap,
  .data-table-scroll,
  .table-scroll,
  .supervision-table-wrap,
  .analytics-chart-scroll,
  .supervision-chart-scroll,
  .horizontal-card-rail,
  .section-tabs,
  .expediente-section-tabs,
  .supervision-tabs,
  .organization-tabs,
  .settings-section-nav,
  .help-topic-nav,
  .form-stepper
){
  max-width:100%;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

/* Desktop shell is explicitly authoritative above the shared breakpoint. */
@media(min-width:861px){
  .desktop-sidebar,
  .app-header{
    display:flex;
  }
  .topbar-movil,
  .mobile-more-sheet,
  .mobile-more-overlay,
  .bottom-nav-movil{
    display:none !important;
  }
}

/* Mobile is an app shell, not a shrunken desktop. */
@media(max-width:860px){
  :root{
    --mobile-page-gutter:var(--mobile-content-gutter);
    --mobile-layer-inset:var(--mobile-chrome-inset);
    --mobile-bottom-nav-h:78px;
  }

  body{
    min-width:0;
    overscroll-behavior-y:auto;
  }

  .desktop-sidebar,
  .app-header{
    display:none !important;
  }

  .topbar-movil{
    min-height:calc(var(--mobile-topbar-h) + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }

  .main{
    width:100%;
    min-width:0;
  }

  .content{
    width:100% !important;
    max-width:100% !important;
    min-width:0;
    padding:
      var(--mobile-content-top)
      max(var(--mobile-content-gutter),env(safe-area-inset-right))
      calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom) + var(--mobile-content-bottom-extra))
      max(var(--mobile-content-gutter),env(safe-area-inset-left)) !important;
  }

  /* Bottom navigation stays reachable above device safe area. */
  .bottom-nav-movil{
    touch-action:manipulation;
  }

  .bottom-nav-movil > :is(a,button){
    touch-action:manipulation;
  }

  /* The central Create action keeps its established 56x56 contract. */
  .bottom-nav-movil .bottom-nav-create,
  .global-create-trigger{
    touch-action:manipulation;
  }

  /* Generic mobile dialogs behave as bottom sheets and never hide behind chrome. */
  .app-modal,
  .modal-overlay{
    padding:
      max(10px,env(safe-area-inset-top))
      var(--mobile-content-gutter)
      calc(var(--mobile-bottom-nav-h) + 26px + env(safe-area-inset-bottom)) !important;
    align-items:flex-end !important;
    overflow:hidden !important;
  }

  .app-modal > .app-modal-dialog,
  .modal-overlay > :is(.modal-card,.movement-dialog){
    width:100% !important;
    max-width:100% !important;
    max-height:var(--mobile-sheet-max-h) !important;
    margin:0 !important;
    border-radius:var(--mobile-sheet-radius) !important;
    overflow:auto !important;
    overscroll-behavior:contain;
  }

  /* Create/More sheets own their scroll and respect the safe area. */
  .global-create-sheet{
    min-height:100dvh;
  }
  .global-create-panel,
  .mobile-more-sheet{
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - 12px);
    overscroll-behavior:contain;
  }
  .mobile-more-sheet > nav{
    padding-bottom:calc(var(--mobile-bottom-nav-h) + 18px + env(safe-area-inset-bottom));
  }

  /* Horizontal data surfaces must permit vertical page scrolling while panning. */
  :where(
    .tabla-wrap,
    .data-table-scroll,
    .table-scroll,
    .supervision-table-wrap,
    .analytics-chart-scroll,
    .supervision-chart-scroll,
    .horizontal-card-rail
  ){
    overflow-x:auto !important;
    touch-action:pan-x pan-y !important;
  }

  /* Page actions wrap instead of forcing desktop widths. */
  :where(
    .page-actions,
    .module-actions,
    .card-actions,
    .form-actions,
    .form-footer-actions,
    .supervision-bulk-actions
  ){
    max-width:100%;
    flex-wrap:wrap;
  }

  :where(
    .page-actions,
    .module-actions,
    .form-actions,
    .form-footer-actions
  ) > .btn{
    min-width:0;
  }
}

/* Narrow phones: actions become comfortably tappable full-width when grouped. */
@media(max-width:520px){
  :where(.form-actions,.form-footer-actions) > .btn{
    flex:1 1 100%;
    width:100%;
  }
  .app-modal,
  .modal-overlay{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* On-screen keyboard / short viewport: prioritize the active form content. */
@media(max-width:860px) and (max-height:560px){
  .app-modal,
  .modal-overlay{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
  .app-modal > .app-modal-dialog,
  .modal-overlay > :is(.modal-card,.movement-dialog){
    max-height:calc(100dvh - 12px) !important;
  }
  .mobile-more-sheet{
    max-height:calc(100dvh - 12px) !important;
  }
}

/* Reduced motion never changes responsive geometry. */
@media(prefers-reduced-motion:reduce){
  .mobile-more-sheet,
  .global-create-panel,
  .app-modal > .app-modal-dialog,
  .modal-overlay > :is(.modal-card,.movement-dialog){
    scroll-behavior:auto !important;
  }
}


/* ============================================================
   v2.7.30 · Pre-2.8 Final Consistency & Residual Debt Cleanup
   Low-risk migration of residual inline presentation.
   ============================================================ */
.source-panel-hidden{display:none;}
.input-uppercase{text-transform:uppercase;}
.field-followup{margin-top:.4rem;}
.legacy-topbar-bleed{margin:-1.75rem -1.75rem 1.75rem;}
.filter-actions-wrap{flex-wrap:wrap;align-items:flex-end;}
.filter-actions-row{margin-bottom:1rem;}
.filter-actions-align-end{align-items:flex-end;}
.text-center{text-align:center;}
.filter-search-medium{max-width:320px;}
.alert-link{color:inherit;text-decoration:underline;}
.nav-link-danger{color:var(--semantic-danger,var(--rojo));}
.audit-user-agent-label{display:block;margin-top:.65rem;}

.legacy-reject-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:2100;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,.4);
}
.legacy-reject-modal.is-open,
.legacy-reject-modal[aria-hidden="false"]{
  display:flex;
}
.legacy-reject-dialog{
  width:100%;
  max-width:380px;
  margin:auto;
}

@media(max-width:860px){
  .legacy-topbar-bleed{
    margin:0 0 var(--surface-stack-gap);
  }
  .filter-actions-wrap,
  .filter-actions-align-end{
    align-items:stretch;
  }
  .filter-search-medium{
    max-width:none;
    width:100%;
  }
  .legacy-reject-modal{
    align-items:flex-end;
    padding:
      max(10px,env(safe-area-inset-top))
      10px
      calc(var(--mobile-bottom-nav-h) + 26px + env(safe-area-inset-bottom));
  }
  .legacy-reject-dialog{
    max-width:none;
    max-height:var(--mobile-sheet-max-h);
    overflow:auto;
    border-radius:var(--mobile-sheet-radius);
  }
}


/* ============================================================
   v2.7.31 · Alta Individual Guided Wizard
   Progressive enhancement: without JS, all sections remain visible.
   ============================================================ */
.alta-wizard{
  --alta-step-size:40px;
  --alta-transition:210ms;
  overflow:visible;
}
.alta-wizard-head{
  display:grid;
  gap:18px;
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border-subtle);
}
.alta-wizard-intro{
  display:grid;
  gap:4px;
}
.alta-wizard-intro > strong{
  color:var(--text-main);
  font-size:var(--type-section-title);
}
.alta-wizard-intro > p{
  max-width:680px;
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-body-small);
  line-height:1.5;
}

.alta-stepper{
  display:grid;
  grid-template-columns:auto minmax(22px,1fr) auto minmax(22px,1fr) auto minmax(22px,1fr) auto;
  align-items:center;
  gap:8px;
  width:100%;
}
.alta-step{
  appearance:none;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text-muted);
  text-align:left;
  cursor:pointer;
}
.alta-step:disabled{
  cursor:default;
  opacity:.62;
}
.alta-step-icon{
  width:var(--alta-step-size);
  height:var(--alta-step-size);
  flex:0 0 var(--alta-step-size);
  display:grid;
  place-items:center;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  color:var(--text-muted);
  transition:
    background-color var(--alta-transition) ease,
    border-color var(--alta-transition) ease,
    color var(--alta-transition) ease,
    box-shadow var(--alta-transition) ease,
    transform var(--alta-transition) var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1));
}
.alta-step-copy{
  display:grid;
  gap:1px;
  min-width:0;
}
.alta-step-copy small{
  color:var(--text-subtle);
  font-size:var(--type-overline);
  line-height:1.2;
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
}
.alta-step-copy strong{
  overflow:hidden;
  color:inherit;
  font-size:var(--type-label);
  font-weight:500;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.alta-step-line{
  height:1px;
  min-width:22px;
  background:var(--border-subtle);
  transition:background-color var(--alta-transition) ease;
}
.alta-step.is-active{
  color:var(--text-main);
}
.alta-step.is-active .alta-step-icon{
  border-color:color-mix(in srgb,var(--color-primario) 35%,var(--border-subtle));
  background:var(--brand-soft);
  color:var(--color-primario);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primario) 8%,transparent);
}
.alta-step.is-complete{
  color:var(--text-main);
}
.alta-step.is-complete .alta-step-icon{
  border-color:color-mix(in srgb,var(--color-primario) 24%,var(--border-subtle));
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card));
  color:var(--color-primario);
}
.alta-step.is-complete + .alta-step-line{
  background:color-mix(in srgb,var(--color-primario) 36%,var(--border-subtle));
}
@media(hover:hover){
  .alta-step:not(:disabled):not(.is-active):hover .alta-step-icon{
    border-color:var(--interactive-border-hover);
    background:var(--interactive-hover);
    transform:translateY(-1px);
  }
}

.alta-mobile-progress{
  display:none;
}
.alta-wizard-viewport{
  position:relative;
  min-width:0;
}

.alta-wizard-panel > .grid{
  gap:14px !important;
  margin-bottom:14px !important;
  align-items:start;
}
.alta-wizard-panel > .grid:last-child{
  margin-bottom:0 !important;
}
.alta-panel-subsection .grid{
  gap:14px !important;
}
.alta-panel-subsection .grid + .grid{
  margin-top:14px;
}
.alta-wizard-panel{
  min-width:0;
}
.alta-wizard.is-wizard-ready .alta-wizard-panel[hidden]{
  display:none !important;
}
.alta-wizard-panel.is-entering{
  animation:alta-panel-in var(--alta-transition) var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1)) both;
}
@keyframes alta-panel-in{
  from{opacity:0;transform:translateX(12px);}
  to{opacity:1;transform:translateX(0);}
}

.alta-panel-heading{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:20px;
}
.alta-panel-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--color-primario) 18%,var(--border-subtle));
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card));
  color:var(--color-primario);
}
.alta-panel-heading > div{
  min-width:0;
}
.alta-panel-heading h2{
  margin:2px 0 3px;
  color:var(--text-main);
  font-size:1.125rem;
  line-height:1.2;
  letter-spacing:var(--tracking-section);
}
.alta-panel-heading p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-body-small);
  line-height:1.45;
}

.alta-panel-subsection + .alta-panel-subsection{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border-subtle);
}
.alta-panel-subsection > h3{
  margin:0 0 12px;
  color:var(--text-main);
  font-size:var(--type-component-title);
  font-weight:500;
  line-height:1.3;
}
.alta-context-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:2px;
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
  color:var(--text-muted);
}
.alta-context-note > svg{
  flex:0 0 17px;
  margin-top:1px;
  color:var(--color-primario);
}
.alta-context-note p{
  margin:0;
  font-size:var(--type-caption);
  line-height:1.45;
}

.alta-review{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--border-subtle);
}
.alta-review-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.alta-review-head h3{
  margin:2px 0 3px;
  color:var(--text-main);
  font-size:1rem;
}
.alta-review-head p{
  max-width:620px;
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.45;
}
.alta-review-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  min-height:28px;
  padding:4px 9px;
  border:1px solid color-mix(in srgb,var(--color-primario) 18%,var(--border-subtle));
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--color-primario) 6%,var(--surface-card));
  color:var(--color-primario);
  font-size:var(--type-caption);
  font-weight:500;
}
.alta-review-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.alta-review-group{
  min-width:0;
  padding:12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.alta-review-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.alta-review-group-head strong{
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
}
.alta-review-edit{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--color-primario);
  font:inherit;
  font-size:var(--type-caption);
  font-weight:500;
  cursor:pointer;
}
.alta-review-values{
  display:grid;
  gap:6px;
}
.alta-review-row{
  display:grid;
  grid-template-columns:minmax(90px,.7fr) minmax(0,1fr);
  gap:8px;
  align-items:start;
  font-size:var(--type-caption);
  line-height:1.35;
}
.alta-review-row span:first-child{
  color:var(--text-muted);
}
.alta-review-row span:last-child{
  overflow-wrap:anywhere;
  color:var(--text-main);
  font-weight:500;
}
.alta-review-empty{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-caption);
}

.alta-wizard-actions{
  position:sticky;
  bottom:0;
  z-index:12;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:24px calc(var(--surface-card-padding) * -1) calc(var(--surface-card-padding) * -1);
  padding:12px var(--surface-card-padding);
  border-top:1px solid var(--border-subtle);
  border-radius:0 0 var(--surface-radius) var(--surface-radius);
  background:var(--surface-card);
  box-shadow:0 -8px 24px color-mix(in srgb,var(--text-main) 4%,transparent);
}
.alta-wizard-actions-left,
.alta-wizard-actions-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.alta-wizard-actions-right{
  justify-content:flex-end;
  min-width:0;
}
.alta-step-helper{
  max-width:280px;
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.3;
  text-align:right;
}

html[data-theme="dark"] .alta-step-icon,
html[data-theme="dark"] .alta-review-group,
html[data-theme="dark"] .alta-context-note{
  border-color:var(--border-subtle);
}
html[data-theme="dark"] .alta-wizard-actions{
  background:var(--surface-card);
}

@media(max-width:860px){
  .alta-wizard{
    --alta-transition:180ms;
  }
  .alta-wizard-head{
    gap:12px;
    margin-bottom:16px;
    padding-bottom:14px;
  }
  .alta-stepper{
    display:none;
  }
  .alta-mobile-progress{
    display:grid;
    gap:8px;
  }
  .alta-mobile-progress > div:first-child{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
  }
  .alta-mobile-progress span{
    color:var(--text-muted);
    font-size:var(--type-caption);
  }
  .alta-mobile-progress strong{
    min-width:0;
    color:var(--text-main);
    font-size:var(--type-label);
    font-weight:500;
    text-align:right;
  }
  .alta-mobile-progress-track{
    height:4px;
    overflow:hidden;
    border-radius:var(--radius-pill);
    background:var(--surface-subtle);
  }
  .alta-mobile-progress-track > span{
    display:block;
    width:25%;
    height:100%;
    border-radius:inherit;
    background:var(--color-primario);
    transition:width var(--alta-transition) var(--motion-ease-standard,cubic-bezier(.2,.8,.2,1));
  }
  .alta-panel-heading{
    gap:10px;
    margin-bottom:16px;
  }

  .alta-wizard-panel > .grid,
  .alta-panel-subsection .grid{
    grid-template-columns:1fr !important;
    gap:11px !important;
  }
  .alta-wizard-panel > .grid{
    margin-bottom:11px !important;
  }
  .alta-panel-subsection .grid + .grid{
    margin-top:11px;
  }
  .alta-panel-icon{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  .alta-panel-heading h2{
    font-size:1.025rem;
  }
  .alta-panel-subsection + .alta-panel-subsection{
    margin-top:16px;
    padding-top:15px;
  }
  .alta-review-grid{
    grid-template-columns:1fr;
  }
  .alta-review-head{
    display:grid;
    gap:10px;
  }
  .alta-review-status{
    width:max-content;
  }
  .alta-wizard-actions{
    bottom:calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom) + 10px);
    margin:18px calc(var(--mobile-card-padding) * -1) calc(var(--mobile-card-padding) * -1);
    padding:10px var(--mobile-card-padding);
    border-radius:0 0 var(--mobile-card-radius) var(--mobile-card-radius);
  }
  .alta-wizard-actions-left,
  .alta-wizard-actions-right{
    min-width:0;
  }
  .alta-step-helper{
    display:none;
  }
  .alta-wizard-actions .btn{
    min-height:44px;
  }
}

@media(max-width:520px){
  .alta-wizard-intro > p{
    font-size:var(--type-caption);
  }
  .alta-wizard-actions{
    display:grid;
    grid-template-columns:auto 1fr;
  }
  .alta-wizard-actions-left,
  .alta-wizard-actions-right{
    display:grid;
    grid-template-columns:1fr;
  }
  .alta-wizard-actions-left [data-alta-cancel]{
    display:none;
  }
  .alta-wizard-actions-right .btn{
    width:100%;
    justify-content:center;
  }
  .alta-review-row{
    grid-template-columns:1fr;
    gap:2px;
  }
}

@media(prefers-reduced-motion:reduce){
  .alta-step-icon,
  .alta-step-line,
  .alta-mobile-progress-track > span{
    transition:none !important;
  }
  .alta-wizard-panel.is-entering{
    animation:none !important;
  }
}


/* ============================================================
   v2.7.32 · Compliance Center restrained iconography
   Icons are intentionally limited to KPI cards and bulk processing.
   ============================================================ */
.compliance-kpi-card{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto;
  gap:10px;
  align-items:start;
}
.compliance-kpi-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--color-primario) 16%,var(--border-subtle));
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card));
  color:var(--color-primario);
}
.compliance-kpi-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.compliance-kpi-copy > span{
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
  line-height:1.25;
}
.compliance-kpi-copy > strong{
  color:var(--text-main);
  font-size:1.15rem;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.compliance-kpi-copy > small{
  margin-top:3px;
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.35;
}
.compliance-kpi-card.is-success .compliance-kpi-icon{
  border-color:color-mix(in srgb,var(--semantic-success) 22%,var(--border-subtle));
  background:color-mix(in srgb,var(--semantic-success) 9%,var(--surface-card));
  color:var(--semantic-success);
}
.compliance-kpi-card.is-warning .compliance-kpi-icon{
  border-color:color-mix(in srgb,var(--semantic-warning) 22%,var(--border-subtle));
  background:color-mix(in srgb,var(--semantic-warning) 9%,var(--surface-card));
  color:var(--semantic-warning);
}
.compliance-kpi-card.is-danger .compliance-kpi-icon{
  border-color:color-mix(in srgb,var(--semantic-danger) 22%,var(--border-subtle));
  background:color-mix(in srgb,var(--semantic-danger) 9%,var(--surface-card));
  color:var(--semantic-danger);
}

.compliance-bulk-copy{
  display:flex !important;
  align-items:center;
  gap:10px;
  min-width:0;
}
.compliance-bulk-copy > div{
  min-width:0;
  display:grid;
  gap:3px;
}
.compliance-bulk-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--color-primario) 16%,var(--border-subtle));
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--color-primario) 7%,var(--surface-card));
  color:var(--color-primario);
}

html[data-theme="dark"] .compliance-kpi-icon,
html[data-theme="dark"] .compliance-bulk-icon{
  border-color:color-mix(in srgb,var(--color-primario) 20%,var(--border-subtle));
  background:color-mix(in srgb,var(--color-primario) 10%,var(--surface-card));
}
html[data-theme="dark"] .compliance-kpi-card.is-success .compliance-kpi-icon{
  border-color:color-mix(in srgb,var(--semantic-success) 24%,var(--border-subtle));
  background:color-mix(in srgb,var(--semantic-success) 12%,var(--surface-card));
}
html[data-theme="dark"] .compliance-kpi-card.is-warning .compliance-kpi-icon{
  border-color:color-mix(in srgb,var(--semantic-warning) 24%,var(--border-subtle));
  background:color-mix(in srgb,var(--semantic-warning) 12%,var(--surface-card));
}
html[data-theme="dark"] .compliance-kpi-card.is-danger .compliance-kpi-icon{
  border-color:color-mix(in srgb,var(--semantic-danger) 24%,var(--border-subtle));
  background:color-mix(in srgb,var(--semantic-danger) 12%,var(--surface-card));
}

@media(max-width:1100px){
  .compliance-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:620px){
  .compliance-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .compliance-kpi-card{
    grid-template-columns:34px minmax(0,1fr);
    gap:9px;
  }
  .compliance-kpi-icon{
    width:34px;
    height:34px;
  }
  .compliance-bulk-copy{
    align-items:flex-start;
  }
}


/* ============================================================
   v2.7.33 · Canonical KPI Cards + Mobile Card Collection Rule
   >3 informational cards => horizontal mobile rail.
   Quick Actions are explicitly excluded: speed requires visibility.
   ============================================================ */
:root{
  --kpi-card-icon-size:40px;
  --kpi-card-mobile-width:min(78vw,300px);
  --card-collection-gap:12px;
}

/* One KPI anatomy across Dashboard, Compliance and future modules. */
.kpi-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  min-width:0;
  height:auto;
  box-sizing:border-box;
}
.kpi-card .kpi-card-icon{
  width:var(--kpi-card-icon-size);
  height:var(--kpi-card-icon-size);
  flex:0 0 var(--kpi-card-icon-size);
  margin:0 0 12px;
  border-radius:var(--radius-md);
}
.kpi-card .kpi-card-value{
  margin:0 0 4px;
  color:var(--text-main);
  font-size:1.5rem;
  font-weight:700;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.kpi-card .kpi-card-label{
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
  line-height:1.25;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.kpi-card .kpi-card-subtitle{
  margin-top:5px;
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.35;
}
.kpi-card--standard{
  min-height:136px;
  padding:16px !important;
}
.kpi-card--compact{
  --kpi-card-icon-size:36px;
  min-height:128px;
  padding:14px !important;
}
.kpi-card--compact .kpi-card-icon{
  margin-bottom:10px;
}
.kpi-card--compact .kpi-card-value{
  font-size:1.35rem;
}

/* Dashboard KPI collection: one coherent 4x2 grid on desktop. */
.dashboard-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--card-collection-gap);
}
.dashboard-stats-grid > .kpi-card{
  margin:0 !important;
}

/* Compliance consumes the same anatomy at compact density. */
.compliance-kpis{
  gap:var(--card-collection-gap);
}
.compliance-kpis > .compliance-kpi-card{
  display:flex;
  grid-template-columns:none;
  gap:0;
}
.compliance-kpi-card .compliance-kpi-icon{
  width:var(--kpi-card-icon-size);
  height:var(--kpi-card-icon-size);
  flex:0 0 var(--kpi-card-icon-size);
  margin-bottom:10px;
}

/* Quick Actions: visible grid, never swipe-based. */
.dashboard-quick-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  width:100%;
  overflow:visible !important;
  touch-action:auto !important;
}
.dashboard-quick-grid > .acceso-rapido{
  width:100% !important;
  min-width:0 !important;
  min-height:76px;
  margin:0 !important;
  scroll-snap-align:none !important;
}

/* Generic card collection enhancement.
   JS adds .is-mobile-card-rail only when the direct card count is >3. */
.card-collection{
  min-width:0;
  max-width:100%;
}
@media(max-width:860px){
  .card-collection.is-mobile-card-rail{
    display:flex !important;
    grid-template-columns:none !important;
    width:calc(100% + var(--mobile-content-gutter,12px));
    max-width:none;
    margin-right:calc(var(--mobile-content-gutter,12px) * -1);
    padding:1px var(--mobile-content-gutter,12px) 6px 0;
    gap:var(--card-collection-gap) !important;
    overflow-x:auto;
    overflow-y:visible;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
  }
  .card-collection.is-mobile-card-rail::-webkit-scrollbar{
    display:none;
  }
  .card-collection.is-mobile-card-rail > :is(.card,.stat-card,.kpi-card,.horizontal-card){
    flex:0 0 var(--kpi-card-mobile-width) !important;
    width:var(--kpi-card-mobile-width) !important;
    min-width:var(--kpi-card-mobile-width) !important;
    max-width:var(--kpi-card-mobile-width) !important;
    margin:0 !important;
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }

  /* Dashboard/Compliance collections use the exact same mobile rail grammar. */
  .dashboard-stats-grid,
  .compliance-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* Quick Actions are deliberately excluded from mobile rail behavior. */
  .dashboard-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
    margin-right:0 !important;
    padding-right:0 !important;
  }
  .dashboard-quick-grid > .acceso-rapido{
    min-height:72px;
  }
}

@media(max-width:380px){
  :root{
    --kpi-card-mobile-width:min(82vw,286px);
  }
}

@media(prefers-reduced-motion:reduce){
  .card-collection.is-mobile-card-rail{
    scroll-behavior:auto !important;
  }
}


/* ============================================================
   v2.7.34 · KPI adoption across operational modules
   ============================================================ */
:is(.lifecycle-kpis,.docauto-kpis,.timeoff-stats,.expenses-stats) > .kpi-card{
  margin:0 !important;
}
:is(.lifecycle-kpis,.docauto-kpis,.timeoff-stats,.expenses-stats) .kpi-card-icon{
  margin-bottom:12px;
}
:is(.lifecycle-kpis,.docauto-kpis,.timeoff-stats,.expenses-stats) .kpi-card-label{
  color:var(--text-main);
}
:is(.lifecycle-kpis,.docauto-kpis,.timeoff-stats,.expenses-stats) .kpi-card-subtitle{
  color:var(--text-muted);
}

/* Semantic emphasis stays on the icon tile, never on the whole card. */
.kpi-card.is-success .kpi-card-icon{
  border-color:color-mix(in srgb,var(--semantic-success) 22%,var(--border-subtle));
  background:color-mix(in srgb,var(--semantic-success) 9%,var(--surface-card));
  color:var(--semantic-success);
}
.kpi-card.is-warning .kpi-card-icon{
  border-color:color-mix(in srgb,var(--semantic-warning) 22%,var(--border-subtle));
  background:color-mix(in srgb,var(--semantic-warning) 9%,var(--surface-card));
  color:var(--semantic-warning);
}
.kpi-card.is-danger .kpi-card-icon{
  border-color:color-mix(in srgb,var(--semantic-danger) 22%,var(--border-subtle));
  background:color-mix(in srgb,var(--semantic-danger) 9%,var(--surface-card));
  color:var(--semantic-danger);
}

/* Final authority supersedes old fixed-height mobile rules for Time Off / Expenses. */
@media(max-width:860px){
  .timeoff-stats,
  .lifecycle-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .timeoff-stats > .kpi-card,
  .lifecycle-kpis > .kpi-card{
    height:auto !important;
    min-height:136px !important;
    grid-column:auto !important;
    padding:16px !important;
  }

  .docauto-kpis.card-collection.is-mobile-card-rail,
  .expenses-stats.card-collection.is-mobile-card-rail{
    display:flex !important;
    grid-template-columns:none !important;
  }
  .docauto-kpis.card-collection.is-mobile-card-rail > .kpi-card,
  .expenses-stats.card-collection.is-mobile-card-rail > .kpi-card{
    height:auto !important;
    min-height:136px !important;
    padding:16px !important;
  }
}

@media(max-width:520px){
  .lifecycle-kpis,
  .timeoff-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* ============================================================
   v2.7.35 · KPI Neutral Tile Authority
   Neutral KPIs reuse existing canonical neutral surfaces.
   ============================================================ */
.kpi-card .kpi-card-icon{
  border:1px solid var(--border-subtle) !important;
  background:var(--surface-subtle) !important;
  color:var(--text-muted) !important;
}
.kpi-card.is-success .kpi-card-icon{
  border-color:color-mix(in srgb,var(--semantic-success) 22%,var(--border-subtle)) !important;
  background:color-mix(in srgb,var(--semantic-success) 9%,var(--surface-card)) !important;
  color:var(--semantic-success) !important;
}
.kpi-card.is-warning .kpi-card-icon{
  border-color:color-mix(in srgb,var(--semantic-warning) 22%,var(--border-subtle)) !important;
  background:color-mix(in srgb,var(--semantic-warning) 9%,var(--surface-card)) !important;
  color:var(--semantic-warning) !important;
}
.kpi-card.is-danger .kpi-card-icon{
  border-color:color-mix(in srgb,var(--semantic-danger) 22%,var(--border-subtle)) !important;
  background:color-mix(in srgb,var(--semantic-danger) 9%,var(--surface-card)) !important;
  color:var(--semantic-danger) !important;
}

.employee-home-grid--single{grid-template-columns:minmax(0,1fr) !important;}


/* ============================================================
   v2.7.36 · Time & Payroll Core México · Foundation
   ============================================================ */
.payroll-suite-kpis,.payroll-attendance-kpis{margin-top:16px;}
.payroll-flow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.payroll-flow-card{min-width:0;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px;text-decoration:none;color:var(--text-main);}
.payroll-flow-card:hover{text-decoration:none;border-color:var(--interactive-border-hover);background:var(--interactive-hover);}
.payroll-flow-index{width:22px;height:22px;display:grid;place-items:center;border-radius:var(--radius-pill);background:var(--surface-subtle);color:var(--text-muted);font-size:.68rem;font-weight:500;}
.payroll-flow-icon,.attendance-method-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-subtle);color:var(--text-muted);}
.payroll-flow-card strong,.payroll-flow-card small{display:block;}
.payroll-flow-card strong{font-size:var(--type-label);font-weight:500;}
.payroll-flow-card small{margin-top:3px;color:var(--text-muted);font-size:var(--type-caption);line-height:1.35;}
.payroll-flow-card>svg{color:var(--text-subtle);}
.payroll-mini-list,.payroll-readiness-list,.attendance-method-list,.provider-list{display:grid;gap:4px;}
.payroll-mini-list>a,.provider-list>div,.payroll-readiness-list>div,.attendance-method{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:var(--radius-md);color:var(--text-main);text-decoration:none;}
.payroll-mini-list>a:hover{background:var(--interactive-hover);text-decoration:none;}
.payroll-mini-list span:first-child,.provider-list>div>span:first-child,.payroll-readiness-list>div>span:nth-child(2),.attendance-method>span:nth-child(2){min-width:0;flex:1;}
.payroll-mini-list strong,.payroll-mini-list small,.provider-list strong,.provider-list small,.payroll-readiness-list strong,.payroll-readiness-list small,.attendance-method strong,.attendance-method small{display:block;}
.payroll-mini-list strong,.provider-list strong,.payroll-readiness-list strong,.attendance-method strong{font-size:var(--type-label);font-weight:500;}
.payroll-mini-list small,.provider-list small,.payroll-readiness-list small,.attendance-method small{margin-top:2px;color:var(--text-muted);font-size:var(--type-caption);line-height:1.35;}
.status-dot{width:9px;height:9px;flex:0 0 9px;border-radius:var(--radius-pill);background:var(--text-subtle);}
.status-dot.is-ready{background:var(--semantic-success);}
.attendance-method{justify-content:flex-start;border:1px solid transparent;}
.attendance-method>.badge{margin-left:auto;}
.provider-list>div{border-bottom:1px solid var(--border-subtle);border-radius:0;}
.provider-list>div:last-child{border-bottom:0;}
.card-actions{display:flex;justify-content:flex-end;padding-top:12px;}
@media(max-width:1180px){.payroll-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.payroll-flow-card:last-child{grid-column:1/-1;}}
@media(max-width:860px){.payroll-flow-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;overscroll-behavior-inline:contain;}.payroll-flow-card{flex:0 0 min(82vw,320px);scroll-snap-align:start;}.payroll-suite-panels{grid-template-columns:1fr !important;}}
@media(max-width:520px){.attendance-method{align-items:flex-start;flex-wrap:wrap;}.attendance-method>.badge{margin-left:48px;}}


/* ============================================================
   v2.7.39 · Attendance Operations
   Centers · devices · policies · shifts · assignments · exceptions
   ============================================================ */
.attendance-tabs{
  margin:var(--surface-stack-gap) 0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
.attendance-tabs a{
  white-space:nowrap;
}
.attendance-tabs a b{
  min-width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  margin-left:4px;
  padding:0 5px;
  border-radius:var(--radius-pill);
  background:var(--semantic-warning);
  color:var(--surface-card);
  font-size:var(--type-caption);
}
.attendance-admin-kpis{
  margin-top:var(--surface-stack-gap);
}
.attendance-setup-steps,
.attendance-entity-list,
.attendance-assignment-list,
.attendance-exception-list{
  display:grid;
  gap:6px;
}
.attendance-setup-steps>a{
  min-height:58px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 16px;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:var(--radius-md);
  color:var(--text-main);
  text-decoration:none;
}
.attendance-setup-steps>a:hover{
  background:var(--interactive-hover);
  text-decoration:none;
}
.attendance-setup-steps>a>b{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--surface-subtle);
  color:var(--text-muted);
  font-size:var(--type-caption);
}
.attendance-setup-steps strong,
.attendance-setup-steps small,
.attendance-entity-list strong,
.attendance-entity-list small,
.attendance-assignment-list strong,
.attendance-assignment-list small,
.attendance-exception-list strong,
.attendance-exception-list small{
  display:block;
}
.attendance-setup-steps strong,
.attendance-entity-list strong,
.attendance-assignment-list strong,
.attendance-exception-list strong{
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
}
.attendance-setup-steps small,
.attendance-entity-list small,
.attendance-assignment-list small,
.attendance-exception-list small{
  margin-top:2px;
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.4;
}
.attendance-principle{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:start;
  gap:11px;
  padding:10px 0;
}
.attendance-principle + .attendance-principle{
  border-top:1px solid var(--border-subtle);
}
.attendance-principle strong{
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
}
.attendance-principle p{
  margin:3px 0 0;
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.5;
}
.attendance-entity-list>article,
.attendance-exception-list>article{
  min-height:64px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-bottom:1px solid var(--border-subtle);
}
.attendance-entity-list>article:last-child,
.attendance-exception-list>article:last-child{
  border-bottom:0;
}
.attendance-entity-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
  color:var(--text-muted);
}
.attendance-policy-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.attendance-policy-card{
  min-height:180px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.attendance-policy-card>div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.attendance-policy-card h3{
  margin:0;
  color:var(--text-main);
  font-size:var(--type-title-sm);
}
.attendance-policy-card p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-caption);
}
.attendance-policy-card form{
  margin-top:auto;
}
.attendance-policy-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.attendance-policy-chips span{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:var(--surface-subtle);
  color:var(--text-muted);
  font-size:var(--type-caption);
}
.attendance-compact-form{
  display:grid;
  gap:12px;
}
.attendance-compact-form label,
.attendance-modal label{
  display:grid;
  gap:6px;
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
}
.attendance-assignment-list>div{
  min-height:48px;
  padding:8px 4px;
  border-bottom:1px solid var(--border-subtle);
}
.attendance-assignment-list>div:last-child{
  border-bottom:0;
}
.attendance-resolution-form{
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto auto;
  align-items:center;
  gap:6px;
}
.attendance-resolution-form input{
  min-width:0;
}
.attendance-modal{
  max-width:680px;
}
.attendance-method-fieldset{
  margin:14px 0;
  padding:0;
  border:0;
}
.attendance-method-fieldset legend{
  margin-bottom:8px;
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
}
.attendance-method-fieldset{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.attendance-method-fieldset legend{
  flex:0 0 100%;
}
.attendance-method-fieldset label,
.attendance-policy-toggles label{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
  cursor:pointer;
}
.attendance-method-fieldset input,
.attendance-policy-toggles input{
  width:auto;
  margin:0;
}
.attendance-policy-toggles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:12px 0;
}
.attendance-span-2{
  grid-column:1/-1;
}
@media(max-width:1100px){
  .attendance-policy-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .attendance-policy-toggles{grid-template-columns:1fr;}
}
@media(max-width:860px){
  .attendance-tabs{
    margin-left:calc(var(--mobile-content-gutter) * -1);
    margin-right:calc(var(--mobile-content-gutter) * -1);
    padding:0 var(--mobile-content-gutter) 4px;
    scrollbar-width:none;
  }
  .attendance-tabs::-webkit-scrollbar{display:none;}
  .attendance-policy-grid{grid-template-columns:1fr;}
  .attendance-entity-list>article,
  .attendance-exception-list>article{
    grid-template-columns:38px minmax(0,1fr) auto;
  }
  .attendance-entity-list>article form,
  .attendance-exception-list>article form{
    grid-column:2/-1;
  }
  .attendance-resolution-form{
    grid-template-columns:1fr 1fr;
  }
  .attendance-resolution-form input{
    grid-column:1/-1;
  }
}
@media(max-width:520px){
  .attendance-entity-list>article,
  .attendance-exception-list>article{
    grid-template-columns:38px minmax(0,1fr);
  }
  .attendance-entity-list>article>.badge,
  .attendance-exception-list>article>.badge{
    grid-column:2;
    justify-self:start;
  }
  .attendance-entity-list>article form,
  .attendance-exception-list>article form{
    grid-column:1/-1;
  }
}


/* ============================================================
   v2.7.41 · Employee → Time → Payroll Integration Layer
   ============================================================ */
.payroll-readiness-card{
  margin-top:var(--surface-stack-gap);
}
.payroll-readiness-head{
  align-items:flex-start;
}
.payroll-readiness-kpis{
  margin-top:12px;
}
.payroll-source-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border-subtle);
}
.payroll-source-strip>div{
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.payroll-source-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  color:var(--text-muted);
  background:var(--surface-card);
}
.payroll-source-strip strong,
.payroll-source-strip small{
  display:block;
}
.payroll-source-strip strong{
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
}
.payroll-source-strip small{
  margin-top:2px;
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.35;
}
.payroll-readiness-ok{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin-top:14px;
  padding:12px;
  border:1px solid color-mix(in srgb,var(--semantic-success) 24%,var(--border-subtle));
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--semantic-success) 7%,var(--surface-card));
}
.payroll-readiness-ok>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:var(--semantic-success);
}
.payroll-readiness-ok strong{
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
}
.payroll-readiness-ok p{
  margin:3px 0 0;
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.45;
}
.payroll-readiness-list{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.payroll-readiness-worker{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr);
  gap:14px;
  align-items:start;
  padding:12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-card);
}
.payroll-readiness-worker.has-blocker{
  border-color:color-mix(in srgb,var(--semantic-warning) 38%,var(--border-subtle));
}
.payroll-readiness-person{
  min-width:0;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:9px;
}
.payroll-readiness-avatar{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--surface-subtle);
  color:var(--text-muted);
  font-size:var(--type-label);
  font-weight:500;
}
.payroll-readiness-person strong,
.payroll-readiness-person small{
  display:block;
}
.payroll-readiness-person strong{
  color:var(--text-main);
  font-size:var(--type-label);
  font-weight:500;
}
.payroll-readiness-person small{
  margin-top:2px;
  color:var(--text-muted);
  font-size:var(--type-caption);
}
.payroll-readiness-checks{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.payroll-readiness-checks>a{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
  color:var(--text-main);
  text-decoration:none;
  font-size:var(--type-caption);
}
.payroll-readiness-checks>a:hover{
  background:var(--interactive-hover);
  border-color:var(--interactive-border-hover);
  text-decoration:none;
}
.payroll-readiness-checks>a.is-blocker{
  border-color:color-mix(in srgb,var(--semantic-warning) 38%,var(--border-subtle));
}
.payroll-readiness-checks>a>span:first-child{
  color:var(--text-muted);
}
.payroll-readiness-checks>a.is-blocker>span:first-child{
  color:var(--semantic-warning);
}
.payroll-readiness-checks>a strong{
  margin-left:2px;
  color:var(--text-muted);
  font-weight:500;
}
.payroll-readiness-more{
  margin:4px 0 0;
}
@media(max-width:1180px){
  .payroll-source-strip{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:860px){
  .payroll-source-strip{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    padding-bottom:4px;
  }
  .payroll-source-strip>div{
    flex:0 0 min(74vw,260px);
    scroll-snap-align:start;
  }
  .payroll-readiness-worker{
    grid-template-columns:1fr;
  }
  .payroll-readiness-checks{
    justify-content:flex-start;
  }
}
@media(max-width:520px){
  .payroll-readiness-checks{
    display:grid;
    grid-template-columns:1fr;
  }
  .payroll-readiness-checks>a{
    width:100%;
  }
}


/* ============================================================
   v2.7.42 · Time & Payroll Design-System Compliance Authority
   Canonical cards, rhythm, icons and responsive collection rule.
   ============================================================ */
.card-collection{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:var(--card-collection-gap,12px);
  align-items:stretch;
}
.card-collection > :is(.card,.stat-card,.kpi-card,.horizontal-card){
  width:100%;
  min-width:0;
  margin:0 !important;
}
:is(.payroll-suite-kpis,.payroll-attendance-kpis,.attendance-admin-kpis,.payroll-period-kpis,.payroll-period-metrics,.payroll-readiness-kpis){
  margin-top:var(--surface-stack-gap,20px);
}
:is(.payroll-suite-kpis,.payroll-attendance-kpis,.attendance-admin-kpis,.payroll-period-kpis,.payroll-period-metrics,.payroll-readiness-kpis) > .kpi-card{
  min-height:136px;
  height:100%;
  padding:16px !important;
}
:is(.payroll-suite-kpis,.payroll-attendance-kpis,.attendance-admin-kpis,.payroll-period-kpis,.payroll-period-metrics,.payroll-readiness-kpis) .kpi-card-icon{
  width:var(--kpi-card-icon-size,40px);
  height:var(--kpi-card-icon-size,40px);
  flex-basis:var(--kpi-card-icon-size,40px);
}
:is(.payroll-period-list,.payroll-incidencias-card,.payroll-snapshot-card,.payroll-readiness-card,.attendance-recent-card){
  margin-top:var(--surface-stack-gap,20px);
}
:is(.payroll-suite-panels,.payroll-flow-grid,.attendance-policy-grid){
  margin-top:var(--surface-stack-gap,20px);
}
:is(.payroll-suite-hero,.attendance-admin-hero,.nomina-page-header,.payroll-page-header) + .card-collection{
  margin-top:var(--surface-stack-gap,20px);
}
.payroll-period-list > .card-header,
.payroll-incidencias-card > .card-header,
.payroll-snapshot-card > .card-header,
.payroll-readiness-card > .card-header,
.attendance-recent-card > .card-header{
  margin-bottom:var(--section-stack-gap,14px);
}
@media(max-width:860px){
  .card-collection:not(.is-mobile-card-rail){
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--card-collection-gap,12px);
  }
  .card-collection:not(.is-mobile-card-rail) > :only-child{
    grid-column:1 / -1;
  }
  .card-collection.is-mobile-card-rail{
    gap:var(--card-collection-gap,12px) !important;
  }
  :is(.payroll-suite-kpis,.payroll-attendance-kpis,.attendance-admin-kpis,.payroll-period-kpis,.payroll-period-metrics,.payroll-readiness-kpis).card-collection.is-mobile-card-rail > .kpi-card{
    min-height:136px !important;
    height:auto !important;
    padding:16px !important;
  }
}


/* ============================================================
   v2.7.43 · Attendance Kiosk Pairing · Admin surface
   ============================================================ */
.attendance-pairing-callout{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:start;
  gap:12px;
  margin:var(--surface-stack-gap,20px) 0;
}
.attendance-pairing-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
  color:var(--text-muted);
}
.attendance-pairing-callout h2{
  margin:3px 0 4px;
  color:var(--text-main);
  font-size:var(--type-title-sm);
  letter-spacing:.08em;
}
.attendance-pairing-callout p{
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.45;
}
.attendance-row-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.attendance-row-actions form{
  margin:0;
}
@media(max-width:860px){
  .attendance-row-actions{
    grid-column:2/-1;
    justify-content:flex-start;
  }
}
@media(max-width:520px){
  .attendance-pairing-callout{
    grid-template-columns:38px minmax(0,1fr);
  }
  .attendance-pairing-icon{
    width:38px;
    height:38px;
  }
  .attendance-row-actions{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr;
  }
  .attendance-row-actions .btn{
    width:100%;
    justify-content:center;
  }
}


/* ============================================================
   v2.7.44 · Floow default brand / White Label switch
   ============================================================ */
.brand-default-restore{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
  color:var(--text-muted);
  font-size:var(--type-caption);
  line-height:1.4;
}
.brand-default-restore.is-default>svg{
  flex:0 0 auto;
  color:var(--semantic-success);
}
.brand-default-restore strong{
  color:var(--text-main);
  font-weight:500;
}
@media(max-width:620px){
  .brand-default-restore{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* ============================================================
   v2.7.45 · Brand Asset Roles
   Login=local motion · App=local motion · Favicon=compact symbol
   ============================================================ */
.brand-theme-logo--dark{
  display:none !important;
}
html[data-theme="dark"] .brand-theme-logo--light{
  display:none !important;
}
html[data-theme="dark"] .brand-theme-logo--dark{
  display:block !important;
}

/* Desktop wordmark has a stable box. It no longer depends on viewport width. */
.desktop-sidebar .sidebar-logo{
  min-height:58px;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:0 8px 14px !important;
  overflow:visible !important;
}
.desktop-sidebar .sidebar-logo .brand-logo-completo{
  display:block !important;
  width:128px !important;
  height:46px !important;
  max-width:128px !important;
  max-height:46px !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:left center !important;
  flex:0 0 128px !important;
  filter:none !important;
}
.desktop-sidebar .sidebar-logo .brand-logo-icono{
  display:none !important;
  width:42px !important;
  height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  object-fit:contain !important;
  margin:auto !important;
  filter:none !important;
}
.app-shell.sidebar-compacto .desktop-sidebar .sidebar-logo{
  min-height:58px;
  padding-inline:0 !important;
  justify-content:center !important;
}
.app-shell.sidebar-compacto .desktop-sidebar .sidebar-logo .brand-logo-completo{
  display:none !important;
}
.app-shell.sidebar-compacto .desktop-sidebar .sidebar-logo .brand-logo-icono{
  display:block !important;
}
.floow-static-wordmark,
.floow-static-icon{
  image-rendering:auto;
}

/* Custom White Label logo switches with the actual theme, never by CSS inversion. */
.auth-brand-logo .brand-theme-logo{
  filter:none !important;
  image-rendering:auto;
}
.auth-brand-logo .brand-theme-logo--light{
  display:block !important;
}
.auth-brand-logo .brand-theme-logo--dark{
  display:none !important;
}
html[data-theme="dark"] .auth-brand-logo .brand-theme-logo--light{
  display:none !important;
}
html[data-theme="dark"] .auth-brand-logo .brand-theme-logo--dark{
  display:block !important;
}

/* The compact Floow mark is independent from the horizontal wordmark. */
.topbar-movil-logo img{
  width:42px !important;
  height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  object-fit:contain !important;
  object-position:center !important;
  image-rendering:auto;
}

/* White Label now has three explicit graphic roles. */
.brand-upload-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.brand-logo-preview-light{
  background:var(--surface-app) !important;
}
.brand-logo-preview-dark{
  background:var(--surface-card) !important;
}
.brand-logo-preview-light img,
.brand-logo-preview-dark img{
  width:min(90%,220px) !important;
  height:auto !important;
  max-height:72px !important;
  object-fit:contain !important;
}
.mini-app-wordmark{
  width:72px;
  height:18px;
  display:flex;
  align-items:center;
}
.mini-app-wordmark img,
.mini-email-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:1180px){
  .brand-upload-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .brand-upload-grid-3>.brand-upload-tile:last-child{
    grid-column:1/-1;
  }
}
@media(max-width:620px){
  .brand-upload-grid-3{
    grid-template-columns:1fr !important;
  }
  .brand-upload-grid-3>.brand-upload-tile:last-child{
    grid-column:auto;
  }
}




/* v2.7.50 mobile paging geometry migrated to Design System Authority in DS-2026-115. */

/* ============================================================
   v2.7.51 · Subtle Mobile Rail Indicator
   Same paging behavior; reduced visual footprint only.
   ============================================================ */
@media(max-width:860px){
  .card-rail-indicator{
    min-height:14px !important;
    margin:4px 0 1px !important;
    gap:5px !important;
  }
  .card-rail-indicator.is-dots .card-rail-dot{
    width:4px !important;
    height:4px !important;
    flex-basis:4px !important;
  }
  .card-rail-indicator.is-dots .card-rail-dot.is-active{
    width:12px !important;
    flex-basis:12px !important;
  }
  .card-rail-progress-track{
    width:36px !important;
    height:2px !important;
  }
}


/* ============================================================
   v2.7.52 · Dual-Line Rail Indicator Visibility
   Both positions remain discreet but always perceptible.
   ============================================================ */
@media(max-width:860px){
  .card-rail-indicator.is-dots .card-rail-dot{
    width:12px !important;
    height:2px !important;
    flex:0 0 12px !important;
    border-radius:var(--radius-pill) !important;
    background:var(--border-strong) !important;
    opacity:.58 !important;
  }
  .card-rail-indicator.is-dots .card-rail-dot.is-active{
    width:12px !important;
    flex-basis:12px !important;
    background:var(--interactive-selected-strong) !important;
    opacity:.92 !important;
  }
}


/* ============================================================
   v2.7.53 · Stronger White Label Rail Emphasis
   Active position derives directly from tenant White Label.
   ============================================================ */
@media(max-width:860px){
  .card-rail-indicator.is-dots .card-rail-dot.is-active{
    background:var(--interactive-selected-strong) !important;
    opacity:1 !important;
  }
  .card-rail-progress-thumb{
    background:var(--interactive-selected-strong) !important;
    opacity:1 !important;
  }
}

/* Migration Manager · secure delete confirmation · v2.7.58 */
.migration-package-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.migration-package-actions .migration-action-btn{width:112px;min-width:112px;min-height:34px;justify-content:center;white-space:nowrap}
.migration-delete-dialog{width:min(100%,560px)}
.migration-delete-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 16px}
.migration-delete-summary>div{display:grid;gap:4px;padding:12px;border:1px solid var(--line-soft,var(--gris-200));border-radius:var(--radius-md,12px);background:var(--surface-soft,var(--gris-50))}
.migration-delete-summary small{font-size:var(--type-caption,.75rem);color:var(--text-muted,var(--gris-500))}
.migration-delete-summary strong{font-size:.82rem;color:var(--text-main,var(--gris-900));overflow-wrap:anywhere}
.migration-delete-warning{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--rojo) 20%,var(--line-soft));border-radius:var(--radius-md,12px);background:var(--rojo-suave);color:var(--rojo)}
.migration-delete-warning>svg{flex:0 0 auto;margin-top:1px}.migration-delete-warning>div{display:grid;gap:3px}.migration-delete-warning strong{font-size:.82rem}.migration-delete-warning span{font-size:.75rem;line-height:1.45;color:var(--text-muted,var(--gris-600))}
.migration-delete-actions{justify-content:flex-end}.migration-delete-actions .migration-confirm-btn{width:152px;min-width:152px;justify-content:center}
html[data-theme="dark"] .migration-delete-summary>div{background:var(--surface-elevated);border-color:var(--line-soft)}
html[data-theme="dark"] .migration-delete-warning{background:color-mix(in srgb,var(--rojo) 12%,var(--surface-elevated));border-color:color-mix(in srgb,var(--rojo) 28%,var(--line-soft))}
@media(max-width:700px){.migration-package-actions{flex-wrap:wrap}.migration-package-actions .migration-action-btn{width:100%;min-width:110px}.migration-delete-summary{grid-template-columns:1fr}.migration-delete-actions{display:grid;grid-template-columns:1fr;width:100%}.migration-delete-actions .migration-confirm-btn{width:100%;min-width:0}}

/* ========================================================================== 
   v2.7.59 · Historial unificado de actualizaciones y reportes
   - Vista principal limitada a 3 elementos.
   - Modal de historial completo.
   - Detalle contextual ligero, sin duplicar archivos/datasets.
   ========================================================================== */
.unified-history-card,.unified-report-log-card{overflow:hidden}
.unified-history-head{align-items:flex-start;gap:18px}
.unified-history-head>div:first-child{min-width:0}
.unified-history-more{flex:0 0 auto;min-height:40px;white-space:nowrap}
.unified-history-list{display:grid;border-top:1px solid var(--line-soft)}
.unified-history-row{appearance:none;width:100%;border:0;border-bottom:1px solid var(--line-soft);background:transparent;color:var(--text-main);display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:15px 18px;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.unified-history-row:last-child{border-bottom:0}
.unified-history-row:hover,.unified-history-row:focus-visible{background:color-mix(in srgb,var(--color-primario,var(--primario)) 5%,var(--surface-card));outline:none}
.unified-history-row:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primario,var(--primario)) 45%,transparent)}
.unified-history-primary{display:flex;align-items:center;gap:12px;min-width:0}
.unified-history-primary>span:last-child{display:grid;gap:3px;min-width:0}
.unified-history-primary strong{font-size:.92rem;line-height:1.25;color:var(--text-main);white-space:normal}
.unified-history-primary small{font-size:.78rem;line-height:1.35;color:var(--text-muted)}
.unified-history-chevron{display:grid;place-items:center;color:var(--text-muted);flex:0 0 auto}
.unified-report-format{display:grid;place-items:center;min-width:48px;height:32px;padding:0 8px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--text-muted);font-size:.68rem;font-weight:700;letter-spacing:.04em}
.unified-history-modal{width:min(820px,100%)}
.unified-history-scroll{display:grid;max-height:min(58vh,620px);overflow:auto;border:1px solid var(--line-soft);border-radius:var(--radius-lg);background:var(--surface-card);scrollbar-gutter:stable}
.unified-detail-modal{width:min(720px,100%)}
.unified-detail-title-row{display:flex;align-items:center;gap:10px;margin:.3rem 0 0}
.unified-detail-title-row h2{margin:0;min-width:0}
.unified-detail-section{padding:16px 0;border-top:1px solid var(--line-soft)}
.unified-detail-section h3{font-size:.84rem;margin:0 0 10px;color:var(--text-main)}
.unified-change-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.unified-change-list li{display:grid;grid-template-columns:minmax(82px,auto) 1fr;gap:10px;align-items:start;font-size:.86rem;line-height:1.45}
.unified-change-type{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:3px 8px;border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--text-muted);font-size:.7rem;font-weight:700}
.unified-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.unified-meta-grid>div{padding:11px 12px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-soft);min-width:0}
.unified-meta-grid dt{font-size:.7rem;font-weight:700;color:var(--text-muted);margin-bottom:3px}
.unified-meta-grid dd{margin:0;font-size:.84rem;color:var(--text-main);overflow-wrap:anywhere}
.unified-detail-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:2px;padding:12px;border-radius:var(--radius-md);background:var(--surface-soft);color:var(--text-muted);font-size:.74rem}
html[data-theme="dark"] .unified-history-row{color:var(--text-main)}
html[data-theme="dark"] .unified-history-row:hover,html[data-theme="dark"] .unified-history-row:focus-visible{background:color-mix(in srgb,var(--color-primario,var(--primario)) 8%,var(--surface-card))}
html[data-theme="dark"] .unified-report-format,html[data-theme="dark"] .unified-change-type,html[data-theme="dark"] .unified-meta-grid>div,html[data-theme="dark"] .unified-detail-meta{background:var(--surface-soft);border-color:var(--line-soft)}
@media (max-width:760px){
  .unified-history-head{display:grid;grid-template-columns:1fr}
  .unified-history-more{width:100%;justify-content:center}
  .unified-history-row{padding:14px 12px;gap:10px}
  .unified-history-primary{gap:9px}
  .unified-history-primary .badge{flex:0 0 auto}
  .unified-report-format{min-width:43px;height:30px}
  .unified-meta-grid{grid-template-columns:1fr}
  .unified-change-list li{grid-template-columns:1fr;gap:5px}
  .unified-change-type{justify-self:start}
  .unified-detail-title-row{align-items:flex-start;flex-wrap:wrap}
}
@media print{
  .unified-report-log-card,.unified-history-card,.unified-history-modal,.unified-detail-modal{display:none!important}
}


/* v2.7.90 · Migration Center residual inline-style cleanup */
.migration-mt-16{margin-top:16px}
.migration-mt-20{margin-top:20px}
.migration-pair-code{font-size:18px;letter-spacing:.04em}

/* v2.7.94 · Linked Catalog UX */
.linked-selector{position:relative}
.linked-selector-label{display:flex;align-items:center;justify-content:space-between;gap:12px}
.linked-selector-source{font-size:12px;color:var(--texto-muted);font-weight:500}
.linked-selector-help{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:12px;color:var(--texto-muted)}
.linked-selector-action{appearance:none;border:0;background:transparent;padding:0;color:var(--primary);font:inherit;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.linked-selector-help a{font-weight:700}
.linked-catalog-modal{max-width:560px}
.linked-catalog-feedback{min-height:20px;font-size:13px;margin-top:8px}
.linked-catalog-feedback.is-error{color:var(--danger)}
.linked-catalog-explainer{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
.linked-catalog-explainer p{margin:.35rem 0 0;color:var(--texto-muted)}
.table-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:860px){.linked-catalog-explainer{flex-direction:column}.linked-selector-label{align-items:flex-start;flex-direction:column;gap:3px}}


/* v2.7.95 · Linked Catalog clarity + contextual creation */
.linked-selector-help--clear{justify-content:space-between;padding-top:2px}
.linked-selector-help--clear>span:first-child{display:inline-flex;align-items:center;gap:5px}
.linked-selector-help-actions{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.linked-selector-help--compact{margin-top:6px;min-height:18px;gap:8px;padding:0;background:transparent;border:0;font-size:11.5px;line-height:1.35}
.linked-selector-help--compact span{display:inline-flex;align-items:center;gap:5px}
.linked-selector-help--compact a{font-weight:700;white-space:nowrap}
.company-master-header{align-items:flex-end}
.company-master-guide{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,.72fr);align-items:center;gap:16px;margin-bottom:20px;padding:18px 20px}
.company-master-guide-icon{width:38px;height:38px;border-radius:var(--radius-md);display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.company-master-guide-copy p{margin:4px 0 0;color:var(--texto-muted)}
.company-master-guide-rule{display:flex;align-items:flex-start;gap:8px;padding-left:16px;border-left:1px solid var(--border);font-size:12px;color:var(--texto-muted)}
.company-master-guide-rule svg{color:var(--success);flex:0 0 auto}
.company-name-cell{display:flex;align-items:center;gap:9px}.company-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--surface-subtle);color:var(--texto-muted)}
.linked-catalog-modal .form-grupo small{display:block;margin-top:6px;color:var(--texto-muted);line-height:1.4}
.linked-catalog-toast{position:fixed;right:24px;bottom:24px;z-index:1300;display:flex;align-items:center;gap:10px;max-width:360px;padding:13px 15px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-elevated,var(--surface));box-shadow:var(--shadow-lg);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.linked-catalog-toast.is-visible{opacity:1;transform:translateY(0)}
.linked-catalog-toast>span{width:28px;height:28px;border-radius:var(--radius-pill);display:grid;place-items:center;background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success);font-weight:700}
.linked-catalog-toast div{display:flex;flex-direction:column;gap:1px}.linked-catalog-toast small{color:var(--texto-muted)}
@media(max-width:860px){.company-master-guide{grid-template-columns:auto 1fr}.company-master-guide-rule{grid-column:1/-1;padding-left:0;padding-top:12px;border-left:0;border-top:1px solid var(--border)}.linked-selector-help--clear{align-items:flex-start;flex-direction:column}.linked-catalog-toast{left:16px;right:16px;bottom:86px;max-width:none}}


/* v2.7.96 · Company governance: edit, retirement and deletion approval */
.company-master-guide--three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.company-guide-item{display:flex;gap:12px;align-items:flex-start;min-width:0}
.company-guide-icon{width:34px;height:34px;border-radius:var(--radius-md);display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--color-primario,var(--primario)) 9%,var(--surface-card));color:var(--color-primario,var(--primario))}
.company-guide-item p{margin:.35rem 0 0;color:var(--text-muted);line-height:1.5}
.company-pending-label{display:block;margin-top:4px;color:var(--warning);font-weight:700}
.company-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.btn-peligro-soft{border-color:color-mix(in srgb,var(--danger) 25%,var(--line-soft));color:var(--danger);background:color-mix(in srgb,var(--danger) 5%,var(--surface-card))}
.btn-link-danger{color:var(--danger);background:transparent;border-color:transparent}
.company-approval-section{margin-top:18px;padding:0;overflow:hidden}
.company-approval-list{display:grid}
.company-approval-item{display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(180px,.6fr) minmax(320px,1fr);gap:18px;align-items:center;padding:18px 22px;border-top:1px solid var(--line-soft)}
.company-approval-item:first-child{border-top:0}
.company-approval-main{display:grid;gap:5px}.company-approval-main>span,.company-approval-main p{color:var(--text-muted);margin:0}
.company-approval-impact{display:grid;gap:7px;justify-items:start}.company-approval-impact small{color:var(--text-muted)}
.company-approval-actions{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;gap:8px;align-items:center}
.company-delete-summary{display:grid;gap:5px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-soft);margin-bottom:16px}
.company-delete-summary span{color:var(--text-muted)}
@media(max-width:980px){.company-master-guide--three{grid-template-columns:1fr}.company-approval-item{grid-template-columns:1fr}.company-approval-actions{grid-template-columns:1fr 1fr}.company-approval-actions input{grid-column:1/-1}}


/* v2.7.98 · Role profile starter pack */
.roles-template-header{align-items:flex-start;gap:16px}
.roles-template-header>form{flex:0 0 auto}
.roles-template-explainer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}
.roles-template-explainer>div{display:flex;gap:9px;align-items:center;padding:11px 12px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-soft)}
.roles-template-explainer>div>svg{flex:0 0 auto;color:var(--color-primario,var(--primario))}
.roles-template-explainer span{display:grid;gap:2px}.roles-template-explainer small{color:var(--text-muted)}

.role-template-card.is-installed{border-color:color-mix(in srgb,var(--success) 34%,var(--line-soft))}

.role-template-summary{display:grid;gap:6px}
.role-template-summary span{display:flex;align-items:center;gap:7px;font-size:var(--text-sm);color:var(--text-secondary)}
.role-template-summary svg{color:var(--success);flex:0 0 auto}
@media(max-width:860px){.roles-template-header{display:grid}.roles-template-header>form,.roles-template-header .btn{width:100%}.roles-template-explainer{grid-template-columns:1fr}}


/* v2.7.99 · Linked catalogs across Floow */
.linked-field-source{display:block;margin-top:6px;color:var(--text-muted);font-size:var(--text-xs);line-height:1.45}
.linked-field-source a{color:var(--color-primario,var(--primario));font-weight:700;text-decoration:none}
.linked-selector-help .linked-selector-action{appearance:none;border:0;background:transparent;padding:0;color:var(--color-primario,var(--primario));font:inherit;font-weight:700;cursor:pointer}
.linked-selector-help .linked-selector-action:hover,.linked-field-source a:hover{text-decoration:underline}
.organization-catalogs-shell{display:grid;gap:16px}
.linked-master-intro{display:flex;align-items:center;justify-content:space-between;gap:20px}
.linked-master-intro>div:first-child{max-width:720px}
.linked-master-principle{display:flex;align-items:center;gap:10px;min-width:min(100%,320px);padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-soft)}
.linked-master-principle>svg{color:var(--color-primario,var(--primario));flex:0 0 auto}
.linked-master-principle span{display:grid;gap:2px}.linked-master-principle small{color:var(--text-muted)}
.organization-catalog-grid{align-items:start}
.linked-master-card{display:grid;gap:15px}
.linked-master-list{display:grid;gap:7px;max-height:300px;overflow:auto}
.linked-master-list>div{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-soft)}
.linked-master-list svg{color:var(--text-muted)}
.linked-master-create{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding-top:13px;border-top:1px solid var(--line-soft)}
.linked-master-create label{display:grid;gap:6px;font-weight:700}
@media(max-width:860px){.linked-master-intro{display:grid}.organization-catalog-grid{grid-template-columns:1fr}.linked-master-create{grid-template-columns:1fr}.linked-master-create .btn{width:100%}}


/* v2.7.100 · Dashboard Guided Work */
.dashboard-attention-section{display:grid;gap:14px}
.attention-count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;margin-left:5px;border-radius:var(--radius-pill);background:var(--surface-soft);font-size:var(--text-sm);vertical-align:2px}
.dashboard-attention-list{display:grid;gap:10px}
.attention-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 16px}
.attention-icon,.attention-clear-icon,.activity-feed-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--text-secondary)}
.attention-critico .attention-icon{color:var(--danger)}.attention-alto .attention-icon{color:var(--warning)}
.attention-copy{min-width:0}.attention-copy h3{margin:2px 0 3px}.attention-copy p{margin:0;color:var(--text-secondary)}
.attention-meta{display:flex;align-items:center;gap:8px}.attention-meta>span{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.attention-meta small{color:var(--text-muted)}
.attention-next{display:block;margin-top:7px;color:var(--text-muted)}.attention-next strong{color:var(--text-secondary)}
.attention-cta{white-space:nowrap}
.dashboard-attention-clear{display:flex;align-items:center;gap:12px;padding:17px}.dashboard-attention-clear p{margin:2px 0 0;color:var(--text-muted)}.dashboard-attention-clear .attention-clear-icon{color:var(--success)}
.dashboard-activity-feed .card-header>div p{margin:3px 0 0;color:var(--text-muted)}
.dashboard-activity-list{display:grid}
.activity-feed-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;padding:13px 0;border-top:1px solid var(--line-soft)}
.activity-feed-row:first-child{border-top:0}.activity-feed-row p{margin:2px 0;color:var(--text-secondary)}.activity-feed-row small{color:var(--text-muted)}
@media(max-width:760px){
 .attention-item,.activity-feed-row{grid-template-columns:auto minmax(0,1fr)}
 .attention-cta,.activity-feed-row>a{grid-column:2;width:max-content}
 .dashboard-attention-section .dashboard-section-header{align-items:flex-start}
}

/* v2.7.101 · Dashboard hierarchy restoration */
.dashboard-spotlight{position:relative;overflow:hidden;border-radius:var(--radius-card);transition:background-color .2s ease,border-color .2s ease}
.dashboard-spotlight::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--text-main);opacity:.72}
.dashboard-spotlight-copy{position:relative;z-index:1}.dashboard-spotlight .spotlight-cta{position:relative;z-index:1}
.spotlight-extra{display:inline-flex;align-items:center;min-height:24px;margin-left:8px;padding:3px 8px;border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface-card) 76%,transparent);color:var(--text-secondary);font-size:var(--text-xs);font-weight:700}
.spotlight-proceso{background:linear-gradient(135deg,color-mix(in srgb,var(--text-main) 7%,var(--surface-card)),var(--surface-card))}
.spotlight-alerta{background:linear-gradient(135deg,color-mix(in srgb,var(--semantic-warning) 11%,var(--surface-card)),var(--surface-card));border-color:color-mix(in srgb,var(--semantic-warning) 25%,var(--line-soft))}.spotlight-alerta::before{background:var(--semantic-warning)}.spotlight-alerta .spotlight-eyebrow{color:var(--semantic-warning)}
.spotlight-urgente{background:linear-gradient(135deg,color-mix(in srgb,var(--semantic-warning) 12%,var(--surface-card)),var(--surface-card));border-color:color-mix(in srgb,var(--semantic-warning) 27%,var(--line-soft))}.spotlight-urgente::before{background:var(--semantic-warning)}.spotlight-urgente .spotlight-eyebrow{color:var(--semantic-warning)}
.spotlight-critico{background:linear-gradient(135deg,color-mix(in srgb,var(--semantic-danger) 10%,var(--surface-card)),var(--surface-card));border-color:color-mix(in srgb,var(--semantic-danger) 25%,var(--line-soft))}.spotlight-critico::before{background:var(--semantic-danger)}.spotlight-critico .spotlight-eyebrow{color:var(--semantic-danger)}
.dashboard-activity-showcase{min-width:0;padding:20px;border:1px solid var(--line-soft);border-radius:var(--radius-card);background:var(--surface-card);box-shadow:var(--sombra-suave,0 8px 24px rgba(15,23,42,.04))}
.activity-showcase-header{margin-bottom:15px}.activity-showcase-header .dashboard-section-heading p{margin:4px 0 0;color:var(--text-muted)}
.activity-showcase-viewport{position:relative;min-width:0}
.dashboard-context-rail{overflow-x:auto;overflow-y:visible;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 1px 9px}.dashboard-context-rail::-webkit-scrollbar{display:none}
.dashboard-context-track{display:flex!important;width:max-content;min-width:100%;gap:14px!important}
.activity-showcase-card{--activity-accent:var(--color-primario,var(--primario));--activity-soft:color-mix(in srgb,var(--activity-accent) 10%,var(--surface-card));position:relative;overflow:hidden;flex:0 0 clamp(226px,19vw,282px);width:clamp(226px,19vw,282px);min-height:286px;padding:20px 18px 16px;border:1px solid var(--line-soft);border-radius:var(--radius-card);background:var(--surface-card);display:grid;grid-template-rows:auto 1fr auto;gap:18px;scroll-snap-align:start;box-shadow:var(--sombra-suave,0 8px 24px rgba(15,23,42,.045))}
.activity-showcase-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--activity-accent)}
.activity-module-nomina{--activity-accent:var(--color-primario,var(--primario))}.activity-module-documentos{--activity-accent:var(--semantic-success)}.activity-module-expedientes{--activity-accent:var(--semantic-warning)}.activity-module-altas{--activity-accent:var(--semantic-info)}.activity-module-compras{--activity-accent:var(--semantic-warning)}.activity-module-gastos{--activity-accent:var(--semantic-success)}.activity-module-organizacion{--activity-accent:var(--semantic-info)}
.activity-card-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-lg);background:var(--activity-soft);color:var(--activity-accent)}
.activity-card-module{display:block;margin-bottom:9px;color:var(--activity-accent);font-size:var(--text-xs);font-weight:700;letter-spacing:.055em;text-transform:uppercase}
.activity-card-body h3{margin:0;color:var(--text-main);font-size:var(--text-lg);line-height:1.28}.activity-card-body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:10px 0 0;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.48}
.activity-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}.activity-card-time{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:var(--text-xs)}
.activity-card-arrow{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-main);text-decoration:none;transition:transform .16s ease,border-color .16s ease,background .16s ease}.activity-card-arrow:hover,.activity-card-arrow:focus-visible{transform:translateX(2px);border-color:color-mix(in srgb,var(--activity-accent) 35%,var(--line-soft));background:var(--activity-soft)}
.activity-rail-next{position:absolute;right:-17px;top:50%;transform:translateY(-50%);z-index:3;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:var(--surface-card);color:var(--text-main);box-shadow:var(--shadow-md);cursor:pointer}.activity-rail-next:hover{background:var(--surface-soft)}
.activity-showcase-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;margin-top:11px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--color-primario,var(--primario)) 8%,var(--line-soft));border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primario,var(--primario)) 5%,var(--surface-soft));color:var(--text-secondary);font-size:var(--text-sm)}
.activity-showcase-note-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primario,var(--primario)) 10%,transparent);color:var(--color-primario,var(--primario))}.activity-showcase-note a{color:var(--color-primario,var(--primario));font-weight:700;text-decoration:none}.activity-showcase-note a:hover{text-decoration:underline}
.dashboard-context-empty{display:flex;align-items:center;gap:10px;padding:14px}.dashboard-context-empty>span{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-md);background:var(--surface-soft);color:var(--text-muted)}.dashboard-context-empty div{display:grid;gap:2px}.dashboard-context-empty small{color:var(--text-muted)}
html[data-theme="dark"] .dashboard-activity-showcase,html[data-theme="dark"] .activity-showcase-card,html[data-theme="dark"] .activity-card-arrow{background:var(--surface-card);border-color:var(--line-soft)}
@media(max-width:980px){.activity-showcase-card{flex-basis:clamp(220px,31vw,268px);width:clamp(220px,31vw,268px)}}
@media(max-width:760px){.spotlight-extra{margin:7px 0 0}.dashboard-activity-showcase{padding:16px}.dashboard-context-track{padding-right:max(16px,env(safe-area-inset-right))}.activity-showcase-card{flex-basis:min(78vw,276px);width:min(78vw,276px);min-height:268px}.activity-rail-next{display:none}.activity-showcase-note{grid-template-columns:auto 1fr}.activity-showcase-note a{grid-column:2}}
@media(prefers-reduced-motion:reduce){.dashboard-spotlight,.dashboard-context-rail,.activity-card-arrow{transition:none!important;scroll-behavior:auto!important}}

/* Navigation Architecture & Selection Contract 1.4 — canonical collapsed-domain behavior.
   Neutral = base. Gray = hover/persistent submenu selection. White Label soft = active expanded domain.
   No submenu container background, bullets, or side rail. */
.nav-domain-toggle{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.nav-domain-toggle .nav-domain-chevron{margin-inline-start:auto;transition:transform var(--motion-fast,160ms) ease}
.nav-domain-toggle[aria-expanded="true"] .nav-domain-chevron{transform:rotate(90deg)}
.nav-domain-toggle:not([aria-expanded="true"]):hover{
  background:var(--surface-subtle,var(--gris-100));
  color:var(--text-main);
}
.nav-domain-toggle[aria-expanded="true"]{
  background:var(--brand-soft,var(--color-primario-suave));
  color:var(--color-primario);
}
.nav-domain-panel[hidden]{display:none!important}
.nav-domain-panel{
  display:grid;
  background:transparent;
}
.nav-domain-child{padding-inline-start:calc(var(--space-4,16px) + var(--space-3,12px))}
.nav-domain-child:hover{
  background:var(--surface-subtle,var(--gris-100));
  color:var(--text-main);
}
.nav-domain-child.active,
.nav-domain-child.active:hover{
  background:color-mix(in srgb,var(--text-main) 7%,var(--surface-subtle,var(--gris-100)));
  color:var(--text-main);
}
html[data-theme="dark"] .nav-domain-toggle:not([aria-expanded="true"]):hover,
html[data-theme="dark"] .nav-domain-child:hover{
  background:var(--surface-subtle,var(--surface-elevated));
  color:var(--text-main);
}
html[data-theme="dark"] .nav-domain-toggle[aria-expanded="true"]{
  background:var(--brand-soft);
  color:var(--color-primario);
}
html[data-theme="dark"] .nav-domain-child.active,
html[data-theme="dark"] .nav-domain-child.active:hover{
  background:color-mix(in srgb,var(--text-main) 9%,var(--surface-subtle,var(--surface-elevated)));
  color:var(--text-main);
}


/* Navigation Geometry Contract 1.4 — equal-width submenu pills + mobile radius integrity.
   Parent domain and submenu items share the same horizontal pill geometry.
   Indentation remains internal only; it must never reduce the selectable surface width. */
.sidebar .nav-domain-panel{
  width:100%;
  min-width:0;
}
.sidebar .nav-domain-toggle,
.sidebar .nav-domain-child{
  box-sizing:border-box;
  width:calc(100% - 12px);
  max-width:calc(100% - 12px);
  margin:1px 6px;
}
.sidebar .nav-domain-child{
  /* Keep hierarchy through inner padding, not a narrower pill. */
  padding-inline-start:calc(var(--space-4,16px) + var(--space-3,12px));
}

/* v2.8.91 · Compliance bulk signature guidance */
.compliance-bulk-form input[data-signature-person]:disabled{cursor:not-allowed;opacity:.42}

/* Flōow 2.8.97 — Lifecycle Builder Interaction Closure.
   Module interaction only; canonical geometry remains owned by Design System Authority. */
.lifecycle-step-heading{display:flex;align-items:flex-start;justify-content:space-between}.lifecycle-step-heading>div{min-width:0;flex:1}.lifecycle-inline-edit-form{flex:0 0 auto;margin:0 0 0 12px}.lifecycle-step-description{margin-top:4px}.lifecycle-rich-display{color:var(--text-muted);line-height:1.55}.lifecycle-rich-display p{margin:0 0 6px}.lifecycle-rich-display p:last-child{margin-bottom:0}.lifecycle-rich-display ul,.lifecycle-rich-display ol{margin:5px 0 5px 18px}.lifecycle-rich-display li+li{margin-top:2px}.lifecycle-rich-display strong{color:var(--text-main);font-weight:700}.lifecycle-rich-editor{border:1px solid var(--line-soft);background:var(--surface-elevated);overflow:hidden}.lifecycle-rich-editor:focus-within{border-color:var(--color-primario)}.lifecycle-rich-toolbar{display:flex;align-items:center;padding:6px 8px;border-bottom:1px solid var(--line-soft);background:var(--surface-subtle);overflow-x:auto}.lifecycle-rich-toolbar button{width:30px;height:30px;border:0;background:transparent;color:var(--text-main);display:grid;place-items:center;font:inherit;cursor:pointer;margin-right:4px}.lifecycle-rich-toolbar button:last-child{margin-right:0}.lifecycle-rich-toolbar button:hover{background:var(--surface-soft)}.lifecycle-rich-toolbar button:focus-visible{outline:2px solid var(--color-primario);outline-offset:1px}.lifecycle-rich-surface{min-height:112px;padding:12px 14px;color:var(--text-main);line-height:1.55;outline:none}.lifecycle-rich-editor-compact .lifecycle-rich-surface{min-height:88px}.lifecycle-rich-surface:empty:before{content:attr(data-placeholder);color:var(--text-muted);pointer-events:none}.lifecycle-rich-surface p{margin:0 0 7px}.lifecycle-rich-surface ul,.lifecycle-rich-surface ol{margin:6px 0 6px 20px}.lifecycle-picker-guidance{display:grid;justify-items:center;margin-top:10px}.lifecycle-picker-guidance small{max-width:330px;color:var(--text-muted);line-height:1.45;margin-top:8px}.employee-flow-step-description{margin-top:2px}.employee-flow-step-copy>.lifecycle-rich-display{line-height:1.45}.lifecycle-starter-step .btn{white-space:nowrap}.lifecycle-step-details[open]>summary{margin-bottom:12px}.lifecycle-step-details>summary{list-style:none}.lifecycle-step-details>summary::-webkit-details-marker{display:none}

/* Lifecycle and shared identity compositions are owned by Design System Authority (DS-2026-042). */


/* ============================================================
   v2.8.168–2.8.174 · Validaciones governed composition
   Module consumes canonical geometry/tokens; no local geometry authority.
   ============================================================ */
.ui-icon-text{display:inline-flex;align-items:center;gap:var(--icon-text-gap);min-width:0}
.ui-icon-text>svg,.ui-icon-text>.validation-group-icon>svg{flex:0 0 auto}
.validation-capture form{min-width:0}
.validation-capture form>.validation-guided-card,.validation-capture form>.validation-options,.validation-capture form>.validation-evidence-hint,.validation-capture form>.validation-submit,.validation-capture form>.ayuda{grid-column:1/-1;width:100%;min-width:0;box-sizing:border-box}
.validation-guided-card{display:block}
.validation-group-icon{display:grid;place-items:center;color:var(--color-primario,var(--primario))}
.validation-group-icon--compare{color:var(--semantic-success,var(--success))}
.validation-history .table-enterprise th:last-child,.validation-history .table-enterprise td:last-child{text-align:center}
.validation-history-action .btn-icon-only{display:inline-grid;place-items:center}
.validation-traceability-note{width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
.validation-traceability-note>div{min-width:0;max-width:100%}
.validation-traceability-note strong,.validation-traceability-note p{overflow-wrap:anywhere}
.validation-query-mode{margin:0;padding:0;border:0;min-width:0}
.validation-query-mode>legend{margin:0 0 var(--space-2);padding:0;font-weight:700}
.validation-history-more{display:flex;justify-content:center}
.validation-history-more[hidden],.validation-history-row[hidden]{display:none}
.validation-history-more-btn{display:inline-flex;align-items:center}