/* ============================================================================
   Admin · Colegio Santa Margarita — hoja de estilos ÚNICA.
   Todo el CSS del panel vive aquí. Las vistas NO deben traer <style> propios:
   usan las clases de este archivo (.filtros, .act, .modalbox, .picker, .tbl…).
   ============================================================================ */

:root {
    --brand:      #2f4f7a;
    --brand-dark: #24405f;
    --sb-bg:      #2b3643;
    --sb-hover:   #1c2530;
    --sb-w:       45px;
    --top-h:      48px;

    --text:       #3a4350;
    --muted-c:    #8a97a5;
    --border:     #d5dbe1;
    --soft:       #f2f5f8;
    --soft-line:  #e3e8ed;
    --danger:     #c9302c;
    --danger-bg:  #fdecec;
    --ok:         #1e8449;
    --ok-bg:      #eafaf0;
    --radius:     6px;
}

* { box-sizing: border-box; }
body { margin:0; background:#eef1f4; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:13px; }
/* Bootstrap subraya los <a> en hover/focus y el navegador dibuja un outline al hacer click.
   Lo anulamos para TODO el panel: el diseño comunica el estado con color/fondo, no con
   subrayado ni borde. Los focos intencionales (teclado) usan un halo suave, no un borde. */
a, a:hover, a:focus, a:active { text-decoration:none; }
a:focus, button:focus { outline:none; }
a:focus-visible, button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(47,79,122,.28); }

/* ============================ TOPBAR ============================ */
.topbar { position:fixed; top:0; left:0; right:0; height:var(--top-h); background:var(--brand); color:#fff; display:flex; align-items:center; z-index:1050; }
.topbar .brand { display:flex; align-items:center; gap:10px; padding:0 16px; height:var(--top-h); color:#fff; }
.topbar .brand img { height:30px; width:auto; display:block; }
.topbar .brand span { font-weight:600; font-size:14px; white-space:nowrap; }
@media (max-width:640px) { .topbar .brand span { display:none; } }
.topbar .spacer { flex:1; }
.topbar .user { position:relative; padding:0 16px; height:var(--top-h); display:flex; align-items:center; cursor:pointer; }
.topbar .user:hover { background:rgba(0,0,0,.12); }
.topbar .user .menu { position:absolute; right:6px; top:var(--top-h); background:#fff; color:#333; min-width:180px; border-radius:0 0 4px 4px; box-shadow:0 6px 16px rgba(0,0,0,.25); display:none; overflow:hidden; }
.topbar .user.open .menu { display:block; }
.topbar .user .menu a { display:flex; gap:10px; align-items:center; padding:10px 14px; color:#333; }
.topbar .user .menu a:hover { background:#eef1f4; }
.topbar .user .menu .sep { border-top:1px solid #eee; }
.year-box { display:flex; align-items:center; gap:6px; color:#fff; padding:0 12px; }
.year-box .fa { opacity:.85; }
.year-sel { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:4px; padding:3px 6px; font-size:13px; cursor:pointer; width:auto; height:auto; }
.year-sel option { color:#333; }
.badge-lectura { background:#e8912d; color:#fff; padding:4px 10px; border-radius:3px; font-size:12px; font-weight:600; margin-right:8px; }

/* Menú superior de administración (fn_getmenu tipo=2, solo admins) */
.topnav { display:flex; align-items:stretch; height:var(--top-h); }
.topnav .ti { position:relative; display:flex; align-items:center; }
.topnav .ti > a { display:flex; align-items:center; gap:6px; height:var(--top-h); padding:0 14px; color:#fff; font-size:13px; white-space:nowrap; }
.topnav .ti:hover > a { background:rgba(0,0,0,.15); }
.topnav .ti-menu { display:none; position:absolute; top:var(--top-h); left:0; min-width:230px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.28); border-radius:0 0 4px 4px; z-index:1060; }
.topnav .ti:hover > .ti-menu { display:block; }
.topnav .ti-menu ul { list-style:none; margin:0; padding:4px 0; }
.topnav .ti-menu li { position:relative; }
.topnav .ti-menu li > a { display:flex; align-items:center; gap:8px; padding:8px 16px; color:var(--text); font-size:13px; white-space:nowrap; }
.topnav .ti-menu li > a:hover { background:#eef1f4; color:var(--brand); }
.topnav .ti-menu li > a .sub-caret { margin-left:auto; opacity:.5; padding-left:12px; }
.topnav .ti-menu li > ul { display:none; position:absolute; top:-4px; left:100%; min-width:220px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.28); border-radius:4px; }
.topnav .ti-menu li:hover > ul { display:block; }
@media (max-width:640px) { .topnav .ti > a span.txt { display:none; } }

/* ============================ SIDEBAR ============================ */
.sidebar { position:fixed; top:var(--top-h); bottom:0; left:0; width:var(--sb-w); background:var(--sb-bg); z-index:1040; overflow-y:auto; overflow-x:hidden; }
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:3px; }
.sidebar > ul { list-style:none; margin:0; padding:0; }
.sidebar > ul > li { position:relative; }
.sidebar > ul > li > .item { display:flex; align-items:center; justify-content:center; height:42px; color:#aeb9c6; border-bottom:1px solid rgba(255,255,255,.05); font-size:16px; }
.sidebar > ul > li:hover > .item, .sidebar > ul > li.active > .item { background:var(--brand); color:#fff; }

.flyout { display:none; position:fixed; left:calc(var(--sb-w) - 2px); min-width:210px; max-height:calc(100vh - var(--top-h)); overflow-y:auto; background:#fff; box-shadow:2px 3px 12px rgba(0,0,0,.25); border:1px solid #d6dbe0; z-index:1060; }
.flyout .fly-head { background:var(--brand); }
.flyout .fly-head a, .flyout .fly-head span { display:block; padding:10px 14px; color:#fff; font-weight:600; font-size:13px; }
.flyout ul { list-style:none; margin:0; padding:4px 0; }
.flyout ul li > a { display:flex; align-items:center; gap:8px; padding:8px 16px; color:var(--text); }
.flyout ul li > a:hover { background:#eef1f4; color:var(--brand); }
/* ítem del menú que corresponde a la ruta actual (marca el 2º nivel y el trail) */
.flyout ul li.active > a { background:#eaf1fb; color:var(--brand); font-weight:600; box-shadow:inset 3px 0 0 var(--brand); }
.flyout ul li ul { padding:0 0 4px 14px; }
.flyout ul li ul li > a { color:#6b7784; font-size:12.5px; }
.flyout ul li ul li.active > a { color:var(--brand); }

/* ============================ CONTENIDO ============================ */
.content { margin-left:var(--sb-w); margin-top:var(--top-h); padding:14px 18px; }

/* Breadcrumb: mismo diseño en TODAS las vistas */
.breadcrumb {
    background:transparent; padding:0; margin:0 0 8px;
    font-size:12.5px; list-style:none;
    display:flex; align-items:center; flex-wrap:wrap;
}
.breadcrumb > li { display:flex; align-items:center; color:var(--muted-c); }
.breadcrumb > li + li:before { content:"\203A"; color:#c3cbd4; padding:0 8px; font-size:14px; }
.breadcrumb > li > a { color:var(--brand); }
.breadcrumb > li > a:hover { text-decoration:none; color:var(--brand-dark); }
.breadcrumb > .active { color:#6b7581; font-weight:600; }
.breadcrumb .fa { margin-right:5px; color:var(--muted-c); font-size:12px; }

/* Cabecera: título a la izquierda, ACCIONES SIEMPRE A LA DERECHA */
.page-header { margin:2px 0 16px; border-bottom:1px solid #d9dee3; display:flex; align-items:center; gap:8px; }
.page-header h1 { font-size:22px; font-weight:300; color:#2b3643; margin:8px 0; flex:1; }
.page-header .acciones, .page-header .btn-group, .page-header .btn { margin-left:auto; }

.widget { background:#fff; border:1px solid #dfe4e8; border-radius:4px; margin-bottom:18px; }
.widget .w-head { padding:10px 14px; border-bottom:1px solid #eef1f4; display:flex; align-items:center; gap:8px; }
.widget .w-head h4 { margin:0; font-size:14px; color:#5b6976; font-weight:600; }
.widget .w-head .fa { color:#e8912d; }
.widget .w-body { padding:12px 14px; }
.muted { color:#9aa5b1; }
#loading { padding:50px; text-align:center; color:#9aa5b1; }

/* ============================ TABLAS ============================ */
table.tbl { width:100%; border-collapse:collapse; }
table.tbl th { text-align:left; font-size:12px; color:var(--muted-c); border-bottom:2px solid #eef1f4; padding:8px; white-space:nowrap; }
table.tbl td { padding:8px; border-bottom:1px solid #f2f4f6; }
table.tbl tr:hover td { background:#f7f9fb; }

/* ============================ FILTROS ============================ */
.filtros { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px; }
.filtros .g { display:flex; flex-direction:column; }
.filtros label, .frow .fg label, .lbl {
    display:block;
    font-size:11.5px; font-weight:600; color:var(--muted-c);
    text-transform:uppercase; letter-spacing:.3px; margin-bottom:5px;
}
/* el botón de acción de los filtros se empuja al extremo derecho */
.filtros .g.right, .filtros .acciones { margin-left:auto; }
/* los botones dentro de los filtros igualan la altura de los combos (38px) */
.filtros .btn, .filtros .btn-sm { height:38px; padding:0 14px; display:inline-flex; align-items:center; border-radius:8px; }

/* ============================ COMBOS Y CAMPOS ============================
   El select nativo se ve feo y CAMBIA DE ANCHO según su contenido.
   Se le quita la apariencia nativa, flecha propia y ANCHO FIJO. */
/* Se listan también las combinaciones con .input-sm/.input-lg para ganarle a
   Bootstrap 3, que impone su propio height/padding/border-radius al select. */
select.form-control,
select.form-control.input-sm,
select.form-control.input-lg,
.filtros select,
.frow .fg select,
select.sel {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;

    width:200px;              /* FIJO: no baila con el contenido */
    max-width:100%;
    height:38px;
    line-height:38px;         /* Bootstrap fuerza line-height en select.input-sm */
    padding:0 36px 0 13px;

    font-size:13px;
    font-weight:500;
    color:var(--text);
    cursor:pointer;
    text-overflow:ellipsis;

    background-color:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 1px 2px rgba(16,24,40,.05);

    /* chevron propio, gris suave */
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2398a2b3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px;

    transition:border-color .15s, box-shadow .15s, background-color .15s;
}

/* hover: el borde se marca y el fondo se levanta apenas */
select.form-control:hover,
select.form-control.input-sm:hover,
.filtros select:hover,
.frow .fg select:hover {
    border-color:#a9b4c0;
    background-color:#fcfdfe;
}

/* foco: borde de marca + halo (como los inputs modernos) */
select.form-control:focus,
select.form-control.input-sm:focus,
.filtros select:focus,
.frow .fg select:focus {
    border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(47,79,122,.16);
    outline:none;
}

/* al abrirlo, el chevron se pinta del color de marca */
select.form-control:focus {
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232f4f7a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

select.form-control:disabled,
.filtros select:disabled {
    background-color:#f7f9fb; color:#aab3bd; cursor:not-allowed;
    box-shadow:none; border-color:#e6eaee;
}

/* el desplegable nativo (options) al menos con aire */
select.form-control option { padding:8px 10px; color:var(--text); }

/* variantes de ancho, siempre fijas */
select.sel-lg { width:260px; }
select.sel-sm { width:140px; }

input.form-control, input.form-control.input-sm,
.filtros input, .frow .fg input, .frow .fg textarea {
    height:38px; font-size:13px; color:var(--text);
    border:1px solid var(--border); border-radius:8px;
    padding:0 13px;
    background-color:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.05);
    transition:border-color .15s, box-shadow .15s;
}
.frow .fg textarea { height:auto; padding:9px 13px; line-height:1.5; }
input.form-control::placeholder, .frow .fg input::placeholder { color:#aab3bd; }
input.form-control:hover, .filtros input:hover, .frow .fg input:hover { border-color:#a9b4c0; }
input.form-control:focus, input.form-control.input-sm:focus,
.filtros input:focus, .frow .fg input:focus, .frow .fg textarea:focus {
    border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,79,122,.16); outline:none;
}
/* Mensaje de error bajo el campo (lo muestra/oculta el JS del formulario). */
.ferr { color:var(--danger); font-size:12px; margin-top:3px; display:none; }

/* ===== VALIDACIÓN ESTÁNDAR (borde rojo + mensaje, NO la validación HTML por defecto) =====
   - Clase manual .error / .is-invalid → marca cualquier control en rojo.
   - Con :has(): si el .ferr de un .fg está VISIBLE (display:block), su input/select/textarea
     se pone en rojo AUTOMÁTICAMENTE, sin tocar el JS de cada formulario. */
.form-control.error, .form-control.is-invalid,
.fg input.error, .fg select.error, .fg textarea.error,
input.error, select.error, textarea.error, [contenteditable].error,
.fg:has(> .ferr[style*="block"]) input,
.fg:has(> .ferr[style*="block"]) select,
.fg:has(> .ferr[style*="block"]) textarea,
.fg:has(> .ferr[style*="block"]) [contenteditable],
.fg:has(> .ferr[style*="block"]) .picker input {
    border-color:var(--danger) !important;
    box-shadow:0 0 0 3px rgba(201,48,44,.15) !important;
}

/* Asterisco rojo automático en el label de los campos OBLIGATORIOS (required).
   Con :has() aparece solo con marcar el input/select como required; también se puede
   forzar con la clase .req en el label. */
.fg:has(:required) > label::after,
.frow .fg:has(:required) > label::after,
.form-group:has(:required) > label::after,
label.req::after {
    content:" *"; color:var(--danger); font-weight:700;
}

/* ============================ ACCIONES DE TABLA ============================
   Antes eran <a> crudos con un ícono (se veían como links pelados).
   Ahora botoncitos suaves, cuadrados y consistentes. */
td.act, .act { white-space:nowrap; }
.act a, .act > i {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; margin:0 6px;
    border-radius:var(--radius);
    border:1px solid var(--soft-line);
    background:var(--soft);
    color:#5b6976; font-size:13px; text-decoration:none;
    transition:background .15s, color .15s, border-color .15s, transform .06s;
}
.act a:hover { background:#e7edf3; border-color:#cfd9e3; color:var(--brand); text-decoration:none; }
.act a:active { transform:translateY(1px); }
.act a.edit:hover { background:#e8f0fb; border-color:#c8daf3; color:#2f6fb5; }
.act a.del:hover  { background:var(--danger-bg); border-color:#f5c6c6; color:var(--danger); }
.act a.up:hover, .act a.down:hover { background:#eef2f6; color:var(--brand); }
.act .off, .act > i.off { background:#fafbfc; border-color:#eef1f4; color:#cfd6dd; cursor:default; }
.est-lock { color:var(--danger); } .est-open { color:#5cb85c; }

/* ============================ DATATABLES ============================
   Integración de jQuery DataTables con el diseño del panel:
   - "Mostrando X a Y de Z" (info) en la CABECERA (arriba-izq); buscador arriba-der.
   - SIN el combo "Mostrar N registros" (lengthChange:false en dt-config.js; default 50).
   - Paginación como BOTONES con estados (hover/active/current), sin borde ni outline feo.
   - Links de acción de la tabla con el MISMO diseño que .act (nada de <a> subrayado). */
.dataTables_wrapper .dt-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.dataTables_wrapper .dt-bottom { display:flex; justify-content:flex-end; margin-top:12px; }
.dataTables_wrapper .dataTables_info { color:var(--muted-c); font-size:12px; padding:0; }
.dataTables_wrapper .dataTables_filter { margin:0; }
.dataTables_wrapper .dataTables_filter label { font-size:12px; color:var(--muted-c); display:flex; align-items:center; gap:6px; }
.dataTables_wrapper .dataTables_filter { flex:1; }
.dataTables_wrapper .dataTables_filter label { width:100%; gap:8px; }
.dataTables_wrapper .dataTables_filter input {
    height:34px; flex:1; min-width:280px; max-width:640px; border:1px solid var(--border); border-radius:8px; padding:0 12px; font-size:13px;
    box-shadow:0 1px 2px rgba(16,24,40,.05); transition:border-color .15s, box-shadow .15s; margin:0;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,79,122,.16); outline:none; }
/* paginación: botones flat con estados, sin el outline/borde por defecto de DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px;
    padding:0 10px; margin:0 2px; border:1px solid var(--border) !important; border-radius:6px;
    background:#fff !important; color:var(--text) !important; cursor:pointer;
    text-decoration:none !important; font-size:13px; box-shadow:none !important;
    transition:background .15s, border-color .15s, color .15s, transform .06s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background:var(--soft) !important; border-color:#b9c3cd !important; color:var(--brand) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:active { transform:translateY(1px); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { opacity:.45; background:#fff !important; border-color:var(--border) !important; color:var(--muted-c) !important; cursor:default; transform:none; }
.dataTables_wrapper .dataTables_paginate .paginate_button:focus { outline:none !important; box-shadow:none !important; }

/* Links de acción dentro de la tabla (a.act-edit / a.act-del o cualquier <a> en td.act):
   botoncitos suaves con estados, coherentes con .act — nunca subrayados. */
table.tbl a.act-edit, table.tbl a.act-del {
    display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin:0 2px;
    border:1px solid var(--soft-line); border-radius:var(--radius); background:var(--soft);
    color:#5b6976; text-decoration:none; transition:background .15s, color .15s, border-color .15s, transform .06s;
}
table.tbl a.act-edit:hover { background:#e8f0fb; border-color:#c8daf3; color:#2f6fb5; text-decoration:none; }
table.tbl a.act-del:hover  { background:var(--danger-bg); border-color:#f5c6c6; color:var(--danger); text-decoration:none; }
table.tbl a.act-edit:active, table.tbl a.act-del:active { transform:translateY(1px); }
/* La celda de ACCIONES (aunque no tenga la clase .act, como en los DataTables) va SIEMPRE en
   una sola línea: la columna crece para dar espacio a 2-4 íconos, sin partirlos en dos filas. */
table.tbl td.act, table.tbl td:has(a.act-edit), table.tbl td:has(a.act-del) { white-space:nowrap; text-align:center; }
/* DataTables inyecta su CSS y subraya links en el wrapper: lo anulamos salvo donde queramos. */
.dataTables_wrapper a { text-decoration:none; }
.dataTables_wrapper a:focus { outline:none; }

/* ============================ ÍCONOS (FontAwesome) ============================
   Tamaños coherentes según el contexto: el ícono nunca debe gritar más que el texto. */
.fa { font-size:13px; }
.page-header h1 .fa   { font-size:19px; color:var(--brand); margin-right:8px; }
.btn .fa              { font-size:12px; margin-right:5px; }
.btn-xs .fa           { font-size:11px; }
.act .fa              { font-size:18px; margin:0; }
.widget .w-head .fa   { font-size:14px; }
.breadcrumb .fa       { font-size:12px; }
.sidebar .fa          { font-size:16px; }
.flyout .fa, .topnav .fa { font-size:13px; width:14px; text-align:center; }
.msg .fa              { margin-right:6px; }
/* un ícono solo (sin texto al lado) no necesita margen */
.act a > .fa, .fa-only { margin-right:0; }

/* ============================ BOTONES ============================
   Sistema ÚNICO para TODO el panel: mismo alto, tipografía y curva de
   interacción. Variantes: sólidas (primary/success/danger/warning/info),
   suaves (soft-*), fantasma (ghost) y ESPECIAL (google). Las vistas solo
   eligen la clase; nada de estilos sueltos por botón. */
.btn {
    display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
    border-radius:var(--radius); border:1px solid transparent;
    font-size:13px; font-weight:600; line-height:1.4; padding:7px 15px;
    box-shadow:0 1px 2px rgba(20,30,50,.08); cursor:pointer;
    transition:background .15s, box-shadow .15s, border-color .15s, color .15s, transform .06s;
}
.btn:hover  { box-shadow:0 2px 7px rgba(20,30,50,.15); }
.btn:active { transform:translateY(1px); box-shadow:0 1px 2px rgba(20,30,50,.10); }
.btn:focus  { outline:none; }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(47,79,122,.28); }
.btn[disabled], .btn.disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.btn .fa { margin-right:6px; }

/* tamaños coherentes */
.btn-lg { padding:10px 20px; font-size:15px; }
.btn-sm { padding:5px 12px;  font-size:12px; }
.btn-xs { padding:3px 9px;   font-size:11px; }
.btn-block { display:flex; width:100%; }

/* --- sólidos --- */
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover, .btn-primary:focus { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-default { background:#fff; border-color:var(--border); color:var(--text); }
.btn-default:hover { background:var(--soft); border-color:#b9c3cd; color:var(--text); }
.btn-danger  { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover, .btn-danger:focus { background:#a52824; border-color:#a52824; color:#fff; }
.btn-success { background:var(--ok); border-color:var(--ok); color:#fff; }
.btn-success:hover, .btn-success:focus { background:#166b3a; border-color:#166b3a; color:#fff; }
.btn-warning { background:#e08e0b; border-color:#e08e0b; color:#fff; }
.btn-warning:hover, .btn-warning:focus { background:#c67c05; border-color:#c67c05; color:#fff; }
.btn-info    { background:#2b7da3; border-color:#2b7da3; color:#fff; }
.btn-info:hover, .btn-info:focus { background:#236988; border-color:#236988; color:#fff; }

/* estado SELECCIONADO/presionado (.active, p.ej. toggles o el filtro elegido): se ve hundido */
.btn.active { box-shadow:inset 0 2px 5px rgba(16,24,40,.16); transform:none; }
.btn-primary.active { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-danger.active  { background:#a52824; border-color:#a52824; color:#fff; }
.btn-success.active { background:#166b3a; border-color:#166b3a; color:#fff; }
.btn-warning.active { background:#c67c05; border-color:#c67c05; color:#fff; }
.btn-default.active, .btn-ghost.active, .btn-soft.active { background:#e7edf3; border-color:#b9c3cd; color:var(--text); }

/* --- ESPECIALES · suaves (tinte claro, acciones secundarias) --- */
.btn-soft          { background:var(--soft); border-color:var(--soft-line); color:var(--text); box-shadow:none; }
.btn-soft:hover    { background:#e7edf3; border-color:#cdd6df; }
.btn-soft-primary  { background:rgba(47,79,122,.10); border-color:rgba(47,79,122,.20); color:var(--brand); box-shadow:none; }
.btn-soft-primary:hover  { background:rgba(47,79,122,.16); color:var(--brand-dark); }
.btn-soft-danger   { background:var(--danger-bg); border-color:#f2c9c7; color:var(--danger); box-shadow:none; }
.btn-soft-danger:hover   { background:#fbdedd; }
.btn-soft-success  { background:var(--ok-bg); border-color:#c7ecd5; color:var(--ok); box-shadow:none; }
.btn-soft-success:hover  { background:#dcf5e6; }

/* --- ESPECIALES · fantasma / pill --- */
.btn-ghost   { background:transparent; border-color:var(--border); color:var(--text); box-shadow:none; }
.btn-ghost:hover { background:var(--soft); border-color:#b9c3cd; }
.btn-pill    { border-radius:999px; }

/* --- ESPECIAL · Google (blanco elegante con la G azul, estilo "sign in with Google") --- */
.btn-google  { background:#fff; border-color:#dadce0; color:#3c4043; box-shadow:0 1px 2px rgba(60,64,67,.16); }
.btn-google:hover, .btn-google:focus { background:#f6f9ff; border-color:#c9d2dc; color:#202124; box-shadow:0 2px 8px rgba(60,64,67,.22); }
.btn-google .fa-google { color:#4285f4; font-size:14px; margin-right:8px; }

/* Barra de acciones: SIEMPRE a la derecha */
.toolbar, .acciones-bar { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:12px; }

/* ============================ MODAL PROPIO ============================
   (no depende del JS de Bootstrap; se abre/cierra con la clase .show) */
.ov { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(20,24,40,.45); display:none; z-index:30000; }
#cfmOv { z-index:50000 !important; }
.ov.show { display:block; }
.modalbox { background:#fff; border-radius:8px; width:560px; max-width:94%; box-shadow:0 12px 40px rgba(0,0,0,.3); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.modalbox .mh { background:var(--brand); color:#fff; padding:13px 18px; display:flex; justify-content:space-between; align-items:center; border-radius:8px 8px 0 0; }
.modalbox .mh h4 { margin:0; font-size:15px; }
.modalbox .mh .x { cursor:pointer; opacity:.85; }
.modalbox .mb { padding:18px; }
.modalbox .mf { padding:12px 18px; border-top:1px solid #eef1f4; text-align:right; }
.modalbox .mf .btn, .modal-footer .btn { margin-left:6px; }
.modal-footer { text-align:right; }
.modalbox.mb-lg { width:640px; }
.frow { display:flex; gap:14px; }
.frow .fg { flex:1; margin-bottom:12px; }

/* ============================ PICKER (chips + autocompletar) ============ */
.picker { position:relative; }
.chips { display:flex; flex-wrap:wrap; gap:6px; padding:6px; border:1px solid var(--border); border-radius:var(--radius); min-height:40px; }
.chip { background:var(--brand); color:#fff; border-radius:14px; padding:3px 10px; font-size:12px; display:flex; align-items:center; gap:6px; }
.chip .rm { cursor:pointer; opacity:.8; }
.chips input { border:none; outline:none; flex:1; min-width:120px; font-size:14px; padding:4px; height:auto; }
.drop { position:absolute; left:0; right:0; top:100%; background:#fff; border:1px solid #d6dbe0; border-radius:0 0 6px 6px; box-shadow:0 8px 20px rgba(0,0,0,.18); max-height:220px; overflow:auto; z-index:10; display:none; }
.drop.show { display:block; }
.drop div { padding:8px 12px; font-size:13px; cursor:pointer; }
.drop div:hover { background:#eef1f4; }

/* ============================ MENSAJES ============================ */
.msg { padding:11px 14px; border-radius:var(--radius); font-size:13px; margin-top:10px; }
.msg.ok  { background:var(--ok-bg); color:var(--ok); border:1px solid #bce8cd; }
.msg.err { background:var(--danger-bg); color:var(--danger); border:1px solid #f5c6c6; }
.msg.warn { background:#fff7e6; border:1px solid #ffe0a3; color:#8a5a00; }

/* ============================ RESPONSIVE ============================
   Regla de oro: la PÁGINA nunca scrollea en horizontal. Si algo es más ancho
   que la pantalla (lista de alumnos, grilla de notas), el scroll va DENTRO de
   su propio contenedor. */
html, body { max-width:100%; overflow-x:hidden; }
img { max-width:100%; height:auto; }

/* Tablas con muchas columnas → scroll propio. Envolver la tabla:
   <div class="tbl-wrap"> <table class="tbl"> … </table> </div> */
.tbl-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-wrap > table.tbl { min-width:max-content; }

/* Handsontable: se ajusta al ancho disponible y scrollea dentro del contenedor */
.hot-wrap { width:100%; max-width:100%; overflow:auto; }
.hot-wrap .handsontable { font-size:12px; }
.handsontable { max-width:100%; }

/* Pantallas medianas: los combos dejan el ancho fijo y se vuelven fluidos */
@media (max-width:900px) {
    .content { padding:12px 10px; }
    .filtros { gap:8px; }
    .filtros .g { flex:1 1 170px; }
    select.form-control, .filtros select, select.sel-lg, select.sel-sm { width:100%; }
    .page-header { flex-wrap:wrap; }
    .page-header h1 { font-size:18px; }
    .frow { flex-direction:column; gap:0; }   /* los campos del modal se apilan */
}

/* Móvil */
@media (max-width:640px) {
    .filtros .g { flex:1 1 100%; }
    .filtros .acciones, .filtros .g.right { margin-left:0; width:100%; }
    .filtros .acciones .btn { width:100%; }
    .modalbox { margin-top:4%; width:100%; }
    .page-header .acciones, .page-header .btn-group { margin-left:0; width:100%; }
    table.tbl th, table.tbl td { padding:6px; }
}