/* ============================================================
   Panel Administrativo
   panel.css  v2
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --brand:          #1E3163;
    --brand-dark:     #16224A;
    --sidebar-bg:     #16224A;
    --sidebar-hover:  #1E3163;
    --sidebar-active: rgba(195, 202, 211, .20);
    --sidebar-w:      240px;
    --topbar-h:       56px;
    --white:          #ffffff;
    --bg:             #f1f5f9;
    --card-bg:        #ffffff;
    --border:         #e2e8f0;
    --text:           #1e293b;
    --text-muted:     #64748b;
    --text-sidebar:   #c8d0e0;
    --radius:         8px;
    --shadow:         0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-lg:      0 10px 30px rgba(0,0,0,.12);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--sidebar-bg);
    padding: 1.5rem;
}

.login-card {
    background: var(--white);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}

.login-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}
.login-brand img {
    width: 220px;
    max-width: 100%; height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto .75rem;
}
.login-brand h1 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
}
.login-brand p {
    font-size: .85rem;
    color: var(--text-muted);
    margin-top: .2rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PANEL LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.panel-body {
    display: flex;
    min-height: 100vh;
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: transform .25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
/* El logo es azul marino, dorado y plata: sobre el menú,
   que también es marino, se perdería. Va dentro de una pastilla
   clara para que se lea. */
.sidebar-brand img {
    height: 40px;
    width: auto;
    border-radius: 8px;
    object-fit: contain;
    background: var(--white);
    padding: 3px;
}
.sidebar-brand span {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-sidebar);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.2;
}

.sidebar-nav {
    flex: 1;
    padding: .75rem 0;
    overflow-y: auto;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .62rem 1.2rem;
    color: var(--text-sidebar);
    font-size: .875rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.nav-item:hover {
    background: var(--sidebar-hover);
    color: #fff;
    text-decoration: none;
}
.nav-item.active {
    background: var(--sidebar-active);
    color: #fff;
    border-left-color: var(--brand);
}
.nav-icon {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.nav-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.nav-label { flex: 1; }

.sidebar-footer {
    padding: .85rem 1rem;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-shrink: 0;
}
.sidebar-user {
    font-size: .78rem;
    color: var(--text-sidebar);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-logout {
    display: block;
    text-align: center;
    padding: .42rem;
    background: rgba(195,202,211,.22);
    color: #f87171;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.btn-logout:hover {
    background: var(--brand);
    color: #fff;
    text-decoration: none;
}

/* ── CONTENIDO PRINCIPAL ──────────────────────────────────── */
.panel-content {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-h);
    background: var(--white);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    box-shadow: var(--shadow);
    flex-shrink: 0;
}
.topbar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text);
    padding: .25rem;
    line-height: 1;
}
.topbar-title {
    font-size: .95rem;
    font-weight: 600;
    flex: 1;
    color: var(--text);
}
.topbar-user {
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── PÁGINA ───────────────────────────────────────────────── */
.page-content {
    padding: 1.5rem;
    flex: 1;
}

/* ── PAGE TOOLBAR ─────────────────────────────────────────── */
/* Barra de acciones encima de la tarjeta principal           */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.toolbar-filters {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.toolbar-count {
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPONENTES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.card-header h3 {
    font-size: .9rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}
.card-body { padding: 1.25rem; }
.card-body.p0 { padding: 0; }

/* ── KPI Grid ─────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.kpi-card {
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    color: #fff;
    box-shadow: var(--shadow);
}
.kpi-value {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}
.kpi-label {
    font-size: .72rem;
    opacity: .85;
    margin-top: .4rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.kpi-blue  { background: #2563eb; }
.kpi-red   { background: var(--brand); }
.kpi-green { background: #16a34a; }
.kpi-gray  { background: #475569; }

/* ── 2 columnas ───────────────────────────────────────────── */
.row-2col {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    align-items: start;
}

/* ── Tabla ────────────────────────────────────────────────── */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.table th {
    padding: .6rem 1rem;
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table td {
    padding: .72rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #f8fafc; }
.cell-name { font-weight: 500; color: var(--text); }
.cell-sub  { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.cell-date { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

/* Celda de acciones: botones alineados a la derecha */
.td-actions {
    text-align: right;
    white-space: nowrap;
}
.td-actions > * { vertical-align: middle; }
.td-actions > form { display: inline; }

/* Tabla de detalle de dos columnas (etiqueta / valor) */
.detail-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.detail-table th,
.detail-table td { padding: .6rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.detail-table tr:last-child th,
.detail-table tr:last-child td { border-bottom: none; }
.detail-table th {
    width: 36%;
    font-weight: 600;
    font-size: .8rem;
    color: var(--text-muted);
    text-align: left;
    background: #f8fafc;
    white-space: nowrap;
}

/* Tabla de permisos VMAB */
.permisos-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.permisos-tabla th,
.permisos-tabla td { padding: .55rem .8rem; border-bottom: 1px solid var(--border); }
.permisos-tabla tr:last-child td { border-bottom: none; }
.permisos-tabla th {
    background: #f8fafc;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.permisos-tabla tbody tr:hover td { background: #f8fafc; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge-info      { background: #dbeafe; color: #1d4ed8; }
.badge-warning   { background: #fef3c7; color: #92400e; }
.badge-success   { background: #dcfce7; color: #15803d; }
.badge-danger    { background: #fee2e2; color: #b91c1c; }
.badge-purple    { background: #ede9fe; color: #6d28d9; }
.badge-secondary { background: #f1f5f9; color: #475569; }

/* El estado de una cita, con los mismos colores de la agenda (.cita--*). Antes
   solo "Confirmada" tenía color propio y todo lo demás salía azul: "Agendada" y
   "Cancelada" se veían iguales en el dashboard. */
.badge-cita--agendada        { background: #dbeafe; color: #1d4ed8; }
.badge-cita--confirmada      { background: #dcfce7; color: #15803d; }
.badge-cita--reagenda_pedida { background: #fef3c7; color: #92400e; }
.badge-cita--cancelada       { background: #fee2e2; color: #b91c1c; text-decoration: line-through; }
.badge-cita--realizada       { background: #ccfbf1; color: #0f766e; }
.badge-cita--no_asistio      { background: #fff; color: #b91c1c; box-shadow: inset 0 0 0 1px #b91c1c; }

/* ── Estatus bars ─────────────────────────────────────────── */
.estatus-list { display: flex; flex-direction: column; gap: .9rem; }
.estatus-row  { display: flex; align-items: center; gap: .65rem; }
.estatus-info {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 115px;
    flex-shrink: 0;
}
.estatus-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.estatus-nombre { font-size: .83rem; font-weight: 500; }
.estatus-bar-wrap {
    flex: 1;
    background: var(--border);
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}
.estatus-bar {
    height: 100%;
    border-radius: 999px;
    min-width: 4px;
    transition: width .5s ease;
}
.estatus-count {
    font-size: .82rem;
    font-weight: 700;
    min-width: 22px;
    text-align: right;
    color: var(--text);
}

/* ── Formularios ──────────────────────────────────────────── */
.login-form,
.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.field label {
    font-size: .83rem;
    font-weight: 600;
    color: var(--text);
}
.field small {
    font-size: .76rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.field input,
.field select,
.field textarea {
    padding: .58rem .85rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .875rem;
    color: var(--text);
    background: var(--white);
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(30,49,99,.15);
}
.field textarea { resize: vertical; min-height: 90px; }

/* Input pequeño (filtros, tablas inline) */
.input-sm {
    padding: .32rem .65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .82rem;
    color: var(--text);
    background: var(--white);
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.input-sm:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(30,49,99,.15);
}

/* Select override (permisos individuales) */
.select-override {
    padding: .25rem .4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .78rem;
    color: var(--text);
    background: var(--white);
    cursor: pointer;
    font-family: inherit;
}
.select-override:focus {
    outline: none;
    border-color: var(--brand);
}

/* Formulario de página completa (crear/editar) */
.form-page { display: flex; flex-direction: column; gap: 1.25rem; }

.form-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    padding: 1.25rem;
}

.form-section-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 1.1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.field--full { grid-column: 1 / -1; }

/* Label con checkbox inline */
.check-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    margin-top: .3rem;
}
.check-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--brand);
    flex-shrink: 0;
}

/* Grid de checkboxes (beneficios, documentación, etc.) */
.checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .5rem .75rem;
    margin-top: .4rem;
}

/* Fila de acciones del formulario */
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding-top: .5rem;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.tab-item {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-right: 2px;
    text-decoration: none;
    transition: background .15s, color .15s;
    cursor: pointer;
}
.tab-item:hover {
    background: #e9eef4;
    color: var(--text);
    text-decoration: none;
}
.tab-item.active {
    background: var(--card-bg);
    color: var(--brand);
    border-bottom: 1px solid var(--card-bg);
    position: relative;
    z-index: 1;
}

/* ── Paginación ───────────────────────────────────────────── */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1rem;
    border-top: 1px solid var(--border);
    font-size: .875rem;
    color: var(--text-muted);
}

/* ── Botones ──────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .58rem 1.2rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
    letter-spacing: .01em;
}
.btn-primary:hover {
    background: var(--brand-dark);
    text-decoration: none;
    color: #fff;
}
.btn-block { width: 100%; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    background: var(--white);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.btn-secondary:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    text-decoration: none;
}

.btn-sm {
    display: inline-flex;
    align-items: center;
    padding: .32rem .7rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--white);
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}
.btn-sm:hover {
    border-color: var(--brand);
    color: var(--brand);
    text-decoration: none;
}

/* Botón pequeño de peligro (desactivar, rechazar) */
.btn-sm-danger {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fff5f5;
}
.btn-sm-danger:hover {
    border-color: #b91c1c;
    background: #fee2e2;
    color: #991b1b;
}

/* La misma forma que .btn-primary: solo traía el color, y en el expediente se veía
   como una barra roja plana junto a botones con relleno y esquinas. */
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .58rem 1.2rem;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
    letter-spacing: .01em;
}
.btn-danger:hover { background: #b91c1c; color: #fff; }

/* ── Alertas ──────────────────────────────────────────────── */
.alert {
    padding: .7rem .95rem;
    border-radius: 6px;
    font-size: .85rem;
    line-height: 1.4;
    border-width: 1px;
    border-style: solid;
}
.alert--error   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.alert--success { background: #dcfce7; color: #15803d; border-color: #86efac; }
.alert--info    { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.alert--warning { background: #fef9c3; color: #854d0e; border-color: #fde047; }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: .875rem;
}

/* ── Páginas de error ─────────────────────────────────────── */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    gap: 1rem;
    min-height: 60vh;
}
.error-code {
    font-size: 5.5rem;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    letter-spacing: -.04em;
}
.error-page h2 { font-size: 1.4rem; font-weight: 700; }
.error-page p  { color: var(--text-muted); max-width: 360px; line-height: 1.55; }

/* ── Footer del panel ─────────────────────────────────────── */
.panel-footer {
    text-align: center;
    padding: .7rem 1.5rem;
    font-size: .75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--card-bg);
    margin-top: auto;
    flex-shrink: 0;
}
.panel-footer a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    transition: color .15s;
}
.panel-footer a:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

/* ── Flash messages ───────────────────────────────────────── */
.flash { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .875rem; }
.flash-success { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-info    { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.flash-warning { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 960px) {
    .row-2col { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .field--full { grid-column: 1; }
}

@media (max-width: 680px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    .panel-content { margin-left: 0; }
    .topbar-toggle { display: block; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .page-content { padding: 1rem; }
    .topbar { padding: 0 1rem; }
    .checks-grid { grid-template-columns: 1fr 1fr; }
    .tabs { flex-wrap: nowrap; overflow-x: auto; }
    .tab-item { flex-shrink: 0; }
    .page-toolbar { flex-direction: column; align-items: flex-start; }
    .toolbar-filters { width: 100%; }
}

@media (max-width: 400px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .login-card { padding: 2rem 1.25rem; }
    .checks-grid { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions > * { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Menú lateral en teléfono — botón de cerrar y capa de fondo

   El menú se abría cubriendo la pantalla y no había forma de cerrarlo: el botón
   que lo abre queda debajo del propio menú. Se añaden dos salidas: la X de la
   esquina y tocar fuera. (La tecla Escape también, desde el script de _header.)
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar-close {
    display: none;              /* solo aparece en pantallas chicas */
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--text-sidebar);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
    opacity: .75;
}
.sidebar-close:hover { opacity: 1; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 150;               /* debajo del menú (200), encima del contenido */
}

@media (max-width: 680px) {
    .sidebar-close { display: block; }
    .sidebar-overlay.active { display: block; }
    /* Con el menú abierto no debe poder desplazarse la página de atrás */
    body:has(.sidebar-overlay.active) { overflow: hidden; }
}

/* ── Crédito del pie ────────────────────────────────────────── */
/* El logo de quien desarrolla, en lugar del emoji que había antes:
   el emoji lo dibuja cada sistema operativo a su manera. */
.credit-logo {
    /* Sin esto se va solo a la izquierda: arriba hay un `img { display: block }`
       global, y un bloque no se centra con text-align — solo se centra lo que va
       en línea con el texto. */
    display: inline-block;
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: -2px;
    margin-right: 4px;
}

/* ── Postulaciones dentro del expediente ─────────────────────
   Cada postulación es un bloque que se abre y se cierra. Se usa
   <details>, que los navegadores ya traen: funciona aunque el
   JavaScript falle, y cuál viene abierto lo decide el servidor
   con el parámetro ?p= de la dirección.
   ─────────────────────────────────────────────────────────── */
.postulacion-bloque {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .75rem;
    background: var(--white);
}
.postulacion-bloque[open] {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(30, 49, 99, .08);
}

.postulacion-bloque > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    cursor: pointer;
    list-style: none;          /* Chrome y Safari */
    user-select: none;
}
.postulacion-bloque > summary::-webkit-details-marker { display: none; }

/* La flecha se dibuja aquí para que apunte hacia abajo al abrirse.
   La del navegador cambia de forma entre sistemas. */
.postulacion-bloque > summary::before {
    content: "▸";
    color: var(--text-muted);
    font-size: .9rem;
    transition: transform .15s;
    display: inline-block;
}
.postulacion-bloque[open] > summary::before { transform: rotate(90deg); }

.postulacion-bloque > summary:hover { background: var(--bg); }
.postulacion-bloque > summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.post-vacante {
    flex: 1;
    min-width: 180px;
    font-weight: 600;
    color: var(--text);
}
.post-estado {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.post-estado .cell-sub { margin: 0; white-space: nowrap; }

.vac-puesto-sm {
    display: inline-block;
    background: var(--brand);
    color: var(--white);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: .4rem;
    vertical-align: 1px;
}

.postulacion-cuerpo {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.sub-bloque { margin-top: 1.25rem; }
.sub-bloque h4 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: .5rem;
}
.sub-bloque .table { font-size: .8rem; }

.nota-item {
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}
.nota-item:last-child { border-bottom: none; }

/* La fila de "postularlo a una vacante", encima de los bloques. */
.form-inline-postular {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.form-inline-postular .cell-sub { margin: 0; }

@media (max-width: 640px) {
    .postulacion-bloque > summary { padding: .6rem .75rem; }
    .postulacion-cuerpo { padding: 1rem .75rem; }
    .form-inline-postular { flex-direction: column; align-items: stretch; }
}

/* ══ Visor de CV (F6) ═══════════════════════════════════════════════════════
   Las hojas se dibujan en un lienzo cada una, con la marca de agua pintada
   dentro de la propia imagen. Por eso aquí no hay ninguna capa de marca: si
   estuviera en CSS se quitaría desde el inspector y no saldría al imprimir. */
.cv-visor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 8rem;
}

/* Cada hoja. El ancho lo decide el lienzo al dibujarse; el max-width evita que
   se desborde si la ventana se encoge después de haberlo dibujado. */
.cv-hoja {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    background: #fff;
}

/* "Cargando el CV… 40%". Se quita sola cuando el documento termina de llegar. */
.cv-estado {
    color: var(--text-muted);
    font-size: .9rem;
    padding: 2rem 0;
    margin: 0;
}

@media print {
    /* Al imprimir solo interesan las hojas: fuera el menú, el aviso y los
       botones. La marca de agua no necesita nada aquí porque va pintada dentro
       del lienzo, no puesta encima con CSS. */
    .sidebar, .topbar, .panel-footer, .page-toolbar, .alert { display: none !important; }
    .panel-content, .page-content { margin: 0 !important; padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
    .cv-hoja { border: none; box-shadow: none; page-break-after: always; }
}

/* ══ Agenda (F7) ════════════════════════════════════════════════════════════
   Las tres vistas se arman en el servidor y se cambian con enlaces. No hay
   JavaScript: un calendario es de las pantallas donde más fácil es acabar con
   mil líneas para hacer lo que un enlace resuelve. */
.cal-titulo {
    font-weight: 700;
    font-size: .95rem;
    margin: 0 .5rem;
    white-space: nowrap;
}

/* Siete columnas iguales. La altura mínima evita que una semana sin citas se
   aplaste hasta parecer una línea. */
.cal-mes,
.cal-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.cal-encabezado {
    background: var(--bg-muted, #f8fafc);
    padding: .5rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.cal-dia {
    background: #fff;
    min-height: 6.5rem;
    padding: .35rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.cal-dia--fuera  { background: #fafafa; }
.cal-dia--fuera .cal-numero { color: var(--text-muted); }
.cal-dia--hoy    { background: #fffbeb; }

.cal-numero {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    align-self: flex-start;
}
.cal-numero:hover { text-decoration: underline; }

/* Una cita dentro de un día. El color dice el estado sin necesidad de leerlo. */
.cita {
    display: block;
    font-size: .72rem;
    line-height: 1.3;
    padding: .2rem .35rem;
    border-radius: 4px;
    border-left: 3px solid #94a3b8;
    background: #f1f5f9;
    color: #1f2937;
    text-decoration: none;
}
.cita:hover { filter: brightness(.97); }
.cita-extra { display: block; color: var(--text-muted); }

.cita--confirmada    { border-left-color: #16a34a; background: #dcfce7; }
.cita--agendada      { border-left-color: #2563eb; background: #dbeafe; }
.cita--reagenda_pedida { border-left-color: #d97706; background: #fef3c7; }
.cita--cancelada     { border-left-color: #b91c1c; background: #fee2e2; text-decoration: line-through; }
/* "Se presentó" en verde azulado: no puede ir gris —parecía apagada— ni en el
   mismo verde de "Confirmada", que es otra cosa. */
.cita--realizada     { border-left-color: #0f766e; background: #ccfbf1; }
.cita--no_asistio    { border-left-color: #b91c1c; background: #f8fafc; }

/* La vista de día, y la agenda de hoy en el dashboard. */
.cal-lista { display: flex; flex-direction: column; }
.cal-renglon {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--border);
}
.cal-renglon:last-child { border-bottom: none; }
.cal-hora {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}
.cal-hora .cell-sub { display: block; font-weight: 400; }

@media (max-width: 860px) {
    /* En el teléfono, siete columnas son ilegibles: la semana pasa a una lista
       y el mes conserva la rejilla pero sin las citas dentro de cada día. */
    .cal-semana { grid-template-columns: 1fr; }
    .cal-dia    { min-height: 0; }
    .cal-mes .cita { font-size: 0; border-left-width: 6px; padding: .15rem; }
    .cal-mes .cita-extra { display: none; }
    .cal-renglon { grid-template-columns: 4rem 1fr; }
    .cal-renglon > :last-child { grid-column: 2; }
}

/* Día, hora y duración en un renglón. `form-grid` no sirve aquí: es de dos
   columnas fijas y estos son tres campos de anchos distintos. */
.field-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.field-row > .field { flex: 1 1 8rem; min-width: 8rem; }

@media (max-width: 640px) {
    .field-row { flex-direction: column; gap: 0; }
}

/* ── Leyenda de colores de la agenda (F7-B) ─────────────────────────────────
   Va en la misma barra que el conteo y las flechas. En una línea y con
   cuadritos de 10 px: si ocupara un bloque propio le quitaría a la agenda el
   alto que necesita. */
.cal-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .85rem;
    align-items: center;
    font-size: .72rem;
    color: var(--text-muted);
}
.cal-leyenda span { display: inline-flex; align-items: center; gap: .3rem; }
/* Solo la forma. El color lo pone la clase `.cita--*`, la misma que usan las
   citas del calendario, para que no haya dos listas de colores que mantener.

   NO se ponen aquí `background` ni `border-left-color`: `.cal-leyenda i` es más
   específico que `.cita--confirmada` —dos partes contra una— y le ganaría. Eso
   fue justo lo que pasó: las citas salían de colores y la leyenda toda gris. */
.cal-leyenda i {
    width: 16px;
    height: 14px;
    border-radius: 3px;
    flex: none;
    /* El ancho y el estilo del borde sí, el COLOR no: ese lo pone `.cita--*`.
       Poner aquí el atajo `border-left` arrastraría también el color. */
    border-left-width: 4px;
    border-left-style: solid;
    /* Para que un cuadro casi blanco —"no se presentó"— siga viéndose. */
    outline: 1px solid var(--border);
    outline-offset: -1px;
}

/* Las semanas vacías se encogen: antes, un mes con citas en una sola semana
   ocupaba la pantalla entera de casillas en blanco. Los días con citas crecen
   solos con su contenido. */
.cal-dia { min-height: 3.2rem; }

@media (max-width: 860px) {
    .cal-leyenda { font-size: .68rem; gap: .2rem .6rem; }
}

/* La tabla del horario, en Configuración → Empresa. Las horas se aprietan para
   que los siete días quepan sin barra de desplazamiento. */
.tabla-horario td,
.tabla-horario th { padding: .45rem .6rem; }
.tabla-horario input[type="time"] { width: 100%; min-width: 7rem; }
.tabla-horario .check-label { justify-content: center; }

/* La palabra "Cerrada" solo hace falta en el teléfono, donde la tabla se parte
   y la casilla se queda sin su encabezado arriba. */
.sr-sm { display: none; }

@media (max-width: 760px) {
    .tabla-horario thead { display: none; }
    .tabla-horario tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .35rem;
        padding: .6rem 0;
        border-bottom: 1px solid var(--border);
    }
    .tabla-horario td { border: none; padding: .15rem .6rem; }
    .tabla-horario td:first-child { grid-column: 1 / -1; }
    .sr-sm { display: inline; }
    .tabla-horario .check-label { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pantallas medianas: nada empuja la página de lado

   Con la ventana a unos 970 px, el menú se lleva 240 y la columna de la
   derecha del expediente otros 340. A la columna principal le quedaba tan poco
   que su tabla la desbordaba, y con ella toda la página: en Usuarios el botón
   "Eliminar" quedaba fuera de la vista. Tres arreglos:
   · Las columnas pueden encogerse por debajo de lo que mide su contenido.
   · Una tabla ancha se desliza dentro de su tarjeta, no la página entera.
   · Las dos columnas se apilan antes, cuando ya no caben las dos.
   ═══════════════════════════════════════════════════════════════════════════ */
.row-2col > * { min-width: 0; }
.card-body.p0 { overflow-x: auto; }

@media (max-width: 1100px) {
    .row-2col { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tablas que en el celular se vuelven tarjetas (Candidatos)

   La tabla medía 843 px y en el teléfono había que deslizarla para llegar a
   "Tomar" y "Ver expediente". Aquí cada renglón es una tarjeta: la persona
   arriba, sus datos con su rótulo (sale de `data-label`, porque los
   encabezados ya no se ven) y los botones abajo, a lo ancho.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .tabla-tarjetas thead { display: none; }
    .tabla-tarjetas,
    .tabla-tarjetas tbody,
    .tabla-tarjetas tr,
    .tabla-tarjetas td { display: block; width: 100%; }

    .tabla-tarjetas tr {
        position: relative;
        padding: .85rem 1rem;
        border-bottom: 1px solid var(--border);
    }
    .tabla-tarjetas td { border: none; padding: .15rem 0; }
    .tabla-tarjetas tbody tr:hover td { background: transparent; }

    .tabla-tarjetas td[data-label]::before {
        content: attr(data-label) ": ";
        font-size: .72rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    /* La casilla de marcar, en la esquina, sin empujar el nombre. */
    .tabla-tarjetas .td-marca {
        position: absolute;
        top: .85rem;
        right: 1rem;
        width: auto;
        padding: 0;
    }
    .tabla-tarjetas .td-persona { padding-right: 2rem; }

    /* "Descartar seleccionados": en angosto el título y su explicación iban lado a
       lado y el título se partía en dos renglones. Aquí la explicación va debajo. */
    .lote-cabecera { flex-direction: column; align-items: flex-start; gap: .2rem; }

    .tabla-tarjetas .td-actions {
        display: flex;
        gap: .5rem;
        margin-top: .55rem;
        text-align: left;
        white-space: normal;
    }
    .tabla-tarjetas .td-actions > a,
    .tabla-tarjetas .td-actions > form { flex: 1; display: flex; }
    .tabla-tarjetas .td-actions .btn-sm {
        width: 100%;
        justify-content: center;
        padding: .5rem .7rem;
    }
}