/* ==========================================================================
   Tema moderno de happytime / GradeKids
   Capa de estilo sobre la plantilla Ace (Bootstrap 3). Solo cambia la apariencia:
   no se tocan IDs, clases funcionales ni JavaScript.
   Se carga al final del <head> en todas las páginas internas y en el login.
   Colores de la entidad: --marca y --marca-2 (los define site/header.php desde la sesión).
   ========================================================================== */

:root {
   --marca: #3eaeb4;
   --marca-2: #01bdc8;
   --marca-suave: #e7f6f7;
   --fondo: #f4f6fb;
   --superficie: #ffffff;
   --borde: #e6e9f0;
   --borde-suave: #eef1f6;
   --texto: #1f2937;
   --texto-2: #4b5563;
   --texto-3: #8a94a6;
   --exito: #16a34a;
   --info: #0ea5e9;
   --alerta: #f59e0b;
   --peligro: #ef4444;
   --radio: 14px;
   --radio-sm: 10px;
   --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
   --sombra-alta: 0 12px 32px rgba(16, 24, 40, .14);
   --alto-barra: 64px;
   --ancho-menu: 248px;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
   :root { --marca-suave: color-mix(in srgb, var(--marca) 12%, white); }
}

/* ---------- Base ---------- */
html, body { background: var(--fondo); }
body {
   font-family: 'Nunito', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-size: 14px;
   color: var(--texto);
   -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; color: var(--texto); }
a { color: var(--marca); }
a:hover, a:focus { color: var(--marca); filter: brightness(.9); }
.main-container, .main-content, .page-content { background: transparent; }
::selection { background: var(--marca-suave); }

/* ---------- Barra superior ---------- */
.navbar.tema-navbar {
   position: fixed; top: 0; left: 0; right: 0;
   min-height: var(--alto-barra);
   background: var(--superficie) !important;
   border: 0;
   box-shadow: 0 1px 0 var(--borde), 0 6px 20px rgba(16, 24, 40, .04);
   z-index: 1030;
}
.tema-navbar .navbar-container { padding: 0 20px; height: var(--alto-barra); }
.tema-navbar .navbar-header { height: var(--alto-barra); }
.tema-navbar .navbar-brand.tema-marca {
   display: flex; align-items: center; gap: 12px;
   height: var(--alto-barra); padding: 0; margin-left: 0;
   color: var(--texto);
}
.tema-navbar .navbar-brand.tema-marca:hover { filter: none; }
.tema-logo { height: 48px; width: auto; display: block; }
.tema-marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.tema-marca-texto strong { font-size: 17px; font-weight: 800; color: var(--texto); letter-spacing: .2px; }
.tema-marca-texto small { font-size: 11.5px; font-weight: 600; color: var(--texto-3); margin-top: 2px; }

.tema-navbar .ace-nav { height: var(--alto-barra); display: flex; align-items: center; }
.tema-navbar .ace-nav > li {
   height: var(--alto-barra); line-height: var(--alto-barra);
   border: 0 !important; background: transparent !important;
}
.tema-navbar .ace-nav > li > a,
.tema-navbar .ace-nav > li > a:hover,
.tema-navbar .ace-nav > li > a:focus,
.tema-navbar .ace-nav > li.open > a {
   background: transparent !important;
   color: var(--texto) !important;
   height: var(--alto-barra); line-height: var(--alto-barra);
   padding: 0 6px 0 10px;
   display: flex; align-items: center;
}
.tema-navbar .ace-nav > li > a:hover { background: var(--fondo) !important; border-radius: 12px; }
.tema-navbar .ace-nav > li > a > .ace-icon { color: var(--texto-3); margin-left: 6px; font-size: 16px; }

.tema-ano-pill {
   display: inline-flex; align-items: center; gap: 8px;
   margin: 0 12px; padding: 7px 14px;
   line-height: 20px; border-radius: 999px;
   background: var(--marca-suave); color: var(--texto);
}
.tema-ano-pill .fa { color: var(--marca); }
.tema-ano-etiqueta { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.tema-ano-pill label { margin: 0; font-size: 14px; font-weight: 800; color: var(--marca); }

.tema-avatar {
   display: inline-flex; align-items: center; justify-content: center;
   width: 38px; height: 38px; border-radius: 50%;
   background: linear-gradient(135deg, var(--marca), var(--marca-2));
   color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .5px;
   margin-right: 10px; line-height: 1;
}
.tema-navbar .ace-nav > li > a > .user-info {
   position: static; top: auto; display: flex; flex-direction: column;
   max-width: 190px; line-height: 1.2; color: var(--texto); font-weight: 700;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tema-navbar .ace-nav > li > a > .user-info small { display: block; color: var(--texto-3); font-weight: 600; font-size: 11.5px; }

/* Botón de menú en móvil */
.tema-navbar .navbar-toggle.menu-toggler {
   background: var(--marca) !important; border: 0; border-radius: var(--radio-sm);
   margin: 14px 12px 0 0; padding: 9px 10px; height: 36px; width: 40px;
}
.tema-navbar .navbar-toggle.menu-toggler .icon-bar { background: #fff !important; width: 18px; }

/* Menús desplegables */
.dropdown-menu {
   border: 1px solid var(--borde-suave) !important; border-radius: 12px !important;
   box-shadow: var(--sombra-alta) !important; padding: 6px !important;
}
.dropdown-menu > li > a { border-radius: 8px; padding: 8px 12px; color: var(--texto); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--marca-suave) !important; color: var(--texto) !important; }
.dropdown-menu > li > a > .ace-icon { color: var(--texto-3); width: 18px; }
.dropdown-caret:before, .dropdown-caret:after { display: none !important; }
.dropdown-menu .divider { background: var(--borde-suave); margin: 4px 0; }

/* ---------- Estructura ---------- */
.navbar-fixed-top + .main-container,
.main-container { padding-top: var(--alto-barra); }

/* ---------- Menú lateral ---------- */
.sidebar.tema-sidebar,
.sidebar.tema-sidebar:before {
   background: var(--superficie) !important;
   border-color: var(--borde) !important;
}
.sidebar.tema-sidebar { border-right: 1px solid var(--borde); padding-top: 12px; }
.sidebar.tema-sidebar.sidebar-fixed { top: var(--alto-barra) !important; }
.tema-sidebar .nav-list { margin: 0; }
.tema-sidebar .nav-list > li,
.tema-sidebar .nav-list > li > a { border: 0 !important; }
.tema-sidebar .nav-list > li > a {
   margin: 2px 12px; padding: 10px 12px; height: auto; line-height: 20px;
   border-radius: var(--radio-sm);
   background: transparent !important; color: var(--texto-2) !important;
   font-weight: 700; font-size: 14px;
}
.tema-sidebar .nav-list > li > a > .menu-icon {
   width: 22px; min-width: 22px; margin-right: 10px; font-size: 16px; line-height: 20px;
   text-align: center; color: var(--texto-3);
}
.tema-sidebar .nav-list > li > a > .arrow { top: 12px; right: 12px; color: var(--texto-3); }
.tema-sidebar .nav-list > li > a:hover { background: var(--fondo) !important; color: var(--texto) !important; }
.tema-sidebar .nav-list > li.active > a,
.tema-sidebar .nav-list > li.open > a {
   background: var(--marca-suave) !important; color: var(--texto) !important;
}
.tema-sidebar .nav-list > li.active > a > .menu-icon,
.tema-sidebar .nav-list > li.open > a > .menu-icon { color: var(--marca); }
.tema-sidebar .nav-list > li.active:after,
.tema-sidebar .nav-list > li > a:before,
.tema-sidebar .nav-list > li > .arrow,
.tema-sidebar .nav-list li .submenu > li > .arrow { display: none !important; }

.tema-sidebar .nav-list > li .submenu {
   background: transparent !important; border: 0 !important; padding: 2px 0 6px;
}
.tema-sidebar .nav-list > li .submenu:before,
.tema-sidebar .nav-list > li .submenu > li:before { display: none !important; }
.tema-sidebar .nav-list > li .submenu > li { border: 0 !important; }
.tema-sidebar .nav-list > li .submenu > li > a {
   margin: 1px 12px; padding: 8px 12px 8px 44px; line-height: 20px;
   border: 0 !important; border-radius: 8px;
   background: transparent !important; color: var(--texto-2) !important;
   font-size: 13.5px; font-weight: 600;
}
.tema-sidebar .nav-list > li .submenu > li > a > .menu-icon { display: none; }
.tema-sidebar .nav-list > li .submenu > li > a:hover { background: var(--fondo) !important; color: var(--texto) !important; }
.tema-sidebar .nav-list > li .submenu > li.active > a {
   color: var(--marca) !important; font-weight: 800; background: transparent !important;
}
.tema-sidebar .nav-list > li .submenu > li.active > a:before {
   content: ''; position: absolute; left: 26px; top: 50%; margin-top: -3px;
   width: 6px; height: 6px; border-radius: 50%; background: var(--marca);
}

.tema-sidebar .sidebar-toggle {
   background: transparent !important; border: 0 !important; border-top: 1px solid var(--borde-suave) !important;
   margin-top: 8px;
}
.tema-sidebar .sidebar-toggle:before { display: none; }
.tema-sidebar .sidebar-toggle > .ace-icon {
   background: var(--superficie) !important; border: 1px solid var(--borde) !important;
   color: var(--texto-3) !important; border-radius: 50%; width: 28px; height: 28px; line-height: 26px; padding: 0;
}

/* Escritorio: menú ancho a la izquierda */
@media (min-width: 992px) {
   .sidebar.tema-sidebar { width: var(--ancho-menu); }
   .sidebar.tema-sidebar + .main-content { margin-left: var(--ancho-menu); }
   .sidebar.tema-sidebar.menu-min { width: 72px; }
   .sidebar.tema-sidebar.menu-min + .main-content { margin-left: 72px; }
   .sidebar.tema-sidebar.menu-min .nav-list > li > a { margin: 2px 10px; padding: 10px 0; text-align: center; }
   .sidebar.tema-sidebar.menu-min .nav-list > li > a > .menu-icon { margin: 0; }
   .sidebar.tema-sidebar.menu-min .nav-list > li > a > .menu-text,
   .sidebar.tema-sidebar.menu-min .nav-list > li > .submenu {
      border-radius: 0 12px 12px 0; box-shadow: var(--sombra-alta) !important;
      background: var(--superficie) !important; border: 1px solid var(--borde-suave) !important;
   }
   .sidebar.tema-sidebar.menu-min .nav-list > li .submenu > li > a { padding-left: 16px; }
   .sidebar.tema-sidebar ~ .footer .footer-inner { left: var(--ancho-menu); }
   .sidebar.tema-sidebar.menu-min ~ .footer .footer-inner { left: 72px; }
}
/* Móvil / tablet: menú desplegable desde la izquierda */
@media (max-width: 991px) {
   .sidebar.tema-sidebar.responsive { box-shadow: var(--sombra-alta); }
   .sidebar.tema-sidebar.responsive.display { width: var(--ancho-menu); }
}

/* ---------- Encabezado de página y migas ---------- */
.page-content { padding: 24px 28px 40px; }
.page-header {
   border: 0 !important; margin: 0 0 20px !important; padding: 0 !important;
}
.page-header h1 {
   font-size: 24px; font-weight: 800; color: var(--texto) !important; margin: 0; letter-spacing: -.2px;
}
.page-header h1 small { font-size: 14px; font-weight: 600; color: var(--texto-3) !important; }
.page-header h1 small .ace-icon { color: var(--borde); }

.breadcrumbs, .breadcrumbs.breadcrumbs-fixed {
   position: relative !important; top: auto !important; left: auto !important; right: auto !important;
   background: transparent !important; border: 0 !important;
   min-height: 0; line-height: 20px; padding: 18px 28px 0 !important; margin: 0 !important;
   box-shadow: none !important;
}
.breadcrumb { margin: 0; padding: 0; background: transparent; font-size: 13px; }
.breadcrumb > li, .breadcrumb > li > a { color: var(--texto-3) !important; }
.breadcrumb > li.active { color: var(--texto-2) !important; font-weight: 700; }
.breadcrumb > li + li:before { color: var(--borde) !important; }
.breadcrumb .home-icon { color: var(--marca) !important; }

/* ---------- Tarjetas (widget-box) ---------- */
.widget-box {
   border: 1px solid var(--borde-suave) !important; border-radius: var(--radio);
   background: var(--superficie); box-shadow: var(--sombra); margin: 0 0 20px;
}
.widget-box > .widget-header {
   background: var(--superficie) !important; background-image: none !important;
   border: 0 !important; border-bottom: 1px solid var(--borde-suave) !important;
   border-radius: var(--radio) var(--radio) 0 0;
   min-height: 52px; padding-left: 18px; color: var(--texto) !important;
}
.widget-box > .widget-header > .widget-title {
   line-height: 52px; font-size: 15px; font-weight: 800; color: var(--texto) !important;
}
.widget-box > .widget-header > .widget-title > .ace-icon { color: var(--marca) !important; }
.widget-box > .widget-header .widget-toolbar { line-height: 52px; }
.widget-box > .widget-header .widget-toolbar:before { display: none; }
.widget-body { background: transparent !important; border-radius: 0 0 var(--radio) var(--radio); }
.widget-main { padding: 18px !important; }
.widget-toolbox { background: var(--fondo) !important; border-color: var(--borde-suave) !important; }

/* Bloques de pie de formulario que Ace pinta en gris */
.clearfix.form-actions, .form-actions {
   background: var(--fondo) !important; border: 0 !important; border-radius: var(--radio);
   padding: 16px 20px !important; margin-top: 24px;
}

/* ---------- Indicadores (infobox) ---------- */
.infobox-container { display: flex; flex-wrap: wrap; gap: 16px; text-align: left; }
.infobox-container > .infobox { margin: 0 !important; }
.infobox {
   flex: 1 1 200px; width: auto; min-width: 180px; height: auto; min-height: 88px;
   padding: 18px; border: 1px solid var(--borde-suave) !important; border-radius: var(--radio);
   background: var(--superficie) !important; box-shadow: var(--sombra);
   display: flex; align-items: center; color: inherit;
   transition: transform .15s ease, box-shadow .15s ease;
}
a.infobox:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); text-decoration: none; filter: none; }
.infobox > .infobox-icon { display: block; margin-right: 14px; }
.infobox > .infobox-icon > .ace-icon {
   width: 48px; height: 48px; line-height: 48px; border-radius: 12px;
   font-size: 22px; box-shadow: none !important; padding: 0; text-align: center;
}
.infobox > .infobox-icon > .ace-icon:before { background: none !important; padding: 0 !important; border-radius: 0 !important; }
.infobox > .infobox-data { min-width: 0; border: 0; padding: 0; position: static; }
.infobox .infobox-data-number { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--texto) !important; }
.infobox .infobox-content { color: var(--texto-3) !important; font-weight: 700; max-width: none; }

/* ---------- Botones ---------- */
.btn {
   border-width: 1px !important; border-radius: var(--radio-sm) !important;
   text-shadow: none !important; font-weight: 700; letter-spacing: .1px;
   padding: 7px 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
   transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:hover { filter: brightness(.94); }
.btn:active, .btn.active { transform: translateY(1px); box-shadow: none !important; top: 0 !important; }
.btn:focus { outline: none; box-shadow: 0 0 0 3px var(--marca-suave) !important; }
.btn-xs, .btn-minier { border-radius: 8px !important; padding: 3px 9px; }
.btn-sm { padding: 5px 12px; }
.btn-lg { padding: 10px 22px; }
.btn-app { border-radius: var(--radio) !important; }

.btn-primary, .btn-primary:focus, .btn-primary:hover, .btn-primary.focus,
.btn_happy, .btn_happy:focus {
   background-color: var(--marca) !important; border-color: var(--marca) !important; color: #fff !important;
}
.btn-info, .btn-info:focus, .btn-info:hover { background-color: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
.btn-success, .btn-success:focus, .btn-success:hover { background-color: var(--exito) !important; border-color: var(--exito) !important; color: #fff !important; }
.btn-warning, .btn-warning:focus, .btn-warning:hover { background-color: var(--alerta) !important; border-color: var(--alerta) !important; color: #fff !important; }
.btn-danger, .btn-danger:focus, .btn-danger:hover { background-color: var(--peligro) !important; border-color: var(--peligro) !important; color: #fff !important; }
.btn-default, .btn-default:focus, .btn-default:hover,
.btn-grey, .btn-grey:focus, .btn-grey:hover {
   background-color: #64748b !important; border-color: #64748b !important; color: #fff !important;
}
.btn-white, .btn-white:focus {
   background-color: var(--superficie) !important; border-color: var(--borde) !important; color: var(--texto-2) !important;
}
.btn-white:hover { background-color: var(--fondo) !important; }
.btn-link { box-shadow: none; color: var(--marca); }

/* ---------- Formularios ---------- */
.form-group > label, label.control-label, .control-label {
   font-weight: 700; color: var(--texto-2); font-size: 13px; margin-bottom: 6px;
}
.form-control,
select, textarea,
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="month"] {
   border: 1px solid var(--borde) !important; border-radius: var(--radio-sm);
   background-color: var(--superficie); color: var(--texto);
   box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control, select.form-control { height: 40px; padding: 8px 12px; font-size: 14px; }
textarea.form-control { height: auto; min-height: 80px; }
.form-control:hover, select:hover, textarea:hover, input:hover { border-color: #cfd5df !important; }
.form-control:focus, select:focus, textarea:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="date"]:focus {
   border-color: var(--marca) !important; box-shadow: 0 0 0 3px var(--marca-suave) !important; outline: none;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background: #f6f7fa !important; color: var(--texto-3); }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #a3abba; }
.input-group-addon {
   background: var(--fondo) !important; border-color: var(--borde) !important; color: var(--texto-3) !important;
}
.input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0; }
.input-group-addon:first-child { border-radius: var(--radio-sm) 0 0 var(--radio-sm); }
.input-group-addon:last-child { border-radius: 0 var(--radio-sm) var(--radio-sm) 0; }
.input-group .form-control:first-child { border-radius: var(--radio-sm) 0 0 var(--radio-sm); }
.input-group .form-control:last-child { border-radius: 0 var(--radio-sm) var(--radio-sm) 0; }
.input-group-btn:last-child > .btn { border-radius: 0 var(--radio-sm) var(--radio-sm) 0 !important; }
.input-group-btn:first-child > .btn { border-radius: var(--radio-sm) 0 0 var(--radio-sm) !important; }

/* Casillas y radios de Ace */
input[type=checkbox].ace + .lbl::before, input[type=radio].ace + .lbl::before {
   border-color: #c9d0db; border-radius: 6px; box-shadow: none;
}
input[type=radio].ace + .lbl::before { border-radius: 50%; }
input[type=checkbox].ace:checked + .lbl::before, input[type=radio].ace:checked + .lbl::before {
   border-color: var(--marca); color: var(--marca);
}
input[type=checkbox].ace.ace-switch:checked + .lbl::before { background-color: var(--marca); border-color: var(--marca); }

/* Selectores con buscador */
.chosen-container .chosen-single, .chosen-container-multi .chosen-choices,
.select2-container .select2-choice, .select2-container-multi .select2-choices {
   border: 1px solid var(--borde) !important; border-radius: var(--radio-sm) !important;
   background: var(--superficie) !important; box-shadow: none !important;
   min-height: 40px; line-height: 38px;
}
.chosen-container-active .chosen-single, .chosen-container-active .chosen-choices,
.select2-container-active .select2-choice {
   border-color: var(--marca) !important; box-shadow: 0 0 0 3px var(--marca-suave) !important;
}
.chosen-container .chosen-drop, .select2-drop {
   border-color: var(--borde) !important; border-radius: 0 0 var(--radio-sm) var(--radio-sm);
   box-shadow: var(--sombra-alta) !important;
}
.chosen-container .chosen-results li.highlighted, .select2-results .select2-highlighted {
   background: var(--marca) !important; background-image: none !important; color: #fff !important;
}

/* ---------- Tablas ---------- */
.table { background: var(--superficie); border-radius: var(--radio-sm); }
.table > thead > tr {
   background: #f8fafc !important; background-image: none !important; color: var(--texto-2) !important;
}
.table > thead > tr > th {
   font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px;
   border-bottom: 1px solid var(--borde) !important; color: var(--texto-2);
   padding: 12px 10px;
}
.table > tbody > tr > td { padding: 10px; vertical-align: middle; border-color: var(--borde-suave) !important; color: var(--texto); }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td { border-color: var(--borde-suave) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfe; }
.table-hover > tbody > tr:hover { background: var(--marca-suave) !important; }
.table > tbody > tr.selected, .table > tbody > tr.selected > td { background: var(--marca-suave) !important; }
.dataTables_wrapper .row:first-child, .dataTables_wrapper .row:last-child {
   background: transparent !important; border: 0 !important; padding: 10px 0;
}
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { margin-left: 6px; }
.pagination > li > a, .pagination > li > span {
   border-radius: 8px !important; margin: 0 2px; border-color: var(--borde) !important; color: var(--texto-2);
}
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span {
   background: var(--marca) !important; border-color: var(--marca) !important; color: #fff !important;
}

/* ---------- Pestañas ---------- */
.nav-tabs { border-color: var(--borde) !important; }
.nav-tabs > li > a {
   border-radius: var(--radio-sm) var(--radio-sm) 0 0 !important; color: var(--texto-2) !important;
   font-weight: 700; background: transparent !important; border-color: transparent !important;
}
.nav-tabs > li > a:hover { background: var(--fondo) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
   color: var(--marca) !important; background: var(--superficie) !important;
   border-color: var(--borde) var(--borde) transparent !important;
   border-top: 3px solid var(--marca) !important; box-shadow: none !important;
}
.tab-content { border-color: var(--borde) !important; background: var(--superficie); border-radius: 0 0 var(--radio) var(--radio); }

/* ---------- Modales ---------- */
.modal-content {
   border: 0 !important; border-radius: 18px !important; box-shadow: 0 24px 60px rgba(16, 24, 40, .25) !important; overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--borde-suave) !important; padding: 16px 20px; }
.modal-header .modal-title { font-weight: 800; color: var(--texto); }
.modal-header .close { opacity: .5; font-size: 24px; margin-top: -2px; }
.modal-body { padding: 20px; }
.modal-footer { background: var(--fondo) !important; border-top: 1px solid var(--borde-suave) !important; padding: 14px 20px; }
.modal-backdrop.in { opacity: .45; }

/* ---------- Avisos, etiquetas y otros ---------- */
.alert { border: 0 !important; border-radius: 12px; padding: 14px 16px; }
.alert-success { background: #ecfdf5 !important; color: #065f46 !important; }
.alert-info { background: #eff8ff !important; color: #075985 !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; }
.alert-danger { background: #fef2f2 !important; color: #991b1b !important; }
.alert .ace-icon { opacity: .85; }
.label { border-radius: 6px; font-weight: 700; padding: 4px 8px; height: auto; line-height: 1.2; text-shadow: none; }
.label:before, .label:after { display: none; }
.label-success { background: var(--exito) !important; }
.label-danger { background: var(--peligro) !important; }
.label-warning { background: var(--alerta) !important; }
.label-info { background: var(--info) !important; }
.label-primary { background: var(--marca) !important; }
.badge { border-radius: 999px; font-weight: 700; text-shadow: none; }
.well { background: var(--fondo); border: 1px solid var(--borde-suave); border-radius: var(--radio); box-shadow: none; }
.panel { border-radius: var(--radio); border-color: var(--borde-suave); box-shadow: var(--sombra); }
.panel-heading { border-radius: var(--radio) var(--radio) 0 0; }
.progress { border-radius: 999px; background: var(--borde-suave); box-shadow: none; }
.progress .progress-bar { background: var(--marca); }
.ace-thumbnails > li, .img-thumbnail { border-radius: 12px; border-color: var(--borde); }
.profile-picture { border-radius: var(--radio); border-color: var(--borde); box-shadow: none; }
hr { border-color: var(--borde-suave); }

/* Calendario y fechas */
.datepicker.dropdown-menu, .daterangepicker { border-radius: 12px !important; }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td span.active {
   background: var(--marca) !important; background-image: none !important;
}
.fc-toolbar h2 { font-weight: 800; }
.fc-state-default { border-radius: 8px; background-image: none; text-shadow: none; box-shadow: none; }
.fc-state-active, .fc-state-down { background: var(--marca) !important; color: #fff !important; }

/* Línea de tiempo / notificaciones del dashboard */
.timeline-container:before, .timeline-items:before { background: var(--borde) !important; }
.timeline-item .widget-box { box-shadow: none; }
.timeline-label .label { font-size: 12px; }

/* ---------- Pie de página ---------- */
.footer { padding-top: 0; }
.footer .footer-inner .footer-content {
   border-top: 1px solid var(--borde) !important; background: transparent !important;
   color: var(--texto-3); padding: 14px 8px; line-height: 20px;
}
.btn-scroll-up { border-radius: 12px !important; background: var(--marca) !important; border-color: var(--marca) !important; }

/* ---------- Ventanas de confirmación ---------- */
.swal2-popup, .sweet-alert { border-radius: 18px !important; font-family: inherit !important; }
.swal2-styled.swal2-confirm, .sweet-alert button.confirm { background-color: var(--marca) !important; border-radius: var(--radio-sm) !important; }
.swal2-styled.swal2-cancel, .sweet-alert button.cancel { border-radius: var(--radio-sm) !important; }

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 767px) {
   .tema-navbar .navbar-container { padding: 0 10px; }
   .tema-marca-texto small, .tema-ano-etiqueta, .tema-navbar .user-info { display: none !important; }
   .tema-logo { height: 40px; }
   .tema-ano-pill { margin: 0 4px; padding: 6px 10px; }
   .tema-avatar { margin-right: 4px; }
   .page-content { padding: 18px 14px 32px; }
   .breadcrumbs { padding: 14px 14px 0 !important; }
   .infobox { flex-basis: 100%; }
}
@media (max-width: 991px) {
   .tema-navbar .navbar-buttons { margin-right: 0; }
}

/* ==========================================================================
   Login
   ========================================================================== */
.login-layout { background-color: var(--fondo); background-size: cover; background-position: center; }
.login-layout .main-container { padding-top: 0; min-height: 100vh; display: flex; align-items: center; }
.login-layout .main-content { width: 100%; margin-left: 0 !important; }
.login-layout .center.bigger h1 { margin: 0 0 -24px; position: relative; z-index: 2; }
.login-layout .center.bigger h1 img {
   width: 132px !important; height: 132px; object-fit: contain;
   background: var(--superficie); border-radius: 50%; padding: 10px;
   box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
}
.login-layout .login-box, .login-layout .forgot-box {
   border: 0 !important; border-radius: 22px !important; overflow: hidden;
   background: rgba(255, 255, 255, .92) !important;
   -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
   box-shadow: 0 24px 60px rgba(16, 24, 40, .18) !important;
}
.login-layout .widget-box .widget-body { background: transparent !important; }
.login-layout .widget-main { padding: 44px 32px 24px !important; background: transparent !important; }
.login-layout .login-box h4, .login-layout .forgot-box h4 {
   color: var(--texto) !important; font-weight: 800 !important; font-size: 22px; margin-bottom: 8px;
}
.login-layout .input-icon > .form-control { height: 46px; padding-left: 14px; padding-right: 40px; font-size: 15px; }
.login-layout .input-icon > .ace-icon { line-height: 46px; color: var(--texto-3); right: 14px; }
.login-layout label.block { margin-bottom: 14px; }
.login-layout .btn_happy, .login-layout #enviarCorreo {
   width: 100% !important; float: none !important; height: 46px; font-size: 15px;
   border-radius: 12px !important; box-shadow: 0 8px 20px rgba(16, 24, 40, .12);
}
.login-layout .toolbar {
   background: transparent !important; color: var(--texto-3) !important;
   border-top: 1px solid var(--borde-suave) !important; padding: 16px 0 !important;
}
.login-layout .toolbar br { display: none; }
.login-layout .toolbar:before { display: none; }
.login-layout .toolbar .back-to-login-link { color: var(--texto-3) !important; font-weight: 700; text-shadow: none; }
@media (max-width: 991px) {
   .login-layout .col-md-4 { padding: 0 16px; }
}

/* ---------- Ajustes ---------- */
/* Flecha de "activo" de la plantilla */
.tema-sidebar .nav-list li > a:after,
.tema-sidebar .nav-list li.active > a:after { display: none !important; }
/* Títulos de campo propios del proyecto (css/style.css los pintaba azul) */
.text-titulos { color: var(--texto-2) !important; font-weight: 700 !important; font-size: 13px; }
.tema-logo { height: 54px; }
/* Fondo de la plantilla detrás del contenido (Ace lo pinta blanco) */
.main-container:before { background: var(--fondo) !important; }
.main-content { background: var(--fondo) !important; }
/* Etiquetas con flecha de Ace */
.label.arrowed:before, .label.arrowed-in:before, .label.arrowed-right:after, .label.arrowed-in-right:after,
.badge.arrowed:before, .badge.arrowed-right:after { display: none !important; }
.label.arrowed, .label.arrowed-in, .label.arrowed-right, .label.arrowed-in-right { margin-left: 0; margin-right: 0; }
/* Barras de título de tablas (Ace .table-header) */
.table-header {
   background: var(--marca-suave) !important; color: var(--texto) !important;
   font-weight: 800; font-size: 14px; line-height: 44px; padding-left: 16px;
   border-radius: 12px 12px 0 0; margin-top: 8px;
}
/* Títulos de sección y etiquetas con colores sueltos (.green, .blue...) */
.page-content .header, .page-content h3.header, .page-content h4.header {
   color: var(--texto) !important; font-weight: 800 !important;
   border-bottom: 1px solid var(--borde-suave) !important; padding-bottom: 10px;
}
.page-content label.green, .page-content label.blue, .page-content label.red,
.page-content label.orange, .page-content label.purple { color: var(--texto-2) !important; font-weight: 700; }
.table > thead > tr > th, .table > thead > tr > th a { color: var(--texto-2) !important; }

/* Celular: barra superior en una sola fila */
@media (max-width: 767px) {
   .tema-navbar .navbar-buttons {
      position: absolute !important; top: 0; right: 8px; float: none !important;
      width: auto !important; margin: 0 !important; padding: 0 !important;
      background: transparent !important; border: 0 !important; box-shadow: none !important;
   }
   .tema-navbar .ace-nav { float: none; }
   .tema-navbar .ace-nav > li { float: left; }
   .tema-navbar .navbar-header.pull-left { float: left !important; }
   .tema-navbar .ace-nav > li > a { padding: 0 2px 0 6px; }
   .tema-navbar .ace-nav > li > a > .ace-icon { display: none; }
}
@media (max-width: 480px) {
   .tema-marca-texto { display: none; }
   .tema-ano-pill .fa { display: none; }
}
/* Ace oscurece la lista de botones de la barra en pantallas pequeñas */
.tema-navbar .ace-nav { background: transparent !important; }

/* ==========================================================================
   Años escolares (Configuración > Años)
   ========================================================================== */
.anos-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 20px 8px; }
.anos-titulo { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.anos-ayuda { color: var(--texto-3); margin: 0; max-width: 720px; line-height: 1.5; }
.anos-lista { padding: 12px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.anos-item {
   display: flex; align-items: center; gap: 20px; padding: 16px 20px;
   background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.anos-item-activo { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.anos-item-info { min-width: 190px; }
.anos-item-nombre { font-size: 17px; font-weight: 800; color: var(--texto); }
.anos-item-nombre .label { margin-left: 6px; vertical-align: 2px; }
.anos-item-fechas { color: var(--texto-3); font-size: 13px; margin-top: 2px; }
.anos-item-datos { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--texto-3); font-size: 13px; }
.anos-item-datos strong { color: var(--texto); font-weight: 800; }
.anos-item-accion { min-width: 100px; text-align: right; }
.anos-item-actual { color: var(--marca); font-weight: 800; font-size: 13px; }
.anos-pasos { list-style: none; display: flex; gap: 8px; margin: 12px 0 0; padding: 0; counter-reset: paso; }
.anos-pasos li {
   counter-increment: paso; flex: 1; padding: 8px 10px; border-radius: 10px; background: var(--fondo);
   color: var(--texto-3); font-weight: 700; font-size: 13px;
}
.anos-pasos li:before { content: counter(paso); display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: var(--borde); color: #fff; margin-right: 8px; font-size: 12px; }
.anos-pasos li.activo { background: var(--marca-suave); color: var(--texto); }
.anos-pasos li.activo:before, .anos-pasos li.hecho:before { background: var(--marca); }
.anos-subtitulo { font-weight: 800; color: var(--texto); margin: 18px 0 10px; font-size: 14px; }
.anos-subtitulo:first-child { margin-top: 0; }
.anos-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.anos-chip { background: var(--fondo); border: 1px solid var(--borde-suave); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--texto-2); }
.anos-chip strong { color: var(--texto); }
.anos-promocion td { vertical-align: middle !important; }
.anos-promocion .form-control { height: 36px; padding: 6px 10px; }
.anos-sin-estudiantes td { color: var(--texto-3); }
.anos-confirmar-nombre { font-size: 26px; font-weight: 800; color: var(--texto); }
.anos-confirmar-lista { list-style: none; padding: 0; margin: 16px 0; }
.anos-confirmar-lista li { padding: 8px 0; border-bottom: 1px solid var(--borde-suave); color: var(--texto-2); }
.anos-confirmar-lista li .ace-icon { color: var(--marca); width: 22px; }
@media (max-width: 767px) {
   .anos-encabezado { flex-direction: column; }
   .anos-item { flex-direction: column; align-items: flex-start; gap: 10px; }
   .anos-item-accion { text-align: left; }
   .anos-pasos { flex-direction: column; }
}

/* ==========================================================================
   Cargando (js/cargando.js)
   ========================================================================== */
.tema-cargando {
   position: fixed; inset: 0; z-index: 3000;
   display: flex; align-items: center; justify-content: center;
   background: rgba(244, 246, 251, .55);
   -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
   opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease;
   cursor: progress;
}
.tema-cargando.visible { opacity: 1; visibility: visible; }
.tema-cargando-caja {
   display: flex; align-items: center; gap: 12px;
   background: var(--superficie, #fff); color: var(--texto, #1f2937);
   padding: 14px 22px; border-radius: 14px; font-weight: 700; font-size: 15px;
   box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
}
.tema-cargando-giro, .btn.is-cargando:after {
   width: 22px; height: 22px; border-radius: 50%;
   border: 3px solid var(--marca-suave, #e7f6f7); border-top-color: var(--marca, #3eaeb4);
   animation: tema-giro .7s linear infinite;
}
.tema-cargando-giro { display: inline-block; }
@keyframes tema-giro { to { transform: rotate(360deg); } }

/* Botón que originó la acción: el texto se oculta y aparece el giro (no se modifica su HTML) */
.btn.is-cargando, button.is-cargando { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-cargando > *, button.is-cargando > * { visibility: hidden; }
.btn.is-cargando:after {
   content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
   border-width: 2px; border-color: rgba(255, 255, 255, .45); border-top-color: #fff;
}
.btn-white.is-cargando:after, .btn-link.is-cargando:after { border-color: var(--borde, #e6e9f0); border-top-color: var(--marca, #3eaeb4); }

/* Barra de progreso al cambiar de página */
.tema-cargando-barra {
   position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3001;
   background: linear-gradient(90deg, transparent, var(--marca, #3eaeb4), var(--marca-2, #01bdc8), transparent);
   background-size: 50% 100%; background-repeat: no-repeat;
   opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.tema-cargando-barra.visible { opacity: 1; animation: tema-barra 1s ease-in-out infinite; }
@keyframes tema-barra { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) {
   .tema-cargando-giro, .btn.is-cargando:after, .tema-cargando-barra.visible { animation-duration: 2s; }
}
/* Píldora del año como acceso a "Años escolares" (solo administradores) */
a.tema-ano-pill { text-decoration: none !important; cursor: pointer; transition: box-shadow .15s ease, filter .15s ease; }
a.tema-ano-pill:hover { box-shadow: 0 0 0 2px var(--marca); filter: none; }
a.tema-ano-pill label { cursor: pointer; }
.tema-ano-gestionar { color: var(--texto-3) !important; font-size: 13px; margin-left: 2px; }
.tema-navbar .ace-nav > li > a.tema-ano-pill,
.tema-navbar .ace-nav > li > a.tema-ano-pill:hover,
.tema-navbar .ace-nav > li > a.tema-ano-pill:focus {
   display: inline-flex; align-items: center; height: auto; line-height: 20px;
   padding: 7px 14px; margin: 0 12px; border-radius: 999px;
   background: var(--marca-suave) !important; color: var(--texto) !important;
}
.tema-navbar .ace-nav > li > a.tema-ano-pill > .ace-icon { margin-left: 0; }
.tema-navbar .ace-nav > li.tema-ano { display: flex; align-items: center; }
@media (max-width: 767px) {
   .tema-navbar .ace-nav > li > a.tema-ano-pill { margin: 0 4px; padding: 6px 10px; }
   .tema-ano-gestionar { display: none; }
}

/* ---------- Indicadores pequeños de color (Revisión de notas / Notas docentes) ---------- */
/* Ace .infobox-small.infobox-dark: fondo de color, texto blanco y gráfico circular. El estilo general de .infobox
   (tarjeta blanca) no les aplica: se presentan en una cuadrícula de 2 columnas. */
.col-md-12.text-center:has(> .infobox-small) {
   display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: left; margin-bottom: 16px;
}
.col-md-12.text-center:has(> .infobox-small) > .hr { grid-column: 1 / -1; }
.infobox.infobox-small {
   display: flex; flex: none; width: auto; min-width: 0; height: auto; min-height: 72px;
   margin: 0 !important; padding: 14px 16px; gap: 12px;
}
.infobox.infobox-small > .infobox-progress { flex: none; margin: 0; padding: 0; }
.infobox.infobox-small > .infobox-data { padding: 0; line-height: 1.25; }
.infobox.infobox-small .infobox-content { font-size: 13.5px; font-weight: 700; max-width: none; }
.infobox.infobox-dark { border: 0 !important; box-shadow: var(--sombra); }
.infobox.infobox-dark .infobox-content, .infobox.infobox-dark .infobox-data-number,
.infobox.infobox-dark .percent { color: #fff !important; }
.infobox.infobox-dark .percent { font-weight: 800; font-size: 13px; }
.infobox-dark.infobox-blue  { background: #3b8fd9 !important; }
.infobox-dark.infobox-green { background: #22a55a !important; }
.infobox-dark.infobox-red   { background: #ef4444 !important; }
.infobox-dark.infobox-grey  { background: #64748b !important; }
.infobox-dark.infobox-orange { background: #f59e0b !important; }
.infobox-dark.infobox-pink  { background: #ec4899 !important; }
.infobox-dark.infobox-purple { background: #8b5cf6 !important; }
@media (max-width: 480px) {
   .col-md-12.text-center:has(> .infobox-small) { grid-template-columns: minmax(0, 1fr); }
}

/* Recuadro con la foto y datos del estudiante seleccionado */
.fondo_estudia {
   background: var(--superficie) !important; border: 1px solid var(--borde-suave); border-radius: var(--radio);
   box-shadow: var(--sombra); margin: 0 0 20px !important; padding: 18px 6px 4px;
}
.fondo_estudia .img-thumbnail { border-radius: 50%; padding: 4px; max-width: 120px; margin: 0 auto 12px; display: block; }
/* Separadores punteados dobles de Ace */
.hr.hr-double, .hr.dotted { border-color: var(--borde) !important; }
/* css/style.css fija .infobox-small { width: 24% !important } (4 en fila): la cuadrícula controla el ancho */
.col-md-12.text-center > .infobox.infobox-small { width: auto !important; }
.infobox.infobox-small { padding: 12px; gap: 10px; min-height: 64px; }
.infobox.infobox-small .infobox-content { font-size: 12.5px; }
@media (min-width: 1280px) {
   .col-md-12.text-center:has(> .infobox-small) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Tablas con encabezado turquesa de css/style.css (#tblEstudiantesCurso, .tblHappy): mismo estilo que las demás */
#tblEstudiantesCurso th, .tblHappy th {
   background: #f8fafc !important; color: var(--texto-2) !important; border-color: var(--borde) !important;
}
.fondo_estudia .img-thumbnail { width: 120px; height: 120px; aspect-ratio: 1 / 1; object-fit: cover; }

/* ==========================================================================
   Revisión de notas (site/calificaciones/revision_notas.php)
   ========================================================================== */
.rev-filtros {
   display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
   background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio);
   box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 20px;
}
.rev-filtro label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--texto-2); font-size: 13px; margin-bottom: 6px; }
.rev-num {
   display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
   background: var(--marca); color: #fff; font-size: 12px; font-weight: 800;
}
.rev-vacio {
   text-align: center; padding: 56px 20px; color: var(--texto-3);
   background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio);
}
.rev-vacio .ace-icon { font-size: 40px; color: var(--marca); opacity: .7; }
.rev-vacio h4 { margin: 14px 0 6px; font-weight: 800; color: var(--texto); }
.rev-vacio p { margin: 0 auto; max-width: 460px; }
.rev-vacio-mini { color: var(--texto-3); padding: 18px; text-align: center; background: var(--fondo); border-radius: 10px; }
.rev-tarjeta {
   background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio);
   box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 20px;
}
.rev-tarjeta-titulo {
   display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
   font-weight: 800; font-size: 15px; color: var(--texto); margin-bottom: 12px;
}
.rev-contador { background: var(--marca-suave); color: var(--marca); border-radius: 999px; padding: 1px 10px; font-size: 12px; }
.rev-tarjeta .table { margin-bottom: 0; }
.rev-tarjeta .table .radio { margin: 0 !important; }

/* Lista de estudiantes: alta, con desplazamiento propio */
.rev-estudiantes #list_modulo { max-height: 70vh; overflow-y: auto; margin: 0 -18px -16px; }
.rev-estudiantes .table > thead > tr > th { position: sticky; top: 0; z-index: 1; }
.rev-estudiantes .table > thead > tr > th:first-child, .rev-estudiantes .table td:first-child { padding-left: 18px; }
#tblEstudiantesCurso tbody tr, #tblAsignaturas tbody tr { cursor: pointer; }
#tblEstudiantesCurso tbody tr.selected td, #tblAsignaturas tbody tr.selected td { background: var(--marca-suave) !important; font-weight: 700; }
#tblEstudiantesCurso td { font-size: 13px; }

/* Estudiante seleccionado */
.rev-estudiante-datos { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.rev-estudiante-datos .img-thumbnail {
   width: 72px; height: 72px; object-fit: cover; border-radius: 50%; padding: 3px; flex: none;
}
.rev-estudiante-texto { min-width: 0; flex: 1; }
.rev-notas input.rev-nombre, .rev-notas .rev-documento input {
   border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; height: auto;
   width: 100%; color: var(--texto); cursor: default;
}
.rev-notas input.rev-nombre { font-size: 18px; font-weight: 800; }
.rev-documento { color: var(--texto-3); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.rev-notas .rev-documento input { width: auto; flex: 1; color: var(--texto-2); font-size: 13px; }
.rev-logros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rev-logros > .infobox.infobox-small { width: auto !important; }
@media (max-width: 1279px) { .rev-logros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Indicadores por módulo y calificación LA / LP / SL / NA */
.rev-leyenda { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--texto-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rev-nota { display: inline-block; min-width: 30px; text-align: center; padding: 1px 6px; border-radius: 6px; color: #fff; font-weight: 800; font-size: 11px; }
.rev-nota-1 { background: #3b8fd9; } .rev-nota-2 { background: #22a55a; } .rev-nota-3 { background: #64748b; } .rev-nota-4 { background: #ef4444; }
#indicadores h3 {
   font-size: 14px; font-weight: 800; color: var(--texto); margin: 18px 0 8px; padding: 8px 12px;
   background: var(--fondo); border-radius: 8px;
}
#indicadores h3:first-of-type { margin-top: 4px; }
#indicadores .table { margin-bottom: 4px; border: 0; }
#indicadores .table td { border-left: 0 !important; border-right: 0 !important; }
#indicadores .table td:last-child { white-space: nowrap; }
#indicadores .radio { float: none !important; display: inline-block; margin: 0 4px 0 0 !important; padding: 0; }
#indicadores .radio label { padding: 0; min-height: 0; }
#indicadores input.notasIndica + .lbl {
   display: inline-block; min-width: 40px; text-align: center; padding: 5px 8px; margin: 0;
   border: 1px solid var(--borde); border-radius: 8px; font-weight: 800; font-size: 12px; color: var(--texto-2);
   background: var(--superficie); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#indicadores input.notasIndica + .lbl::before { display: none !important; }
#indicadores input.notasIndica + .lbl:hover { border-color: var(--texto-3); }
#indicadores input.notasIndica:focus + .lbl { box-shadow: 0 0 0 3px var(--marca-suave); }
#indicadores input.notasIndica[value="1"]:checked + .lbl { background: #3b8fd9; border-color: #3b8fd9; color: #fff; }
#indicadores input.notasIndica[value="2"]:checked + .lbl { background: #22a55a; border-color: #22a55a; color: #fff; }
#indicadores input.notasIndica[value="3"]:checked + .lbl { background: #64748b; border-color: #64748b; color: #fff; }
#indicadores input.notasIndica[value="4"]:checked + .lbl { background: #ef4444; border-color: #ef4444; color: #fff; }
.rev-acciones { display: flex; justify-content: flex-end; margin-top: 14px; }
.rev-acciones .btn { min-width: 160px; }
#formNotas { margin-bottom: 40px; }
@media (max-width: 991px) {
   .rev-filtros { grid-template-columns: minmax(0, 1fr); }
   .rev-estudiantes #list_modulo { max-height: 320px; }
   .rev-leyenda { margin-left: 0; }
}
/* Foto sin cargar: círculo neutro en vez del texto alternativo desbordado */
.rev-estudiante-datos .img-thumbnail { font-size: 0; color: transparent; background: var(--fondo); }

/* Lista de estudiantes: flecha en vez del círculo de selección (el radio sigue en el DOM para la lógica) */
#tblEstudiantesCurso .radio label { padding: 0; min-height: 0; cursor: pointer; }
#tblEstudiantesCurso input.radioEstudia + .lbl::before { display: none !important; }
#tblEstudiantesCurso input.radioEstudia + .lbl::after {
   content: "\f105"; font-family: FontAwesome; font-size: 20px; line-height: 1;
   color: var(--borde); transition: color .12s ease, transform .12s ease; display: inline-block;
}
#tblEstudiantesCurso tbody tr:hover input.radioEstudia + .lbl::after { color: var(--texto-3); transform: translateX(2px); }
#tblEstudiantesCurso input.radioEstudia:checked + .lbl::after { color: var(--marca); transform: translateX(2px); }
#tblEstudiantesCurso input.radioEstudia:focus-visible + .lbl::after { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }
#tblEstudiantesCurso td { text-transform: none; }

/* Indicador antiguo (#loading > .dots-loader, 42 usos en 17 archivos): lo reemplaza js/cargando.js; se oculta para no ver dos */
#loading #preview-area, #loading .dots-loader, #preview-area .dots-loader, #Spinner.dots-loader { display: none !important; }
/* Avance de notas en la lista de estudiantes */
.rev-avance { margin-left: 8px; font-size: 15px; vertical-align: -1px; cursor: help; }
.rev-avance-completo { color: #16a34a; }
.rev-avance-parcial { color: #f59e0b; }
.rev-leyenda-avance { font-weight: 600; font-size: 12px; color: var(--texto-3); margin-left: auto; display: flex; gap: 10px; }
.rev-leyenda-avance .fa { margin-right: 3px; }
/* Lista de estudiantes completa, sin desplazamiento interno (antes: max-height 70vh) */
.rev-estudiantes #list_modulo, .rev-estudiantes #list_modulo[style] {
   max-height: none !important; overflow: hidden; margin: 0 -18px -16px;
   border-radius: 0 0 var(--radio) var(--radio);
}
.rev-estudiantes .table > thead > tr > th { position: static; }
.rev-estudiantes .table > tbody > tr:last-child > td { border-bottom: 0 !important; }
@media (max-width: 991px) { .rev-estudiantes #list_modulo { max-height: none !important; } }

/* ==========================================================================
   Boletines (comparte el estilo de Revisión de notas: .rev-*)
   ========================================================================== */
.bol #tbEstudiantes tbody tr { cursor: pointer; }
.bol #tbEstudiantes tbody tr.selected td { background: var(--marca-suave) !important; font-weight: 700; }
.bol-flecha { font-size: 20px; color: var(--borde); transition: color .12s ease, transform .12s ease; }
.bol #tbEstudiantes tbody tr:hover .bol-flecha { color: var(--texto-3); transform: translateX(2px); }
.bol #tbEstudiantes tbody tr.selected .bol-flecha { color: var(--marca); transform: translateX(2px); }
.bol-nombre { font-size: 18px; font-weight: 800; color: var(--texto); }
.bol #bolEstado { margin-left: auto; align-self: flex-start; }
.bol-etiqueta { font-weight: 700; color: var(--texto-2); font-size: 13px; margin: 4px 0 6px; }
.bol-comentario { min-height: 260px; line-height: 1.55; resize: vertical; }
.bol-ayuda { color: var(--texto-3); font-size: 12.5px; margin: 8px 0 0; }
.bol-acciones { gap: 10px; }
/* Boletines: casillas para imprimir varios en un solo PDF */
.bol #tbEstudiantes .bol-col-check { width: 44px; padding-right: 0; vertical-align: middle; }
.bol-check { margin: 0; cursor: pointer; display: inline-block; line-height: 1; }
.bol-check input[disabled] + .lbl { opacity: .35; cursor: not-allowed; }
.bol-lote {
   display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
   margin: 16px -18px -16px; padding: 12px 18px; border-top: 1px solid var(--borde-suave);
   background: var(--fondo); border-radius: 0 0 var(--radio) var(--radio);
   font-size: 12.5px; color: var(--texto-3);
}
.bol .rev-estudiantes #list_modulo, .bol .rev-estudiantes #list_modulo[style] { margin-bottom: 0; border-radius: 0; }

/* ==========================================================================
   Estudiantes (site/administrador/estudiantes.php)
   ========================================================================== */
.est-encabezado {
   display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px;
   margin: 4px 0 18px;
}
.est-encabezado h1 { margin: 0 0 4px; font-size: 24px; font-weight: 800; color: var(--texto) !important; }
.est-ayuda { color: var(--texto-3); margin: 0; font-size: 13.5px; }
.est-acciones-top { display: flex; flex-wrap: wrap; gap: 8px; }
.est-avatar {
   width: 136px; height: 136px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 14px;
   border: 4px solid var(--superficie); box-shadow: 0 0 0 1px var(--borde), var(--sombra); background: var(--fondo);
}
.est-archivo { text-align: left; }
.est-archivo .ace-file-input { margin: 0; }
.est-nota { color: var(--texto-3); font-size: 12px; margin: 6px 0 0; }
.est-seccion {
   font-weight: 800; font-size: 13px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em;
   margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--borde-suave);
}
.est-seccion:first-child { margin-top: 2px; }
.est-campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 16px; }
.est-campos .form-group { margin-bottom: 14px; min-width: 0; }
.est-pagina label.text-titulos { display: block; font-weight: 700; font-size: 13px; color: var(--texto-2) !important; margin-bottom: 6px; }
.est-c3 { grid-column: span 3; } .est-c4 { grid-column: span 4; } .est-c5 { grid-column: span 5; }
.est-c6 { grid-column: span 6; } .est-c9 { grid-column: span 9; }
/* Sí / No en línea, a la altura de los campos */
.est-opciones { display: flex; align-items: center; gap: 22px; min-height: 40px; }
.est-opcion { margin: 0; font-weight: 600; cursor: pointer; }
/* Spinner de hermanos: botones neutros en vez de rojos */
.est .ace-spinner { width: 100% !important; max-width: 160px; }
.est .ace-spinner .btn { background: var(--superficie) !important; color: var(--texto-2) !important; border: 1px solid var(--borde) !important; text-shadow: none; }
.est .ace-spinner .btn:hover { background: var(--fondo) !important; }
.est-pie {
   display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
   margin: 8px -18px -16px; padding: 14px 18px; border-top: 1px solid var(--borde-suave);
   background: var(--fondo); border-radius: 0 0 var(--radio) var(--radio);
}
@media (max-width: 991px) {
   .est-campos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
   .est-c3, .est-c4, .est-c5 { grid-column: span 3; } .est-c6, .est-c9 { grid-column: span 6; }
}
@media (max-width: 575px) {
   .est-campos { grid-template-columns: minmax(0, 1fr); }
   .est-campos .form-group { grid-column: 1 / -1; }
   .est-acciones-top, .est-acciones-top .btn { width: 100%; }
   .est-pie .btn { flex: 1; }
}
/* ace.css fuerza esquinas cuadradas (border-radius: 0 !important) en los input de texto: aquí iguales a los select */
.est-pagina input.form-control { border-radius: var(--radio-sm) !important; padding: 8px 12px; color: var(--texto); }
.est-pagina .ace-spinner input.form-control { border-radius: var(--radio-sm) 0 0 var(--radio-sm) !important; text-align: center; }
.est .ace-spinner .spinbox-buttons { white-space: nowrap; font-size: 0; width: 1%; }
.est .ace-spinner .spinbox-buttons .btn { height: 40px; width: 38px; margin: 0; border-left: 0 !important; border-radius: 0 !important; }
.est .ace-spinner .spinbox-buttons .btn:last-child { border-radius: 0 var(--radio-sm) var(--radio-sm) 0 !important; }
/* Selector de foto */
.est-archivo .ace-file-input { height: 40px; }
.est-archivo .ace-file-container {
   height: 40px; border: 1px solid var(--borde) !important; border-radius: var(--radio-sm); overflow: hidden;
}
.est-archivo .ace-file-container:hover { border-color: #cfd5df !important; }
.est-archivo .ace-file-container:before {
   line-height: 38px; border: 0; padding: 0 14px; background: var(--marca); font-size: 12.5px; font-weight: 700;
}
.est-archivo .ace-file-container .ace-file-name { height: 38px; line-height: 38px; padding-left: 40px; max-width: 58%; text-overflow: ellipsis; }
.est-archivo .ace-file-container .ace-icon { line-height: 34px; width: 32px; border-radius: 8px; background: var(--fondo); color: var(--texto-3); }
.est-archivo .ace-file-input .remove { top: 10px; }
/* Modal "Buscar estudiante" */
.est-busqueda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px 16px; align-items: end; margin-bottom: 18px; }
.est-opcional { font-weight: 600; color: var(--texto-3); }
.est-busqueda-boton .btn { height: 40px; }
@media (max-width: 767px) { .est-busqueda { grid-template-columns: minmax(0, 1fr); } .est-busqueda-boton .btn { width: 100%; } }
.est-c8 { grid-column: span 8; }
.est-control { min-width: 0; }
.est-control .help-block { margin: 4px 0 0; font-size: 12px; }
/* Modales de contactos e información médica */
.est-pagina .modal-body .est-seccion:first-of-type { margin-top: 0; }
.est-contactos-form { border-right: 1px solid var(--borde-suave); }
.est-contactos-acciones { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.est-pie-modal { margin: 8px 0 0; padding: 14px 0 0; background: none; border-radius: 0; }
.est-pagina #ayudaesp, .est-pagina .select2-container { width: 100% !important; }
@media (max-width: 991px) {
   .est-c8 { grid-column: span 6; }
   .est-contactos-form { border-right: 0; border-bottom: 1px solid var(--borde-suave); padding-bottom: 16px; margin-bottom: 16px; }
}

/* ==========================================================================
   Panel del docente (site/dashboard/dashboardDocentes.php)
   ========================================================================== */
.doc-encabezado { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 4px 0 18px; }
.doc-encabezado h1 { margin: 0 0 4px; font-size: 24px; font-weight: 800; color: var(--texto); }
.doc-ayuda { color: var(--texto-3); margin: 0; font-size: 13.5px; }
.doc-ayuda strong { color: var(--texto-2); }
.doc-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
/* Indicadores */
.doc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.doc-kpi {
   background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio);
   box-shadow: var(--sombra); padding: 16px 18px;
}
.doc-kpi-titulo { font-size: 13px; font-weight: 700; color: var(--texto-3); }
.doc-kpi-titulo .fa { color: var(--marca); margin-right: 4px; width: 16px; text-align: center; }
.doc-kpi-valor { font-size: 32px; font-weight: 800; color: var(--texto); line-height: 1.15; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.doc-kpi-de { font-size: 18px; font-weight: 700; color: var(--texto-3); }
.doc-kpi-nota { font-size: 12.5px; color: var(--texto-3); }
.doc-kpi-pendiente .doc-kpi-titulo .fa { color: #d97706; }
.doc-kpi .doc-barra { margin: 6px 0 6px; }
/* Barra de avance: un solo tono sobre una pista neutra */
.doc-barra { height: 8px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.doc-barra > span { display: block; height: 100%; min-width: 0; border-radius: 999px; background: var(--marca); }
/* Cursos (pestañas) */
.doc-titulo-nota { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.doc-curso-nombre { font-size: 17px; font-weight: 800; color: var(--texto); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-curso-nombre .label { font-size: 11px; }
.doc-curso-datos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--texto-2); margin-bottom: 12px; }
.doc-curso-datos .fa { color: var(--texto-3); margin-right: 2px; }
/* Períodos */
.doc-periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.doc-periodo { border: 1px solid var(--borde-suave); border-radius: var(--radio-sm); padding: 14px; }
.doc-periodo-actual { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.doc-periodo-estado { font-size: 12px; font-weight: 700; color: var(--texto-3); }
.doc-periodo-en_curso .doc-periodo-estado { color: var(--marca); }
.doc-periodo-estado .fa-circle { font-size: 9px; vertical-align: 1px; }
.doc-periodo-nombre { font-size: 16px; font-weight: 800; color: var(--texto); margin: 4px 0 2px; }
.doc-periodo-fechas { font-size: 12.5px; color: var(--texto-3); margin-bottom: 12px; }
.doc-periodo-boletines { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--texto-2); margin-bottom: 6px; }
.doc-periodo-boletines strong { color: var(--texto); }
.doc-faltan { color: #b45309; font-weight: 700; }
.doc-listos { color: #15803d; font-weight: 700; }
.doc-periodo-proximo .doc-barra > span { background: var(--borde); }
@media (max-width: 991px) { .doc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
   .doc-kpis { grid-template-columns: minmax(0, 1fr); }
   .doc-acciones, .doc-acciones .btn { width: 100%; }
}
/* Ingreso de notas (docente): solo Curso y Período */
@media (min-width: 768px) { .rev-filtros-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Panel del docente: pestañas de cursos y estudiantes */
.doc-tabs {
   display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px;
   margin: 0 -18px 0; padding: 0 18px; border-bottom: 1px solid var(--borde-suave);
}
.doc-tab {
   flex: 0 0 auto; background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px 9px;
   text-align: left; cursor: pointer; color: var(--texto-3); border-radius: 8px 8px 0 0; line-height: 1.2;
}
.doc-tab:hover { background: var(--fondo); color: var(--texto-2); }
.doc-tab:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.doc-tab.activo { border-bottom-color: var(--marca); color: var(--texto); }
.doc-tab-grado { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.doc-tab-nombre { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; }
.doc-tab-nombre .fa { font-size: 12px; }
.doc-panel-resumen { padding: 14px 0 8px; }
.doc-estudiantes { margin: 0; }
.doc-estudiantes td { vertical-align: middle !important; }
.doc-col-notas { width: 110px; } .doc-col-boletin { width: 100px; } .doc-col-accion { width: 150px; }
.doc-est { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-est-foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--fondo); flex: 0 0 auto; }
.doc-est-nombre { font-weight: 700; color: var(--texto); }
.doc-est-doc { font-size: 12px; color: var(--texto-3); }
.doc-notas { font-weight: 700; font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-notas-ok { color: #15803d; }
.doc-notas-parcial { color: #b45309; }
.doc-muted { color: var(--texto-3); }
@media (max-width: 575px) {
   .doc-accion-texto { display: none; }
   .doc-col-accion { width: 50px; } .doc-col-notas { width: 70px; } .doc-col-boletin { width: 80px; }
   .doc-est-doc { display: none; }
}
.doc-est-iniciales { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--marca); background: var(--marca-suave); }
@media (min-width: 768px) { .doc-tabs { flex-wrap: wrap; overflow-x: visible; } }
@media (max-width: 575px) { .doc-est-foto { display: none !important; } .doc-estudiantes > tbody > tr > td, .doc-estudiantes > thead > tr > th { padding-left: 6px; padding-right: 6px; } }
/* Botones de Boletines / Observaciones en celular: a lo ancho, sin cortarse */
@media (max-width: 575px) { .bol-acciones { flex-wrap: wrap; } .bol-acciones .btn { flex: 1 1 100%; min-width: 0; margin: 0; } }

/* ==========================================================================
   Asignación de estudiantes (site/academico/asignacion_estudiantes.php)
   ========================================================================== */
.asg-buscar { position: relative; margin-bottom: 10px; }
.asg-buscar .fa { position: absolute; left: 12px; top: 13px; color: var(--texto-3); }
.asg-buscar .form-control { padding-left: 34px !important; border-radius: var(--radio-sm) !important; }
.asg-lista { list-style: none; margin: 0 -18px -16px; padding: 0; max-height: 60vh; overflow-y: auto; border-top: 1px solid var(--borde-suave); }
.asg-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--borde-suave); }
.asg-lista li:last-child { border-bottom: 0; }
.asg-lista li:hover { background: var(--fondo); }
.asg-nombre { font-weight: 600; color: var(--texto); min-width: 0; }
.asg-lista .btn { flex: 0 0 auto; }
.asg-vacia { color: var(--texto-3); justify-content: center !important; text-align: center; padding: 22px 18px !important; }
.asg-vacia:hover { background: none !important; }

/* ==========================================================================
   Panel administrativo (site/dashboard/index.php): usa los .doc-* del panel del docente
   ========================================================================== */
.adm-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.adm-kpis a.doc-kpi { text-decoration: none; transition: border-color .12s ease, transform .12s ease; }
.adm-kpis a.doc-kpi:hover { border-color: var(--marca); transform: translateY(-1px); }
.adm-periodo { display: flex; align-items: center; gap: 8px; margin: 0; }
.adm-periodo label { margin: 0; font-weight: 700; font-size: 13px; color: var(--texto-2); }
.adm-periodo .form-control { min-width: 200px; }
a.doc-periodo { display: block; text-decoration: none; color: inherit; transition: border-color .12s ease; }
a.doc-periodo:hover { border-color: var(--marca); }
.adm-tabla { margin: 0; }
.adm-tabla td { vertical-align: middle !important; }
.adm-col-barra { width: 22%; min-width: 170px; }
.adm-num { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.adm-progreso { display: flex; align-items: center; gap: 10px; }
.adm-progreso .doc-barra { flex: 1; }
.adm-pct { font-weight: 800; font-size: 13px; color: var(--texto); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.adm-detalle { font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.adm-nota { font-size: 12px; color: var(--texto-3); margin: 10px 0 0; }
@media (max-width: 1279px) { .adm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-periodo, .adm-periodo .form-control { width: 100%; } }
/* Estudiantes: foto dentro de la misma tarjeta, a la izquierda de identificación y nombre */
.est-cabecera { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 28px; align-items: start; }
.est-foto { text-align: center; padding-top: 4px; }
.est-foto .est-avatar { width: 128px; height: 128px; margin-bottom: 12px; }
@media (max-width: 767px) {
   .est-cabecera { grid-template-columns: minmax(0, 1fr); }
   .est-foto { max-width: 260px; margin: 0 auto 6px; }
}
/* En la columna de la foto el nombre del archivo no cabe (la foto elegida ya se ve arriba): solo el botón, a lo ancho */
.est-foto .ace-file-container .ace-file-name, .est-foto .ace-file-container .ace-icon { visibility: hidden; }
.est-foto .ace-file-container:before { left: 0; right: 0; text-align: center; }
.est-foto .ace-file-input .remove { display: none !important; }
.est-c12 { grid-column: 1 / -1; }
.est-pagina textarea.form-control { border-radius: var(--radio-sm) !important; padding: 8px 12px; color: var(--texto); }

/* ==========================================================================
   Asignar cursos (site/academico/asignar_cursos.php): una tarjeta por curso
   ========================================================================== */
.acu-estrella-ayuda { color: #f59e0b; }
.acu-filtros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); align-items: end; }
.acu-filtros .rev-filtro label .fa { color: var(--texto-3); }
.acu-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; }
.acu-chip { background: var(--fondo); border: 1px solid var(--borde-suave); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--texto-2); cursor: default; }
.acu-chip strong { color: var(--texto); }
.acu-chip-alerta { background: #fffbeb; border-color: #fcd34d; } .acu-chip-alerta strong { color: #b45309; }
.acu-chip-error { background: #fef2f2; border-color: #fca5a5; } .acu-chip-error strong { color: #b91c1c; }
.acu-solo { margin: 0 0 0 auto; font-weight: 600; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.acu-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.acu-curso { margin: 0; display: flex; flex-direction: column; }
.acu-pendiente { border-color: #fcd34d; }
.acu-curso-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.acu-curso-grado { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.acu-curso-nombre { font-size: 18px; font-weight: 800; color: var(--texto); line-height: 1.2; }
.acu-curso-datos { font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }
.acu-docentes { list-style: none; margin: 0 -18px; padding: 0; border-top: 1px solid var(--borde-suave); }
.acu-docente { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--borde-suave); }
.acu-docente:hover { background: var(--fondo); }
.acu-resaltado { background: var(--marca-suave) !important; }
.acu-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
   font-size: 12px; font-weight: 800; color: var(--marca); background: var(--marca-suave); }
.acu-titular .acu-avatar { color: #fff; background: #f59e0b; }
.acu-docente-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acu-docente-nombre { font-weight: 700; color: var(--texto); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acu-docente-espe { font-size: 12px; color: var(--texto-3); }
.acu-titular .acu-docente-espe { color: #b45309; font-weight: 700; }
.acu-btn { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--texto-3); }
.acu-btn:hover { background: var(--superficie); border-color: var(--borde); color: var(--texto); }
.acu-btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.acu-btn[disabled] { opacity: .4; }
.acu-estrella:hover, .acu-estrella.activo { color: #f59e0b; }
.acu-quitar:hover { color: #dc2626; }
.acu-vacio { color: var(--texto-3); text-align: center; padding: 18px; border-bottom: 1px solid var(--borde-suave); }
.acu-agregar { display: flex; gap: 8px; padding-top: 12px; margin-top: auto; }
.acu-agregar .form-control { flex: 1; min-width: 0; height: 36px; padding: 6px 10px; }
.acu-agregar .btn { height: 36px; flex: 0 0 auto; }
@media (max-width: 991px) { .acu-filtros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .acu-resumen { grid-column: 1 / -1; } }
@media (max-width: 575px) { .acu-filtros { grid-template-columns: minmax(0, 1fr); } .acu-cursos { grid-template-columns: minmax(0, 1fr); } .acu-solo { margin-left: 0; } }
/* Asignación de estudiantes: fotos y docentes del curso */
.asg-persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
.asg-persona-texto { display: flex; flex-direction: column; min-width: 0; }
.asg-doc { font-size: 12px; color: var(--texto-3); }
.asg-foto, .asg-foto-docente, .asg-foto-mini { border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--fondo); }
.asg-foto { width: 34px; height: 34px; }
.asg-foto-docente { width: 44px; height: 44px; }
.asg-foto-mini { width: 30px; height: 30px; border: 2px solid var(--superficie); }
.asg-iniciales { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--marca); background: var(--marca-suave); }
.asg-docentes { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 10px 12px; margin-bottom: 12px;
   background: var(--fondo); border-radius: var(--radio-sm); }
.asg-titular { display: flex; align-items: center; gap: 10px; }
.asg-titular .asg-foto-docente { box-shadow: 0 0 0 2px #f59e0b; }
.asg-titular-etiqueta { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #b45309; }
.asg-titular-etiqueta .fa { color: #f59e0b; }
.asg-titular-nombre { font-weight: 800; color: var(--texto); }
.asg-sin-titular .asg-foto-docente { box-shadow: none; color: var(--texto-3); background: var(--superficie); }
.asg-sin-titular .asg-titular-etiqueta { color: var(--texto-3); }
.asg-sin-titular .asg-titular-nombre { color: #b45309; }
.asg-otros { display: flex; align-items: center; gap: 2px; }
.asg-otros-texto { font-size: 12px; color: var(--texto-3); margin-right: 6px; }
.asg-otro { display: inline-flex; margin-left: -6px; cursor: default; }
.asg-otro:first-of-type { margin-left: 0; }
.asg-link { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--marca); }

/* ==========================================================================
   Estructura académica (site/academico/estructura.php): menú de grados + ficha del grado
   ========================================================================== */
.eac-herramientas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eac-periodo-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.eac-periodo { width: auto; min-width: 170px; height: 36px; padding: 6px 10px; }
.eac-ayuda { padding: 14px 18px; }
.eac-cadena { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; counter-reset: paso; }
.eac-cadena li { counter-increment: paso; flex: 1 1 140px; background: var(--fondo); border-radius: 10px; padding: 10px 12px; position: relative; }
.eac-cadena li:not(:last-child):after { content: '\203A'; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: var(--texto-3); font-size: 20px; z-index: 1; }
.eac-cadena strong { display: block; color: var(--texto); font-size: 13px; }
.eac-cadena strong:before { content: counter(paso) '. '; color: var(--marca); }
.eac-cadena span { display: block; color: var(--texto-2); font-size: 13px; }
.eac-cadena em { display: block; color: var(--texto-3); font-size: 11.5px; font-style: normal; margin-top: 2px; }
.eac-inactivo { opacity: .55; }
.eac-inactivo .eac-inactivo { opacity: 1; }
.eac-editable { border: 0; background: none; padding: 2px 4px; margin-left: -4px; border-radius: 6px; text-align: left; color: var(--texto); font-weight: 800; }
.eac-editable .fa-pencil { color: var(--texto-3); font-size: 11px; opacity: 0; transition: opacity .12s; }
.eac-editable:hover { background: var(--fondo); } .eac-editable:hover .fa-pencil, .eac-editable:focus .fa-pencil { opacity: 1; }
.eac-vacio-mini { color: var(--texto-3); font-size: 12.5px; padding: 6px 0; list-style: none; }
/* Menú de grados */
.eac-menu { padding-bottom: 12px; }
.eac-menu-nivel { margin: 0 -18px 6px; }
.eac-menu-nivel-nombre { margin: 4px 0 4px 14px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.eac-menu-grado { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 18px; border-left: 3px solid transparent; }
.eac-menu-grado:hover { background: var(--fondo); }
.eac-menu-grado.activo { background: var(--marca-suave); border-left-color: var(--marca); }
.eac-menu-grado-nombre { display: block; font-weight: 800; color: var(--texto); }
.eac-menu-grado-datos { display: block; font-size: 12px; color: var(--texto-3); }
.eac-menu-pie { display: flex; gap: 6px; border-top: 1px solid var(--borde-suave); padding-top: 12px; margin-top: 6px; }
.eac-menu-pie .btn { flex: 1; }
/* Ficha del grado */
.eac-grado-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.eac-tipo { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.eac-grado-titulo { margin: 0; font-size: 24px; font-weight: 800; color: var(--texto); }
.eac-bloque-titulo { font-size: 12px; font-weight: 800; color: var(--texto-3); margin-bottom: 6px; }
.eac-cursos { display: flex; flex-wrap: wrap; gap: 6px; }
.eac-chip { border: 1px solid var(--borde); background: var(--superficie); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.eac-chip:hover { border-color: var(--marca); color: var(--texto); }
.eac-chip-nuevo { border-style: dashed; color: var(--marca); background: none; }
.eac-chip-mini { padding: 3px 10px; font-size: 12px; border-style: dashed; margin: 2px 0; }
.eac-plan-acciones { margin-left: auto; display: flex; gap: 6px; }
.eac-area { margin-top: 14px; }
.eac-area-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--borde-suave); padding-bottom: 4px; margin-bottom: 6px; }
.eac-area-nombre { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.eac-link { border: 0; background: none; color: var(--marca); font-weight: 700; font-size: 12.5px; padding: 2px 6px; border-radius: 6px; }
.eac-link:hover { background: var(--marca-suave); }
.eac-areas-vacias { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--borde); font-size: 12.5px; color: var(--texto-3); }
/* Asignatura desplegable */
.eac-asig { border: 1px solid var(--borde-suave); border-radius: var(--radio-sm); margin-bottom: 6px; background: var(--superficie); }
.eac-asig.abierta { border-color: var(--borde); box-shadow: var(--sombra); }
.eac-asig-cab { display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.eac-asig-toggle { flex: 1; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 10px 12px; min-width: 0; }
.eac-asig-flecha { color: var(--texto-3); font-size: 18px; width: 12px; transition: transform .15s; }
.eac-asig.abierta .eac-asig-flecha { transform: rotate(90deg); color: var(--marca); }
.eac-asig-nombre { font-weight: 800; color: var(--texto); }
.eac-asig-datos { margin-left: auto; font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.eac-asig-cuerpo { padding: 4px 14px 14px 34px; border-top: 1px solid var(--borde-suave); }
.eac-mini-btn { border: 0; background: none; width: 28px; height: 28px; border-radius: 7px; color: var(--texto-3); flex: 0 0 auto; }
.eac-mini-btn:hover { background: var(--fondo); color: var(--marca); }
.eac-modulo { padding: 10px 0 6px; border-bottom: 1px solid var(--borde-suave); }
.eac-modulo-nombre { font-size: 14px; }
.eac-indicadores { margin: 4px 0 6px; padding-left: 22px; color: var(--texto-3); font-size: 12px; }
.eac-indicadores li { padding: 1px 0; }
.eac-indicador { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: 3px 6px; border-radius: 6px;
   color: var(--texto); font-size: 13.5px; line-height: 1.45; }
.eac-indicador span:first-child { flex: 1; }
.eac-indicador .fa-pencil { color: var(--texto-3); opacity: 0; margin-top: 4px; font-size: 11px; }
.eac-indicador:hover { background: var(--fondo); } .eac-indicador:hover .fa-pencil { opacity: 1; }
.eac-agregar { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }
.eac-agregar .form-control { flex: 1; min-width: 0; min-height: 34px; height: 34px; padding: 6px 10px; font-size: 13px; resize: none; overflow: hidden; }
.eac-agregar .btn { height: 34px; flex: 0 0 auto; }
.eac-agregar-ind { padding-left: 22px; }
.eac-agregar-mod { margin-top: 12px; }
@media (max-width: 991px) { .eac-menu-nivel { margin-bottom: 0; } }
@media (max-width: 767px) {
   .eac-herramientas { width: 100%; } .eac-periodo { flex: 1; }
   .eac-asig-cuerpo { padding-left: 14px; } .eac-agregar-ind, .eac-indicadores { padding-left: 14px; }
   .eac-editable .fa-pencil, .eac-indicador .fa-pencil { opacity: 1; }
   .eac-plan-acciones { margin-left: 0; width: 100%; }
}