/* CREA Kids AI Library · estilos
   Paleta: papel cálido, tinta azul profunda y los colores de los 6 temas PEP. */

@font-face { font-family: "Fraunces"; src: url("../fuentes/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fuentes/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
    --papel: #f6efe2; --papel-2: #efe5d2; --tinta: #1f2a44; --tinta-2: #3b4768;
    --suave: #6b6f7d; --linea: #ded3bd; --coral: #e8674a; --coral-2: #cf5237;
    --musgo: #4f7a4a; --mostaza: #d9a441; --cielo: #4a7ab5; --blanco: #fff;
    --radio: 14px; --sombra: 0 1px 0 #e6dcc6;
    --display: "Fraunces", Georgia, serif; --texto: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
body {
    margin: 0; font: 16px/1.5 var(--texto); color: var(--tinta); background: var(--papel);
    background-image: radial-gradient(circle at 20% 10%, rgb(255 255 255 / .5), transparent 40%),
                      radial-gradient(circle at 90% 80%, rgb(232 103 74 / .06), transparent 35%);
    background-attachment: fixed; -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
h2 { font-size: 1.3rem; }
p { margin: 0; }
a { color: inherit; }
code { background: var(--papel-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.suave { color: var(--suave); }
.sobretitulo { font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--coral); }
.mostaza { color: var(--mostaza); }
.pila > * + * { margin-top: 16px; }
.texto-error { color: var(--coral-2); }

/* ---------- Botones y formularios ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none;
    font: 800 .9rem var(--texto); background: var(--tinta); color: var(--papel);
    box-shadow: 0 2px 0 #0d1426; transition: background .15s, transform .05s;
}
.boton:hover { background: var(--tinta-2); }
.boton:active { transform: translateY(1px); }
.boton.secundario { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); box-shadow: none; }
.boton.fantasma { background: transparent; color: var(--tinta-2); box-shadow: none; }
.boton.fantasma:hover { background: var(--papel-2); }
.boton.ancho { width: 100%; }

.campo { display: block; }
.campo > span { display: block; font-size: .875rem; font-weight: 800; color: var(--tinta-2); margin-bottom: 6px; }
.campo small { display: block; font-size: .78rem; color: var(--suave); margin-top: 5px; }
.campo small.error-campo { color: var(--coral-2); font-weight: 700; }
input:not([type=checkbox]), select, textarea {
    width: 100%; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 12px;
    background: var(--blanco); color: var(--tinta); font: 15px var(--texto);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta-2); box-shadow: 0 0 0 4px rgb(31 42 68 / .1); }
input:disabled, select:disabled { background: var(--papel-2); color: var(--suave); }
.casilla { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--papel-2); border-radius: 12px; }
.casilla input { width: 18px; height: 18px; accent-color: var(--tinta); }
.acciones { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }

.aviso { padding: 10px 14px; border-radius: 12px; border: 1px solid; font-size: .92rem; margin-bottom: 16px; }
.aviso-error { background: rgb(232 103 74 / .1); color: var(--coral-2); border-color: rgb(232 103 74 / .3); }
.aviso-exito { background: rgb(79 122 74 / .1); color: var(--musgo); border-color: rgb(79 122 74 / .3); }

/* ---------- Tarjetas ---------- */
.tarjeta { background: rgb(255 255 255 / .72); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); padding: 24px; margin-bottom: 20px; }
.tarjeta-oscura { display: block; background: var(--tinta); color: var(--papel); border-radius: 18px; padding: 24px; text-decoration: none; margin-bottom: 20px; }
.tarjeta-oscura:hover { background: var(--tinta-2); }
.tarjeta-oscura p { color: rgb(246 239 226 / .7); margin-top: 8px; }
.tarjeta-oscura .enlace { display: inline-block; margin-top: 16px; font-weight: 800; color: var(--mostaza); }
.dos-columnas { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.puntos { margin: 12px 0 0; padding: 0; list-style: none; }
.puntos li { position: relative; padding-left: 18px; margin: 6px 0; }
.puntos li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; }
.ficha > span:nth-child(odd) { color: var(--suave); }
.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cabecera .suave { margin-top: 6px; max-width: 42rem; }
.volver { font-size: .9rem; font-weight: 700; color: var(--suave); text-decoration: none; }
.formulario { max-width: 40rem; }

/* ---------- Temas PEP ---------- */
.temas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 16px; }
.tema { display: flex; gap: 12px; align-items: center; padding: 12px; background: rgb(246 239 226 / .7); border-radius: 12px; }
.tema .barra { width: 8px; align-self: stretch; min-height: 40px; border-radius: 99px; }
.tema strong { display: block; line-height: 1.3; }
.tema small { color: var(--suave); }

/* ---------- Listas de usuarios ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.filtros input { flex: 1 1 240px; width: auto; }
.filtros select { flex: 0 1 220px; width: auto; }
.lista { padding: 0; overflow: hidden; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 20px; border-top: 1px solid var(--linea); }
.fila:first-child { border-top: 0; }
.fila.inactivo { opacity: .55; }
.avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--papel-2); font: 600 1rem var(--display); }
.fila .datos { flex: 1 1 200px; min-width: 0; }
.fila .datos strong, .fila .datos span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .datos small { font-weight: 400; color: var(--suave); }
.fila .datos span { font-size: .88rem; color: var(--suave); }
.fecha { width: 110px; text-align: right; font-size: .88rem; color: var(--suave); }
.insignia { padding: 2px 10px; border-radius: 99px; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.rol-admin { background: var(--tinta); color: var(--papel); }
.rol-bibliotecario { background: rgb(217 164 65 / .25); color: #7a5510; }
.rol-docente { background: rgb(74 122 181 / .15); color: var(--cielo); }
.inactiva { background: rgb(232 103 74 / .15); color: var(--coral-2); }
.solo-google { background: var(--papel-2); color: var(--suave); }
.vacio { padding: 40px; text-align: center; color: var(--suave); }

/* ---------- Estructura con menú lateral ---------- */
.app { display: grid; grid-template-columns: 17rem 1fr; min-height: 100dvh; }
.lateral { background: var(--tinta); color: var(--papel); padding: 20px; display: flex; flex-direction: column; gap: 32px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca > svg { width: 34px; height: 34px; color: var(--mostaza); flex: none; }
.marca strong { display: block; font: 600 1.15rem var(--display); }
.marca small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgb(246 239 226 / .5); }
.lateral nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-weight: 700; color: rgb(246 239 226 / .88); }
.nav-item svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.nav-item:hover { background: rgb(255 255 255 / .08); }
.nav-item.activo { background: var(--papel); color: var(--tinta); }
.nav-item.proximo { color: rgb(246 239 226 / .4); font-weight: 600; }
.nav-item em { margin-left: auto; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 1px solid rgb(246 239 226 / .15); border-radius: 99px; padding: 0 8px; }
.quien { margin-top: auto; border-top: 1px solid rgb(255 255 255 / .1); padding-top: 16px; }
.quien strong, .quien span { display: block; }
.quien span { font-size: .88rem; color: rgb(246 239 226 / .6); }
.salir { margin-top: 10px; padding: 0; background: none; border: 0; color: rgb(246 239 226 / .7); font: 700 .88rem var(--texto); cursor: pointer; }
.salir:hover { color: var(--coral); }
.principal { min-width: 0; }
.contenido { max-width: 72rem; margin: 0 auto; padding: 32px; }
.barra-movil, .cerrar-menu, .velo { display: none; }

@media (max-width: 900px) {
    .app { display: block; }
    .lateral { position: fixed; inset: 0 auto 0 0; width: 18rem; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
    .menu-toggle:checked + .app .lateral { transform: none; }
    .menu-toggle:checked + .app .velo { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(31 42 68 / .4); }
    .cerrar-menu { display: block; margin-left: auto; cursor: pointer; font-size: 1.2rem; }
    .barra-movil { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--linea); font: 600 1rem var(--display); }
    .barra-movil label { cursor: pointer; font-size: 1.4rem; line-height: 1; }
    .contenido { padding: 24px 16px; }
    .fecha { display: none; }
    .ficha { grid-template-columns: 1fr; gap: 2px; }
    .ficha > span:nth-child(odd):not(:first-child) { margin-top: 10px; }
}

/* ---------- Login ---------- */
.login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100dvh; }
.login-arte { background: var(--tinta); color: var(--papel); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.login-arte h1 { font-size: clamp(2.4rem, 4vw, 3.2rem); max-width: 28rem; line-height: 1.05; }
.login-arte h1 em { font-style: normal; color: var(--coral); }
.login-arte p:not(.sobretitulo) { color: rgb(246 239 226 / .7); max-width: 24rem; margin-top: 20px; }
.lomos { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.lomos span { width: 22px; border-radius: 3px 3px 1px 1px; box-shadow: inset -3px 0 0 rgb(0 0 0 / .12); }
.lomos i { flex: 1; height: 2px; background: rgb(246 239 226 / .2); }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.caja { width: 100%; max-width: 22rem; }
.caja h2 { font-size: 1.9rem; margin-top: 4px; }
.caja form { margin-top: 28px; }
.separador { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.google { display: flex; justify-content: center; min-height: 44px; }
.solo-movil { display: none; }
@media (max-width: 900px) {
    .login { grid-template-columns: 1fr; }
    .login-arte { display: none; }
    .solo-movil { display: block; }
}

/* ---------- Instalador y errores ---------- */
.instalador { padding: 40px 16px; }
.caja-ancha { max-width: 46rem; margin: 0 auto; }
.caja-ancha > h1 { margin: 6px 0 8px; }
.caja-ancha > .suave, .caja-ancha > p { margin-bottom: 20px; }
.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ancho-total { grid-column: 1 / -1; }
.requisitos { list-style: none; padding: 0; margin: 12px 0 0; }
.requisitos li { padding: 4px 0; }
.requisitos span { display: inline-block; width: 24px; font-weight: 900; }
.requisitos .ok span { color: var(--musgo); }
.requisitos .falta span { color: var(--coral-2); }
.requisitos small { color: var(--suave); }
.codigo { width: 100%; font: 13px/1.5 ui-monospace, Consolas, monospace; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 12px; white-space: pre-wrap; }
.error-pagina { max-width: 34rem; margin: 10vh auto; padding: 0 16px; text-align: center; }
.error-pagina .codigo-error { font: 700 4.5rem var(--display); color: var(--coral); }
.error-pagina h1 { margin-bottom: 10px; }
.error-pagina .boton { margin-top: 24px; }
details summary { cursor: pointer; font-weight: 700; color: var(--tinta-2); }

/* ---------- Importación ---------- */
.pequeno { font-size: .85rem; margin-top: 10px; }
.margen { margin: 16px 20px; }
.aviso-info { background: rgb(74 122 181 / .1); color: #2f5a8f; border-color: rgb(74 122 181 / .3); }
.zona-archivo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px 16px; border: 2px dashed var(--linea); border-radius: 14px; background: rgb(246 239 226 / .6); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.zona-archivo:hover { border-color: var(--tinta-2); background: var(--papel); }
.zona-archivo input { width: auto; max-width: 100%; border: 0; background: transparent; padding: 0; margin-bottom: 8px; }
.zona-archivo span { color: var(--suave); font-size: .9rem; }
.zona-archivo .nombre-archivo { font-style: normal; font-weight: 800; color: var(--musgo); }
.ayuda summary { font: 600 1.1rem var(--display); color: var(--tinta); }
.ayuda[open] summary { margin-bottom: 12px; }
.ayuda p + p { margin-top: 10px; }
.ayuda .codigo { margin-top: 8px; font-size: 12px; overflow-x: auto; white-space: pre; }
.titulo-lista { padding: 18px 20px 10px; }
.titulo-lista.con-accion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fila-enlace { text-decoration: none; }
.fila-enlace:hover { background: rgb(246 239 226 / .7); }
.formato { width: 58px; flex: none; text-align: center; padding: 6px 0; border-radius: 8px; background: var(--papel-2); font-size: .7rem; font-weight: 900; letter-spacing: .05em; color: var(--tinta-2); }
.cifras { font-size: .85rem; color: var(--suave); }
.estado-ok { background: rgb(79 122 74 / .15); color: var(--musgo); }
.estado-aviso { background: rgb(217 164 65 / .22); color: #7a5510; }
.estado-error { background: rgb(232 103 74 / .15); color: var(--coral-2); }
.estado-pendiente { background: rgb(74 122 181 / .15); color: var(--cielo); }
.estado-apagado { background: var(--papel-2); color: var(--suave); }
.pasos { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: paso; flex-wrap: wrap; }
.pasos li { counter-increment: paso; padding: 4px 12px 4px 8px; border-radius: 99px; font-size: .8rem; font-weight: 700; color: var(--suave); background: var(--papel-2); }
.pasos li::before { content: counter(paso); display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--linea); font-size: .7rem; }
.pasos li.hecho { color: var(--musgo); }
.pasos li.hecho::before { content: "✓"; background: rgb(79 122 74 / .2); }
.pasos li.actual { background: var(--tinta); color: var(--papel); }
.pasos li.actual::before { background: var(--coral); color: #fff; }
.mapeo .datos span { white-space: normal; }
.mapeo select { flex: 0 1 280px; width: auto; }
.mapeo.asignada { background: rgb(79 122 74 / .06); }
.mapeo.asignada select { border-color: rgb(79 122 74 / .5); }
.cifras-grandes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 20px; }
.cifras-grandes > div { background: rgb(255 255 255 / .72); border: 1px solid var(--linea); border-radius: 16px; padding: 16px 18px; }
.cifras-grandes strong { display: block; font: 600 2rem/1.1 var(--display); }
.cifras-grandes span { color: var(--suave); font-size: .88rem; }
.cifras-grandes .con-error strong { color: var(--coral-2); }
.cifras-grandes .con-aviso strong { color: #a0741c; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); padding: 8px 20px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 10px 20px; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla td:first-child { width: 1%; white-space: nowrap; color: var(--suave); }
.tabla tbody tr:first-child td { border-top: 0; }
.barra-progreso { height: 14px; border-radius: 99px; background: var(--papel-2); overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: linear-gradient(90deg, var(--musgo), #6fa266); border-radius: 99px; transition: width .3s; }
.tema-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; }
.tema-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--suave)); }
.estadisticas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 20px; }
.progreso-clasif { margin-top: 14px; }
.progreso-clasif .barra-progreso { height: 10px; margin-top: 6px; }
@media (max-width: 900px) {
    .tabla th, .tabla td { padding: 8px 12px; }
    .mapeo select { flex: 1 1 100%; }
}
@media (min-width: 901px) { .app { background: linear-gradient(to right, var(--tinta) 17rem, transparent 17rem); } }