@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/*
 * Sistema RSU · tema propio del panel.
 * Paleta azul municipal sobre fondos claros, tarjetas con bordes suaves, tablas limpias y formularios en un panel lateral.
 * Se carga como plugin de AdminLTE (config/adminlte.php).
 */
:root {
    --rsu-brand-50: #e8f2fa;
    --rsu-brand-100: #d0e6f6;
    --rsu-brand-200: #a6cdec;
    --rsu-brand-500: #2e8aca;
    --rsu-brand-600: #0372ae;
    --rsu-brand-700: #025a8a;
    --rsu-brand-900: #002f5a;
    --rsu-ink: #0b2a4a;
    --rsu-text: #334155;
    --rsu-muted: #64748b;
    --rsu-soft: #94a3b8;
    --rsu-line: #d9e3f2;
    --rsu-bg: #ebf0fa;
    --rsu-amber: #f59e0b;
    --rsu-rose: #e11d48;
    --rsu-indigo: #4f46e5;
    --rsu-radius: 16px;
    --rsu-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html, body, .app-wrapper, .btn, .form-control, .form-select, table.dataTable { font-family: var(--rsu-font); }
body { background-color: var(--rsu-bg); color: var(--rsu-text); }
.app-main, .app-content { background: transparent; }
h1, h2, h3, h4, h5 { color: var(--rsu-ink); }

/* ------------------------------------------------------------------ Barra superior ---- */
.app-header.navbar {
    background: #fff !important; border-bottom: 1px solid var(--rsu-line); box-shadow: none; min-height: 3.6rem;
}
.app-header .nav-link, .app-header .navbar-nav .nav-link { color: var(--rsu-text) !important; font-weight: 600; }
.app-header .nav-link:hover { color: var(--rsu-brand-700) !important; }
.app-header .user-menu .nav-link {
    display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; margin-right: .5rem;
    background: var(--rsu-bg); border-radius: 999px;
}

/* ------------------------------------------------------------------ Menú lateral ----- */
.app-sidebar { background: #fff !important; border-right: 1px solid var(--rsu-line); box-shadow: none; }
.app-sidebar .sidebar-brand { background: #fff; border-bottom: 1px solid var(--rsu-line); }
.app-sidebar .sidebar-brand .brand-link {
    display: flex; align-items: center; justify-content: center; width: 100%; padding: .35rem .75rem;
}
.app-sidebar .sidebar-brand .brand-link img { max-height: 46px; width: auto; max-width: 100%; object-fit: contain; }
.app-sidebar .sidebar-menu { padding: .5rem .35rem 1rem; }
.app-sidebar .sidebar-menu .nav-header {
    padding: 1.1rem .9rem .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rsu-soft);
}
.app-sidebar .sidebar-menu .nav-link {
    position: relative; display: flex; align-items: center; gap: .55rem; padding: .55rem .9rem; margin: .1rem 0;
    color: var(--rsu-text); font-weight: 500; border-radius: 12px;
}
.app-sidebar .sidebar-menu .nav-link .nav-icon { color: var(--rsu-soft); font-size: 1.05rem; }
.app-sidebar .sidebar-menu .nav-link:hover:not(.active) { background: #f1f5f9; color: var(--rsu-ink); }
.app-sidebar .sidebar-menu .nav-link.active {
    background: var(--rsu-brand-50) !important; color: var(--rsu-brand-700) !important; font-weight: 700; box-shadow: none !important;
}
.app-sidebar .sidebar-menu .nav-link.active .nav-icon,
.app-sidebar .sidebar-menu .nav-link.active p { color: var(--rsu-brand-600) !important; }
.app-sidebar .sidebar-menu .nav-link.active p { color: var(--rsu-brand-700) !important; }
.app-sidebar .sidebar-menu .nav-link.active::before {
    content: ''; position: absolute; left: -.35rem; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0;
    background: var(--rsu-brand-600);
}

/* ------------------------------------------------------------------ Cabecera de página */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .4rem 0 1.25rem; flex-wrap: wrap; }
.page-head .eyebrow {
    margin: 0 0 .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rsu-brand-600);
}
.page-head h1 { margin: 0; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.page-head p.lead { margin: .2rem 0 0; font-size: .92rem; color: var(--rsu-muted); }

/* ------------------------------------------------------------------ Botones ----------- */
.btn { border-radius: 999px; font-weight: 600; padding: .5rem 1.1rem; }
.btn-primary {
    --bs-btn-bg: var(--rsu-brand-600); --bs-btn-border-color: var(--rsu-brand-600);
    --bs-btn-hover-bg: var(--rsu-brand-700); --bs-btn-hover-border-color: var(--rsu-brand-700);
    --bs-btn-active-bg: var(--rsu-brand-700); --bs-btn-active-border-color: var(--rsu-brand-700);
    --bs-btn-disabled-bg: var(--rsu-brand-600); --bs-btn-disabled-border-color: var(--rsu-brand-600);
    box-shadow: 0 6px 14px -6px rgba(3, 114, 174, .6);
}
.btn-ghost { background: transparent; border: 1px solid var(--rsu-line); color: var(--rsu-text); }
.btn-ghost:hover { background: #f1f5f9; color: var(--rsu-ink); }

.btn-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 10px; font-size: .95rem; transition: filter .15s, transform .15s;
}
.btn-icon:hover { filter: brightness(.94); transform: translateY(-1px); }
.btn-icon-edit { background: var(--rsu-brand-50); color: var(--rsu-brand-700); }
.btn-icon-images { background: #eef2ff; color: #4338ca; }
.btn-icon-delete { background: #fff1f2; color: #be123c; }
.btn-icon-locked { background: #f1f5f9; color: var(--rsu-soft); cursor: not-allowed; }
.btn-icon-locked:hover { transform: none; filter: none; }

/* ------------------------------------------------------------------ Tarjetas y tablas - */
.card { border: 1px solid var(--rsu-line); border-radius: var(--rsu-radius); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); background: #fff; }
.card > .card-body { padding: 1.1rem 1.25rem; }

.dt-container .dt-layout-row { margin: 0 0 .75rem; }
.dt-container .dt-search input, .dt-container .dt-length select {
    border: 1px solid var(--rsu-line); border-radius: 999px; padding: .4rem .9rem; background: #f8fafc;
}
.dt-container .dt-search input:focus { outline: none; border-color: var(--rsu-brand-500); background: #fff; box-shadow: 0 0 0 .2rem rgba(46, 138, 202, .15); }
.dt-container .dt-info { color: var(--rsu-muted); font-size: .85rem; }
.dt-container .dt-paging .page-link { border: 0; border-radius: 10px; margin: 0 .1rem; color: var(--rsu-text); font-weight: 600; }
.dt-container .dt-paging .page-item.active .page-link { background: var(--rsu-brand-600); color: #fff; }

table.dataTable { border-collapse: separate; border-spacing: 0; }
table.dataTable > thead > tr > th {
    padding: .6rem .55rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--rsu-muted); background: #f8fafc; border-bottom: 1px solid var(--rsu-line) !important;
}
table.dataTable > thead > tr > th:first-child { border-top-left-radius: 12px; }
table.dataTable > thead > tr > th:last-child { border-top-right-radius: 12px; }
table.dataTable > tbody > tr > td { padding: .6rem .55rem; font-size: .88rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; background: transparent; box-shadow: none; }
table.dataTable > tbody > tr:hover > td { background: #f8fafc; }
/* DataTables alinea a la derecha las columnas numéricas (DNI, año, carga): se dejan a la izquierda como el resto. */
table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-numeric { text-align: left; }
table.dataTable th.dt-type-numeric div.dt-column-header { flex-direction: row; justify-content: flex-start; }
table.dataTable td .when { display: block; color: var(--rsu-text); font-size: .85rem; white-space: nowrap; }
table.dataTable td .when small { display: block; margin-top: .05rem; color: var(--rsu-soft); }
table.dataTable td.actions-cell { text-align: right; white-space: nowrap; }
table.dataTable thead th:last-child,
table.dataTable tbody td.actions-cell { position: sticky; right: 0; z-index: 2; box-shadow: -10px 0 10px -10px rgba(15, 23, 42, .22); }
table.dataTable tbody td.actions-cell { background: #fff; }
table.dataTable thead th:last-child { background: #f8fafc; }
table.dataTable > tbody > tr:hover > td.actions-cell { background: #f8fafc; }
table.dataTable td .actions { display: inline-flex; gap: .35rem; }

/* Variante compacta para tablas con muchas columnas (p. ej. vehículos). */
table.dataTable.table-dense > thead > tr > th { padding: .55rem .4rem; font-size: .64rem; letter-spacing: .03em; }
table.dataTable.table-dense > tbody > tr > td { padding: .5rem .4rem; font-size: .82rem; }
table.dataTable.table-dense .code-chip { padding: .12rem .4rem; font-size: .72rem; }
table.dataTable.table-dense .vehicle-thumb { width: 46px; height: 34px; }
table.dataTable.table-dense .btn-icon { width: 30px; height: 30px; font-size: .85rem; }
table.dataTable.table-dense .status { font-size: .78rem; }
table.dataTable.table-dense td .when { font-size: .78rem; }

.code-chip {
    display: inline-block; white-space: nowrap; padding: .2rem .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem; font-weight: 600; color: var(--rsu-text); background: #f1f5f9; border-radius: 8px;
}
.pill { display: inline-block; padding: .2rem .7rem; font-size: .78rem; font-weight: 600; color: var(--rsu-brand-700); background: var(--rsu-brand-50); border-radius: 999px; }
.pill-muted { color: var(--rsu-muted); background: #f1f5f9; }
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-ok { color: var(--rsu-brand-700); }
.status-warn { color: #b45309; }
.status-off { color: var(--rsu-muted); }
.status-on { color: #15803d; } /* Activo / Disponible: verde; Inactivo va en rojo (status-bad) */
.color-swatch {
    display: inline-block; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18);
}
.brand-thumb { width: 42px; height: 42px; object-fit: contain; padding: 4px; background: #fff; border: 1px solid var(--rsu-line); border-radius: 50%; }
.vehicle-thumb { width: 54px; height: 40px; object-fit: cover; border-radius: 10px; background: #f1f5f9; }
.avatar-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }

/* ------------------------------------------------------------------ Panel lateral (formularios) */
.drawer { width: 460px; max-width: 100vw; border-left: 0; box-shadow: -24px 0 48px -12px rgba(15, 23, 42, .25); font-family: var(--rsu-font); }
.drawer.drawer-lg { width: 660px; }
.drawer.drawer-xl { width: 880px; }
.drawer-header { display: flex; align-items: center; gap: .85rem; padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--rsu-line); }
.drawer-header .drawer-icon {
    flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 1.2rem;
    color: var(--rsu-brand-700); background: var(--rsu-brand-50); border-radius: 12px;
}
.drawer-header .drawer-heading { flex: 1; min-width: 0; }
.drawer-header .drawer-title { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.drawer-header .drawer-sub { margin: 0; font-size: .82rem; color: var(--rsu-muted); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0; }
.drawer-body > form { display: flex; flex-direction: column; min-height: 100%; }
.drawer-fields { flex: 1; padding: 1.2rem 1.4rem; }
.drawer-footer {
    position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
    padding: .9rem 1.4rem; background: #fff; border-top: 1px solid var(--rsu-line);
}

.form-label { margin-bottom: .3rem; font-size: .78rem; font-weight: 700; color: #475569; }
.form-control, .form-select {
    padding: .6rem .85rem; border: 1px solid #dbe3ea; border-radius: 12px; background-color: #f8fafc; font-size: .92rem;
}
.form-control:focus, .form-select:focus { background-color: #fff; border-color: var(--rsu-brand-500); box-shadow: 0 0 0 .22rem rgba(46, 138, 202, .16); }
.form-control::placeholder { color: #a8b3c2; }
.form-text { font-size: .76rem; color: var(--rsu-soft); }
/* Campo obligatorio: punto rosa junto a la etiqueta. */
div:has(> .form-control[required]) > .form-label::after,
div:has(> .form-select[required]) > .form-label::after,
div:has(> .input-group > .form-control[required]) > .form-label::after {
    content: ' •'; color: var(--rsu-rose); font-weight: 800;
}
.form-section {
    display: flex; align-items: center; gap: .7rem; margin: 1.3rem 0 .75rem; font-size: .7rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--rsu-soft);
}
.form-section:first-child { margin-top: 0; }
.form-section::after { content: ''; flex: 1; height: 1px; background: var(--rsu-line); }

/* Selector de color */
.swatch-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .75rem; }
.swatch-btn {
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .2); transition: transform .12s;
}
.swatch-btn:hover { transform: scale(1.12); }
.swatch-btn.is-selected { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .2), 0 0 0 3px #fff, 0 0 0 5px var(--rsu-brand-600); }
.color-card { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; border: 1px solid var(--rsu-line); border-radius: 14px; background: #f8fafc; }
.color-card .color-dot { flex: none; width: 56px; height: 56px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18); }
.color-card .color-hex { font-weight: 800; letter-spacing: .04em; color: var(--rsu-ink); }
.color-card .color-rgb { font-size: .8rem; color: var(--rsu-muted); }

/* ------------------------------------------------------------------ Galería de imágenes */
.gx { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.gx-head { padding: 1rem 1.4rem .2rem; }
.gx-head .gx-name { margin: 0; font-size: 1.05rem; font-weight: 800; }
.gx-head .gx-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.gx-body { flex: 1; padding: .8rem 1.4rem 1.2rem; }
.gx-stage {
    position: relative; display: flex; align-items: center; justify-content: center; height: 300px; overflow: hidden;
    background: #f1f5f9; border-radius: 18px;
}
.gx-stage img { width: 100%; height: 100%; object-fit: contain; }
.gx-stage .gx-empty { text-align: center; color: var(--rsu-soft); }
.gx-stage .gx-empty .bi { font-size: 2.6rem; display: block; margin-bottom: .3rem; }
.gx-badge {
    position: absolute; top: .8rem; left: .8rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem;
    font-size: .76rem; font-weight: 700; color: #78350f; background: #fde68a; border-radius: 999px;
}
.gx-bar { display: flex; align-items: center; justify-content: space-between; margin: 1.1rem 0 .6rem; }
.gx-bar h3 { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--rsu-soft); }
.gx-bar .gx-count { font-size: .8rem; font-weight: 700; color: var(--rsu-muted); }
.gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .75rem; }
.gx-tile {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; background: #f1f5f9;
    border: 2px solid transparent; border-radius: 14px; transition: border-color .15s, transform .15s;
}
.gx-tile:hover { transform: translateY(-2px); }
.gx-tile img { width: 100%; height: 100%; object-fit: cover; }
.gx-tile.is-viewing { border-color: var(--rsu-brand-500); }
.gx-tile.is-removed img { opacity: .22; filter: grayscale(1); }
.gx-tile .gx-fresh {
    position: absolute; left: .4rem; bottom: .4rem; padding: .1rem .5rem; font-size: .66rem; font-weight: 800; color: #fff;
    background: var(--rsu-indigo); border-radius: 999px;
}
.gx-tile .gx-gone {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
    font-size: .74rem; font-weight: 800; color: var(--rsu-rose);
}
.gx-btn {
    position: absolute; top: .4rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 9px; font-size: .85rem; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
}
.gx-star { left: .4rem; color: var(--rsu-soft); }
.gx-star:hover { color: var(--rsu-amber); }
.gx-star.is-on { color: var(--rsu-amber); background: #fffbeb; }
.gx-del { right: .4rem; color: var(--rsu-rose); }
.gx-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; aspect-ratio: 1 / 1; cursor: pointer;
    font-size: .76rem; font-weight: 700; color: var(--rsu-brand-700); background: var(--rsu-brand-50);
    border: 2px dashed var(--rsu-brand-200); border-radius: 14px; transition: background .15s, border-color .15s;
}
.gx-add .bi { font-size: 1.5rem; }
.gx-add:hover { background: var(--rsu-brand-100); border-color: var(--rsu-brand-500); }
.gx-hint { margin: .8rem 0 0; font-size: .76rem; color: var(--rsu-soft); }
.gx-drop {
    position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; text-align: center;
    font-weight: 800; color: var(--rsu-brand-700); background: rgba(232, 242, 250, .93); border: 3px dashed var(--rsu-brand-500); border-radius: 14px;
}
.gx.is-dragging .gx-drop { display: flex; }
.gx-drop .bi { display: block; font-size: 2.4rem; }
.gx-summary { margin-right: auto; font-size: .8rem; color: var(--rsu-muted); }

/* ------------------------------------------------------------------ Inicio ------------ */
.home-top { display: grid; grid-template-columns: minmax(0, clamp(440px, 48%, 540px)) minmax(0, 1fr); gap: 2.2rem; align-items: center; margin-bottom: .5rem; }
.home-photo { margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--rsu-line); border-radius: 20px; box-shadow: 0 14px 34px -18px rgba(0, 47, 90, .5); }
.home-photo img { display: block; width: 100%; height: auto; }
.home-photo figcaption { padding: .7rem 1.1rem; font-size: .82rem; font-weight: 600; color: var(--rsu-muted); border-top: 1px solid var(--rsu-line); }
.home-photo .home-photo-empty { display: flex; align-items: center; justify-content: center; height: 340px; font-size: 4rem; color: var(--rsu-soft); background: #f1f5f9; }
.home-welcome .home-date { margin: 0 0 .35rem; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rsu-brand-600); }
.home-welcome h1 { margin: 0 0 .7rem; font-size: 2.3rem; font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: var(--rsu-brand-900); }
.home-welcome p.home-lead { max-width: 28rem; margin: 0; font-size: 1.02rem; color: var(--rsu-muted); }
.section-title { margin: 1.6rem 0 .65rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rsu-soft); }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .85rem; }
.module-card {
    display: flex; align-items: center; gap: .85rem; padding: .95rem 1.05rem; color: var(--rsu-text); text-decoration: none;
    background: #fff; border: 1px solid var(--rsu-line); border-radius: 14px; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.module-card:hover { transform: translateY(-2px); border-color: var(--rsu-brand-200); box-shadow: 0 12px 24px -16px rgba(3, 114, 174, .55); color: var(--rsu-text); }
.module-card .module-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 1.15rem; color: var(--rsu-brand-700); background: var(--rsu-brand-50); border-radius: 12px; }
.module-card .module-name { display: block; font-weight: 800; color: var(--rsu-ink); }
.module-card .module-desc { display: block; margin-top: .05rem; font-size: .8rem; color: var(--rsu-muted); }
.module-card .module-go { margin-left: auto; color: var(--rsu-soft); }
@media (max-width: 1000px) {
    .home-top { grid-template-columns: 1fr; gap: 1.2rem; }
    .home-photo { max-width: 540px; }
}

/* ------------------------------------------------------------------ Acceso (login) ---- */
.auth-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; font-family: var(--rsu-font); background: #fff; }
.auth-aside {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; color: #fff;
    background: linear-gradient(160deg, rgba(0, 47, 90, .55), rgba(0, 47, 90, .92)), var(--auth-image, none) center / cover, #002f5a;
}
.auth-aside h2 { margin: 0 0 .6rem; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.auth-aside p { max-width: 28rem; margin: 0; color: #d0e6f6; }
.auth-aside .auth-chip {
    align-self: flex-start; margin-bottom: auto; padding: .7rem 1rem; background: #fff; border-radius: 16px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4);
}
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .auth-logo { margin-bottom: 1.6rem; }
.auth-card h1 { margin: 0 0 .3rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--rsu-ink); }
.auth-card .auth-sub { margin: 0 0 1.5rem; color: var(--rsu-muted); }
.auth-card label.auth-label { display: block; margin-bottom: .3rem; font-size: .78rem; font-weight: 700; color: #475569; }
.auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="text"] {
    width: 100%; padding: .7rem .9rem; border: 1px solid #dbe3ea; border-radius: 12px; background: #f8fafc; font-size: .95rem;
}
.auth-card input[type="email"]:focus, .auth-card input[type="password"]:focus, .auth-card input[type="text"]:focus {
    outline: none; background: #fff; border-color: var(--rsu-brand-500); box-shadow: 0 0 0 .22rem rgba(46, 138, 202, .16);
}
.auth-card .auth-field { margin-bottom: 1rem; }
.auth-card .auth-check { display: inline-flex; align-items: center; gap: .55rem; margin: 0; cursor: pointer; color: var(--rsu-text); }
.auth-card .auth-check input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; flex: none; width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; cursor: pointer;
    background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
    border: 1.5px solid #9fb2cc; border-radius: 5px; transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.auth-card .auth-check input[type="checkbox"]:hover { border-color: var(--rsu-brand-500); }
.auth-card .auth-check input[type="checkbox"]:checked {
    background-color: var(--rsu-brand-600); border-color: var(--rsu-brand-600);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.auth-card .auth-check input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 .22rem rgba(46, 138, 202, .3); }
.auth-card .auth-row { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 1.4rem; font-size: .85rem; }
.auth-card .auth-row a { color: var(--rsu-brand-700); font-weight: 600; text-decoration: none; }
.auth-card .auth-row a:hover { text-decoration: underline; }
.auth-card .auth-submit {
    width: 100%; padding: .8rem 1rem; font-size: .95rem; font-weight: 700; color: #fff; cursor: pointer;
    background: var(--rsu-brand-600); border: 0; border-radius: 999px; box-shadow: 0 10px 20px -10px rgba(3, 114, 174, .8); transition: background .15s;
}
.auth-card .auth-submit:hover { background: var(--rsu-brand-700); }
.auth-card .auth-errors { margin-bottom: 1rem; padding: .75rem 1rem; font-size: .85rem; color: #9f1239; background: #fff1f2; border-radius: 12px; }
@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
}

/* ------------------------------------------------------------------ Personal, contratos y asistencias */
.page-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.status-bad { color: #be123c; }
.pill-in { color: #047857; background: #ecfdf5; }
.pill-out { color: #b45309; background: #fffbeb; }
.money { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rsu-ink); white-space: nowrap; }
.person-cell { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.person-cell .avatar-thumb { flex: none; width: 32px; height: 32px; }
.text-warn { color: #b45309; }

/* Filtros del listado de asistencias */
.filter-card { margin-bottom: 1rem; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem; }
.filter-bar > div { min-width: 150px; }
.filter-bar .filter-grow { flex: 1; min-width: 220px; }
.filter-bar .filter-actions { display: flex; gap: .5rem; min-width: 0; }

/* Selector de personal con búsqueda */
.person-picker, .group-picker { position: relative; }
.person-picker .picker-field, .group-picker .picker-field { position: relative; }
.person-picker .picker-icon, .group-picker .picker-icon { position: absolute; top: 50%; left: .85rem; transform: translateY(-50%); color: var(--rsu-soft); pointer-events: none; }
.person-picker .picker-input, .group-picker .picker-input { padding-left: 2.4rem; padding-right: 2.4rem; }
.person-picker .picker-clear, .group-picker .picker-clear {
    position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; color: var(--rsu-muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.person-picker .picker-clear:hover, .group-picker .picker-clear:hover { color: var(--rsu-rose); background: #fff1f2; }
.person-picker .picker-clear[hidden], .person-picker .picker-results[hidden], .group-picker .picker-clear[hidden], .group-picker .picker-results[hidden] { display: none; }
.person-picker .picker-results, .group-picker .picker-results {
    position: absolute; z-index: 20; left: 0; right: 0; max-height: 264px; margin-top: .3rem; overflow-y: auto;
    background: #fff; border: 1px solid var(--rsu-line); border-radius: 14px; box-shadow: 0 18px 34px -16px rgba(15, 23, 42, .35);
}
.person-picker .picker-item, .group-picker .picker-item {
    display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center; width: 100%; padding: .5rem .8rem;
    text-align: left; background: transparent; border: 0; cursor: pointer;
}
.person-picker .picker-item:hover, .person-picker .picker-item:focus-visible, .group-picker .picker-item:hover, .group-picker .picker-item:focus-visible { background: var(--rsu-brand-50); outline: none; }
.person-picker .picker-item .avatar-thumb, .group-picker .picker-item .avatar-thumb { grid-row: span 2; width: 34px; height: 34px; }
.person-picker .picker-item .picker-name, .group-picker .picker-item .picker-name { font-weight: 700; color: var(--rsu-ink); }
.person-picker .picker-item small, .group-picker .picker-item small { color: var(--rsu-muted); }
.person-picker .picker-empty, .group-picker .picker-empty { padding: .8rem 1rem; font-size: .85rem; color: var(--rsu-muted); }
.group-picker .picker-item { grid-template-columns: 1fr; }
.form-switch .form-check-input { width: 2.6em; height: 1.35em; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--rsu-brand-600); border-color: var(--rsu-brand-600); }
.form-switch .form-check-label { margin-left: .35rem; font-weight: 600; color: var(--rsu-text); cursor: pointer; }
input.form-control:disabled { color: var(--rsu-muted); background-color: #f1f5f9; }

/* Ficha de la persona en el formulario de asistencia */
.person-card { margin-top: 1rem; padding: .9rem 1rem; background: var(--rsu-brand-50); border: 1px solid var(--rsu-brand-100); border-radius: 14px; }
.person-card[hidden] { display: none; }
.person-card .pc-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.person-card .pc-head .avatar-thumb { width: 44px; height: 44px; }
.person-card .pc-head strong { display: block; color: var(--rsu-ink); }
.person-card .pc-head small { color: var(--rsu-muted); }
.person-card .pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; margin: 0 0 .8rem; }
.person-card .pc-grid .pc-wide { grid-column: 1 / -1; }
.person-card dt { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rsu-soft); }
.person-card dd { margin: 0; font-size: .88rem; font-weight: 600; color: var(--rsu-text); overflow-wrap: anywhere; }
.person-card .pc-marks { padding: .6rem .8rem; background: #fff; border-radius: 10px; }
.person-card .pc-title { margin-bottom: .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rsu-muted); }
.person-card .pc-marks ul { margin: 0; padding: 0; list-style: none; font-size: .86rem; }
.person-card .pc-marks li { padding: .12rem 0; }
.person-card .pc-marks .pc-none { color: var(--rsu-muted); }
.person-card .pc-hint { margin-top: .7rem; padding: .5rem .8rem; font-size: .82rem; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 10px; }
.person-card .pc-hint[hidden] { display: none; }

/* Módulo de marcación */
.mark-clock { margin-bottom: 1.4rem; padding: 1rem 1.2rem; text-align: center; background: var(--rsu-brand-50); border: 1px solid var(--rsu-brand-100); border-radius: 18px; }
.mark-clock .mark-time { font-size: 2.6rem; font-weight: 800; letter-spacing: .04em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--rsu-brand-900); }
.mark-clock .mark-date { margin-top: .2rem; font-size: .88rem; font-weight: 600; color: var(--rsu-muted); }
.mark-result { min-height: 5rem; margin-top: 1.1rem; }
.mark-result .mark-box { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; text-align: center; border-radius: 14px; }
.mark-result .mark-box strong { font-size: 1.05rem; }
.mark-result .mark-box span { font-size: .85rem; }
.mark-result .mark-ok { color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; }
.mark-result .mark-warn { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.mark-result .mark-bad { color: #9f1239; background: #fff1f2; border: 1px solid #fecdd3; }
.mark-foot { margin: .6rem 0 0; font-size: .78rem; text-align: center; color: var(--rsu-soft); }

/* Campos de fecha y hora: ícono propio (azul del tema), siempre visible, con toda la zona derecha clicable */
input[type="date"].form-control, input[type="time"].form-control { position: relative; padding-right: 2.7rem; }
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator {
    position: absolute; top: 0; right: 0; width: 2.7rem; height: 100%; margin: 0; padding: 0; opacity: 1; cursor: pointer;
    border-radius: 0 .5rem .5rem 0; background-position: center; background-repeat: no-repeat; background-size: 1.1rem;
}
input[type="date"].form-control::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230372ae' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='3' width='12.4' height='11' rx='2'/%3E%3Cpath d='M1.8 6.6h12.4M5 1.6v2.6M11 1.6v2.6'/%3E%3C/svg%3E");
}
input[type="time"].form-control::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230372ae' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.2 1.4'/%3E%3C/svg%3E");
}
input[type="date"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="time"].form-control::-webkit-calendar-picker-indicator:hover { background-color: var(--rsu-brand-50); }
input[type="date"].form-control:disabled::-webkit-calendar-picker-indicator,
input[type="time"].form-control:disabled::-webkit-calendar-picker-indicator { opacity: .35; cursor: not-allowed; }
/* Con error, Bootstrap añade un ícono de alerta que choca con el del calendario: en fecha y hora basta el borde rojo */
input[type="date"].form-control.is-invalid, input[type="time"].form-control.is-invalid { background-image: none; padding-right: 2.7rem; }

/* ------------------------------------------------------------------ Vacaciones, turnos y zonas (Avance 03) */
.btn-icon-ok { background: #ecfdf5; color: #047857; }
.btn-icon-reject { background: #fffbeb; color: #b45309; }
.btn-icon-map { background: #eef2ff; color: #4338ca; }
.days-chip { display: inline-block; min-width: 2.1rem; padding: .15rem .55rem; font-size: .82rem; font-weight: 800; text-align: center; color: var(--rsu-brand-700); background: var(--rsu-brand-50); border-radius: 8px; }
.days-chip-muted { color: var(--rsu-muted); background: #f1f5f9; }

/* Solicitud de vacaciones: contrato y días disponibles de la persona */
.vac-info { margin-top: 1rem; padding: .9rem 1rem; background: var(--rsu-brand-50); border: 1px solid var(--rsu-brand-100); border-radius: 14px; }
.vac-info[hidden] { display: none; }
.vac-info .vi-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.vac-info .vi-top .avatar-thumb { width: 42px; height: 42px; }
.vac-info .vi-who { flex: 1; min-width: 0; }
.vac-info .vi-who strong { display: block; color: var(--rsu-ink); }
.vac-info .vi-who small { color: var(--rsu-muted); }
.vac-info .vi-contract { padding: .2rem .7rem; font-size: .76rem; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.vac-info .vi-contract.is-ok { color: #047857; background: #d1fae5; }
.vac-info .vi-contract.is-bad { color: #9f1239; background: #ffe4e6; }
.vac-info .vi-meter-head { display: flex; justify-content: space-between; margin-bottom: .3rem; font-size: .82rem; color: var(--rsu-muted); }
.vac-info .vi-meter-head b { color: var(--rsu-ink); }
.vac-info .vi-meter { height: 8px; overflow: hidden; background: #fff; border-radius: 999px; }
.vac-info .vi-meter span { display: block; height: 100%; background: var(--rsu-brand-600); border-radius: 999px; transition: width .25s; }
.vac-info .vi-requests { margin-top: .8rem; padding: .55rem .8rem; background: #fff; border-radius: 10px; }
.vac-info .vi-title { margin-bottom: .25rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rsu-muted); }
.vac-info ul { margin: 0; padding: 0; list-style: none; font-size: .84rem; }
.vac-info li { display: flex; justify-content: space-between; gap: .6rem; padding: .12rem 0; }
.vac-info li em { font-style: normal; font-weight: 700; font-size: .76rem; }
.vac-info li .vi-pendiente { color: #b45309; }
.vac-info li .vi-aprobada { color: #047857; }
.vac-info .vi-none { color: var(--rsu-muted); }
.rules-note { margin-top: 1.1rem; padding: .8rem 1rem; font-size: .83rem; color: #78350f; background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; }
.rules-note .rn-title { margin-bottom: .3rem; font-weight: 800; }
.rules-note ul { margin: 0; padding-left: 1.1rem; }
.rules-note li { margin-bottom: .1rem; }

/* Formulario de zona: búsqueda, coordenadas y mapa */
.zone-search { position: relative; margin-bottom: 1rem; }
.zone-results { position: absolute; z-index: 1200; left: 0; right: 0; max-height: 230px; margin-top: .3rem; overflow-y: auto; background: #fff; border: 1px solid var(--rsu-line); border-radius: 14px; box-shadow: 0 18px 34px -16px rgba(15, 23, 42, .35); }
.zone-results[hidden] { display: none; }
.zone-result { display: block; width: 100%; padding: .55rem .9rem; font-size: .84rem; text-align: left; color: var(--rsu-text); background: transparent; border: 0; cursor: pointer; }
.zone-result:hover { background: var(--rsu-brand-50); }
.zone-result-empty { padding: .7rem .9rem; font-size: .84rem; color: var(--rsu-muted); }
.coords-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.coords-count { padding: .15rem .65rem; font-size: .75rem; font-weight: 700; color: var(--rsu-brand-700); background: var(--rsu-brand-50); border-radius: 999px; }
.coords-list { max-height: 210px; overflow-y: auto; margin-bottom: .6rem; }
.coord-row { display: grid; grid-template-columns: 1.8rem 1fr 1fr auto; gap: .45rem; align-items: center; margin-bottom: .35rem; }
.coord-row .coord-n { font-size: .75rem; font-weight: 800; text-align: center; color: var(--rsu-soft); }
.coord-row .form-control { font-variant-numeric: tabular-nums; }
.coord-empty { padding: .7rem .9rem; font-size: .84rem; color: var(--rsu-muted); background: #f8fafc; border: 1px dashed var(--rsu-line); border-radius: 12px; }
.coords-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.coords-actions .btn { padding: .35rem .9rem; font-size: .82rem; }
.zone-map-wrap { margin-top: .6rem; }
.zone-map { height: 380px; border: 1px solid var(--rsu-line); border-radius: 14px; z-index: 0; }
.leaflet-container { font-family: var(--rsu-font); }
.zone-tip { font-weight: 700; color: #9f1239; }

/* Visor del perímetro de una zona */
.zv { border: 0; border-radius: 20px; overflow: hidden; font-family: var(--rsu-font); }
.zv-head { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.4rem; color: #fff; background: linear-gradient(120deg, var(--rsu-brand-900), var(--rsu-brand-600)); }
.zv-head .zv-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; font-size: 1.3rem; background: rgba(255, 255, 255, .16); border-radius: 14px; }
.zv-head .zv-heading { flex: 1; min-width: 0; }
.zv-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff; }
.zv-head p { margin: 0; font-size: .85rem; color: #d0e6f6; }
.zv-head .zv-state { padding: .2rem .8rem; font-size: .75rem; font-weight: 700; color: #065f46; background: #d1fae5; border-radius: 999px; }
.zv-head .zv-state.is-off { color: #475569; background: #e2e8f0; }
.zv-head .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.zv-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: 500px; }
.zv-side { padding: 1.1rem 1.2rem; overflow-y: auto; max-height: 560px; background: #f8fafc; border-right: 1px solid var(--rsu-line); }
.zv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.zv-stat { padding: .65rem .8rem; background: #fff; border: 1px solid var(--rsu-line); border-radius: 12px; }
.zv-stat span { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rsu-soft); }
.zv-stat b { display: block; margin-top: .1rem; font-size: .95rem; color: var(--rsu-ink); overflow-wrap: anywhere; }
.zv-block { margin-bottom: 1rem; }
.zv-label { margin-bottom: .35rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rsu-muted); }
.zv-block p { margin: 0; font-size: .88rem; }
.zv-table { width: 100%; font-size: .8rem; font-variant-numeric: tabular-nums; }
.zv-table th { padding: .25rem .4rem; font-size: .68rem; text-transform: uppercase; color: var(--rsu-soft); border-bottom: 1px solid var(--rsu-line); }
.zv-table td { padding: .25rem .4rem; border-bottom: 1px solid #eef2f7; }
.zv-map { position: relative; min-height: 420px; }
.zv-map #zvMap { position: absolute; inset: 0; }
@media (max-width: 900px) {
    .zv-body { grid-template-columns: 1fr; }
    .zv-side { max-height: none; border-right: 0; border-bottom: 1px solid var(--rsu-line); }
    .zv-map { height: 380px; }
}

/* Mapa de la zona: botón «Ampliar mapa» y vista ampliada (casi pantalla completa, dentro del mismo panel) */
.zmw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.zmw-head .form-label { margin: 0; }
.zmw-head .btn { padding: .25rem .8rem; font-size: .8rem; }
.zmw-bar { display: none; }
.area-ha { font-weight: 700; color: var(--rsu-brand-700); min-height: 1.3em; }
.swal-over-map { z-index: 2000 !important; } /* los avisos deben verse sobre el mapa ampliado (z-index 1100) */
.zone-map-wrap.is-expanded {
    position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; gap: .6rem; margin: 0;
    padding: .9rem 1.3rem 1.1rem; background: #fff;
}
.zone-map-wrap.is-expanded .zmw-bar { display: flex; align-items: center; gap: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--rsu-line); }
.zone-map-wrap.is-expanded .zmw-title { flex: 1; font-size: 1.05rem; font-weight: 800; color: var(--rsu-ink); }
.zone-map-wrap.is-expanded .zmw-stats { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rsu-muted); }
.zone-map-wrap.is-expanded .zmw-bar { flex-wrap: wrap; }
.zmw-area { display: flex; align-items: center; gap: .5rem; }
.zmw-area label { margin: 0; font-size: .8rem; font-weight: 600; color: var(--rsu-muted); white-space: nowrap; }
.zmw-area .form-control { width: 7.5rem; }
.zmw-area .area-ha { font-size: .8rem; white-space: nowrap; min-height: 0; }
.zone-map-wrap.is-expanded .zone-search { max-width: 680px; margin: 0; }
.zone-map-wrap.is-expanded .zmw-head, .zone-map-wrap.is-expanded .zmw-help { display: none; }
.zone-map-wrap.is-expanded .zone-map { flex: 1; height: auto; min-height: 0; }

/* ------------------------------------------------------------------ Feriados, grupos de personal y programación (Avance 04) */
.invalid-feedback.js-error { display: block; }
.form-label.is-required::after { content: ' •'; color: var(--rsu-rose); font-weight: 800; }
.rules-note-info { color: #0c4a6e; background: #f0f9ff; border-color: #bae6fd; }

/* Resumen de arriba del listado de feriados */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi { position: relative; overflow: hidden; padding: 1rem 1.2rem; color: #fff; border-radius: var(--rsu-radius); }
.kpi b { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.kpi span { display: block; margin-top: .15rem; font-size: .85rem; font-weight: 600; opacity: .95; }
.kpi span small { font-weight: 500; opacity: .85; }
.kpi i { position: absolute; right: .9rem; bottom: -.6rem; font-size: 3.6rem; opacity: .22; }
.kpi-blue { background: linear-gradient(135deg, #0372ae, #2e8aca); }
.kpi-green { background: linear-gradient(135deg, #15803d, #22a05a); }
.kpi-amber { background: linear-gradient(135deg, #d97706, #f5a524); }
.kpi-teal { background: linear-gradient(135deg, #0e7490, #22a6c4); }

/* Chips de la tabla: días de la semana, turno, vehículo y ayudantes */
.day-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.day-chip { display: inline-block; padding: .12rem .5rem; font-size: .72rem; font-weight: 700; color: #fff; background: var(--rsu-brand-600); border-radius: 6px; }
.pill-shift { color: #92400e; background: #fef3c7; }
.pill-holiday { padding: .05rem .5rem; font-size: .68rem; color: #9f1239; background: #ffe4e6; }
.chip-stack { display: flex; flex-direction: column; gap: .2rem; }
.chip-stack span { display: block; padding: .15rem .5rem; font-size: .76rem; color: var(--rsu-text); background: #f1f5f9; border-radius: 6px; white-space: nowrap; }
/* Separadores solo para el texto exportado (Excel, PDF, Imprimir): en pantalla los chips ya van separados. */
.chip-stack .sep, .day-chips .sep, .vehicle-chip .sep, .when .sep { display: none; }
.vehicle-chip { display: inline-flex; flex-direction: column; align-items: center; padding: .25rem .8rem; line-height: 1.2; text-align: center; background: #fff; border: 1px solid var(--rsu-line); border-radius: 10px; }
.vehicle-chip b { font-size: .78rem; color: var(--rsu-ink); }
.vehicle-chip small { font-size: .68rem; color: #be123c; }
.state-pill { display: inline-block; min-width: 6.4rem; padding: .25rem .8rem; font-size: .78rem; font-weight: 700; text-align: center; border-radius: 999px; }
.state-planned { color: #0e7490; background: #cffafe; }
.state-done { color: #15803d; background: #fff; border: 1.5px solid #4ade80; }
table.dataTable tbody tr.row-finished > td { background-color: #f0fdf4; }
.btn-icon-detail { background: #e0f2fe; color: #0369a1; }
.btn-icon-finish { background: #d1fae5; color: #047857; }
.btn-icon-edit { cursor: pointer; }

/* Botones de exportación del listado de programaciones */
div.dt-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
div.dt-buttons .btn { margin: 0; border-radius: 10px; font-weight: 600; }

/* Días de la semana (formularios de grupo y de programación) */
.days-box { display: flex; flex-wrap: wrap; gap: .5rem .5rem; }
.day-check { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; margin: 0; font-size: .86rem; font-weight: 600; color: var(--rsu-text); background: #f8fafc; border: 1px solid #dbe3ea; border-radius: 12px; cursor: pointer; }
.day-check:has(input:checked) { color: var(--rsu-brand-700); background: var(--rsu-brand-50); border-color: var(--rsu-brand-200); }
.day-check input {
    display: grid; flex: none; place-content: center; width: 1.1rem; height: 1.1rem; margin: 0; appearance: none; cursor: pointer;
    background: #fff; border: 1.5px solid #94a3b8; border-radius: 5px;
}
.day-check input:checked { background: var(--rsu-brand-600); border-color: var(--rsu-brand-600); }
.day-check input:checked::after { content: ''; width: .55rem; height: .3rem; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* «Programar también en días feriados» */
.holiday-option { display: flex; align-items: center; gap: .55rem; margin: .9rem 0 .25rem; padding-left: 0; font-weight: 700; color: var(--rsu-text); cursor: pointer; }
.holiday-option .form-check-input { flex: none; float: none; margin: 0; width: 1.1rem; height: 1.1rem; cursor: pointer; }
.holiday-option .form-check-input:checked { background-color: var(--rsu-brand-600); border-color: var(--rsu-brand-600); }

/* Conductor y ayudantes: aviso bajo cada selector */
.crew-note { margin-top: .35rem; padding: .35rem .7rem; font-size: .8rem; font-weight: 600; border-radius: 10px; }
.crew-note[hidden] { display: none; }
.crew-note.is-ok { color: #166534; background: #dcfce7; }
.crew-note.is-warn { color: #92400e; background: #fef3c7; }
.crew-note.is-bad { color: #9f1239; background: #ffe4e6; }

/* Programación: datos del grupo y resultado de «Validar disponibilidad» */
.plan-origin { display: flex; flex-direction: column; padding: .6rem .9rem; background: #f8fafc; border: 1px solid var(--rsu-line); border-radius: 12px; }
.plan-origin span, .plan-summary span { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rsu-soft); }
.plan-origin b, .plan-summary b { font-size: .92rem; color: var(--rsu-ink); }
.plan-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1rem 0; padding: .8rem 1rem; background: #f8fafc; border: 1px solid var(--rsu-line); border-radius: 12px; }
.plan-summary > div { display: flex; flex-direction: column; }
.plan-banner { margin-top: 1rem; padding: .8rem 1rem; font-size: .86rem; border-radius: 14px; }
.plan-banner[hidden] { display: none; }
.plan-banner ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.plan-banner li { margin-bottom: .2rem; }
.plan-banner .pb-title { font-weight: 800; }
.plan-banner .pb-gap { margin-top: .7rem; }
.plan-banner .pb-sub { margin-top: .15rem; }
.plan-banner .pb-note { margin-top: .5rem; padding-top: .45rem; font-size: .8rem; border-top: 1px dashed currentColor; }
.plan-banner.is-ok { color: #fff; background: #1ea152; }
.plan-banner.is-bad { color: #fff; background: #dc3545; }
.plan-banner.is-info { color: #075985; background: #e0f2fe; border: 1px solid #bae6fd; }

/* Detalle e historial de una programación */
.detail-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.detail-head b { font-size: 1.05rem; text-transform: capitalize; color: var(--rsu-ink); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; margin: 0; }
.detail-grid > div { padding: .6rem .8rem; background: #f8fafc; border: 1px solid var(--rsu-line); border-radius: 12px; }
.detail-grid .wide { grid-column: 1 / -1; }
.detail-grid dt { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rsu-soft); }
.detail-grid dd { margin: .1rem 0 0; font-size: .9rem; font-weight: 600; color: var(--rsu-text); overflow-wrap: anywhere; }
.detail-grid dd small { font-weight: 500; color: var(--rsu-muted); }
.timeline { margin: 0; padding: 0 0 0 1.1rem; list-style: none; border-left: 2px solid var(--rsu-brand-100); }
.timeline > li { position: relative; margin-bottom: 1rem; padding-left: .9rem; }
.timeline > li::before { content: ''; position: absolute; left: -1.55rem; top: .3rem; width: 11px; height: 11px; background: var(--rsu-brand-600); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--rsu-brand-100); }
.timeline .tl-head { display: flex; flex-direction: column; }
.timeline .tl-head small { color: var(--rsu-muted); }
.timeline ul { margin: .3rem 0 0; padding-left: 1rem; font-size: .84rem; }
.timeline ul s { color: var(--rsu-muted); }

/* Explorador de zonas («Ver mapa de zonas») */
.zx { display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 0; } /* pantalla completa, como el mapa ampliado de la zona */
.zx-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.4rem; color: #fff; background: linear-gradient(120deg, var(--rsu-brand-900), var(--rsu-brand-600)); }
.zx-head h2 { flex: 1; margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.zx-head .zv-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: 1.15rem; background: rgba(255, 255, 255, .16); border-radius: 12px; }
.zx-head .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.zx-body { display: grid; flex: 1; grid-template-columns: 290px minmax(0, 1fr); min-height: 0; }
.zx-side { padding: 1.1rem 1.2rem; overflow-y: auto; background: #fff; border-right: 1px solid var(--rsu-line); }
.zx-side .zv-label i { margin-right: .3rem; color: var(--rsu-brand-600); }
.zx-side .form-label i { margin-right: .25rem; color: var(--rsu-brand-600); }
.zx-side .form-select { font-size: .86rem; }
.zx-kpi { display: flex; flex-direction: column; align-items: center; margin-bottom: .6rem; padding: .55rem .8rem; text-align: center; border-radius: 10px; }
.zx-kpi span { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.zx-kpi b { font-size: 1.35rem; line-height: 1.2; }
.zx-kpi-light { color: var(--rsu-brand-700); background: #e0f2fe; border: 1px solid #7dd3fc; }
.zx-kpi-green { color: #fff; background: #22a05a; }
.zx-kpi-blue { color: #fff; background: #0e86d4; }
.zx-legend { margin: 0; padding: 0; font-size: .78rem; font-weight: 600; list-style: none; color: var(--rsu-text); }
.zx-legend li { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.zx-legend .sw { flex: none; width: 26px; height: 9px; border-radius: 2px; }
.zx-legend .sw-active { background: #22a05a; }
.zx-legend .sw-off { background: #94a3b8; }
.zx-legend .sw-district { background: #0b2a4a; }
.zx-main { display: flex; flex-direction: column; min-width: 0; }
.zx-bar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; color: var(--rsu-ink); background: #fff; border-bottom: 1px solid var(--rsu-line); }
.zx-bar i { color: var(--rsu-brand-600); }
.zx-tools { display: flex; gap: .35rem; margin-left: auto; }
.zx-tools button { display: flex; align-items: center; justify-content: center; width: 34px; height: 30px; color: var(--rsu-brand-700); background: #fff; border: 1px solid var(--rsu-brand-200); border-radius: 8px; }
.zx-tools button:hover { background: var(--rsu-brand-50); }
.zx-map { position: relative; flex: 1; min-height: 0; }
.zx-map #zxMap { position: absolute; inset: 0; }
.zx-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.3rem; font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--rsu-muted); background: #f8fafc; border-top: 1px solid var(--rsu-line); }
.zx-foot i { color: var(--rsu-brand-600); }
.zx-pop { min-width: 150px; }
.zx-pop-title { margin-bottom: .35rem; font-size: 1rem; font-weight: 700; color: var(--rsu-ink); }
.zx-pop p { margin: .45rem 0 0; font-size: .82rem; color: var(--rsu-text); }
.zx-badge { display: inline-block; padding: .1rem .5rem; font-size: .66rem; font-weight: 800; color: #fff; border-radius: 6px; }
.zx-badge.is-on { background: #22a05a; }
.zx-badge.is-off { background: #94a3b8; }
.zx-badge.is-points { background: #0e86d4; }
@media (max-width: 767.98px) {
    .zx-body { display: block; overflow-y: auto; }
    .zx-main { height: 75vh; }
    .zx-side { overflow: visible; border-right: 0; border-bottom: 1px solid var(--rsu-line); }
    .plan-summary, .detail-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Programación masiva, reprogramación y detalles (Avance 05) */
.state-rescheduled { color: #b45309; background: #fef3c7; border: 1.5px solid #fcd34d; }
.plan-summary-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pill-vehicle { color: #fff; background: #0e86d4; }
.pill-vehicle, .pill-shift { font-size: .72rem; padding: .12rem .6rem; }

/* Programación masiva: filtro por turno, feriados del rango y una tarjeta por grupo */
.shift-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.shift-filter .btn { padding: .3rem .9rem; font-size: .85rem; font-weight: 600; }
.holiday-box { padding: .8rem; background: #eef2f7; border: 1px solid var(--rsu-line); border-radius: 14px; }
.hb-head { padding: .5rem .8rem; background: #fff; border: 1px solid var(--rsu-line); border-radius: 10px; color: var(--rsu-ink); }
.hb-head small { margin-left: .4rem; color: var(--rsu-muted); }
.hb-list { display: flex; flex-wrap: wrap; gap: .4rem .8rem; min-height: 3.2rem; margin-top: .6rem; padding: .6rem .8rem; background: #fff; border: 1px solid var(--rsu-line); border-radius: 10px; }
.hb-empty { align-self: center; color: var(--rsu-muted); }
.hb-item { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .25rem .7rem; font-size: .84rem; color: var(--rsu-text); background: #f8fafc; border: 1px solid var(--rsu-line); border-radius: 8px; cursor: pointer; }
.hb-item:has(input:checked) { background: #fff1f2; border-color: #fecdd3; }
.hb-item input { margin: 0; accent-color: var(--rsu-rose); }
.hb-note { margin-top: .6rem; font-size: .8rem; color: #0369a1; }
.mass-count { margin-left: .4rem; font-size: .8rem; font-weight: 700; color: var(--rsu-muted); letter-spacing: 0; text-transform: none; }
.mass-restore { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .7rem; padding: .45rem .8rem; font-size: .84rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; }
.mass-restore[hidden] { display: none; }
.mass-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .9rem; }
.mass-card { padding: .85rem .95rem; background: #f8fafc; border: 1px solid var(--rsu-line); border-radius: 14px; }
.mass-card.is-ok { background: #f0fdf4; border-color: #86efac; }
.mass-card.is-bad { background: #fff7f7; border-color: #fca5a5; }
.mass-card.is-removed, .mass-card.is-hidden { display: none; }
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.mc-head b { font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; color: var(--rsu-ink); }
.mc-remove { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; font-size: .75rem; color: #dc3545; background: #fff; border: 1px solid #dc3545; border-radius: 8px; }
.mc-remove:hover { color: #fff; background: #dc3545; }
.mc-line { margin-bottom: .25rem; font-size: .84rem; color: var(--rsu-text); }
.mc-line > span:first-child { font-weight: 800; color: var(--rsu-ink); }
.mc-label { display: block; margin: .6rem 0 .2rem; font-size: .82rem; font-weight: 800; color: var(--rsu-ink); }
.mass-card .form-select { font-size: .84rem; }
.slot-note { margin-top: .25rem; padding: .25rem .6rem; font-size: .74rem; font-weight: 600; color: #0c5460; background: #d1ecf1; border-left: 3px solid #17a2b8; border-radius: 6px; }
.slot-note.is-ok { color: #166534; background: #dcfce7; border-left-color: #22a05a; }
.slot-note.is-bad { color: #7f1d1d; background: #fee2e2; border-left-color: #dc3545; }
.mass-general { margin-top: 1.4rem; }
.mg-title { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 700; color: #198754; }
.mg-title.is-bad { color: #dc3545; }
.mg-item { margin-bottom: .6rem; background: #fff; border: 1px solid #bfdbfe; border-radius: 12px; overflow: hidden; }
.mg-item.is-bad { border-color: #fca5a5; }
.mg-item > summary { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; cursor: pointer; background: #e0f2fe; list-style: none; }
.mg-item > summary::-webkit-details-marker { display: none; }
.mg-item.is-bad > summary { background: #fef2f2; }
.mg-item > summary small { color: var(--rsu-muted); }
.mg-badges { display: flex; gap: .35rem; margin-left: auto; }
.gb { padding: .12rem .55rem; font-size: .68rem; font-weight: 800; color: #fff; border-radius: 6px; }
.gb-ok { background: #22a05a; }
.gb-bad { background: #dc3545; }
.gb-warn { color: #422006; background: #fbbf24; }
.mg-body { padding: .8rem 1rem; font-size: .84rem; }
.mg-line { margin-bottom: .5rem; color: #0369a1; }
.mg-block { margin-bottom: .5rem; padding: .6rem .8rem; border-radius: 10px; border-left: 4px solid; }
.mg-block ul { margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.mg-block b { display: block; }
.mg-err { color: #7f1d1d; background: #fee2e2; border-left-color: #dc3545; }
.mg-warn { color: #78350f; background: #fef3c7; border-left-color: #f59e0b; }
.mg-ok { color: #14532d; background: #dcfce7; border-left-color: #22a05a; }

/* Modificar programación: tarjetas de cambio y tabla de cambios */
.change-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 1rem 0; }
.change-card { overflow: hidden; background: #fff; border: 1px solid var(--rsu-line); border-radius: 12px; }
.cc-head { padding: .65rem .9rem; font-size: .9rem; font-weight: 700; color: #fff; }
.cc-blue .cc-head { background: #0288d1; }
.cc-amber .cc-head { color: #422006; background: #ffc107; }
.cc-green .cc-head { background: #28a745; }
.cc-body { padding: .8rem .9rem; }
.cc-body .form-label { margin: .55rem 0 .2rem; font-size: .82rem; font-weight: 800; color: var(--rsu-ink); }
.cc-body .form-label:first-child { margin-top: 0; }
.cc-body .form-label small { font-weight: 500; color: var(--rsu-muted); }
.cc-body .form-control, .cc-body .form-select { font-size: .84rem; }
.cc-body textarea { resize: vertical; }
.cc-add { margin-top: .7rem; }
.cc-status { margin-top: .6rem; padding: .45rem .7rem; font-size: .78rem; font-weight: 600; border-radius: 8px; }
.cc-status[hidden] { display: none; }
.cc-status.is-ok { color: #fff; background: #28a745; }
.cc-status.is-bad { color: #7f1d1d; background: #fee2e2; }

/* Tablas del historial de cambios y del personal asignado */
.panel-card { margin-top: 1rem; overflow: hidden; background: #fff; border: 1px solid var(--rsu-line); border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.pc-head { padding: .65rem .95rem; font-size: .92rem; font-weight: 700; color: #fff; }
.panel-blue .pc-head { background: #0288d1; }
.panel-green .pc-head { background: #28a745; }
.pc-empty { margin: 0; padding: 1rem; text-align: center; font-size: .85rem; color: var(--rsu-muted); }
.pc-empty[hidden] { display: none; }
.change-wrap { overflow-x: auto; }
.change-table { width: 100%; font-size: .82rem; border-collapse: collapse; }
.change-table[hidden] { display: none; }
.change-table th { padding: .55rem .7rem; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rsu-soft); background: #f8fafc; border-bottom: 1px solid var(--rsu-line); }
.change-table td { padding: .6rem .7rem; vertical-align: middle; border-bottom: 1px solid #eef2f7; }
.ct-when b, .ct-when small { display: block; }
.ct-when small { color: var(--rsu-muted); }
.ct-reason b, .ct-reason span { display: block; }
.ct-reason span { color: var(--rsu-text); }
.change-badge { display: inline-block; padding: .2rem .7rem; font-size: .74rem; font-weight: 800; color: #fff; background: #64748b; border-radius: 999px; white-space: nowrap; }
.change-schedule { color: #422006; background: #ffc107; }
.change-vehicle { background: #0b2a4a; }
.change-driver { background: #0372ae; }
.change-assistant { background: #198754; }
.origin-badge { padding: .12rem .55rem; font-size: .7rem; font-weight: 800; border-radius: 6px; }
.origin-single { color: #075985; background: #e0f2fe; }
.origin-mass { color: #6d28d9; background: #ede9fe; }
.crew-table { width: 100%; font-size: .88rem; border-collapse: collapse; }
.crew-table th { padding: .55rem .9rem; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rsu-soft); background: #f8fafc; }
.crew-table td { padding: .55rem .9rem; border-top: 1px solid #eef2f7; }
.crew-table small { margin-left: .4rem; color: var(--rsu-muted); }
.role-badge { display: inline-block; padding: .2rem .65rem; font-size: .74rem; font-weight: 800; color: #fff; border-radius: 6px; }
.role-driver { background: #0372ae; }
.role-assistant { background: #198754; }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: .6rem; color: #fff; border-radius: 50%; }
.avatar-driver { background: #0372ae; }
.avatar-assistant { background: #28a745; }

/* Detalle del grupo */
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.stat { display: flex; flex-direction: column; padding: .6rem .8rem; background: #f8fafc; border: 1px solid var(--rsu-line); border-radius: 12px; }
.stat b { font-size: 1.4rem; line-height: 1.1; color: var(--rsu-ink); }
.stat span { font-size: .72rem; font-weight: 700; color: var(--rsu-muted); }
.stat-planned b { color: #0e7490; }
.stat-rescheduled b { color: #b45309; }
.stat-done b { color: #15803d; }
@media (max-width: 900px) {
    .change-cards { grid-template-columns: 1fr; }
    .plan-summary-3, .stat-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Dashboard y gestión de cambios (Avance 06) */
.btn-step {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: var(--rsu-brand-700);
    background: #fff; border: 1px solid var(--rsu-line); border-radius: 50%; transition: background .15s;
}
.btn-step:hover { background: var(--rsu-brand-50); }
.btn-sm { padding: .3rem .85rem; font-size: .82rem; }

/* Controles del día */
.db-controls { margin-bottom: 1rem; }
.db-controls > .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 2.2rem; }
.db-field { display: flex; align-items: center; gap: .65rem; }
.db-label { font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--rsu-soft); }
.db-day { display: inline-flex; align-items: center; gap: .4rem; }
.db-day .form-control { width: 10.5rem; padding-top: .38rem; padding-bottom: .38rem; font-weight: 700; text-align: center; }
.seg { display: inline-flex; flex-wrap: wrap; gap: .15rem; padding: .2rem; background: #eef2f7; border-radius: 999px; }
.seg button { padding: .3rem .9rem; font-size: .83rem; font-weight: 700; color: var(--rsu-muted); background: transparent; border: 0; border-radius: 999px; transition: background .15s, color .15s; }
.seg button:hover { color: var(--rsu-ink); }
.seg button.is-on { color: var(--rsu-brand-700); background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
.db-updated { align-self: center; font-size: .78rem; color: var(--rsu-soft); }

/* Cómo va el día: anillo, una frase y una barra */
.db-summary > .card-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.6rem; }
.db-ring { position: relative; width: 116px; height: 116px; }
.db-ring svg { display: block; transform: rotate(-90deg); }
.db-ring .track { stroke: #e8eef6; }
.db-ring .bar { stroke: #1ea152; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.db-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.db-ring-num b { font-size: 1.6rem; font-weight: 800; color: var(--rsu-ink); }
.db-ring-num small { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rsu-muted); }
.db-day-label { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rsu-brand-600); }
.db-headline { margin: .1rem 0 .8rem; font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; color: var(--rsu-ink); }
.db-meter { display: flex; height: 10px; overflow: hidden; background: #e8eef6; border-radius: 999px; }
.db-meter i { display: block; height: 100%; transition: width .5s ease; }
.db-meter .m-complete { background: #1ea152; }
.db-meter .m-incomplete { background: #e11d48; }
.db-meter .m-pending { background: #94a3b8; }
.db-facts { display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; margin-top: .85rem; font-size: .85rem; color: var(--rsu-muted); }
.db-fact { display: inline-flex; align-items: baseline; gap: .35rem; }
.db-fact b { font-size: 1.15rem; font-weight: 800; color: var(--rsu-ink); }
.db-fact::before { content: ''; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.db-fact.f-complete::before { background: #1ea152; }
.db-fact.f-incomplete::before, .db-fact.f-missing::before { background: #e11d48; }
.db-fact.f-pending::before { background: #94a3b8; }
.db-fact.f-total::before { background: var(--rsu-brand-600); }

/* Tablero: un bloque por turno y una fila por programación */
.db-shift { margin-top: 1.5rem; }
.db-shift-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-bottom: .65rem; }
.db-shift-name { font-size: 1.02rem; font-weight: 800; color: var(--rsu-ink); }
.db-shift-time { font-size: .82rem; font-weight: 600; color: var(--rsu-muted); font-variant-numeric: tabular-nums; }
.db-shift-count { margin-left: auto; font-size: .8rem; color: var(--rsu-muted); }
.db-shift-count b { color: #be123c; }
.db-timing { padding: .12rem .65rem; font-size: .72rem; font-weight: 800; border-radius: 999px; }
.db-timing.is-running { color: #166534; background: #dcfce7; }
.db-timing.is-upcoming { color: #075985; background: #e0f2fe; }
.db-timing.is-over { color: #64748b; background: #f1f5f9; }
.db-row {
    position: relative; display: grid; grid-template-columns: minmax(150px, .85fr) minmax(0, 2.6fr) 108px auto; align-items: center;
    gap: .7rem 1.3rem; margin-bottom: .6rem; padding: .85rem 1.15rem .85rem 1.4rem; overflow: hidden; background: #fff;
    border: 1px solid var(--rsu-line); border-radius: 14px; transition: box-shadow .15s;
}
.db-row:hover { box-shadow: 0 10px 22px -16px rgba(0, 47, 90, .5); }
.db-row::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--accent, #cbd5e1); }
.db-row.is-complete, .db-row.is-finished { --accent: #1ea152; }
.db-row.is-incomplete { --accent: #e11d48; background: #fffafb; border-color: #fecdd3; }
.db-row.is-pending { --accent: #94a3b8; }
.db-zone { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--rsu-ink); }
.db-meta { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin: .2rem 0 0; font-size: .78rem; color: var(--rsu-muted); }
.db-meta i { margin-right: .2rem; color: var(--rsu-soft); }
.db-crew { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.db-person { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .7rem .2rem .25rem; font-size: .8rem; font-weight: 700; border: 1px solid; border-radius: 999px; }
.db-ava { flex: none; display: grid; place-items: center; width: 26px; height: 26px; font-size: .66rem; font-weight: 800; color: #fff; background: #94a3b8; border-radius: 50%; }
.db-pname { display: flex; flex-direction: column; line-height: 1.15; }
.db-pname small { font-size: .66rem; font-weight: 600; opacity: .75; }
.db-person > i { font-size: .95rem; }
.db-person.is-present { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.db-person.is-present .db-ava { background: #22a05a; }
.db-person.is-absent { color: #9f1239; background: #fff1f2; border-color: #fecdd3; }
.db-person.is-absent .db-ava { background: #e11d48; }
.db-person.is-unknown { color: #475569; background: #f8fafc; border-color: var(--rsu-line); }
.db-gauge { text-align: center; }
.db-gauge b { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: var(--rsu-ink); }
.db-gauge b small { font-size: .85rem; font-weight: 700; color: var(--rsu-muted); }
.db-gauge span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rsu-soft); }
.db-bar { height: 5px; margin-top: .35rem; overflow: hidden; background: #e8eef6; border-radius: 999px; }
.db-bar i { display: block; height: 100%; background: #1ea152; }
.db-row.is-incomplete .db-bar i { background: #e11d48; }
.db-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.db-state { padding: .2rem .75rem; font-size: .72rem; font-weight: 800; border-radius: 999px; }
.db-state.s-complete { color: #166534; background: #dcfce7; }
.db-state.s-finished { color: #166534; background: #fff; border: 1.5px solid #4ade80; }
.db-state.s-incomplete { color: #9f1239; background: #ffe4e6; }
.db-state.s-pending { color: #475569; background: #f1f5f9; }
.db-empty { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin-top: 1.5rem; padding: 2.6rem 1rem; text-align: center; color: var(--rsu-muted); background: #fff; border: 1px dashed var(--rsu-line); border-radius: var(--rsu-radius); }
.db-empty i { font-size: 2.4rem; color: var(--rsu-soft); }
.db-empty b { color: var(--rsu-ink); }
@media (max-width: 1100px) {
    .db-row { grid-template-columns: minmax(0, 1fr) auto; }
    .db-main { grid-column: 1; }
    .db-actions { grid-column: 2; grid-row: 1; }
    .db-crew { grid-column: 1 / -1; }
    .db-gauge { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .5rem; text-align: left; }
    .db-gauge .db-bar { flex: 1; margin: 0; align-self: center; }
}
@media (max-width: 640px) {
    .db-summary > .card-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .db-facts { justify-content: center; }
}

/* Detalle de una programación del día */
.dd-incomplete { color: #9f1239; background: #ffe4e6; }
.dd-roster { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dd-person { display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem; border: 1px solid; border-radius: 12px; }
.dd-person.is-present { background: #f0fdf4; border-color: #bbf7d0; }
.dd-person.is-absent { background: #fff7f8; border-color: #fecdd3; }
.dd-person.is-unknown { background: #f8fafc; border-color: var(--rsu-line); }
.dd-ava { flex: none; display: grid; place-items: center; width: 38px; height: 38px; font-size: .8rem; font-weight: 800; color: #fff; background: #94a3b8; border-radius: 50%; }
.dd-person.is-present .dd-ava { background: #22a05a; }
.dd-person.is-absent .dd-ava, .dd-ava.is-absent { background: #e11d48; }
.dd-who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dd-who b { color: var(--rsu-ink); }
.dd-who small { color: var(--rsu-muted); }
.dd-mark { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.dd-person.is-present .dd-mark { color: #166534; }
.dd-person.is-absent .dd-mark { color: #be123c; }
.dd-person.is-unknown .dd-mark { color: #64748b; }
.dd-note { display: flex; gap: .55rem; margin: 1rem 0 0; padding: .7rem .9rem; font-size: .85rem; color: #0c4a6e; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px; }
.dd-note.is-ok { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.dd-help { margin: 0 0 .8rem; font-size: .84rem; color: var(--rsu-muted); }
.dd-card { margin-bottom: .8rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--rsu-line); border-left: 4px solid #e11d48; border-radius: 12px; transition: border-color .2s; }
.dd-card.is-ready { border-left-color: #1ea152; }
.dd-card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.dd-card-head .dd-ava { width: 34px; height: 34px; }
.dd-card-head b { display: block; color: var(--rsu-ink); }
.dd-card-head small { color: #be123c; font-weight: 600; }
.dd-card .form-label { margin: .55rem 0 .2rem; }
.dd-card .form-select, .dd-card .form-control { font-size: .86rem; }
.dd-none { display: flex; gap: .5rem; margin: 0; padding: .6rem .8rem; font-size: .82rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; }

/* Gestión de cambios: lista, cambio masivo y detalle */
.drawer-fields[hidden], .drawer-footer[hidden] { display: none !important; }
.filter-note { margin: 0 0 .6rem; font-size: .8rem; color: var(--rsu-muted); }
.filter-note i { margin-right: .25rem; color: var(--rsu-brand-600); }
table.dataTable td .when b { display: block; font-weight: 700; color: var(--rsu-ink); }
.ch-from { color: var(--rsu-muted); }
.ch-to { color: var(--rsu-ink); }
.swal-list { max-height: 260px; margin: .4rem 0 0; padding: 0; overflow-y: auto; font-size: .85rem; text-align: left; list-style: none; }
.swal-list li { padding: .45rem .2rem; border-bottom: 1px solid #eef2f7; }
.swal-sub { margin: 0; font-size: .9rem; color: var(--rsu-muted); }

/* Tipo de cambio: opciones en una sola fila */
.seg-radio { display: inline-flex; flex-wrap: wrap; gap: .15rem; padding: .2rem; background: #eef2f7; border-radius: 999px; }
.seg-radio label { margin: 0; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio span { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem 1.05rem; font-size: .86rem; font-weight: 700; color: var(--rsu-muted); border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.seg-radio span:hover { color: var(--rsu-ink); }
.seg-radio input:checked + span { color: var(--rsu-brand-700); background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--rsu-brand-500); }
.mc-help { margin: .55rem 0 1rem; font-size: .8rem; color: var(--rsu-muted); }

/* Zonas del cambio masivo */
.zone-picker { padding: .7rem; background: #f8fafc; border: 1px solid var(--rsu-line); border-radius: 12px; }
.zp-bar { display: flex; gap: .5rem; margin-bottom: .6rem; }
.zp-bar .form-control { padding-top: .35rem; padding-bottom: .35rem; font-size: .86rem; background: #fff; }
.zp-list { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 152px; overflow-y: auto; }
.zchip { margin: 0; }
.zchip[hidden] { display: none; }
.zchip input { position: absolute; opacity: 0; pointer-events: none; }
.zchip span { display: inline-block; padding: .28rem .8rem; font-size: .82rem; font-weight: 600; color: var(--rsu-text); background: #fff; border: 1px solid #dbe3ea; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s; }
.zchip span:hover { border-color: var(--rsu-brand-200); }
.zchip input:checked + span { color: #fff; background: var(--rsu-brand-600); border-color: var(--rsu-brand-600); }
.zchip input:focus-visible + span { outline: 2px solid var(--rsu-brand-500); }
.zp-empty { font-size: .84rem; color: var(--rsu-muted); }
.zp-hint { display: block; margin-top: .55rem; font-size: .76rem; color: var(--rsu-soft); }

/* Resumen de la operación */
.mc-sum-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; padding: .8rem 1rem; text-align: center; background: #f8fafc; border: 1px solid var(--rsu-line); border-radius: 12px; }
.mc-sum-head b { color: var(--rsu-ink); }
.mc-sum-head span { font-size: .82rem; color: var(--rsu-muted); }
.mc-sum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.mc-sum-card { padding: .9rem 1rem; background: #fff; border: 1px solid var(--rsu-line); border-radius: 12px; }
.mc-sum-card h4 { margin: 0 0 .7rem; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--rsu-brand-700); }
.mc-sum-card h4 i { margin-right: .35rem; }
.mc-sum-card dl { margin: 0; }
.mc-sum-card dl > div { margin-bottom: .55rem; }
.mc-sum-card dt { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rsu-soft); }
.mc-sum-card dd { margin: .05rem 0 0; font-size: .9rem; font-weight: 600; color: var(--rsu-ink); }
.mc-swap { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; }
.mc-swap > div { padding: .5rem .75rem; border-radius: 10px; }
.mc-swap span { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mc-swap b { font-size: .92rem; overflow-wrap: anywhere; }
.mc-swap .is-from { color: #9f1239; background: #fff1f2; }
.mc-swap .is-to { color: #166534; background: #f0fdf4; }
.mc-swap > i { align-self: center; color: var(--rsu-soft); }
.mc-sum-reason { margin: .8rem 0 0; padding: .5rem .75rem; font-size: .84rem; color: var(--rsu-text); background: #f8fafc; border-radius: 10px; }
.mc-sum-reason i { margin-right: .3rem; color: var(--rsu-brand-600); }
.mc-result { margin-top: 1rem; }
.mc-counts { display: flex; flex-wrap: wrap; gap: .7rem; }
.mc-count { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border-radius: 12px; }
.mc-count b { font-size: 1.5rem; line-height: 1; }
.mc-count span { font-size: .84rem; font-weight: 700; }
.mc-count.is-ok { color: #166534; background: #dcfce7; }
.mc-count.is-bad { color: #9f1239; background: #ffe4e6; }
.mc-more { margin-top: .8rem; padding: .6rem .9rem; font-size: .84rem; background: #fff; border: 1px solid var(--rsu-line); border-radius: 12px; }
.mc-more.is-bad { border-color: #fecdd3; background: #fffafb; }
.mc-more > summary { font-weight: 700; color: var(--rsu-ink); cursor: pointer; }
.mc-more ul { max-height: 190px; margin: .5rem 0 0; padding-left: 1.1rem; overflow-y: auto; }
.mc-more .is-more { color: var(--rsu-muted); list-style: none; }
.mc-warning { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; padding: .85rem 1rem; font-size: .84rem; color: #78350f; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 12px; }
.mc-warning b { color: #92400e; }
.mc-confirm { display: flex; align-items: flex-start; gap: .5rem; margin: .4rem 0 0; font-weight: 700; color: var(--rsu-ink); cursor: pointer; }
.mc-confirm input { flex: none; margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--rsu-brand-600); }

/* Detalle de un cambio */
.cd-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cd-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--rsu-brand-600); }
.cd-hero h3 { margin: .1rem 0 .15rem; font-size: 1.25rem; font-weight: 800; }
.cd-hero small { color: var(--rsu-muted); }
.cd-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .6rem; margin-bottom: 1rem; }
.cd-side { padding: .8rem 1rem; border-radius: 12px; }
.cd-side span { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cd-side b { display: block; margin-top: .15rem; font-size: 1rem; overflow-wrap: anywhere; }
.cd-before { color: #9f1239; background: #fff1f2; border: 1px solid #fecdd3; }
.cd-after { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.cd-arrow { display: grid; place-items: center; color: var(--rsu-soft); font-size: 1.2rem; }
.mc-batch { margin-top: 1rem; padding: .9rem 1rem; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 12px; }
.mc-batch-head { margin-bottom: .6rem; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #6d28d9; }
.mc-batch dl { margin: 0 0 .7rem; }
.mc-batch dl > div { display: flex; gap: .8rem; margin-bottom: .3rem; font-size: .86rem; }
.mc-batch dt { flex: none; width: 7.5rem; font-weight: 700; color: var(--rsu-muted); }
.mc-batch dd { margin: 0; color: var(--rsu-ink); }
@media (max-width: 767.98px) {
    .mc-sum-grid { grid-template-columns: 1fr; }
    .cd-compare { grid-template-columns: 1fr; }
    .cd-arrow { transform: rotate(90deg); }
}

/* Controles del día en pantallas angostas: se acomodan en varias líneas en vez de salirse del recuadro */
.db-day { flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .db-field { flex-wrap: wrap; }
    .db-day .form-control { width: 8.6rem; }
}