/* === Reset y base === */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #eef2ff;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-700: #334155;
    --gray-900: #0f172a;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.10);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* === Navbar === */
.navbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 24px;
    background: white;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--primary);
    font-weight: 800;
    font-size: 1.15em;
    white-space: nowrap;
}
.logo-mark { font-size: 1.3em; }

.nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--gray-700);
}

.nav-links { display: flex; gap: 4px; }
.nav-links a {
    text-decoration: none;
    color: var(--gray-700);
    padding: 7px 14px;
    border-radius: var(--radius);
    font-size: 0.92em;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { background: var(--gray-100); }
.nav-links a.activo { background: var(--primary-light); color: var(--primary); font-weight: 600; }

.nav-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
.user-info { font-size: 0.9em; color: var(--gray-700); }

/* === Container === */
.container { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }

/* === Cabecera de página === */
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 1.7em; font-weight: 800; letter-spacing: -0.02em; }
.page-head.with-action { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.back-link { text-decoration: none; color: var(--gray-500); font-size: 0.9em; display: inline-block; margin-bottom: 8px; }
.back-link:hover { color: var(--primary); }
.section-title { font-size: 1.05em; font-weight: 700; margin: 8px 0 14px; color: var(--gray-700); }

/* === Botones === */
.btn {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: white;
    color: var(--gray-700);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.15s;
}
.btn:hover { background: var(--gray-100); border-color: var(--gray-400); }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-danger { background: white; color: var(--danger); border-color: #fca5a5; }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 5px 11px; font-size: 0.82em; }
.btn-full { width: 100%; text-align: center; padding: 11px; }

/* === Badges y chips === */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74em;
    font-weight: 700;
    background: var(--gray-200);
    color: var(--gray-700);
    white-space: nowrap;
}
.badge-superadmin { background: #ede9fe; color: #6d28d9; }
.badge-preparadora { background: #dbeafe; color: #1d4ed8; }
.badge-domi { background: #e0f2fe; color: #0369a1; }
.badge-efectivo { background: #fef3c7; color: #92400e; }
.badge-domiciliado { background: #f1f5f9; color: #64748b; }
.badge-rechazado { background: #fee2e2; color: #991b1b; }

.chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--c, var(--gray-700));
    background: color-mix(in srgb, var(--c, #888) 14%, white);
    border: 1px solid color-mix(in srgb, var(--c, #888) 30%, white);
}

.txt-success { color: var(--success); }
.txt-danger { color: var(--danger); }

/* === Cards === */
.card {
    background: white;
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    margin-bottom: 16px;
}
.empty-state { text-align: center; padding: 40px 22px; }
.empty-state p { color: var(--gray-500); margin-bottom: 16px; }

/* === Stats === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}
.stat-card {
    background: white;
    padding: 18px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    text-align: center;
}
.stat-number { font-size: 2.1em; font-weight: 800; color: var(--primary); line-height: 1.1; }
.stat-label { color: var(--gray-500); font-size: 0.85em; margin-top: 4px; }

/* === Tarjetas de grupo (dashboard) === */
.grupo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.grupo-card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    border-top: 4px solid var(--g-color, var(--primary));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.grupo-card-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.grupo-card-head h3 { font-size: 1.1em; flex: 1; }
.grupo-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--g-color, var(--primary)); }
/* Secciones "Todos los grupos" (Grupo, Pagos, Horarios, Asistencia) */
.grupo-seccion { margin-bottom: 26px; }
.grupo-seccion-titulo {
    display: flex; align-items: center; gap: 8px; font-size: 1.1em;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--gray-100);
}
.grupo-seccion-cuenta { font-size: 0.72em; font-weight: 500; margin-left: auto; }
.grupo-seccion-vacio { padding: 4px 2px 8px; }
.grupo-card-body { padding: 0 18px 12px; flex: 1; }
.mini-stats { display: flex; gap: 8px; margin: 6px 0 12px; }
.mini-stats > div { flex: 1; text-align: center; background: var(--gray-50); border-radius: 8px; padding: 10px 4px; }
.mini-stats strong { display: block; font-size: 1.3em; font-weight: 800; }
.mini-stats span { font-size: 0.7em; color: var(--gray-500); }
.grupo-horario { font-size: 0.85em; }
.grupo-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-top: 1px solid var(--gray-100); background: var(--gray-50); }
.grupo-card-actions .btn { flex: 1 1 auto; min-width: 96px; text-align: center; white-space: nowrap; }

/* === Inicio de preparadora: tarjeta grande del grupo === */
.prep-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--g-color, var(--primary)) 12%, white),
        white 60%);
    border: 1px solid var(--gray-200);
    border-left: 6px solid var(--g-color, var(--primary));
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.prep-hero-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.prep-hero-grupo {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 1.15em; color: var(--gray-700);
}
.prep-hero-grupo .grupo-dot { background: var(--g-color, var(--primary)); }
.prep-hero-proxima { margin-top: 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prep-hero-label { font-size: 0.85em; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; }
.prep-hero-proxima strong { font-size: 1.7em; line-height: 1.1; }
.prep-hero-hora {
    font-size: 1.25em; font-weight: 800;
    color: var(--g-color, var(--primary));
    background: color-mix(in srgb, var(--g-color, var(--primary)) 12%, white);
    border-radius: 8px; padding: 2px 10px;
}
.btn-lg { padding: 12px 22px; font-size: 1.05em; border-radius: 10px; }
.prep-hero-cta { white-space: nowrap; }
.prep-hero-stats {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.prep-hero-stats > div {
    flex: 1 1 120px; background: white; border: 1px solid var(--gray-200);
    border-radius: 10px; padding: 10px 12px; text-align: center; min-width: 110px;
}
.prep-hero-stats strong { display: block; font-size: 1.25em; font-weight: 800; white-space: nowrap; }
.prep-hero-stats span { font-size: 0.75em; color: var(--gray-500); }

/* Accesos rápidos en cuadrícula */
.prep-accesos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}
.prep-acceso {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: white; border: 1px solid var(--gray-200); border-radius: 12px;
    padding: 18px 10px; text-decoration: none; color: var(--gray-700);
    font-weight: 700; box-shadow: var(--shadow);
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.prep-acceso:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-md);
    border-color: var(--primary); color: var(--primary);
}
.prep-acceso-ico { font-size: 1.7em; }

/* === Toolbar / filtros === */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar select, .toolbar input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 0.9em;
    background: white;
}
.check-inline { display: flex; align-items: center; gap: 6px; font-size: 0.88em; color: var(--gray-700); }
.date-nav { display: flex; align-items: center; gap: 8px; }
.dia-pill { background: var(--primary-light); color: var(--primary); padding: 5px 12px; border-radius: 999px; font-size: 0.82em; font-weight: 700; }
.horario-hint { font-size: 0.85em; }

/* === Tablas === */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--gray-200); }
.table { width: 100%; border-collapse: collapse; background: white; }
.table th, .table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--gray-100); }
.table th { background: var(--gray-50); font-size: 0.74em; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--gray-50); }
.table-compact td, .table-compact th { padding: 8px 12px; font-size: 0.9em; }
.text-center { text-align: center; }
.row-disabled { opacity: 0.55; }
.actions-cell { white-space: nowrap; }
.actions-cell .btn, .actions-cell form { display: inline-block; margin: 0 2px; }

/* === Forms === */
.form-card { max-width: 720px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.88em; color: var(--gray-700); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 0.95em;
    font-family: inherit;
    background: white;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
input:disabled { background: var(--gray-100); color: var(--gray-500); }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* Radio-cards (forma de pago) */
.radio-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-card { flex: 1; min-width: 220px; cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card-body {
    display: block;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: all 0.15s;
}
.radio-card-body strong { display: block; margin-bottom: 4px; }
.radio-card-body small { color: var(--gray-500); font-size: 0.82em; }
.radio-card input:checked + .radio-card-body { border-color: var(--primary); background: var(--primary-light); }

/* === Alerts === */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9em; font-weight: 500; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* === Asistencia === */
.bulk-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.88em; }
.asistencia-list { display: flex; flex-direction: column; gap: 8px; }
.asistencia-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 10px 16px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.asistencia-row.guardando { opacity: 0.7; }
.asistencia-row.guardado { border-color: var(--success); }
.asistencia-row.error { border-color: var(--danger); }
.asistencia-nombre { flex: 1; font-weight: 600; }

.segmented { display: inline-flex; border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; }
.seg {
    border: none;
    background: white;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--gray-500);
    border-left: 1px solid var(--gray-200);
    transition: all 0.12s;
}
.seg:first-child { border-left: none; }
.seg:hover { background: var(--gray-50); }
.seg-presente.on { background: var(--success); color: white; }
.seg-ausente.on { background: var(--danger); color: white; }
.seg-justificada.on { background: var(--warning); color: white; }

.historial-asistencia { margin-top: 28px; }
.historial-asistencia summary { cursor: pointer; font-weight: 600; color: var(--gray-700); margin-bottom: 12px; }

/* === Horarios === */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.horario-list { list-style: none; }
.horario-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.horario-dia { font-weight: 700; min-width: 90px; }
.horario-hora { flex: 1; color: var(--gray-700); }

/* === Pagos === */
.pagos-resumen { margin-bottom: 22px; }
.pago-cell { min-width: 160px; }
.btn-pago {
    border: 2px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85em;
    transition: all 0.15s;
}
.btn-pago.pendiente:hover { border-color: var(--success); color: var(--success); }
.btn-pago.pagado { background: var(--success); border-color: var(--success); color: white; }
.btn-pago:disabled { opacity: 0.5; cursor: wait; }
.pago-fecha { font-size: 0.75em; margin-top: 3px; }

/* === Edición inline de usuarios === */
.inline-edit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-edit input, .inline-edit select { width: auto; flex: 1; min-width: 130px; }
.mini-label { font-size: 0.8em; font-weight: 700; color: var(--gray-500); }
.grupos-extra-box {
    flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
    padding: 10px 12px; margin-top: 4px; background: var(--gray-50);
    border: 1px solid var(--gray-200); border-radius: var(--radius);
}
.check-extra, .check-econ { flex: none; }
.check-econ { margin-left: auto; font-weight: 600; }
.edit-row td { background: var(--primary-light); }

/* === Login === */
.login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.login-box { background: white; padding: 40px; border-radius: 16px; box-shadow: var(--shadow-md); width: 100%; max-width: 400px; border: 1px solid var(--gray-200); }
.login-logo { text-align: center; margin-bottom: 26px; }
.logo-mark-big { font-size: 3em; }
.login-logo h1 { color: var(--primary); font-size: 1.8em; font-weight: 800; margin-top: 6px; }
.subtitle { text-align: center; color: var(--gray-500); font-size: 0.9em; margin-top: 4px; }

/* === Utilidades === */
.text-muted { color: var(--gray-500); font-size: 0.88em; }
.mt-1 { margin-top: 12px; }
.form-check { display: flex; align-items: center; }
.form-check label { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.form-check input { width: auto; }

/* === Calendario: resumen del curso === */
.curso-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    background: white;
    border: 1px solid var(--gray-200);
    border-left: 5px solid var(--g-color, var(--primary));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 20px;
    margin-bottom: 18px;
}
.curso-resumen-item { display: flex; flex-direction: column; }
.curso-resumen-num { font-size: 1.6em; font-weight: 800; line-height: 1; }
.curso-resumen-lbl { font-size: 0.8em; color: var(--gray-500); }
.curso-resumen-fechas { margin-left: auto; gap: 4px; text-align: right; font-size: 0.9em; }
.curso-proxima { color: var(--gray-700); }

/* === Calendario: navegación === */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 12px;
}
.cal-mes { font-size: 1.25em; min-width: 210px; text-align: center; text-transform: capitalize; }

/* === Calendario: rejilla === */
.calendario {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 12px;
}
.cal-cabecera, .cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow {
    padding: 8px 4px;
    text-align: center;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
.cal-dia {
    min-height: 76px;
    padding: 4px 5px;
    border-right: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
}
.cal-semana .cal-dia:last-child { border-right: none; }
.cal-num { font-size: 0.82em; font-weight: 600; color: var(--gray-700); }
.cal-dia.fuera-mes { background: var(--gray-50); }
.cal-dia.fuera-mes .cal-num { color: var(--gray-300); }
.cal-dia.es-hoy { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-dia.es-hoy .cal-num {
    background: var(--primary); color: white; border-radius: 50%;
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
}

.cal-clase {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--g-color, var(--primary)) 14%, white);
    color: color-mix(in srgb, var(--g-color, var(--primary)) 55%, black);
    border: 1px solid color-mix(in srgb, var(--g-color, var(--primary)) 35%, white);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 0.78em;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.12s;
}
.cal-clase:hover { background: color-mix(in srgb, var(--g-color, var(--primary)) 26%, white); }
.cal-hora { font-weight: 500; opacity: 0.85; }
.cal-check { margin-left: auto; color: var(--success); font-weight: 800; }
.cal-dia.es-extra .cal-clase {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}
.cal-festivo {
    font-size: 0.74em;
    font-weight: 600;
    color: var(--danger);
    background: #fef2f2;
    border-radius: 6px;
    padding: 3px 6px;
    line-height: 1.25;
}
.cal-dia.es-festivo { background: #fff7f7; }

/* === Calendario: contenido de la clase (qué se trabaja) === */
.cal-contenido {
    font-size: 0.72em; color: var(--gray-500); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}

/* === Calendario: tipos de clase (colores) === */
.cal-clase.cal-tipo-simulacro {
    background: #fef3c7; border-color: #f59e0b; color: #92400e;
}
.cal-clase.cal-tipo-simulacro:hover { background: #fde68a; }
.cal-clase.cal-tipo-cultura {
    background: #ede9fe; border-color: #8b5cf6; color: #5b21b6;
}
.cal-clase.cal-tipo-cultura:hover { background: #ddd6fe; }
.leg-simulacro { background: #fef3c7; border: 1px solid #f59e0b; }
.leg-cultura { background: #ede9fe; border: 1px solid #8b5cf6; }

/* === Calendario: minibotón de edición por día === */
.cal-mini {
    position: absolute; top: 3px; right: 3px;
    border: none; background: transparent; cursor: pointer;
    width: 22px; height: 22px; border-radius: 6px;
    color: var(--gray-400); font-size: 0.95em; line-height: 1; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.cal-mini:hover { background: var(--gray-100); color: var(--primary); }
.cal-dia { position: relative; }

/* === Calendario: menú flotante de edición === */
.cal-menu {
    position: absolute; z-index: 60; min-width: 210px;
    background: white; border: 1px solid var(--gray-200); border-radius: 12px;
    box-shadow: var(--shadow-md); padding: 6px;
}
.cal-menu-titulo {
    font-size: 0.75em; font-weight: 700; color: var(--gray-400);
    padding: 4px 10px 6px; letter-spacing: 0.03em;
}
.cal-menu-sep {
    font-size: 0.7em; font-weight: 700; text-transform: uppercase;
    color: var(--gray-400); padding: 6px 10px 2px; margin-top: 2px;
    border-top: 1px solid var(--gray-100);
}
.cal-menu-item {
    display: block; width: 100%; text-align: left;
    border: none; background: transparent; cursor: pointer;
    padding: 8px 10px; border-radius: 8px; font-size: 0.92em; font-weight: 500;
    color: var(--gray-700);
}
.cal-menu-item:hover { background: var(--gray-50); color: var(--primary); }
.cal-menu-item.activo { background: var(--primary-light); color: var(--primary-dark); font-weight: 700; }

/* === Calendario: leyenda === */
.cal-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.82em;
    color: var(--gray-500);
    margin-bottom: 22px;
}
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.leg-clase { background: #c7d2fe; border: 1px solid var(--primary); }
.leg-extra { background: var(--primary-light); border: 1px solid var(--primary); }
.leg-festivo { background: #fecaca; border: 1px solid var(--danger); }
.leg-hoy { background: white; box-shadow: inset 0 0 0 2px var(--primary); }

/* === Listado de días especiales === */
.dia-especial-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dia-especial-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: var(--gray-50);
    border-radius: 8px;
}
.de-fecha { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9em; }
.de-motivo { flex: 1; font-size: 0.9em; color: var(--gray-700); display: flex; align-items: center; gap: 6px; }
.dia-especial-list form { margin: 0; }

/* === Simulacros: lista === */
.sim-list { display: flex; flex-direction: column; gap: 12px; }
.sim-card {
    display: flex;
    align-items: stretch;
    background: white;
    border: 1px solid var(--gray-200);
    border-left: 5px solid var(--g-color, var(--primary));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.sim-card-main { flex: 1; padding: 14px 18px; text-decoration: none; color: inherit; display: block; }
.sim-card-main:hover { background: var(--gray-50); }
.sim-card-head { display: flex; align-items: center; gap: 10px; }
.sim-card-head h3 { font-size: 1.05em; margin: 0; }
.sim-card-head .grupo-dot { background: var(--g-color, var(--primary)); }
.sim-card-sub { margin: 4px 0 10px; }
.sim-stats { display: flex; flex-wrap: wrap; gap: 22px; }
.sim-stats div { display: flex; flex-direction: column; }
.sim-stats strong { font-size: 1.15em; }
.sim-stats span { font-size: 0.76em; color: var(--gray-500); }
.sim-card-del { display: flex; align-items: center; padding: 0 14px; border-left: 1px solid var(--gray-100); }
.sim-card-del form, .sim-card-del { margin: 0; }

/* === Simulacros: barra de estadísticas === */
.sim-stats-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.stat-pill {
    display: flex; flex-direction: column; align-items: center;
    background: white; border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 8px 16px; box-shadow: var(--shadow); min-width: 84px;
}
.stat-pill strong { font-size: 1.35em; line-height: 1; }
.stat-pill span { font-size: 0.74em; color: var(--gray-500); margin-top: 3px; }

/* === Simulacros: rejilla de notas === */
.sim-tabla-card { padding: 0; overflow: hidden; }
.sim-tabla { margin: 0; }
.sim-tabla td, .sim-tabla th { vertical-align: middle; }
.sim-alumno { font-weight: 500; }
.sim-nota {
    width: 90px; text-align: center; font-weight: 700; font-size: 1.05em;
    padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: 8px;
}
.sim-nota.nota-apr { background: #f0fdf4; border-color: var(--success); color: var(--success); }
.sim-nota.nota-sus { background: #fef2f2; border-color: var(--danger); color: var(--danger); }
.sim-obs { width: 100%; padding: 6px 8px; border: 1px solid var(--gray-200); border-radius: 8px; }
.sim-fila.guardando { opacity: 0.6; }
.sim-fila.guardado { background: #f0fdf4; transition: background 0.3s; }
.sim-fila.error { background: #fef2f2; }
.sim-hint { margin-top: 10px; }

/* === Administración de grupos === */
.grupos-admin {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.grupo-admin-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--g-color, var(--primary));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.grupo-crear { margin-bottom: 16px; }
.grupo-crear > summary { list-style: none; }
.grupo-crear > summary::-webkit-details-marker { display: none; }
/* Cabecera compacta clicable */
.grupo-admin-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; cursor: pointer; list-style: none;
    user-select: none;
}
.grupo-admin-head::-webkit-details-marker { display: none; }
.grupo-admin-head:hover { background: var(--gray-50); }
.grupo-admin-head h3 { font-size: 1.05em; margin: 0; }
.grupo-admin-head .grupo-dot { background: var(--g-color, var(--primary)); }
.grupo-admin-head .badge { margin-left: auto; }
.grupo-admin-chevron {
    color: var(--gray-400); font-size: 1.3em; font-weight: 700;
    transition: transform 0.15s; flex: none;
}
.grupo-admin-card[open] > .grupo-admin-head .grupo-admin-chevron { transform: rotate(90deg); }
.grupo-admin-card[open] > .grupo-admin-head { border-bottom: 1px solid var(--gray-100); }
.grupo-admin-body { padding: 4px 16px 16px; }
.grupo-admin-desc { margin: 8px 0 4px; }
.grupo-admin-meta { margin: 8px 0 12px; line-height: 1.5; }
.grupo-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.grupo-admin-edit { margin-top: 12px; border-top: 1px solid var(--gray-100); padding-top: 10px; }
.grupo-admin-edit summary { cursor: pointer; font-weight: 600; font-size: 0.9em; color: var(--gray-700); }
.grupo-admin-edit form { margin-top: 12px; }
.grupo-admin-del {
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--gray-200);
    display: flex; align-items: center; gap: 10px;
}

/* === Alta múltiple de alumnos (tipo hoja de cálculo) === */
.tabla-alta { border-collapse: collapse; }
.tabla-alta th {
    font-size: 0.76em; text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--gray-500); background: var(--gray-50); white-space: nowrap;
}
.tabla-alta td { padding: 4px 6px; }
.tabla-alta .col-num { width: 34px; text-align: center; color: var(--gray-400); font-size: 0.85em; }
.tabla-alta .col-x { width: 34px; }
.tabla-alta .celda {
    width: 100%; min-width: 110px; padding: 7px 9px;
    border: 1px solid var(--gray-200); border-radius: 7px; background: white;
}
.tabla-alta .celda:focus { border-color: var(--primary); outline: none;
    box-shadow: 0 0 0 2px var(--primary-light); }
.tabla-alta .celda-num { min-width: 70px; text-align: center; }
.tabla-alta select.celda { min-width: 130px; }
.tabla-alta .fila-alta:hover { background: var(--gray-50); }
.btn-x {
    border: none; background: transparent; color: var(--gray-400);
    font-size: 1em; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.btn-x:hover { background: #fef2f2; color: var(--danger); }
.alta-actions { margin-top: 16px; display: flex; gap: 10px; }

.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* === Check de datos completos === */
.datos-ok {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--success); color: #fff; font-weight: 800; font-size: 0.9em;
}
.datos-falta { font-size: 1.05em; }
.datos-falta-lista { font-size: 0.7em; color: var(--danger); margin-top: 2px; white-space: nowrap; }

/* === Buscador de alumnos (lupa) === */
.buscador { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 240px; }
.buscador input[type="search"] {
    flex: 1; padding: 9px 12px; border: 1px solid var(--gray-300);
    border-radius: var(--radius); background: white; min-width: 160px;
}
.buscador input[type="search"]:focus {
    border-color: var(--primary); outline: none;
    box-shadow: 0 0 0 2px var(--primary-light);
}
.btn-lupa {
    border: 1px solid var(--gray-300); background: white; cursor: pointer;
    border-radius: var(--radius); padding: 8px 12px; font-size: 1em; line-height: 1;
}
.btn-lupa:hover { border-color: var(--primary); background: var(--primary-light); }
.buscador-limpiar { white-space: nowrap; }

/* === Pago de reserva (amarillo / verde) === */
.badge-reserva-pend {
    background: #fef9c3; color: #854d0e; border: 1px solid #fde047;
}
.badge-reserva-ok {
    background: #dcfce7; color: #166534; border: 1px solid #86efac;
}
.txt-reserva-pend { color: #a16207; font-weight: 600; }
.reserva-cell { white-space: nowrap; }
.reserva-cell form { margin-top: 4px; }
.btn-reserva-ok {
    background: var(--success); color: #fff; border-color: var(--success);
}
.btn-reserva-ok:hover { background: #15803d; }

/* === Pagos: meses cobrados y WhatsApp === */
.meses-cobrados {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: -6px 0 14px;
}
.mes-tick {
    display: inline-flex; align-items: center; gap: 4px;
    background: #dcfce7; color: #166534; border: 1px solid #86efac;
    border-radius: 999px; padding: 3px 12px; font-size: 0.85em; font-weight: 700;
    text-decoration: none; cursor: pointer; transition: box-shadow 0.12s, transform 0.12s;
}
a.mes-tick:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #166534; }
.mes-tick-activo { box-shadow: 0 0 0 2px var(--success); }
.mes-completo-aviso {
    background: #dcfce7; color: #166534; border: 1px solid #86efac;
    border-radius: 10px; padding: 9px 14px; font-weight: 600;
    margin: -4px 0 14px; font-size: 0.92em;
}
.btn-wa {
    background: #25d366; color: #fff; border-color: #25d366; margin-top: 4px;
}
.btn-wa:hover { background: #1faf54; color: #fff; }
.oculto { display: none !important; }
.wa-sin-tel { font-size: 0.75em; }

/* === Partes del simulacro: desplegable con ticks === */
.partes-drop { position: relative; }
.partes-resumen {
    display: flex; align-items: center; gap: 6px;
    list-style: none; cursor: pointer; user-select: none;
    padding: 9px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius);
    background: white; color: var(--gray-500); font-size: 0.95em;
    max-width: 260px;
}
.partes-resumen::-webkit-details-marker { display: none; }
.partes-texto {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.partes-resumen::after { content: "▾"; color: var(--gray-400); flex: none; }
.partes-resumen.con-partes { color: var(--gray-900); font-weight: 600; }
.partes-drop[open] .partes-resumen { border-color: var(--primary); }
.partes-opciones {
    position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 220px;
    background: white; border: 1px solid var(--gray-200); border-radius: 10px;
    box-shadow: var(--shadow-md); padding: 6px;
}
.parte-opcion {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 7px; cursor: pointer; font-weight: 500;
}
.parte-opcion:hover { background: var(--gray-50); }
.parte-opcion input { width: 16px; height: 16px; accent-color: var(--primary); }

.sim-partes { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.parte-chip {
    background: var(--primary-light); color: var(--primary-dark);
    border: 1px solid #c7d2fe; border-radius: 999px;
    padding: 2px 10px; font-size: 0.76em; font-weight: 700;
}

/* === Garantía de aprobado === */
.garantia-card { border-top: 4px solid var(--g-color, var(--primary)); margin-bottom: 16px; }
.garantia-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.garantia-head h2 { font-size: 1.1em; margin: 0; flex: 1; }
.garantia-head .grupo-dot { background: var(--g-color, var(--primary)); }
.badge-garantia-ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.badge-garantia-ko { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* === Simulacros: calificación por partes === */
.col-parte { min-width: 92px; }
.col-parte-max { font-weight: 500; font-size: 0.72em; }
.sim-nota-parte { width: 74px; }
.sim-media { font-size: 1.1em; }

/* === Registro de ausencias === */
.ausencia-dia { margin-bottom: 14px; }
.ausencia-fecha {
    display: flex; align-items: baseline; gap: 10px;
    padding-bottom: 8px; border-bottom: 1px solid var(--gray-100); margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}
.ausencia-grupo {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border-left: 4px solid var(--g-color, var(--gray-300));
    background: var(--gray-50); border-radius: 8px; margin-bottom: 8px;
}
.ausencia-lista { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.falta {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px; padding: 3px 12px; font-size: 0.85em; font-weight: 600;
}
.falta em { font-style: normal; font-size: 0.82em; opacity: 0.8; }
.falta-ausente { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.falta-justificada { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.ausencia-ir { margin-left: auto; white-space: nowrap; }

/* === Gestión económica: cuadre de caja === */
.cuadre-pill.cuadre-ok { border-color: #86efac; background: #f0fdf4; }
.cuadre-pill.cuadre-ok strong { color: var(--success); }
.cuadre-pill.cuadre-mal { border-color: #fca5a5; background: #fef2f2; }
.cuadre-pill.cuadre-mal strong { color: var(--danger); }
.cuadre-curso {
    background: white; border: 1px solid var(--gray-200); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 16px;
    font-size: 0.95em; line-height: 1.6;
}
.cuadre-curso-mal { border-color: #fca5a5; background: #fff7f7; }

/* === Pestaña Grupo: tarjetas de alumnos === */
.alumno-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.alumno-card {
    display: flex; align-items: center; gap: 12px;
    background: white; border: 1px solid var(--gray-200);
    border-left: 4px solid var(--g-color, var(--primary));
    border-radius: 12px; padding: 12px 14px;
    text-decoration: none; color: inherit; box-shadow: var(--shadow);
    transition: transform 0.12s, box-shadow 0.12s;
}
.alumno-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.alumno-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--g-color, var(--primary)) 18%, white);
    color: color-mix(in srgb, var(--g-color, var(--primary)) 70%, black);
    font-weight: 800; font-size: 1.05em; letter-spacing: 0.5px;
}
.alumno-card-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alumno-card-datos strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alumno-card-sub { font-size: 0.82em; }
.alumno-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.alumno-card-badges .badge { font-size: 0.68em; }
.alumno-card-ir { color: var(--gray-300); font-size: 1.4em; font-weight: 700; }
.alumno-card:hover .alumno-card-ir { color: var(--primary); }
/* La tarjeta entera lleva a la ficha (enlace estirado) y el botón de WhatsApp
   queda por encima para poder pulsarse por separado. */
.alumno-card { position: relative; }
.alumno-card-enlace { position: absolute; inset: 0; border-radius: 12px; z-index: 0; }
/* Los badges quedan por encima del enlace estirado para que sus tooltips
   (title) funcionen; el resto de la tarjeta sigue llevando a la ficha. */
.alumno-card-badges { position: relative; z-index: 1; }
.alumno-wa {
    position: relative; z-index: 1; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: #25d366; color: white; box-shadow: var(--shadow);
    transition: transform 0.12s;
}
.alumno-wa:hover { transform: scale(1.12); color: white; }
.alumno-wa svg { width: 19px; height: 19px; }
/* Pestañas Activos / Bajas */
.vista-alumnos { margin-bottom: 12px; }
.vista-alumnos .seg { text-decoration: none; display: inline-block; }
.vista-alumnos .seg-activo, .vista-alumnos .seg-activo:hover { background: var(--primary); color: white; }
.badge-datos-falta { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.badge-faltas { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alumno-nombre-enlace { text-decoration: none; color: inherit; }
.alumno-nombre-enlace:hover strong { color: var(--primary); text-decoration: underline; }

/* === Ficha del alumno === */
.back-link { display: inline-block; margin-bottom: 10px; color: var(--gray-500); text-decoration: none; }
.back-link:hover { color: var(--primary); }
.ficha-hero {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--g-color, var(--primary)) 10%, white), white 65%);
    border: 1px solid var(--gray-200);
    border-left: 6px solid var(--g-color, var(--primary));
    border-radius: 14px; box-shadow: var(--shadow-md);
    padding: 18px 22px; margin-bottom: 16px;
}
.avatar-grande { width: 64px; height: 64px; font-size: 1.5em; }
.ficha-hero-datos { flex: 1; min-width: 220px; }
.ficha-hero-datos h1 { margin: 0 0 6px; font-size: 1.5em; }
.ficha-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.ficha-datos dt { font-weight: 700; color: var(--gray-500); font-size: 0.88em; padding-top: 2px; }
.ficha-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ficha-subtitulo { font-size: 0.92em; color: var(--gray-500); margin: 12px 0 8px; }
.ficha-prepa { max-width: 720px; }
.ficha-situacion { white-space: pre-line; }
.form-seccion {
    font-size: 1.02em; margin: 26px 0 2px; padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}
.form-seccion-ayuda { margin: 0 0 12px; font-size: 0.85em; }
.form-group label.check-mandato {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 26px; font-weight: 600;
}
.form-group label.check-mandato input { margin-top: 2px; }
.seccion-atenuada { opacity: 0.45; }
@media (max-width: 480px) {
    .form-group label.check-mandato { margin-top: 4px; }
}
.ficha-faltas { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-asistencia-stats { margin-bottom: 4px; }
.ficha-asistencia-stats .stat-pill { min-width: 74px; padding: 6px 12px; }

/* Pagos del curso en la ficha */
.ficha-pagos { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-mes {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border-radius: 10px; padding: 8px 0; width: 74px;
    border: 1px solid var(--gray-200); background: var(--gray-50);
}
.ficha-mes-nombre { font-size: 0.72em; font-weight: 700; text-transform: uppercase; color: var(--gray-500); }
.ficha-mes-icono { font-weight: 800; font-size: 1.05em; line-height: 1.2; }
.ficha-mes-domiciliado { background: #eff6ff; border-color: #bfdbfe; }
.ficha-mes-domiciliado .ficha-mes-icono { color: #1d4ed8; }
.ficha-mes-pagado { background: #f0fdf4; border-color: #86efac; }
.ficha-mes-pagado .ficha-mes-icono { color: var(--success); }
.ficha-mes-pendiente .ficha-mes-icono { color: var(--gray-400); }
.ficha-pagos-leyenda { margin-top: 10px; font-size: 0.82em; }

/* Gráfica de progreso */
.grafica-progreso { max-width: 820px; margin: 4px auto 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grafica-progreso svg { width: 100%; min-width: 560px; height: auto; display: block; }
.grafica-leyenda {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
    margin-bottom: 16px; font-size: 0.86em; color: var(--gray-700); font-weight: 600;
}
.grafica-leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.grafica-nota-escala {
    flex-basis: 100%; text-align: center; font-weight: 400;
    font-size: 0.92em; color: var(--gray-500);
}
.leyenda-dot {
    display: inline-block; width: 11px; height: 11px; border-radius: 50%;
    background: var(--c, var(--gray-400)); margin-right: 5px;
}
.ficha-sim-tabla th .leyenda-dot { vertical-align: middle; }
.ficha-sim-obs { font-size: 0.8em; }

/* === Responsive === */
@media (max-width: 820px) {
    .nav-toggle { display: block; }
    .nav-links { display: none; flex-direction: column; width: 100%; order: 3; gap: 2px; margin-top: 8px; }
    .nav-links.open { display: flex; }
    .nav-user { order: 2; }
    .navbar { flex-wrap: wrap; }
    .grid-2 { grid-template-columns: 1fr; }
    .page-head.with-action { flex-direction: column; align-items: stretch; }
    .asistencia-row { flex-direction: column; align-items: stretch; }
    .segmented { width: 100%; }
    .seg { flex: 1; }
    .curso-resumen-fechas { margin-left: 0; text-align: left; }
    .cal-dia { min-height: 58px; }
    .cal-clase { font-size: 0.7em; }
    .cal-mes { min-width: 130px; font-size: 1.05em; }
    .ficha-datos { grid-template-columns: 1fr; gap: 2px; }
    .ficha-datos dt { padding-top: 8px; }
    .ficha-datos dt:first-child { padding-top: 0; }
}