:root {
    --azul: #1e4d8c;
    --azul-oscuro: #143a6b;
    --azul-claro: #eaf1fc;
    --gris-fondo: #f4f6f9;
    --gris-borde: #dde3ec;
    --texto: #1c2530;
    --texto-suave: #667085;
    --superficie: #ffffff;
    --verde: #2e7d32;
    --rojo: #c0392b;
    --amarillo: #b8860b;
    --superior: #2e7d32;
    --alto: #558b2f;
    --basico: #e0a800;
    --bajo: #c0392b;
    --exito-fondo: #eaf5ec;
    --exito-borde: #bfe2c6;
    --exito-texto: #1e6b2e;
    --peligro-fondo: #fdedec;
    --peligro-borde: #f3c6c2;
    --peligro-texto: #a3352b;
    --advertencia-fondo: #fdf4e3;
    --advertencia-borde: #f0dca6;
    --advertencia-texto: #8a5c07;
    --info-fondo: var(--azul-claro);
    --info-borde: #c7dbf6;
    --info-texto: var(--azul-oscuro);
    --sombra: 0 1px 2px rgba(20, 30, 60, .05);
    --sombra-hover: 0 4px 12px rgba(20, 30, 60, .08);
    font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

[data-theme="dark"] {
    --gris-fondo: #10151c;
    --gris-borde: #2a3444;
    --texto: #e7ecf4;
    --texto-suave: #9aa7bb;
    --superficie: #1a212c;
    --azul-claro: #17273f;
    --exito-fondo: #123420;
    --exito-borde: #1e5c34;
    --exito-texto: #7cd996;
    --peligro-fondo: #3a1a17;
    --peligro-borde: #6b2c25;
    --peligro-texto: #f2968c;
    --advertencia-fondo: #3a2c0f;
    --advertencia-borde: #6b4f14;
    --advertencia-texto: #f0c568;
    --info-fondo: #17273f;
    --info-borde: #294a75;
    --info-texto: #9cc3f5;
    --sombra: 0 1px 3px rgba(0, 0, 0, .35);
    --sombra-hover: 0 6px 18px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--gris-fondo);
    color: var(--texto);
    transition: background .2s ease, color .2s ease;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

[data-theme="dark"] a { color: #7fb0ff; }

/* ---------- Login ---------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 100%);
}
.login-box {
    background: var(--superficie);
    padding: 2.5rem 2rem;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    width: 100%;
    max-width: 380px;
    text-align: center;
}
.login-box h2 { margin: 0 0 .3rem; color: var(--azul-oscuro); }
[data-theme="dark"] .login-box h2 { color: #7fb0ff; }
.login-box .subtitle { margin: 0 0 1.5rem; color: var(--texto-suave); }
.logo-institucion { max-height: 110px; max-width: 320px; margin-bottom: .8rem; }
.topbar-title .logo-institucion {
    max-height: 44px;
    max-width: 160px;
    vertical-align: middle;
    margin-right: .6rem;
    background: #fff;
    padding: .3rem .5rem;
    border-radius: 8px;
}
.login-box form { display: flex; flex-direction: column; gap: .8rem; text-align: left; }
.login-box label { font-size: .85rem; color: var(--texto-suave); }
.login-box input {
    padding: .7rem;
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--superficie);
    color: var(--texto);
}
.login-box button {
    margin-top: .5rem;
    padding: .8rem;
    background: var(--azul);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease;
}
.login-box button:hover { background: var(--azul-oscuro); }
.login-links { margin-top: 1rem; font-size: .85rem; }
.msg-error { color: var(--rojo); font-size: .9rem; }
.msg-ok { color: var(--verde); font-size: .9rem; }

/* ---------- Layout general (admin) ---------- */
.topbar {
    background: var(--azul-oscuro);
    color: #fff;
    padding: .9rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar-title { font-weight: 500; display: flex; align-items: center; font-size: 1rem; }
.topbar-sub { font-weight: 400; opacity: .75; margin-left: .3rem; }
.topbar-user { display: flex; align-items: center; gap: .8rem; font-size: .88rem; }
.topbar-user a { color: #cfe0ff; }

.theme-toggle {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    border-radius: 6px;
    padding: .35rem .7rem;
    cursor: pointer;
    font-size: .82rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.theme-toggle:hover { background: rgba(255,255,255,.18); }

.layout { display: flex; min-height: calc(100vh - 58px); }
.sidebar {
    width: 226px;
    background: var(--superficie);
    border-right: 1px solid var(--gris-borde);
    padding: .75rem 0;
    flex-shrink: 0;
}
.sidebar a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem 1.25rem;
    color: var(--texto-suave);
    font-size: .87rem;
    border-right: 2px solid transparent;
}
.sidebar a .icono { font-size: 1.05rem; width: 1.1rem; text-align: center; color: var(--texto-suave); }
.sidebar a:hover { background: var(--gris-fondo); text-decoration: none; color: var(--texto); }
.sidebar a.active { background: var(--azul); color: #fff; font-weight: 600; border-right-color: var(--azul-oscuro); border-radius: 0 20px 20px 0; margin-right: .6rem; }
.sidebar a.active .icono { color: #fff; }
[data-theme="dark"] .sidebar a.active { color: #fff; }
[data-theme="dark"] .sidebar a.active .icono { color: #fff; }

.saludo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; flex-wrap: wrap; gap: .6rem; }
.saludo-header h1 { margin-bottom: 2px; }
.saludo-sub { color: var(--texto-suave); font-size: .85rem; }
.avatar-circulo {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--azul); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem; flex-shrink: 0;
}

.insignia-grado {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .72rem; flex-shrink: 0;
}
.fila-grado { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; }
.fila-grado-info { flex: 1; min-width: 0; }
.fila-grado-nombre { font-size: .85rem; font-weight: 600; color: var(--texto); }
.fila-grado-barra { height: 6px; background: var(--gris-fondo); border-radius: 3px; margin-top: .3rem; overflow: hidden; max-width: 260px; }
.fila-grado-barra > div { height: 100%; border-radius: 3px; }
.fila-grado-num { font-size: .78rem; color: var(--texto-suave); width: 60px; text-align: right; flex-shrink: 0; }

.dona-leyenda { display: flex; flex-direction: column; gap: .4rem; margin-top: .9rem; font-size: .8rem; }
.dona-leyenda span.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: .4rem; }

.dashboard-dos-columnas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.dashboard-dos-columnas .panel { margin-bottom: 0; }
@media (max-width: 900px) {
    .dashboard-dos-columnas { grid-template-columns: 1fr; }
}
.sidebar-separador {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-suave);
    padding: 1.1rem 1.25rem .35rem;
    opacity: .8;
}

.content { flex: 1; padding: 1.6rem 2rem; max-width: 1300px; }
.content-center { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }

h1 { color: var(--texto); margin-top: 0; font-weight: 500; font-size: 1.5rem; }
.subtitle { color: var(--texto-suave); margin-top: -.5rem; }

/* ---------- Paneles y tarjetas ---------- */
.panel {
    background: var(--superficie);
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sombra);
}
.panel h2 { margin-top: 0; font-size: 1.02rem; font-weight: 500; color: var(--texto); }
.hint { color: var(--texto-suave); font-size: .86rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.card {
    background: var(--superficie);
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    box-shadow: 0 2px 10px rgba(20,30,60,.05);
}
.card-icono { font-size: 1.15rem; color: var(--texto-suave); }
.card-num { font-size: 1.8rem; font-weight: 700; color: var(--texto); margin-top: .3rem; }
.card-label { font-size: .82rem; color: var(--texto-suave); }

/* Tarjetas de color sólido (degradado) para métricas del dashboard */
.card-vivida {
    color: #fff;
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.card-vivida .card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card-vivida .card-icono { color: #fff; opacity: .9; font-size: 1.3rem; }
.card-vivida .card-num { color: #fff; font-size: 1.9rem; font-weight: 700; margin-top: .5rem; }
.card-vivida .card-label { color: rgba(255,255,255,.9); font-size: .8rem; }
.card-vivida .card-sub { color: rgba(255,255,255,.75); font-size: .72rem; margin-top: .1rem; }

.card-azul { background: linear-gradient(135deg, #2e7bc4, var(--azul)); }
.card-verde { background: linear-gradient(135deg, #3fa873, var(--exito-texto)); }
.card-ambar { background: linear-gradient(135deg, #e0a83a, var(--advertencia-texto)); }
.card-rojo { background: linear-gradient(135deg, #d9564c, var(--peligro-texto)); }

.card-alerta { background: var(--peligro-fondo); }
.card-alerta .card-icono, .card-alerta .card-num, .card-alerta .card-label { color: var(--peligro-texto); }
.card-exito { background: var(--exito-fondo); }
.card-exito .card-icono, .card-exito .card-num, .card-exito .card-label { color: var(--exito-texto); }

/* ---------- Avisos / franjas informativas ---------- */
.aviso-franja {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    border-radius: 8px;
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .9rem;
    line-height: 1.5;
}
.aviso-franja i { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }
.aviso-info { background: var(--info-fondo); color: var(--info-texto); border: 1px solid var(--info-borde); }
.aviso-exito { background: var(--exito-fondo); color: var(--exito-texto); border: 1px solid var(--exito-borde); }
.aviso-peligro { background: var(--peligro-fondo); color: var(--peligro-texto); border: 1px solid var(--peligro-borde); }
.aviso-advertencia { background: var(--advertencia-fondo); color: var(--advertencia-texto); border: 1px solid var(--advertencia-borde); }
.aviso-franja h2 { margin: 0 0 .2rem; font-size: .95rem; color: inherit; }
.aviso-franja p { margin: 0; }

/* ---------- Formularios ---------- */
.form-inline { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.form-inline input, .form-inline select {
    padding: .55rem; border: 1px solid var(--gris-borde); border-radius: 6px;
    background: var(--superficie); color: var(--texto);
}
.form-inline button {
    padding: .55rem 1.1rem;
    background: var(--azul);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.checkbox-inline { font-size: .85rem; display: flex; align-items: center; gap: .3rem; }

.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.form-grid label { display: block; font-size: .85rem; color: var(--texto-suave); margin-bottom: .3rem; }
.form-grid select {
    width: 100%; padding: .5rem; border: 1px solid var(--gris-borde); border-radius: 6px;
    background: var(--superficie); color: var(--texto);
}
.form-grid-full { grid-column: 1 / -1; }
.form-grid button {
    padding: .7rem 1.4rem;
    background: var(--azul);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: .6rem .7rem; border-bottom: 1px solid var(--gris-borde); text-align: left; vertical-align: middle; }
.tabla th { background: var(--gris-fondo); color: var(--texto-suave); font-weight: 600; }
.tabla input[type=text], .tabla input[type=number] {
    padding: .35rem; border: 1px solid var(--gris-borde); border-radius: 5px; width: 100%;
    background: var(--superficie); color: var(--texto);
}
.tabla select { background: var(--superficie); color: var(--texto); border: 1px solid var(--gris-borde); border-radius: 5px; }
.tabla button { padding: .35rem .7rem; border: none; border-radius: 5px; background: var(--azul); color: #fff; cursor: pointer; font-size: .82rem; }
.inline-form { display: inline; }
.btn-danger { background: var(--rojo) !important; margin-left: .4rem; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--gris-fondo);
    border: 1px solid var(--gris-borde);
    border-radius: 20px;
    padding: .2rem .5rem .2rem .8rem;
    margin: .15rem;
    font-size: .82rem;
}
.chip-form { display: inline; }
.chip-form button {
    border: none;
    background: transparent;
    color: var(--rojo);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .3rem;
}

.barra-masiva {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    background: var(--gris-fondo);
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    padding: .7rem 1rem;
    margin-bottom: .8rem;
    font-size: .88rem;
}
.barra-masiva select, .barra-masiva input {
    padding: .4rem;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    background: var(--superficie); color: var(--texto);
}
.barra-masiva button {
    padding: .4rem .9rem;
    background: var(--azul);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
#contador-seleccion { font-weight: 600; color: var(--azul-oscuro); min-width: 120px; }
[data-theme="dark"] #contador-seleccion { color: #7fb0ff; }

.paginacion { display: flex; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }
.paginacion a {
    padding: .4rem .8rem;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    color: var(--texto);
}
.paginacion a.pagina-activa { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ---------- Botones generales ---------- */
.btn {
    display: inline-block;
    padding: .55rem 1.1rem;
    background: var(--azul);
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: .9rem;
    border: none;
    cursor: pointer;
}
.btn:hover { background: var(--azul-oscuro); }
.btn-secundario { background: var(--superficie); color: var(--azul) !important; border: 1px solid var(--azul); }
.btn-secundario:hover { background: var(--azul-claro); }
.btn-primary { font-size: 1rem; padding: .8rem 1.6rem; margin-top: 1rem; }
.export-buttons { margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }

.grafica-barras { display: flex; flex-direction: column; gap: .7rem; }
.grafica-fila { display: grid; grid-template-columns: 220px 1fr 50px; align-items: center; gap: .7rem; }
.grafica-etiqueta { font-size: .85rem; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafica-area { color: var(--texto-suave); font-size: .78rem; }
.grafica-barra-fondo { background: var(--gris-fondo); border-radius: 6px; height: 16px; overflow: hidden; }
.grafica-barra-relleno { height: 100%; border-radius: 6px; }
.grafica-valor { font-size: .85rem; text-align: right; font-weight: 600; color: var(--texto); }

/* ---------- Encuesta estudiante ---------- */
.pregunta-bloque {
    border-top: 1px solid var(--gris-borde);
    padding-top: 1.2rem;
    margin-top: 1.2rem;
}
.docente-encabezado { display: flex; align-items: center; gap: 1rem; }
.docente-encabezado h1 { margin-bottom: 0; }
.docente-encabezado .subtitle { margin-top: 0; }
.docente-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--gris-borde); }
.docente-foto-vacia { display: flex; align-items: center; justify-content: center; background: var(--gris-fondo); font-size: 1.8rem; }
.docente-foto-mini { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .5rem; border: 1px solid var(--gris-borde); }
.pregunta-bloque h3 { margin: 0 0 .3rem; color: var(--azul-oscuro); font-size: 1.02rem; }
[data-theme="dark"] .pregunta-bloque h3 { color: #7fb0ff; }
.pregunta-bloque p { margin: 0 0 .8rem; color: var(--texto); }
.escala-opciones { display: flex; flex-direction: column; gap: .5rem; }
.opcion-escala {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    cursor: pointer;
}
.opcion-escala:hover { background: var(--gris-fondo); }
.opcion-escala input { margin: 0; }

.escala-caras {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.opcion-cara {
    flex: 1;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .8rem .4rem;
    border: 3px solid var(--gris-borde);
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    background: var(--superficie);
    transition: transform .1s ease, border-color .15s ease, background .15s ease;
}
.opcion-cara input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion-cara .cara-emoji { font-size: 2.8rem; line-height: 1; }
.opcion-cara .cara-texto { font-size: .78rem; font-weight: 600; color: var(--texto-suave); }
.opcion-cara:hover { transform: translateY(-2px); border-color: var(--azul); }
.opcion-cara:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.opcion-cara:has(input:checked) .cara-texto { color: var(--azul); }
.opcion-cara.cara-seleccionada { border-color: var(--azul); background: var(--azul-claro); }
.opcion-cara.cara-seleccionada .cara-texto { color: var(--azul); }
@media (max-width: 480px) {
    .escala-caras { justify-content: center; }
    .opcion-cara { min-width: 64px; }
    .opcion-cara .cara-emoji { font-size: 2.3rem; }
}
textarea {
    width: 100%;
    padding: .7rem;
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    font-family: inherit;
    font-size: .95rem;
    background: var(--superficie);
    color: var(--texto);
}

.text-center { text-align: center; }

.flash-ok {
    background: #e8f5e9;
    color: #256029;
    border: 1px solid #a5d6a7;
    padding: .8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 600;
}
.progreso-header { display: flex; justify-content: space-between; align-items: baseline; }
.progreso-texto { color: var(--texto-suave); font-size: .9rem; }
.barra-progreso {
    background: var(--gris-borde);
    border-radius: 20px;
    height: 10px;
    overflow: hidden;
    margin: .6rem 0 1rem;
}
.barra-progreso-relleno {
    background: linear-gradient(90deg, var(--azul), var(--verde));
    height: 100%;
    border-radius: 20px;
    transition: width .3s ease;
}

/* ---------- Escala / badges ---------- */
.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 6px;
    font-size: .76rem;
    font-weight: 500;
}
.badge-superior { background: var(--exito-fondo); color: var(--exito-texto); }
.badge-alto { background: var(--exito-fondo); color: var(--exito-texto); opacity: .85; }
.badge-basico { background: var(--advertencia-fondo); color: var(--advertencia-texto); }
.badge-bajo { background: var(--peligro-fondo); color: var(--peligro-texto); }
.badge-sin-datos { background: var(--gris-fondo); color: var(--texto-suave); border: 1px solid var(--gris-borde); }

.semaforo { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.semaforo-superior { background: var(--superior); }
.semaforo-alto { background: var(--alto); }
.semaforo-basico { background: var(--basico); }
.semaforo-bajo { background: var(--bajo); }
.semaforo-sin-datos { background: #999; }

.lista-comentarios { list-style: none; padding: 0; margin: 0; }
.lista-comentarios li {
    padding: .8rem;
    border-bottom: 1px solid var(--gris-borde);
}
.comentario-grado {
    display: inline-block;
    background: var(--gris-fondo);
    border-radius: 10px;
    padding: .1rem .5rem;
    font-size: .75rem;
    color: var(--texto-suave);
    margin-right: .4rem;
}

.pie-institucional {
    text-align: center;
    color: var(--texto-suave);
    font-size: .78rem;
    padding: 1.5rem 1rem 2rem;
}

@media (max-width: 800px) {
    .layout { flex-direction: column; }
    .sidebar { width: 100%; display: flex; overflow-x: auto; padding: .4rem; }
    .sidebar a { padding: .5rem .9rem; white-space: nowrap; }
    .sidebar a.active { border-right: none; border-bottom: 2px solid var(--azul); }
    .form-grid { grid-template-columns: 1fr; }
    .content { padding: 1rem; }
    .grafica-fila { grid-template-columns: 1fr; gap: .3rem; }
    .cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}