:root {
    --bg: #0f1216;
    --panel: #fff;
    --ink: #1c2430;
    --muted: #6b7785;
    --brand: #1f6feb;
    --brand-ink: #fff;
    --line: #e4e8ee;
    --error: #c0392b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: #f4f6f9;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 56px;
    background: var(--bg);
    color: #fff;
}

.brand { font-weight: 700; letter-spacing: .3px; }
.brand small { color: #9fb0c3; font-weight: 400; }

.topnav { display: flex; align-items: center; gap: .75rem; }
.navbuscar { display: inline; margin: 0; }
.navbuscar input {
    padding: .35rem .6rem;
    border: 1px solid #3a4654;
    border-radius: 8px;
    background: #1c2430;
    color: #e7edf4;
    font-size: .88rem;
    width: 150px;
}
.navbuscar input::placeholder { color: #8c9aab; }
.buscador__caja { min-width: 340px; }
.user { color: #cdd7e2; font-size: .9rem; }
.user small { color: #8c9aab; }

.container { max-width: 1100px; margin: 2rem auto; padding: 0 1.25rem; }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.card--narrow { max-width: 420px; margin: 3rem auto; }

h1 { margin: 0 0 .75rem; font-size: 1.4rem; }
.muted { color: var(--muted); }

.field { display: block; margin: 1rem 0; }
.field span { display: block; margin-bottom: .35rem; font-size: .9rem; color: var(--muted); }
.field input {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
}

.btn {
    display: inline-block;
    padding: .6rem 1.1rem;
    border: 0;
    border-radius: 8px;
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}
.btn--ghost { background: transparent; border: 1px solid #3a4654; color: #cdd7e2; padding: .35rem .8rem; }

.btn--microsoft {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    margin: 1.25rem 0;
    background: #2f2f2f;
    color: #fff;
}
.acceso-emergencia { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.acceso-emergencia summary { cursor: pointer; font-size: .9rem; }

/* Mapeo v2 (Doc 05): propuestas, hermanos y administración */
.propuesta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0; }
.chip--prop { font-weight: 700; }
.mapeo__productos .linea__cab { margin-bottom: .25rem; }
.mapeo__check { display: inline-flex; align-items: center; gap: .3rem; margin-right: .6rem; font-size: .9rem; }
.mapeo__senales summary { cursor: pointer; }
.mapeo__senales ul { margin: .3rem 0 0 1.2rem; }
.admin__sala { margin-left: 2rem; }
.admin__sigla { max-width: 9rem; font-family: ui-monospace, monospace; text-transform: uppercase; }

/* Panel de clases */
.clase__alumnos summary { cursor: pointer; font-size: .85rem; }
.clase__alumnos ul { margin: .3rem 0 .3rem 1.2rem; padding: 0; }
.clase__alumnos li { margin: .15rem 0; }
.clase__llena { color: var(--error); font-weight: 700; }

.filtros--chips { align-items: center; gap: .3rem; flex-wrap: wrap; }
.filtros__etiqueta { color: var(--muted); font-size: .85rem; min-width: 3.2rem; }
.stat--alerta .stat__num { color: var(--error); }

.puntocolor { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .35rem; border: 1px solid rgba(0,0,0,.15); vertical-align: baseline; }
.puntocolor--verde { background: #43a047; }
.puntocolor--rojo { background: #e53935; }
.puntocolor--azul { background: #1e88e5; }
.puntocolor--blanco { background: #fafafa; }
.puntocolor--infantil { background: #ab47bc; }
.puntocolor--amarillo { background: #fdd835; }
.puntocolor--turquesa { background: #00acc1; }

.ocupa__celda { min-width: 7rem; }
.ocupa { height: .4rem; background: var(--line); border-radius: 4px; margin-top: .25rem; overflow: hidden; }
.ocupa__fill { height: 100%; background: var(--brand); border-radius: 4px; }
.ocupa--0 { width: 2%; } .ocupa--10 { width: 10%; } .ocupa--20 { width: 20%; }
.ocupa--30 { width: 30%; } .ocupa--40 { width: 40%; } .ocupa--50 { width: 50%; }
.ocupa--60 { width: 60%; } .ocupa--70 { width: 70%; } .ocupa--80 { width: 80%; }
.ocupa--90 { width: 90%; } .ocupa--100 { width: 100%; }
.ocupa--llena { background: var(--error); }

.emails__copiar { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; border: 1px solid var(--line); border-radius: 8px; padding: .5rem; }
.cuerpo-mensaje { width: 100%; box-sizing: border-box; }
.acciones--fila { flex-wrap: wrap; }

/* Tono representativo por lugar (paleta cerrada; la CSP impide colores inline) */
.lugar--azul { border-left: 4px solid #1e88e5; }
.lugar--verde { border-left: 4px solid #43a047; }
.lugar--morado { border-left: 4px solid #8e24aa; }
.lugar--teal { border-left: 4px solid #00897b; }
.lugar--ambar { border-left: 4px solid #ffb300; }
.lugar--rosa { border-left: 4px solid #d81b60; }
.lugar--lima { border-left: 4px solid #9e9d24; }
.lugar--gris { border-left: 4px solid #757575; }
.lugarpunto { display: inline-block; width: .65rem; height: .65rem; border-radius: 3px; margin-right: .4rem; }
.lugarpunto--azul { background: #1e88e5; } .lugarpunto--verde { background: #43a047; }
.lugarpunto--morado { background: #8e24aa; } .lugarpunto--teal { background: #00897b; }
.lugarpunto--ambar { background: #ffb300; } .lugarpunto--rosa { background: #d81b60; }
.lugarpunto--lima { background: #9e9d24; } .lugarpunto--gris { background: #757575; }

.separador-fino { border: 0; border-top: 1px solid var(--line); margin: 2rem 0 1rem; }
.seccion--apagada { color: var(--muted); }

/* Economía v2 (Doc 06): dashboard con Chart.js y listados */
.grafica__marco { position: relative; height: 340px; }
.dosColumnas { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .dosColumnas { grid-template-columns: 1fr; } }
.stat--activo { outline: 2px solid var(--brand); }
.fila--anulada td { opacity: .45; text-decoration: line-through; }
.filtros__importe { max-width: 6.5rem; }

/* Suite de herramientas: tablón y widget Hoy */
.lista-simple { margin: 0; padding-left: 1.1rem; }
.lista-simple li { margin: .3rem 0; }
.tarea { padding: 1rem 1.25rem; }
.tarea--vencida { border-left: 4px solid var(--error); }
.chip--vencida { background: #fdecea; color: var(--error); }
.campo-ancho { flex: 1; min-width: 16rem; }
.campo-ancho input { width: 100%; }

/* Fichas editables: símbolo discreto de padres separados y clases por curso */
.separados { color: #8e24aa; font-size: .8em; vertical-align: super; margin-left: .3rem; cursor: help; }
.curso__titulo { margin: .6rem .9rem .2rem; font-size: .95rem; color: var(--muted); }
.tutoredita { border-top: 1px dashed var(--line); padding-top: .6rem; margin-top: .6rem; }
.chip--archivado { opacity: .55; text-decoration: line-through; }
.stat--apagado .stat__num, .stat--apagado .stat__label { color: var(--muted); }
.turno--vivo td { background: #e8f5e9; }

.alert { padding: .6rem .8rem; border-radius: 8px; margin: .75rem 0; }
.alert--error { background: #fdecea; color: var(--error); border: 1px solid #f5c6c0; }
.alert--ok { background: #e6f6ec; color: #1d7a3e; border: 1px solid #bfe5cc; }
.alert--aviso { background: #fdf3e0; color: #9a6a08; border: 1px solid #f0e3b4; }
.acciones { display: flex; gap: .35rem; }
.acciones form { margin: 0; }
.familia { margin-bottom: 1rem; }
.familia__nombre { margin: 0 0 .4rem; }
.tutor { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .6rem; }
.tutor__contactos { display: flex; gap: .35rem; flex-wrap: wrap; }
.comentario { font-size: .85rem; margin-top: .25rem; }
.mapeo { margin-bottom: 1rem; }
.mapeo__fila { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin: .5rem 0; }
.mapeo__fila label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--muted); }
.mapeo__fila input, .mapeo__fila select { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; background: var(--panel); }
.mapeo__nueva { margin: .5rem 0; }
.mapeo__nueva summary { cursor: pointer; color: var(--brand); }
.mapeo__ignorar { margin-top: .5rem; }
.notaform { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.notaform label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--muted); }
.notaform select, .notaform textarea { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; background: var(--panel); }
.notaform__texto { flex: 1; min-width: 260px; }
.notaform__texto textarea { width: 100%; resize: vertical; }
.notaitem { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; padding: .45rem 0; border-top: 1px solid var(--line); }
.moverform { display: flex; gap: .3rem; align-items: center; }
.moverform select { padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; max-width: 220px; }
.logoutform { display: inline; margin: 0; }
.logoutform .btn { cursor: pointer; }
.errordetalle {
    margin-top: 1rem;
    padding: .75rem;
    background: #f4f6f9;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: .8rem;
    overflow-x: auto;
    white-space: pre-wrap;
}

/* --- Navegación --- */
.navlink { color: #cdd7e2; text-decoration: none; padding: .35rem .65rem; border-radius: 6px; font-size: .95rem; }
.navlink:hover { background: #232c38; color: #fff; }

/* --- Titulares --- */
.pagetitle { margin: 0 0 1rem; font-size: 1.45rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.card h2 { font-size: 1.02rem; margin: 0 0 .75rem; }
.seccion { margin: 1.5rem 0 .75rem; font-size: 1.1rem; }
.volver { color: var(--muted); text-decoration: none; }
.volver:hover { color: var(--brand); }

/* --- Tarjetas de estadísticas --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
a.stat:hover { border-color: var(--brand); }
.stat__num { font-size: 1.7rem; font-weight: 700; }
.stat__label { color: var(--muted); font-size: .9rem; }
.stat--atencion { border-color: #e8b93c; background: #fffaf0; }
.detallecol { font-size: .82rem; max-width: 340px; }

/* --- Filtros --- */
.filtros { display: flex; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }
.filtros input, .filtros select {
    padding: .5rem .65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: .95rem;
    background: var(--panel);
}
.filtros input[type="search"] { min-width: 220px; }

/* --- Tablas --- */
.card--table { padding: 0; overflow: auto; max-height: 80vh; }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
/* Cabecera fija al hacer scroll y celdas que quiebran: la tabla se ve entera. */
.tabla th { position: sticky; top: 0; z-index: 1; }
.tabla td { word-break: break-word; overflow-wrap: anywhere; max-width: 16rem; }
.tabla th {
    text-align: left;
    padding: .65rem .9rem;
    border-bottom: 2px solid var(--line);
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}
.tabla td { padding: .55rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }
.tabla a { color: var(--brand); text-decoration: none; }

/* --- Badges y chips --- */
.badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge--ok { background: #e6f6ec; color: #1d7a3e; }
.badge--info { background: #e8f0fe; color: #1d4fd7; }
.badge--warn { background: #fdf3e0; color: #9a6a08; }
.badge--bad { background: #fdecea; color: #b3261e; }
.badge--neutral { background: #eef1f5; color: #5b6878; }
.chip {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    background: #eef1f5;
    color: #5b6878;
    margin-left: .35rem;
}

/* --- Paginación --- */
.paginacion { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
.btn--ghost2 { background: var(--panel); color: var(--brand); border: 1px solid var(--line); }
.btn--mini { padding: .25rem .6rem; font-size: .82rem; }

/* --- Detalle --- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; }
.datos dt { color: var(--muted); }
.datos dd { margin: 0; }
.linea { margin-bottom: 1rem; }
.linea__cab { display: flex; gap: .75rem; align-items: baseline; margin-bottom: .6rem; flex-wrap: wrap; }
.linea__total { margin-left: auto; font-weight: 600; }
.notacliente { background: #fdf8e8; border: 1px solid #f0e3b4; border-radius: 8px; padding: .6rem .8rem; }