:root {
    --navy-950: #1b0508;
    --navy-900: #35070f;
    --navy-800: #5d0b19;
    --blue-600: #b30d24;
    --blue-500: #d7193f;
    --blue-100: #fff4c2;
    --brand-yellow: #ffd400;
    --brand-red: #b30d24;
    --slate-700: #334155;
    --slate-500: #64748b;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --surface: #ffffff;
    --green-600: #15803d;
    --green-100: #dcfce7;
    --amber-600: #b45309;
    --amber-100: #fef3c7;
    --shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --radius: 16px;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--slate-100); }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--navy-950);
    background: var(--slate-100);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    color: #fff;
    background: linear-gradient(165deg, #140104 0%, #4a0712 58%, #8f0a1d 100%);
    overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; }
.brand-symbol { width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; }
.brand-mark {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue-500), #48b7c8);
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(47, 134, 230, .32);
}
.brand strong { display: block; font-size: 15px; letter-spacing: .07em; }
.brand small { display: block; margin-top: 1px; color: #ffe978; font-size: 11px; }

.main-nav { display: grid; gap: 8px; }
.mobile-more-nav { display: contents; }
.mobile-more-nav > summary { display: none; }
.mobile-more-links { display: grid; gap: 8px; padding-top: 8px; }
.mobile-logout { display: none; margin: 0; }
.main-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 11px;
    color: #c8d7e7;
    font-weight: 650;
}
.main-nav a:hover, .main-nav a.active { color: #fff; background: rgba(255, 212, 0, .13); }
.main-nav a.active { box-shadow: inset 3px 0 var(--brand-yellow); }
.main-nav .nav-action {
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9px;
    color: #d7e6f5;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}
.main-nav .nav-action:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.sidebar-footer { margin-top: auto; padding: 18px 10px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.sidebar-footer > span { display: block; margin-bottom: 5px; font-size: 13px; color: #d8e4ef; }
.link-button { border: 0; padding: 0; color: #9fc1e0; background: none; cursor: pointer; }
.link-button:hover { color: #fff; }

.main-content { min-width: 0; padding: 28px clamp(18px, 3vw, 44px) 52px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.topbar h1 { margin: 2px 0 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; }
.version-badge { margin-left: auto; padding: 3px 8px; border: 1px solid var(--slate-200); border-radius: 999px; color: var(--slate-500); background: rgba(255, 255, 255, .72); font-size: 10px; font-weight: 750; }
.patrol-controls { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--slate-200); }
.patrol-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--slate-200); }
.patrol-control span:first-child { display: grid; gap: 3px; }
.attendance-table { min-width: 1180px; }
.row-details { position: relative; }
.row-details summary { color: var(--red-700); font-weight: 750; cursor: pointer; list-style: none; }
.row-detail-card { min-width: 280px; padding: 12px 0; }
.row-detail-card textarea { width: 100%; }
.shared-kiosk { max-width: 620px; margin-inline: auto; }
.copy-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.copy-box input { flex: 1 1 420px; }
.eyebrow { margin: 0; color: var(--blue-600); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.profile-chip { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border: 1px solid var(--slate-200); border-radius: 999px; background: #fff; font-size: 13px; box-shadow: 0 4px 16px rgba(15, 23, 42, .04); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--navy-800); font-weight: 800; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.metric-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card { position: relative; overflow: hidden; min-height: 155px; padding: 22px; border: 1px solid var(--slate-200); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--blue-600); }
.metric-card.accent-amber::before { background: #d98b1e; }
.metric-card.accent-green::before { background: #22a25a; }
.metric-card.accent-slate::before { background: var(--slate-500); }
.metric-label { display: block; color: var(--slate-500); font-size: 13px; font-weight: 700; }
.metric-card strong { display: block; margin: 10px 0 12px; font-size: 38px; line-height: 1; letter-spacing: -.04em; }
.metric-card a { color: var(--blue-600); font-size: 12px; font-weight: 750; }
.metric-hint { color: var(--slate-500); font-size: 12px; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 22px; align-items: start; }
.panel { border: 1px solid var(--slate-200); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--slate-200); }
.panel-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.015em; }
.panel-heading .eyebrow { margin-bottom: 4px; }

.position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--slate-200); }
.position-item { display: flex; justify-content: space-between; gap: 14px; padding: 18px 22px; background: #fff; }
.position-item:hover { background: #f8fbff; }
.position-item span { color: var(--slate-700); font-weight: 650; }
.position-item strong { color: var(--blue-600); font-size: 18px; }

.simple-list > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--slate-200); }
.simple-list > div:last-child { border-bottom: 0; }
.simple-list strong, .simple-list small { display: block; }
.simple-list small { margin-top: 3px; color: var(--slate-500); }

.status-pill { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 999px; color: var(--slate-700); background: var(--slate-100); font-size: 11px; font-weight: 750; white-space: nowrap; }
.status-pill.success { color: var(--green-600); background: var(--green-100); }
.status-pill.warning { color: var(--amber-600); background: var(--amber-100); }
.status-pill.location { color: #075985; background: #e0f2fe; }

.filters { display: grid; grid-template-columns: minmax(240px, 1.7fr) repeat(4, minmax(120px, .75fr)) auto auto; gap: 12px; align-items: end; padding: 20px 22px; border-bottom: 1px solid var(--slate-200); }
.organization-filters { grid-template-columns: repeat(2, minmax(170px, 240px)) auto auto; }
.filters label { display: grid; gap: 6px; color: var(--slate-700); font-size: 12px; font-weight: 750; }
input, select, textarea { min-height: 42px; width: 100%; border: 1px solid var(--slate-300); border-radius: 9px; padding: 9px 11px; color: var(--navy-950); background: #fff; outline: none; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(179, 13, 36, .14); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; border: 1px solid transparent; border-radius: 9px; font-weight: 750; font-size: 13px; cursor: pointer; }
.button.primary { color: #fff; background: var(--blue-600); }
.button.primary:hover { background: #8f0a1d; }
.button.secondary { color: var(--slate-700); border-color: var(--slate-300); background: #fff; }
.button.secondary:hover { background: var(--slate-100); }
.button.danger { color: #b91c1c; border-color: #fecaca; background: #fff; }
.button.danger:hover { background: #fef2f2; }
.button.wide { width: 100%; }

.table-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 16px 22px; }
.table-heading p { margin: 0; color: var(--slate-500); }
.table-wrap { overflow-x: auto; border-top: 1px solid var(--slate-200); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--slate-200); font-size: 13px; vertical-align: middle; }
th { color: var(--slate-500); background: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: .055em; }
td strong, td small { display: block; }
td small { margin-top: 3px; max-width: 250px; color: var(--slate-500); overflow: hidden; text-overflow: ellipsis; }
tbody tr:hover { background: #fbfdff; }
.code { display: inline-block; padding: 4px 7px; border-radius: 6px; color: var(--navy-800); background: var(--slate-100); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.table-link, .back-link { color: var(--blue-600); font-weight: 750; white-space: nowrap; }
.empty-state { padding: 24px; color: var(--slate-500); text-align: center; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px; }
.pagination a { color: var(--blue-600); font-weight: 750; }
.pagination span { color: var(--slate-500); font-size: 13px; }

.detail-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px; margin-bottom: 22px; }
.employee-avatar { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--navy-800), var(--blue-500)); font-size: 20px; font-weight: 800; }
.detail-header h2 { margin: 3px 0 8px; font-size: 24px; }
.detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 20px; }
.data-list { margin: 0; }
.data-list > div { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--slate-200); }
.data-list > div:last-child { border-bottom: 0; }
.data-list dt { color: var(--slate-500); font-size: 12px; font-weight: 750; }
.data-list dd { margin: 0; overflow-wrap: anywhere; }
.back-link { display: inline-block; padding: 8px 2px; }

.login-page { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 18% 12%, #c91532 0, #5d0b19 42%, #140104 100%); }
.login-card { width: min(100%, 420px); padding: 34px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 22px; background: rgba(255, 255, 255, .98); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.login-brand { display: flex; align-items: center; justify-content: center; min-height: 78px; margin-bottom: 24px; padding: 8px 12px; border-radius: 14px; background: #fff9dc; }
.login-brand-logo { display: block; width: min(100%, 330px); max-height: 72px; object-fit: contain; }
.login-brand strong, .login-brand span { display: block; }
.login-brand strong { letter-spacing: .13em; }
.login-brand span { color: var(--slate-500); font-size: 12px; }
.login-card h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.035em; }
.login-card > p { margin: 0 0 23px; color: var(--slate-500); }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 5px; color: var(--slate-700); font-size: 12px; font-weight: 750; }
.login-form .button { margin-top: 12px; }
.form-error { margin-bottom: 15px; padding: 10px 12px; border-radius: 9px; color: #991b1b; background: #fee2e2; font-size: 13px; }
.login-note { display: block; margin-top: 20px; color: var(--slate-500); text-align: center; }
.messages { margin-bottom: 16px; }
.message { padding: 12px 15px; border: 1px solid #bfdbfe; border-radius: 10px; color: #1e3a8a; background: var(--blue-100); }

.welcome-panel { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px; margin-bottom: 22px; }
.welcome-panel h2 { margin: 5px 0 5px; font-size: 24px; }
.welcome-panel p:last-child { margin: 0; color: var(--slate-500); }
.action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.action-card { min-height: 160px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; border: 1px solid var(--slate-200); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.action-card:hover { border-color: #93c5fd; transform: translateY(-1px); }
.action-card strong { margin: 14px 0 5px; }
.action-card small { color: var(--slate-500); }
.attendance-action { border-color: #86efac; background: linear-gradient(145deg, #ffffff, #f0fdf4); }
.attendance-action .action-icon { color: #166534; background: #dcfce7; }
.action-icon { min-width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: 11px; color: var(--blue-600); background: var(--blue-100); font-weight: 850; }
.privacy-note, .form-help { color: var(--slate-500); font-size: 12px; }

.form-panel { max-width: 780px; }
.portal-form { display: grid; gap: 17px; padding: 22px; }
.portal-form label, .resolution-form label, .inline-filter label { display: grid; gap: 6px; color: var(--slate-700); font-size: 12px; font-weight: 750; }
.portal-form ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-form ul label { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 11px; border: 1px solid var(--slate-300); border-radius: 9px; background: #fff; }
.portal-form input[type="checkbox"] { width: auto; min-height: auto; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0; }
.field-error { color: #b91c1c; font-weight: 650; }
.map-picker { display: grid; gap: 9px; }
.map-picker-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.map-picker-canvas { min-height: 330px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--slate-300); border-radius: 12px; color: var(--slate-500); background: var(--slate-100); }
.notice { display: grid; gap: 3px; margin: 22px; padding: 14px 16px; border-radius: 10px; }
.notice.warning { color: #92400e; background: var(--amber-100); }
.notice + .form-actions { padding: 0 22px 22px; }
.page-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }

.request-list { display: grid; gap: 16px; }
.request-section { margin-bottom: 20px; overflow: hidden; }
.compact-list { gap: 0; }
.compact-list .request-card { border: 0; border-bottom: 1px solid var(--slate-200); border-radius: 0; box-shadow: none; }
.compact-list .request-card:last-child { border-bottom: 0; }
.request-card { overflow: hidden; }
.request-header { display: flex; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--slate-200); }
.request-header h2 { margin: 4px 0 2px; font-size: 18px; }
.request-header small { color: var(--slate-500); }
.request-data { margin: 0; }
.request-data > div { display: grid; grid-template-columns: minmax(130px, .55fr) minmax(0, 1.45fr); gap: 8px 16px; padding: 13px 22px; border-bottom: 1px solid var(--slate-200); }
.request-data dt { color: var(--slate-500); font-size: 12px; font-weight: 750; }
.request-data dd { margin: 0; overflow-wrap: anywhere; }
.resolution-form { display: grid; gap: 13px; padding: 18px 22px; background: #f8fafc; }
.request-filter { margin-bottom: 16px; }
.inline-filter { max-width: 240px; padding: 15px 18px; }
.attendance-panel { max-width: 820px; margin-bottom: 22px; }
.attendance-current { display: grid; gap: 7px; margin: 22px; padding: 18px; border: 1px solid var(--slate-200); border-radius: 12px; background: #f8fafc; }
.attendance-current span { color: var(--slate-500); }
.attendance-status { min-height: 24px; margin: 0 22px 14px; color: #166534; font-weight: 700; }
.attendance-status.error { color: #b91c1c; }
.attendance-primary { width: calc(100% - 44px); min-height: 56px; margin: 0 22px 20px; font-size: 16px; }
.security-setup { margin: 22px; padding: 20px; border-radius: 12px; color: #1e3a8a; background: var(--blue-100); }
.security-setup h3 { margin: 0 0 8px; }
.security-setup p { line-height: 1.55; }
.security-details { margin: 0 22px 22px; color: var(--slate-500); font-size: 13px; }
.request-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 8px; }
.request-card-heading strong, .request-card-heading small { display: block; }
.request-card-heading small { margin-top: 4px; color: var(--slate-500); }
.request-card > p { padding: 0 22px; }
.compact-panel { overflow: hidden; margin-bottom: 18px; }
.compact-notice { margin: 0 0 18px; }
.compact-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--slate-200); background: #fbfdff; }
.compact-filters label { display: grid; min-width: 155px; gap: 5px; color: var(--slate-700); font-size: 11px; font-weight: 750; }
.compact-filters .search-field { flex: 1 1 270px; }
.compact-filters input, .compact-filters select { min-height: 38px; }
.compact-table th, .compact-table td { padding: 10px 12px; }
.compact-table .wide-cell { min-width: 260px; white-space: normal; }
.compact-button { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.compact-create { overflow: hidden; margin-bottom: 18px; }
.compact-create > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; cursor: pointer; list-style: none; }
.compact-create > summary::-webkit-details-marker, .compact-request > summary::-webkit-details-marker { display: none; }
.compact-create > summary strong, .compact-create > summary small { display: block; }
.compact-create > summary small { margin-top: 2px; color: var(--slate-500); }
.compact-create[open] > summary { border-bottom: 1px solid var(--slate-200); }
.compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.compact-form .form-actions, .compact-form .form-help, .compact-form .form-error { grid-column: 1 / -1; }
.compact-request-list { border-top: 1px solid var(--slate-200); }
.compact-request { border-bottom: 1px solid var(--slate-200); background: #fff; }
.compact-request:last-child { border-bottom: 0; }
.compact-request > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 11px 16px; cursor: pointer; list-style: none; }
.compact-request > summary:hover { background: #f8fbff; }
.compact-request > summary strong, .compact-request > summary small { display: block; }
.compact-request > summary small { margin-top: 3px; color: var(--slate-500); font-size: 11px; }
.compact-request[open] > summary { background: #f8fbff; border-bottom: 1px solid var(--slate-200); }
.compact-actions { padding: 12px 16px; }
.balance-list-panel { margin-top: 22px; }
.balance-note { margin: -8px 0 18px; color: var(--slate-500); font-size: 12px; }
.balance-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; margin: 8px 0 20px; }
.balance-header h2 { margin: 4px 0 0; }
.balance-summary { display: flex; gap: 8px; }
.balance-summary span { min-width: 90px; padding: 10px 12px; border-radius: 10px; background: var(--slate-100); text-align: center; }
.balance-summary small, .balance-summary strong { display: block; }
.balance-summary small { color: var(--slate-500); font-size: 10px; }
.balance-summary strong { margin-top: 2px; font-size: 20px; }
.report-filter-panel { overflow: hidden; margin-bottom: 22px; }
.report-filters { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) auto; gap: 13px; align-items: end; padding: 20px 22px 12px; }
.report-filters label { display: grid; gap: 6px; color: var(--slate-700); font-size: 12px; font-weight: 750; }
.report-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report-note { margin: 0; padding: 0 22px 20px; color: var(--slate-500); font-size: 12px; }
.report-table-panel { overflow: hidden; }
.report-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schedule-filters, .rule-selector { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 16px 18px; }
.schedule-filters label { display: grid; min-width: 230px; gap: 6px; color: var(--slate-700); font-size: 12px; font-weight: 750; }
.rule-selector { padding: 0; }
.planning-alerts { overflow: hidden; margin-bottom: 22px; }
.planning-summary { padding: 0 22px; }
.planning-lists { padding: 0 22px 22px; margin-bottom: 0; }
.planning-lists > section { overflow: hidden; border: 1px solid var(--slate-200); border-radius: 12px; }
.planning-lists h3 { margin: 0; }
.board-toolbar { overflow: hidden; margin-bottom: 18px; }
.board-tabs { display: flex; gap: 6px; padding: 12px 18px 0; border-bottom: 1px solid var(--slate-200); }
.board-tabs a { padding: 11px 15px; border-bottom: 3px solid transparent; color: var(--slate-500); font-size: 13px; font-weight: 800; }
.board-tabs a.active { color: var(--blue-600); border-bottom-color: var(--blue-600); }
.board-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 16px 18px 8px; }
.board-filters label { display: grid; min-width: 170px; gap: 5px; color: var(--slate-700); font-size: 11px; font-weight: 750; }
.board-filters .board-person-search { min-width: 240px; flex: 1 1 260px; }
.board-filters .board-check { display: flex; min-width: auto; align-items: center; gap: 7px; min-height: 42px; }
.board-check input { width: auto; min-height: auto; }
.board-period-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 18px 16px; }
.board-period-nav .button { min-width: 42px; padding: 7px; font-size: 20px; }
.board-period-nav strong { min-width: 190px; text-align: center; font-size: 13px; }
.board-metrics { margin-bottom: 18px; }
.planning-board-panel { overflow: hidden; }
.board-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; padding: 12px 16px; color: var(--slate-500); font-size: 11px; }
.board-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid transparent; }
.legend-dot.covered { background: #dcfce7; border-color: #22c55e; }
.legend-dot.partial { background: #ffedd5; border-color: #f97316; }
.legend-dot.missing { background: #fee2e2; border-color: #ef4444; }
.legend-dot.absence { background: #e2e8f0; border-color: #64748b; }
.legend-dot.replacement { background: #dbeafe; border-color: #3b82f6; }
.planning-grid-wrap { width: 100%; overflow: auto; border-top: 1px solid var(--slate-200); }
.planning-grid { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.planning-grid th, .planning-grid td { border-right: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); }
.planning-grid thead th { position: sticky; top: 0; z-index: 3; height: 56px; padding: 8px; text-align: center; background: #f8fafc; }
.planning-grid .board-sticky-col { position: sticky; left: 0; z-index: 4; width: 230px; min-width: 230px; max-width: 230px; text-align: left; background: #fff; box-shadow: 1px 0 0 var(--slate-200); }
.planning-grid thead .board-sticky-col { z-index: 5; background: #f8fafc; }
.board-date { width: 138px; min-width: 138px; }
.board-date strong, .board-date span { display: block; }
.board-date strong { color: var(--slate-700); font-size: 11px; }
.board-date span { margin-top: 3px; color: var(--slate-500); font-size: 10px; }
.board-date.weekend { background: #fff1f2 !important; }
.board-row-title { padding: 10px 12px !important; vertical-align: top; text-transform: none; letter-spacing: 0; }
.board-row-title strong, .board-row-title span, .board-row-title small { display: block; overflow: hidden; text-overflow: ellipsis; }
.board-row-title strong { color: var(--navy-950); font-size: 12px; }
.board-row-title span { margin-top: 3px; color: var(--slate-500); font-size: 10px; }
.board-row-title small { margin-top: 5px; color: var(--blue-600); font-size: 10px; }
.board-cell { width: 138px; min-width: 138px; height: 104px; padding: 7px; vertical-align: top; background: #fff; }
.board-cell.covered { background: #f0fdf4; box-shadow: inset 0 3px #22c55e; }
.board-cell.partial { background: #fff7ed; box-shadow: inset 0 3px #f97316; }
.board-cell.missing { background: #fef2f2; box-shadow: inset 0 3px #ef4444; }
.board-cell.absence { background: #f1f5f9; box-shadow: inset 0 3px #64748b; }
.board-cell.not-scheduled { background: #f8fafc; text-align: center; }
.coverage-count { margin-bottom: 5px; color: var(--slate-700); font-size: 11px; font-weight: 850; }
.assignment-chip, .absence-chip { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; margin: 3px 0; padding: 4px 6px; border-radius: 7px; font-size: 10px; line-height: 1.2; }
.assignment-chip { color: #166534; background: #dcfce7; }
.assignment-chip.replacement { color: #1d4ed8; background: #dbeafe; }
.assignment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-chip form { margin: 0; }
.assignment-chip button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; color: #64748b; background: rgba(255,255,255,.75); cursor: pointer; }
.absence-chip { color: #475569; background: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-cell-action { display: block; margin-top: 6px; padding: 5px 6px; border: 1px dashed #f97316; border-radius: 7px; color: #c2410c; background: rgba(255,255,255,.72); text-align: center; font-size: 10px; font-weight: 850; }
.board-empty { display: inline-block; padding-top: 32px; color: var(--slate-300); }
.person-cell .assignment-chip { color: #1e3a8a; background: #dbeafe; }
.person-assignment-block { position: relative; margin: 4px 0 7px; padding: 3px; border: 1px solid var(--slate-200); border-radius: 8px; background: rgba(255, 255, 255, .82); }
.person-assignment-block .assignment-chip { margin: 0; padding-right: 22px; }
.assignment-point { display: block; padding: 3px 6px 0; color: var(--slate-500); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-chip { display: block; margin-top: 3px; padding: 4px 6px; border-radius: 6px; color: var(--slate-500); background: var(--slate-100); font-size: 9px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-chip.assigned { color: #713f12; background: #fef3c7; }
.person-remove { position: absolute; top: 5px; right: 5px; margin: 0; }
.person-remove button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; color: #991b1b; background: #fee2e2; cursor: pointer; }
.person-cell-action { display: block; margin-top: 6px; padding: 5px 6px; border: 1px dashed var(--brand-red); border-radius: 7px; color: var(--brand-red); background: rgba(255,255,255,.76); text-align: center; font-size: 10px; font-weight: 850; }
.person-cell-action:hover, .vehicle-chip:hover { filter: brightness(.97); }
.form-note { grid-column: 1 / -1; margin: 0; padding: 11px 13px; border-radius: 9px; color: #713f12; background: #fff7d6; }

@media (max-width: 1100px) {
    .metric-grid, .metric-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: 1fr; }
    .filters { grid-template-columns: 1fr 1fr 1fr; }
    .filters .search-field { grid-column: 1 / -1; }
    .report-filters { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}

@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: static; height: auto; padding: 14px; }
    .brand { padding-bottom: 14px; }
    .main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .main-nav > .mobile-primary {
        min-height: 70px;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 12px 8px;
        border: 1px solid rgba(255, 255, 255, .12);
        font-size: 13px;
        text-align: center;
    }
    .main-nav > .mobile-primary > span { font-size: 19px; line-height: 1; }
    .mobile-more-nav {
        display: block;
        grid-column: 1 / -1;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 11px;
        background: rgba(255, 255, 255, .05);
    }
    .mobile-more-nav > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 54px;
        padding: 12px;
        color: #dceaf7;
        font-size: 14px;
        font-weight: 750;
        cursor: pointer;
        list-style: none;
    }
    .mobile-more-nav > summary::-webkit-details-marker { display: none; }
    .mobile-more-links { grid-template-columns: 1fr; gap: 7px; padding: 0 7px 7px; }
    .main-nav .mobile-more-links a {
        min-height: 50px;
        justify-content: flex-start;
        padding: 12px 14px;
        border-radius: 9px;
        background: rgba(255, 255, 255, .05);
        font-size: 14px;
    }
    .main-nav .mobile-more-links .nav-action {
        min-height: 50px;
        width: 100%;
        font-size: 14px;
    }
    .mobile-logout { display: block; }
    .sidebar-footer { display: none; }
    .main-content { padding: 20px 14px 36px; }
    .profile-chip span:last-child { display: none; }
    .version-badge { margin-left: auto; }
    .metric-grid, .metric-grid-three, .detail-grid, .action-grid { grid-template-columns: 1fr; }
    .filters { grid-template-columns: 1fr 1fr; }
    .filters label, .filters .search-field { grid-column: 1 / -1; }
    .detail-header { grid-template-columns: auto 1fr; }
    .detail-action, .detail-actions { grid-column: 1 / -1; }
    .detail-actions .button { flex: 1 1 160px; }
    .request-data > div { grid-template-columns: 1fr; gap: 4px; }
    .button { min-height: 48px; font-size: 14px; }
    .portal-form input, .portal-form select, .portal-form textarea { min-height: 48px; font-size: 16px; }
    .attendance-primary { min-height: 64px; font-size: 17px; }
    .map-picker-canvas { min-height: 300px; }
    .report-filters { grid-template-columns: 1fr 1fr; padding: 18px 16px 10px; }
    .report-filter-actions { grid-column: 1 / -1; }
    .report-filter-actions .button { flex: 1 1 180px; }
    .report-note { padding: 0 16px 18px; }
    .report-summary-grid { grid-template-columns: 1fr; }
    .schedule-filters, .rule-selector { align-items: stretch; }
    .schedule-filters label, .schedule-filters .button, .rule-selector select, .rule-selector .button { width: 100%; }
    .planning-summary, .planning-lists { padding-left: 16px; padding-right: 16px; }
    .board-filters { display: grid; grid-template-columns: 1fr 1fr; }
    .board-filters label, .board-filters .button { min-width: 0; width: 100%; }
    .board-filters .board-check { display: flex; }
    .planning-grid .board-sticky-col { width: 180px; min-width: 180px; max-width: 180px; }
    .board-date, .board-cell { width: 125px; min-width: 125px; }
    .compact-filters { display: grid; grid-template-columns: 1fr 1fr; }
    .compact-filters label, .compact-filters .search-field { min-width: 0; }
    .compact-filters .search-field { grid-column: 1 / -1; }
    .compact-form { grid-template-columns: 1fr; }
    .compact-form > * { grid-column: 1 !important; }
    .balance-header { align-items: flex-start; flex-direction: column; }
    .balance-summary { width: 100%; }
    .balance-summary span { flex: 1; min-width: 0; }
}

@media (max-width: 480px) {
    .metric-grid, .position-grid { grid-template-columns: 1fr; }
    .topbar { align-items: flex-start; }
    .topbar .eyebrow { display: none; }
    .filters { grid-template-columns: 1fr; }
    .filters > * { grid-column: 1 !important; }
    .data-list > div { grid-template-columns: 1fr; gap: 4px; }
    .report-filters { grid-template-columns: 1fr; }
    .board-filters { grid-template-columns: 1fr; }
    .compact-filters { grid-template-columns: 1fr; }
    .compact-filters > * { grid-column: 1 !important; width: 100%; }
    .compact-request > summary { align-items: flex-start; }
}
.map-search-results { display: grid; gap: .4rem; margin: .55rem 0; }
.map-search-result { text-align: left; white-space: normal; }
.push-quick-action { width: auto; min-height: 34px; padding: 6px 11px; border: 1px solid #d8c2bd; border-radius: 8px; color: #8c2c42; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.push-quick-action[hidden] { display: none; }
.push-setup { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding: 15px 18px; border-left: 3px solid #b47e30; }
.push-setup strong { display: block; font-size: 14px; }
.push-setup p { margin: 3px 0 0; color: var(--slate-500); font-size: 13px; }
.push-setup .button { width: auto; flex: 0 0 auto; }
.push-setup .button[hidden] { display: none; }

/* 1.19: lighter, more focused portal frame shared by every module. */
.app-shell { grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { padding: 20px 12px; border-right: 1px solid rgba(255,255,255,.12); }
.brand { gap: 10px; padding: 3px 10px 19px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 10px; }
.brand-symbol { width: 39px; height: 39px; }
.brand strong { font-size: 13px; letter-spacing: .075em; }
.brand small { color: #ffe978; font-size: 10px; }
.main-nav, .mobile-more-links { gap: 2px; }
.main-nav a { min-height: 38px; padding: 9px 12px; border-radius: 8px; color: #e9d5d9; font-size: 13px; font-weight: 550; }
.main-nav a > span[aria-hidden] { width: 17px; text-align: center; opacity: .85; }
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.10); }
.main-nav a.active { color: #fff; background: rgba(255,212,0,.15); box-shadow: inset 3px 0 var(--brand-yellow); }
.sidebar-footer { padding: 16px 12px 0; }
.main-content { padding: 25px clamp(18px, 3vw, 42px) 42px; }
.topbar { margin-bottom: 22px; }
.topbar h1 { font-size: clamp(23px, 2.5vw, 31px); letter-spacing: -.035em; }
.eyebrow { color: #955365; }
.profile-chip, .metric-card, .panel { box-shadow: var(--shadow); }
.metric-card { min-height: 135px; }
.metric-card::before { width: 3px; }
.work-alert-link { border: 1px solid var(--slate-200); background: #fff; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #b47e30; outline-offset: 2px; }
@media (max-width: 760px) {
    .push-quick-action { display: none; }
    .push-setup { align-items: flex-start; flex-direction: column; }
    .sidebar { padding: 10px 12px 12px; }
    .brand { padding: 3px 4px 10px; margin: 0 0 9px; }
    .brand-symbol { width: 34px; height: 34px; }
    .main-nav { gap: 5px; }
    .main-nav > .mobile-primary { min-height: 52px; flex-direction: row; gap: 8px; padding: 8px; font-size: 12px; border-radius: 8px; }
    .main-nav > .mobile-primary > span { width: auto; font-size: 16px; }
    .mobile-more-nav { border-radius: 8px; }
    .mobile-more-nav > summary { min-height: 42px; padding: 8px 11px; justify-content: flex-start; font-size: 13px; }
    .mobile-more-links { gap: 2px; padding: 0 7px 8px; }
    .main-nav .mobile-more-links a { min-height: 38px; padding: 7px 10px; background: transparent; font-size: 13px; }
    .main-nav .mobile-more-links a.active { background: rgba(255,212,0,.15); }
    .main-nav .mobile-more-links .nav-action { min-height: 40px; font-size: 13px; }
    .main-content { padding: 17px 12px 32px; }
    .topbar { gap: 8px; margin-bottom: 17px; }
}

/* 1.20.2: identidad Control Novit — rojo, amarillo y negro del logo, con degradés. */
:root {
    --cn-red: #E8101A;
    --cn-red-dark: #A8000D;
    --cn-red-ink: #B3000C;
    --cn-yellow: #FFE100;
    --cn-black: #141414;
    --cn-red-gradient: linear-gradient(135deg, var(--cn-red) 0%, var(--cn-red-dark) 100%);
    --cn-red-gradient-hover: linear-gradient(135deg, #C90812 0%, #7E0009 100%);
    --blue-600: #C20812;
    --blue-500: #E8101A;
    --brand-red: #C20812;
    --brand-yellow: #FFE100;
    --navy-950: #141414;
    --navy-800: #2A2A2A;
    --slate-100: #F4F3F0;
}

/* Barra lateral negra con franja roja y activo amarillo */
.sidebar {
    color: #fff;
    background: linear-gradient(180deg, #1E1E1E 0%, #0B0B0B 62%, #2A0306 100%);
    border-top: 4px solid var(--cn-red);
    border-right: 0;
}
.brand { flex-direction: column; align-items: stretch; gap: 8px; padding: 2px 4px 16px; border-bottom: 1px solid rgba(255,255,255,.10); }
.brand-logo { display: block; width: 100%; height: auto; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,225,0,.35); }
.brand .brand-symbol { display: none; }
.brand > span strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.brand small { margin: 0; padding: 0 4px; color: var(--cn-yellow); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.main-nav a { color: #D9D9D9; }
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.main-nav a.active,
.main-nav .mobile-more-links a.active { color: var(--cn-black); background: var(--cn-yellow); box-shadow: none; font-weight: 700; }
.main-nav a.active > span[aria-hidden] { opacity: 1; }
.main-nav .nav-action { color: #EDEDED; border-color: rgba(255,255,255,.22); }
.sidebar-footer > span { color: #E0E0E0; }
.link-button { color: var(--cn-yellow); }
.mobile-more-nav > summary { color: #EDEDED; }

/* Botones y acentos */
.button.primary { color: #fff; background: var(--cn-red-gradient); }
.button.primary:hover { background: var(--cn-red-gradient-hover); }
.eyebrow { color: var(--cn-red-ink); }
.avatar { color: var(--cn-black); background: var(--cn-yellow); box-shadow: inset 0 0 0 2px var(--cn-black); }
.employee-avatar { background: var(--cn-red-gradient); }
.metric-card::before { width: 4px; background: linear-gradient(180deg, var(--cn-yellow) 0%, var(--cn-red) 100%); }
.board-tabs a.active { color: var(--cn-red-ink); border-bottom-color: var(--cn-red); }
.action-card:hover { border-color: #F2A3A6; }
.action-icon { color: var(--cn-red-ink); background: #FFF4C2; }
.message { border-color: #F5D000; color: #4A3B00; background: #FFF8D1; }
.push-quick-action { color: var(--cn-red-ink); border-color: #F2C4C6; }
input:focus, select:focus, textarea:focus { border-color: var(--cn-red); box-shadow: 0 0 0 3px rgba(232,16,26,.14); }

/* Bienvenida y "Dar presente" con degradé rojo y franja amarilla */
.welcome-panel {
    position: relative;
    overflow: hidden;
    color: #fff;
    border: 0;
    border-bottom: 5px solid var(--cn-yellow);
    background: var(--cn-red-gradient);
}
.welcome-panel::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 180px; height: 140px;
    background-image: radial-gradient(var(--cn-yellow) 2.3px, transparent 2.8px);
    background-size: 14px 14px;
    opacity: .55;
    -webkit-mask-image: linear-gradient(225deg, #000 15%, transparent 70%);
    mask-image: linear-gradient(225deg, #000 15%, transparent 70%);
    pointer-events: none;
}
.welcome-panel > * { position: relative; z-index: 1; }
.welcome-panel .eyebrow { color: var(--cn-yellow); }
.welcome-panel h2, .welcome-panel p, .welcome-panel p:last-child { color: #fff; }
.welcome-panel .button.primary { color: var(--cn-yellow); background: var(--cn-black); }
.welcome-panel .button.primary:hover { background: #000; }
.welcome-panel .button.secondary { color: var(--cn-black); border-color: transparent; background: #fff; }
.welcome-panel .status-pill { color: #fff; background: rgba(0,0,0,.3); }

.attendance-action { color: #fff; border: 0; border-bottom: 4px solid var(--cn-yellow); background: var(--cn-red-gradient); }
.attendance-action:hover { border-color: var(--cn-yellow); }
.attendance-action strong, .attendance-action small { color: #fff; }
.attendance-action .action-icon { color: var(--cn-yellow); background: var(--cn-black); }

.attendance-primary { background: var(--cn-red-gradient); box-shadow: 0 6px 18px rgba(168,0,13,.25); }
.attendance-primary:hover { background: var(--cn-red-gradient-hover); }

/* Ingreso */
.login-page { background: radial-gradient(circle at 18% 12%, #E8101A 0, #8E000B 40%, #0B0B0B 100%); }
.login-card { border-top: 5px solid var(--cn-yellow); }
@media (max-width: 760px) {
    .brand { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 10px; }
    .brand-logo { width: auto; max-width: 190px; max-height: 58px; }
    .brand small { text-align: right; }
}

/* 1.21.0: menú por puesto con submenús plegables. */
.mobile-quick { display: none; }
.nav-groups { display: grid; gap: 2px; padding-top: 4px; }
.main-nav .nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 9px;
    color: #EDEDED;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.main-nav .nav-top::-webkit-details-marker { display: none; }
.main-nav .nav-top::marker { content: ""; }
.main-nav .nav-top:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon { flex: 0 0 auto; opacity: .9; }
.nav-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.nav-chevron { opacity: .7; transition: transform .15s ease; }
.nav-group[open] > summary .nav-chevron { transform: rotate(90deg); }
.nav-group[open] > summary { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-group[open] > summary .nav-badge-group { display: none; }
.nav-group.has-active > summary .nav-label { color: var(--cn-yellow); }
.nav-group.has-active > summary .nav-icon { color: var(--cn-yellow); opacity: 1; }
.nav-sub {
    display: grid;
    gap: 1px;
    margin: 2px 0 8px 18px;
    padding-left: 10px;
    border-left: 2px solid rgba(255, 225, 0, .45);
}
.main-nav .nav-sub .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 7px;
    color: #D9D9D9;
    font-size: 13.5px;
    font-weight: 500;
    background: transparent;
    box-shadow: none;
}
.main-nav .nav-sub .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.main-nav .nav-link.active,
.main-nav a.nav-top.active { color: var(--cn-black); background: var(--cn-yellow); font-weight: 700; box-shadow: none; }
.main-nav a.nav-top.active .nav-icon { color: var(--cn-black); }
.nav-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: var(--cn-red);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.nav-tag {
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--cn-black);
    background: var(--cn-yellow);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.main-nav .nav-action { margin-top: 10px; }
.error-panel { max-width: 640px; padding: 28px; border-top: 5px solid var(--cn-red); }
.error-panel h2 { margin: 6px 0 8px; font-size: 24px; }
.error-panel p { margin: 0 0 18px; color: var(--slate-500); }

@media (max-width: 760px) {
    .main-nav { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .mobile-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .main-nav .mobile-quick .mobile-primary {
        position: relative;
        min-height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 4px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 10px;
        color: #EDEDED;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
    }
    .main-nav .mobile-quick .mobile-primary.active { color: var(--cn-black); background: var(--cn-yellow); border-color: var(--cn-yellow); }
    .mobile-quick .nav-badge { position: absolute; top: 4px; right: 8px; }
    .mobile-more-nav > summary { display: flex; align-items: center; gap: 10px; }
    .mobile-more-nav[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .nav-groups { padding: 6px; }
    .main-nav .nav-top { min-height: 46px; }
    .main-nav .nav-sub .nav-link { min-height: 42px; font-size: 14px; }
}
@media (max-width: 760px) {
    .main-nav .mobile-more-links a.nav-top { justify-content: space-between; min-height: 46px; padding: 8px 10px; font-size: 14px; }
    .main-nav .mobile-more-links .nav-sub a.nav-link { justify-content: space-between; min-height: 42px; padding: 7px 10px; font-size: 14px; }
    .main-nav .mobile-more-links a.nav-top.active,
    .main-nav .mobile-more-links .nav-sub a.nav-link.active { color: var(--cn-black); background: var(--cn-yellow); }
}
.privacy-card { width: min(100%, 760px); }
.privacy-card h2 { margin: 22px 0 6px; font-size: 18px; }
.privacy-card p, .privacy-card li { color: #3D3D3D; line-height: 1.55; }
.privacy-card ul { padding-left: 20px; }
.privacy-card a { color: var(--cn-red-ink); font-weight: 700; }

/* 1.21.1: indicadores compactos en el celular, casillas alineadas y borrado. */
@media (max-width: 760px) {
    .metric-grid, .metric-grid-three { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-bottom: 14px; }
    .metric-card { min-height: 0; padding: 10px 10px 10px 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 2px; }
    .metric-card::before { width: 3px; }
    .metric-label { font-size: 11px; line-height: 1.25; min-height: 2.5em; }
    .metric-card strong { margin: 2px 0 0; font-size: 26px; }
    .metric-card .metric-hint { display: none; }
    .metric-card a { font-size: 11px; }
    .metric-grid + .panel, .metric-grid + section { margin-top: 0; }
}
.portal-form input[type="checkbox"], .portal-form input[type="radio"] { justify-self: start; width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--cn-red); }
.portal-form label label, .portal-form div > label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; color: var(--navy-950); font-size: 14px; font-weight: 600; }
.portal-form label > div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.portal-form label > div > div { display: flex; }
.button.danger-solid { color: #fff; background: #A8000D; }
.button.danger-solid:hover { background: #7E0009; }
.danger-link { color: #A8000D !important; }
.delete-item { margin: 0 0 6px; font-size: 22px; }
.delete-panel .notice { margin: 4px 0; }
.delete-actions { flex-wrap: wrap; }

/* 1.21.3 · planificador: varios días, editar turnos, avisos */
.portal-form div#id_fechas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.portal-form #id_fechas > div { margin: 0; }
.portal-form #id_fechas label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid var(--line, #d9dee7); border-radius: 10px; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; background: #fff; }
.portal-form #id_fechas label:has(input:checked) { border-color: var(--cn-red, #c8102e); background: rgba(200, 16, 46, .08); color: var(--cn-red, #c8102e); }
.portal-form #id_fechas input { justify-self: center; }
@media (max-width: 520px) { .portal-form #id_fechas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.portal-form [hidden] { display: none !important; }
.portal-form .confirm-warning { padding: 10px 12px; border: 1px solid #e0a106; border-radius: 10px; background: #fff7e0; }
.portal-form .form-links { margin-bottom: 4px; }
.portal-form #id_accion, .portal-form #id_alcance { display: grid; gap: 6px; }
.assignment-chip .chip-edit { color: inherit; text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-chip .chip-edit:hover, a.assignment-chip:hover { text-decoration: underline; }
.board-hint { margin: 0; padding: 14px 18px 0; }
.form-links { gap: 8px; }

/* 1.21.4 · buscar escribiendo */
.combo { position: relative; display: block; width: 100%; }
.combo-native { position: absolute !important; inset: auto auto 0 0; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.combo-input { width: 100%; }
.combo-input::placeholder { color: #7a8494; font-weight: 500; }
.combo-list { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px; max-height: 320px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; background: #fff; border: 1px solid #d9dee7; border-radius: 12px; box-shadow: 0 14px 34px rgba(17, 17, 17, .18); }
.combo-list li { display: block; padding: 8px 10px; border-radius: 8px; color: #1b1f27; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.combo-list li.combo-person { display: flex; flex-direction: column; gap: 1px; }
.combo-list li small { color: #5d6675; font-size: 12px; font-weight: 500; }
.combo-list li.active, .combo-list li:hover { background: rgba(200, 16, 46, .08); }
.combo-list li[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--cn-red, #c8102e); }
.combo-list li.combo-empty { color: #5d6675; font-weight: 500; }
.combo-list li.combo-none { color: #5d6675; font-size: 13px; font-weight: 500; cursor: default; background: none; }
.combo-list mark { padding: 0; color: inherit; background: rgba(255, 225, 0, .7); border-radius: 2px; }

/* 1.21.4 · menú lateral fijo o retraído */
@media (min-width: 761px) { .sidebar { position: sticky; } }
@media (max-width: 760px) { .sidebar { position: relative; top: auto; height: auto; z-index: 30; } }
.nav-pin { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #EDEDED; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; cursor: pointer; }
.nav-pin:hover, .nav-pin:focus-visible { color: var(--cn-black, #111); background: var(--cn-yellow, #ffe100); }
.nav-pin svg { transition: transform .2s; }
.brand { margin-top: 28px; }
@media (min-width: 761px) {
    html.nav-rail .app-shell { grid-template-columns: 76px minmax(0, 1fr); }
    html.nav-rail .sidebar { width: 76px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; z-index: 40; transition: width .18s ease, box-shadow .18s ease; }
    html.nav-rail .nav-pin svg { transform: rotate(180deg); }
    html.nav-rail .sidebar:hover, html.nav-rail .sidebar:focus-within { width: 250px; padding-left: 12px; padding-right: 12px; box-shadow: 14px 0 36px rgba(0,0,0,.38); }
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .nav-pin { right: 22px; }
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .brand-logo,
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .brand small,
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .nav-label > span:last-child,
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .nav-link > span:first-child:not(.nav-label),
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .nav-meta,
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .nav-sub,
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .sidebar-footer,
    html.nav-rail .sidebar:not(:hover):not(:focus-within) #pwa-install,
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .mobile-logout { display: none; }
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .brand .brand-symbol { display: block; width: 40px; height: 40px; margin: 0 auto; }
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .main-nav .nav-top { justify-content: center; padding-left: 0; padding-right: 0; }
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .nav-label { justify-content: center; }
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .nav-group.has-active > summary,
    html.nav-rail .sidebar:not(:hover):not(:focus-within) a.nav-top.active { background: var(--cn-yellow, #ffe100); }
    html.nav-rail .sidebar:not(:hover):not(:focus-within) .nav-group.has-active > summary .nav-icon { color: var(--cn-black, #111); }
}
@media (max-width: 760px) { .nav-pin { display: none; } .brand { margin-top: 0; } }
.combo-list { display: block; } .combo-list li { width: 100%; box-sizing: border-box; }
.combo-list[hidden] { display: none !important; }

/* 1.21.5 · elegir días: semanas en filas */
.portal-form .form-block { display: grid; gap: 8px; }
.form-block-label { color: var(--navy-950, #141414); font-size: 14px; font-weight: 700; }
.week-grid { display: grid; gap: 6px; }
.week-grid .wg-row { display: grid; grid-template-columns: 104px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.week-grid button { font: inherit; cursor: pointer; }
.wg-corner { display: block; }
.wg-col { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 2px; color: #3b4250; font-size: 13px; font-weight: 700; background: #f4f3f0; border: 0; border-radius: 10px; }
.wg-col small, .wg-week small { color: #8a94a6; font-size: 10px; font-weight: 600; }
.wg-col:hover, .wg-week:hover { background: #141414; color: #FFE100; }
.wg-col:hover small, .wg-week:hover small { color: #d9d9d9; }
.wg-week { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 4px 8px; color: #3b4250; font-size: 12px; font-weight: 700; text-align: left; background: transparent; border: 0; border-radius: 10px; }
.portal-form .week-grid .wg-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 4px 2px; color: #2a2f38; font-size: 16px; font-weight: 800; line-height: 1.1; text-align: center; background: #fff; border: 1.5px solid #e2e6ec; border-radius: 12px; cursor: pointer; user-select: none; }
.portal-form .week-grid .wg-day input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.week-grid .wg-day small { overflow: hidden; max-width: 100%; color: #8a94a6; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.week-grid .wg-day.wg-weekend { background: #fbf8f3; }
.week-grid .wg-day.is-cubierto { background: #effaf3; border-color: #bfe6cd; }
.week-grid .wg-day.is-cubierto small { color: #1f9d55; }
.week-grid .wg-day.is-parcial small { color: #b7791f; }
.week-grid .wg-day.is-trabaja { background: #eef3ff; border-color: #c9d6f5; }
.week-grid .wg-day.is-trabaja small { color: #3056b5; }
.week-grid .wg-day.is-ausente, .week-grid .wg-day.is-ausente-persona { color: #a0a7b4; background: #f1f2f5; border-style: dashed; cursor: not-allowed; }
.week-grid .wg-day.wg-off { color: #c9ced6; background: transparent; border-color: transparent; cursor: default; }
.portal-form .week-grid .wg-day:hover:not(.wg-off):not(.is-ausente-persona) { border-color: #E8101A; }
.portal-form .week-grid .wg-day:has(input:focus-visible) { outline: 3px solid rgba(232, 16, 26, .35); outline-offset: 1px; }
.week-grid .wg-day.wg-sel { color: #fff; background: linear-gradient(135deg, #E8101A, #A80A12); border-color: #E8101A; }
.week-grid .wg-day.wg-sel small { color: #ffd6d8; }
.wg-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; padding: 11px 14px; color: #fff; font-size: 14px; background: #141414; border-radius: 12px; }
.wg-sum b { color: #FFE100; font-size: 17px; }
.wg-sum > span + span::before, .wg-sum b + span::before { content: "|"; margin-right: 14px; opacity: .35; }
.wg-sum .wg-missing { color: #d9d9d9; }
.wg-clear { margin-left: auto; padding: 5px 12px; color: #141414; font-weight: 700; background: #FFE100; border: 0; border-radius: 8px; }
@media (max-width: 620px) {
    .week-grid .wg-row { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 4px; }
    .wg-week { padding: 2px; font-size: 0; }
    .wg-week small { font-size: 10px; }
    .portal-form .week-grid .wg-day { min-height: 44px; font-size: 14px; border-radius: 9px; }
    .week-grid .wg-day small { font-size: 8px; }
    .wg-col { font-size: 11px; }
    .wg-col small { display: none; }
}

/* 1.21.5 · opción C: días sueltos, días de la semana o rotación */
.day-plan [hidden] { display: none !important; }
.plan-seg { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: 2px; padding: 4px; background: #f1f0ec; border-radius: 12px; }
.plan-seg button { padding: 8px 16px; color: #5d6675; font: inherit; font-size: 14px; font-weight: 700; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.plan-seg button.on { color: #141414; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.plan-help { margin: 0; }
.plan-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.portal-form .plan-weekday { display: grid; place-items: center; min-height: 46px; color: #2a2f38; font-size: 14px; font-weight: 800; background: #fff; border: 1.5px solid #e2e6ec; border-radius: 12px; cursor: pointer; }
.portal-form .plan-weekday input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.portal-form .plan-weekday.on { color: #fff; background: linear-gradient(135deg, #E8101A, #A80A12); border-color: #E8101A; }
.rot-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.portal-form .rot-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; color: #141414; background: #fff; border: 1.5px solid #e2e6ec; border-radius: 14px; cursor: pointer; }
.portal-form .rot-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rot-card b { font-size: 19px; line-height: 1.1; }
.rot-card small { color: #5d6675; font-size: 11px; font-weight: 600; }
.portal-form .rot-card.on { background: #fff5f5; border-color: #E8101A; box-shadow: 0 0 0 3px rgba(232, 16, 26, .12); }
.rot-card.on b { color: #E8101A; }
.rot-mini { display: flex; gap: 2px; margin-top: 6px; }
.rot-mini i { width: 9px; height: 5px; background: #e3e6eb; border-radius: 2px; }
.rot-mini i.t { background: #E8101A; }
.rot-custom { display: flex; flex-wrap: wrap; gap: 12px; }
.portal-form .rot-custom label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.portal-form .rot-custom input { width: 72px; }
.plan-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.portal-form .plan-range label > span:first-child { min-height: 18px; }
.portal-form .plan-range label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: #2a2f38; }
.week-grid.wg-preview .wg-col, .week-grid.wg-preview .wg-week, .week-grid.wg-preview .wg-clear, .week-grid.wg-preview .wg-missing { pointer-events: none; }
.week-grid.wg-preview .wg-clear, .week-grid.wg-preview .wg-missing { display: none; }
.week-grid.wg-preview .wg-col small, .week-grid.wg-preview .wg-week small { visibility: hidden; }
.portal-form .week-grid.wg-preview .wg-day { cursor: default; }
.portal-form .week-grid.wg-preview .wg-day:hover { border-color: #e2e6ec; }
.week-grid.wg-preview .wg-day.wg-sel { color: #2a2f38; background: #fff; border-color: #e2e6ec; }
.week-grid.wg-preview .wg-day.wg-sel small { color: #8a94a6; }
.week-grid.wg-preview .wg-day.wg-plan-t { color: #fff; background: #E8101A; border-color: #E8101A; }
.week-grid.wg-preview .wg-day.wg-plan-t small { color: #ffd6d8; }
.week-grid.wg-preview .wg-day.wg-plan-f { color: #a0a7b4; background: #f1f2f5; border-color: #e7e9ee; }
.week-grid.wg-preview .wg-day.wg-plan-x { color: #8a94a6; background: repeating-linear-gradient(45deg, #e8eaee, #e8eaee 4px, #f6f7f9 4px, #f6f7f9 8px); border-color: #e2e6ec; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 14px; color: #5d6675; font-size: 12px; }
.plan-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: middle; background: #f1f2f5; border: 1px solid #e2e6ec; border-radius: 3px; }
.plan-legend i.t { background: #E8101A; border-color: #E8101A; }
.plan-legend i.x { background: repeating-linear-gradient(45deg, #d9dce2, #d9dce2 2px, #f6f7f9 2px, #f6f7f9 4px); }
@media (max-width: 760px) {
    .rot-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .plan-seg { justify-self: stretch; }
    .plan-seg button { flex: 1; padding: 8px 8px; font-size: 13px; }
}

/* 1.21.7 · coberturas agrupadas */
.compact-filters .cov-new { margin-left: auto; }
.cov-group { margin-top: 16px; padding: 0; overflow: hidden; }
.cov-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 18px 12px; border-bottom: 1px solid var(--slate-200, #e2e6ec); }
.cov-group-head h2 { margin: 2px 0 0; font-size: 18px; }
.cov-group-head .eyebrow { margin: 0; }
.cov-count { padding: 3px 10px; color: #3b4250; font-size: 12px; font-weight: 700; background: #f1f0ec; border-radius: 999px; }
.cov-group-head .table-link { margin-left: auto; }
.cov-table td small { display: block; color: #5d6675; font-size: 12px; }
.cov-days { display: inline-flex; gap: 3px; }
.cov-day { display: inline-grid; place-items: center; width: 24px; height: 24px; color: #b8bec9; font-size: 11px; font-weight: 800; background: #f4f5f7; border-radius: 6px; text-decoration: none; }
a.cov-day.on { color: #fff; background: #141414; }
a.cov-day.on:hover { color: #141414; background: var(--cn-yellow, #ffe100); }
.cov-expired td { opacity: .55; }
.nowrap { white-space: nowrap; }
.cov-foot { margin: 10px 4px 0; }

/* 1.21.8 · quién planifica */
.perm-table td { vertical-align: middle; }
.perm-table td small { color: #5d6675; }
.perm-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 700; }
.perm-table .perm-switch input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; width: 40px !important; height: 22px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none; margin: 0; background: #d9dee7; border-radius: 999px; cursor: pointer; transition: background .15s; }
.perm-table .perm-switch input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.perm-table .perm-switch input[type=checkbox]:checked { background: #1f9d55 !important; }
.perm-table .perm-switch input[type=checkbox]:checked::after { transform: translateX(18px); }

/* 1.21.11 · Faltan cubrir (vacaciones / licencias) */
.status-pill.danger { color: #b42318; background: #fee4e2; }
.status-pill.no-replace { margin-left: 6px; color: #5b5f6b; background: #eef0f4; }
.summary-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vacancy-panel { border-left: 4px solid #d92d20; }
.vacancy-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; margin-left: 6px; border-radius: 999px; background: #d92d20; color: #fff; font-size: 14px; vertical-align: middle; }
.vacancy-lead { margin: 0 0 10px; color: #5b5f6b; font-size: 14px; }
.vacancy-list { display: flex; flex-direction: column; gap: 8px; }
.vacancy-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #f3d0cc; border-radius: 12px; background: #fff8f7; }
.vacancy-icon { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #d92d20; color: #fff; font-weight: 900; }
.vacancy-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vacancy-text small { color: #5b5f6b; }
.vacancy-text .vacancy-when { color: #b42318; font-weight: 700; }
.vacancy-cover { flex: 0 0 auto; white-space: nowrap; }
.vacancy-warning { margin: 10px 0; padding: 12px; border-radius: 12px; background: #fffaf0; border: 1px solid #f5d9a8; }
.vacancy-warning p { margin: 0 0 8px; }
.vacancy-warning > small { display: block; margin-top: 8px; color: #6b5a3a; }
.vacancy-ok { margin: 10px 0; color: #1f7a45; font-weight: 700; font-size: 14px; }
@media (max-width: 620px) { .vacancy-row { flex-wrap: wrap; } .vacancy-cover { width: 100%; text-align: center; } }

/* 1.21.11 · Reporte de horas en calendario */
.report-tabs { display: flex; gap: 4px; margin: 4px 0 14px; border-bottom: 1px solid #e6e1d9; }
.report-tabs a { padding: 10px 16px; font-weight: 750; font-size: 14px; color: #6b6259; border-bottom: 3px solid transparent; text-decoration: none; }
.report-tabs a.on { color: #111; border-color: #c8102e; }
.hc { padding: 0 0 4px; overflow: visible; }
.hc-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px 6px; flex-wrap: wrap; }
.hc-who { display: flex; gap: 12px; align-items: center; }
.hc-who strong { display: block; font-size: 18px; }
.hc-who small { color: #6b6259; }
.hc-avatar { width: 42px; height: 42px; border-radius: 50%; background: #ffe14d; display: grid; place-items: center; font-weight: 800; }
.hc-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.hc-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 12px 22px; }
.hc-stats div { background: #faf8f5; border: 1px solid #eee8df; border-radius: 12px; padding: 10px 12px; }
.hc-stats small { display: block; color: #6b6259; font-size: 12px; font-weight: 650; }
.hc-stats strong { font-size: 22px; }
.hc-ok { color: #178a4c; } .hc-pd { color: #b86e00; }
.hc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 6px 22px 14px; font-size: 13px; color: #3d3833; }
.hc-leg, .hc-leg-x { display: inline-flex; align-items: center; gap: 6px; }
.hc-leg i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.hc-leg b { background: #f3efe9; border-radius: 8px; padding: 1px 7px; font-size: 12px; }
.hc-sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.hc-sw.absence { background: repeating-linear-gradient(45deg, #e6ddff, #e6ddff 3px, #f4f0ff 3px, #f4f0ff 6px); }
.hc-sw.missing { border: 2px solid #d92d20; background: #fff1f0; }
.hc-sw.plan { border: 1.5px dashed #b9b0a5; }
i.hc-dot { color: #e08a00; font-style: normal; font-size: 10px; margin-left: 3px; vertical-align: 2px; }
.hc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 86px; gap: 6px; padding: 0 22px 6px; }
.hc-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #8a8076; padding: 4px 6px; }
.hc-day { position: relative; min-height: 104px; border: 1px solid #ece6dd; border-radius: 12px; background: #fff; padding: 7px; display: flex; flex-direction: column; gap: 4px; }
details.hc-day { display: block; }
details.hc-day > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
details.hc-day > summary::-webkit-details-marker { display: none; }
.hc-day.weekend, .hc-day.plan { background: #fcfbf9; }
.hc-day.out { background: transparent; border: none; }
.hc-day.today { box-shadow: 0 0 0 2px #111 inset; }
.hc-day.absence { background: repeating-linear-gradient(45deg, #f1ecff, #f1ecff 6px, #f8f5ff 6px, #f8f5ff 12px); border-color: #ddd2ff; }
.hc-day.missing { border: 2px solid #f0a59d; background: #fff6f5; }
.hc-top { display: flex; justify-content: space-between; align-items: center; }
.hc-num { font-weight: 800; font-size: 13px; color: #3d3833; }
.hc-total { font-size: 13px; background: #111; color: #fff; border-radius: 7px; padding: 1px 7px; }
.hc-chip { display: flex; justify-content: space-between; gap: 4px; align-items: center; font-size: 11.5px; line-height: 1.2; padding: 4px 6px; border-radius: 7px; background: color-mix(in srgb, var(--c) 12%, #fff); border-left: 3px solid var(--c); }
.hc-chip span { font-weight: 700; color: #2b2622; min-width: 0; }
.hc-chip em { font-style: normal; font-weight: 800; white-space: nowrap; }
.hc-chip.ghost { background: #fff; border: 1.5px dashed color-mix(in srgb, var(--c) 45%, #fff); border-left-width: 3px; opacity: .8; }
.hc-chip.ghost em { font-weight: 600; color: #6b6259; }
.hc-tag { font-size: 12px; font-weight: 800; border-radius: 7px; padding: 3px 7px; align-self: flex-start; color: #fff; }
.hc-tag.absence { background: #6941c6; } .hc-tag.missing { background: #d92d20; }
.hc-note { font-size: 11px; color: #8a3a33; }
.hc-off { font-size: 12px; color: #aaa197; margin-top: auto; }
.hc-week { display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 800; font-size: 16px; border-radius: 12px; background: #f3efe9; }
.hc-week small { font-weight: 600; font-size: 11px; color: #8a8076; }
.hc-week.muted { color: #b5ab9f; }
details.hc-day[open] { z-index: 5; box-shadow: 0 0 0 2px #c8102e inset; }
.hc-pop { position: absolute; top: calc(100% + 6px); left: 0; width: 300px; max-width: 80vw; background: #fff; border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.18); border: 1px solid #e6e0d7; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; z-index: 6; }
.hc-cal > details.hc-day:nth-child(8n+5) .hc-pop, .hc-cal > details.hc-day:nth-child(8n+6) .hc-pop, .hc-cal > details.hc-day:nth-child(8n+7) .hc-pop { left: auto; right: 0; }
.hc-pop div { display: grid; grid-template-columns: 12px 1fr auto; gap: 2px 8px; align-items: center; }
.hc-pop div i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); grid-row: span 2; }
.hc-pop div span { grid-column: 2; color: #6b6259; font-size: 12px; }
.hc-pop div b { grid-column: 3; grid-row: 1; }
.hc-pop div small { grid-column: 3; grid-row: 2; font-weight: 700; font-size: 11px; color: #178a4c; }
.hc-pop div small.st-pendiente { color: #b86e00; } .hc-pop div small.st-rechazada { color: #b42318; }
.hc-pop a { color: #c8102e; font-weight: 700; font-size: 12.5px; }
.hc-foot { padding: 10px 22px 18px; color: #6b6259; font-size: 13px; margin: 0; }
.hc-team-wrap { overflow-x: auto; padding: 0 22px 16px; }
.hc-team { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 13px; }
.hc-team th { font-size: 12px; color: #8a8076; font-weight: 800; text-align: center; padding: 4px 2px; background: none; }
.hc-team th small { display: block; font-size: 10px; font-weight: 700; }
.hc-team th.we { color: #b5ab9f; } .hc-team th.td { color: #111; background: #ffe14d; border-radius: 6px; }
.hc-team .hc-person { text-align: left; min-width: 180px; padding: 4px 8px 4px 0; position: sticky; left: 0; background: #fff; z-index: 1; }
.hc-team tbody .hc-person a { text-decoration: none; color: inherit; display: block; }
.hc-team tbody .hc-person strong { display: block; color: #111; font-size: 13px; }
.hc-team tbody .hc-person small { color: #8a8076; font-weight: 600; }
.hc-team td { text-align: center; border-radius: 7px; height: 38px; min-width: 38px; font-weight: 800; padding: 0 2px; border: 0; }
.hc-c.work { background: color-mix(in srgb, var(--c) 16%, #fff); box-shadow: inset 0 -3px 0 var(--c); }
.hc-c.work.split { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, #fff) 50%, color-mix(in srgb, var(--c2) 18%, #fff) 50%); box-shadow: inset 3px -3px 0 var(--c), inset -3px 0 0 var(--c2); }
.hc-c.off { color: #cfc7bc; background: #faf8f5; }
.hc-c.absence { background: #efe9ff; color: #6941c6; }
.hc-c.missing { background: #fff1f0; color: #d92d20; box-shadow: inset 0 0 0 2px #f0a59d; }
.hc-c.plan { background: #fff; box-shadow: inset 0 0 0 1.5px #d8d0c5; }
.hc-plan { color: #9a9086; font-weight: 600; }
.hc-tot { background: #111; color: #fff; min-width: 70px; }
@media (max-width: 900px) {
  .hc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hc-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 0 10px 6px; }
  .hc-h:nth-child(8), .hc-week { display: none; }
  .hc-day { min-height: 64px; padding: 4px; }
  .hc-chip { flex-direction: column; align-items: flex-start; font-size: 10px; padding: 2px 4px; }
  .hc-chip span { display: none; }
  .hc-total { font-size: 11px; padding: 0 4px; }
  .hc-tag { font-size: 10px; padding: 2px 4px; }
  .hc-note, .hc-off { display: none; }
  .hc-pop { position: fixed; left: 12px !important; right: 12px !important; top: auto; bottom: 12px; width: auto; max-width: none; }
}
.vacancy-panel > .vacancy-lead, .vacancy-panel > .vacancy-list, .vacancy-panel > .empty-state { margin: 0 18px 16px; }
.vacancy-panel > .vacancy-lead { margin-top: 12px; }
.hc-short { display: none; }
@media (max-width: 900px) {
  .hc-full, .hc-total { display: none; }
  .hc-short { display: inline; }
  .hc-stats strong { font-size: 17px; }
  .hc-stats small { font-size: 11px; }
  .hc-nav .button { padding: 8px 10px; font-size: 13px; }
}

/* 1.21.12 · Próximo turno en Dar presente y días del puesto al asignar */
.attendance-next { display: flex; flex-direction: column; gap: 4px; margin: 22px; padding: 16px 18px; border-radius: 12px; background: #fffaf0; border: 1px solid #f5d9a8; }
.attendance-next strong { font-size: 15px; }
.attendance-next span { color: #4a4540; font-size: 14px; }
.attendance-next .attendance-opens { color: #8a5a00; font-weight: 700; }
.attendance-next .table-link { margin-top: 4px; font-weight: 700; }
#id_dias { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 4px 0; }
#id_dias label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #e2ded6; border-radius: 999px; background: #fff; font-weight: 700; cursor: pointer; }
#id_dias label:has(input:checked) { background: #111; color: #fff; border-color: #111; }
/* Aviso de PIN en "Dar presente": con la misma sangría que el resto de la tarjeta */
.attendance-hint { margin: 0 22px 16px; }

/* 1.21.16 · Botón "Dar de baja todos los días" dentro de la tabla de coberturas */
.cov-deactivate { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px dashed var(--slate-300); border-radius: 12px; background: #fff; }
.cov-deactivate label { display: grid; gap: 4px; }
.cov-deactivate label small { color: var(--slate-500); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cov-deactivate input[type="date"] { min-height: 40px; padding: 8px 10px; border: 1px solid var(--slate-300); border-radius: 10px; background: var(--surface); color: var(--slate-700); font: inherit; font-size: 13px; }
.cov-deactivate input[type="date"]:focus { outline: none; border-color: var(--cn-red); box-shadow: 0 0 0 4px rgba(255, 225, 0, .7); }
.cov-deactivate button.table-link { justify-self: start; min-height: 36px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--cn-red-gradient); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.cov-deactivate button.table-link:hover { background: linear-gradient(135deg, #C90812 0%, #7E0009 100%); }