:root {
    --brand: #1f4e79;
    --brand-dark: #173a5a;
    --brand-soft: #e8f0f8;
    --pend-bg: #fff8e6;
    --pend-border: #f0c14b;
    --pend-ink: #7a5500;
    --sidebar-w: 250px;
}

body { background: #f4f6f9; font-size: .95rem; }
.bg-brand { background: var(--brand) !important; }
.text-brand { color: var(--brand) !important; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.brand-mark { background: #fff; color: var(--brand); font-weight: 800; border-radius: 6px; padding: 1px 7px; font-size: .85rem; letter-spacing: .5px; }

/* Menú lateral */
.sidebar { width: var(--sidebar-w); background: #fff; min-height: calc(100vh - 56px); }
@media (min-width: 992px) {
    .sidebar { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; flex-shrink: 0; }
}
.menu-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #8a94a3; padding: 14px 20px 4px; font-weight: 600; }
.menu-link { display: flex; align-items: center; gap: 10px; padding: 7px 20px; color: #333c48; text-decoration: none; border-left: 3px solid transparent; }
.menu-link:hover { background: #f2f5f9; color: var(--brand); }
.menu-link.active { background: var(--brand-soft); color: var(--brand); border-left-color: var(--brand); font-weight: 600; }
.menu-link i { width: 18px; text-align: center; }

.main-content { min-width: 0; max-width: 1400px; }
.page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 1rem; }
.card { border: 1px solid #e3e7ed; box-shadow: 0 1px 2px rgba(20, 40, 70, .04); }
.filter-bar { background: #fff; }
.row-inactive td { color: #9aa3ae; }
.table > :not(caption) > * > * { padding: .55rem .75rem; }

/* Recuadro "Por confirmar" */
.pendiente { background: var(--pend-bg); border: 1px solid var(--pend-border); border-left: 5px solid var(--pend-border); }
.pendiente-icon { font-size: 1.6rem; color: #d99a00; line-height: 1; }
.pendiente-label { color: var(--pend-ink); letter-spacing: .05em; font-size: .7rem; }
.pendiente-opcion { background: #fff; color: #5b4300; border: 1px solid #ecd9a4; font-weight: 500; white-space: normal; text-align: left; }

/* Tarjetas de inicio */
.stat { border-radius: 10px; }
.stat .stat-num { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.stat .stat-icon { font-size: 1.6rem; opacity: .8; }

/* Calendario del rol */
.cal-wrap { overflow-x: auto; }
.cal { border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.cal th, .cal td { border-bottom: 1px solid #eef1f5; border-right: 1px solid #eef1f5; text-align: center; padding: 0; min-width: 30px; height: 30px; }
.cal thead th { position: sticky; top: 0; background: #f8f9fb; z-index: 2; font-weight: 600; padding: 4px 2px; }
.cal .emp { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; padding: 4px 10px; min-width: 190px; white-space: nowrap; }
.cal thead .emp { z-index: 3; background: #f8f9fb; }
.cal .we { background: #fafbfc; }
.cal .today { box-shadow: inset 0 0 0 2px var(--brand); }
.cal a.c { display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; text-decoration: none; color: inherit; font-weight: 600; }
.c-T { background: #e6f4ea; color: #1e6b34 !important; }
.c-D { background: #f1f3f5; color: #9aa3ae !important; }
.c-F { background: #fde2e4; color: #a4262c !important; }
.c-V { background: #d7e8fb; color: #174f8c !important; }
.c-P { background: #fff1c2; color: #7a5500 !important; }
.c-X { background: #ede4ff; color: #5a2ca0 !important; }
.c-N { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 4px, #f0f0f0 4px, #f0f0f0 8px); color: #bbb !important; }
.cal tfoot td { font-weight: 600; background: #f8f9fb; }
.legend span.sw { display: inline-block; width: 22px; height: 18px; border-radius: 4px; text-align: center; font-size: .72rem; font-weight: 700; line-height: 18px; margin-right: 4px; }

/* Patrón de turno */
.ciclo { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ciclo .dia { border: 1px solid #dfe4ea; border-radius: 8px; padding: 8px; background: #fff; }
.ciclo .dia.off { background: #f4f5f7; }
.strip { display: flex; flex-wrap: wrap; gap: 3px; }
.strip span { width: 28px; text-align: center; border-radius: 4px; font-size: .7rem; padding: 2px 0; }

/* Matriz de skills */
.matrix td.lvl { text-align: center; min-width: 70px; }
.lvl-badge { display: inline-block; min-width: 30px; border-radius: 6px; padding: 3px 6px; font-weight: 700; font-size: .8rem; }
.lvl-3 { background: #1f7a3a; color: #fff; }
.lvl-2 { background: #6fbf73; color: #fff; }
.lvl-1 { background: #d8efd9; color: #1f5f2c; }
.lvl-x { background: #f1f3f5; color: #adb5bd; }
.lvl-exp { outline: 2px dashed #dc3545; outline-offset: 1px; }
.cov-ok { color: #1e6b34; }
.cov-bad { color: #b02a37; }

/* Login */
.login-bg { min-height: 100vh; background: linear-gradient(135deg, var(--brand) 0%, #2c6aa0 60%, #6a9bd0 100%); }
.login-card { max-width: 400px; width: 100%; border-radius: 14px; }

@media (max-width: 576px) {
    .page-header h1 { font-size: 1.25rem; }
    .main-content { padding: 12px !important; }
}