/* Tema base de Eragintza.
   Los colores salen de estas variables: cambiando --app-primary cambia toda la
   aplicación (navbar, botones, login, tarjetas del escritorio). */
:root {
    --app-primary: #2F6F62;
    --app-primary-dark: #245449;
    --app-primary-light: #4a8d7f;
    --app-bg: #f8f9fa;
    --app-border: #dee2e6;
    /* Altura real del `.app-navbar` (`sticky-top`, z-index más alto que
       cualquier otra cosa pegajosa): todo lo que también sea sticky tiene
       que pegarse DEBAJO de esto, con `top: var(--app-navbar-h)`, o queda
       tapado por el menú en vez de debajo de él. */
    --app-navbar-h: 56px;
}

body {
    background: var(--app-bg);
    font-size: 14px;
    color: #212529;
}

/* ── Navbar ─────────────────────────────────────────────── */
.app-navbar { background: var(--app-primary); }
.app-navbar .navbar-brand,
.app-navbar .nav-link { color: #fff; }
.app-navbar .nav-link { font-size: .9rem; }
.app-navbar .nav-link:hover { color: #dff0eb; }

.app-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: var(--app-primary);
}

/* ── Migas de pan ───────────────────────────────────────── */
.app-breadcrumb {
    background: #f1f3f5;
    padding: .5rem 1rem;
    font-size: 13px;
    border-bottom: 1px solid var(--app-border);
}
.app-breadcrumb a { color: var(--app-primary); text-decoration: none; }
.app-breadcrumb a:hover { text-decoration: underline; }

/* ── Botones ────────────────────────────────────────────── */
.btn-app-primary {
    background: var(--app-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
}
.btn-app-primary:hover { background: var(--app-primary-dark); color: #fff; }

.btn-app-secondary {
    background: #fff;
    border: 1px solid var(--app-border);
    color: #495057;
    border-radius: 6px;
}
.btn-app-secondary:hover { background: #f1f3f5; color: #212529; }

/* ── Controles de formulario ────────────────────────────── */
/* Bootstrap pinta de azul las casillas e interruptores marcados; aquí van del
   color de la aplicación para que no desentonen con el resto. */
.form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}
.form-check-input:focus {
    border-color: var(--app-primary-light);
    box-shadow: 0 0 0 .2rem rgba(47, 111, 98, .15);
}

/* ── Pestañas ───────────────────────────────────────────── */
.nav-tabs .nav-link { color: #6c757d; }
.nav-tabs .nav-link:hover { color: var(--app-primary); }
.nav-tabs .nav-link.active { color: var(--app-primary); font-weight: 600; }

/* ── Cabecera de página ─────────────────────────────────── */
.app-page-header {
    background: #fff;
    border-bottom: 1px solid var(--app-border);
    padding: 1rem 1.5rem;
}
.app-page-title { font-size: 20px; font-weight: 600; margin: 0; }

/* ── Escritorio ─────────────────────────────────────────── */
.dash-welcome { font-size: 2rem; font-weight: 400; }
.dash-welcome strong { font-weight: 700; }
.dash-sub { color: #6c757d; }

.app-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 2rem 1rem;
    text-align: center;
    text-decoration: none;
    color: #212529;
    transition: all .18s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(47, 111, 98, .16);
    border-color: var(--app-primary-light);
    color: var(--app-primary);
}
.app-card .app-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 1rem;
    color: var(--app-primary);
}
.app-card .app-name { font-size: 1rem; font-weight: 600; margin: 0; }

.app-card.disabled { opacity: .5; cursor: not-allowed; }
.app-card.disabled:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    border-color: #eef0f2;
    color: #212529;
}

/* Tarjeta punteada de "Nueva app" */
.app-card-add {
    border: 2px dashed #d4d7db;
    box-shadow: none;
    color: #8a9099;
    background: transparent;
}
.app-card-add .app-icon,
.app-card-add:hover { color: var(--app-primary); }
.app-card-add:hover {
    border-color: var(--app-primary-light);
    transform: translateY(-4px);
    box-shadow: none;
}

/* ── Login ──────────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
}
.login-card {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}

/* ── Formularios en ficha ───────────────────────────────── */
.form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    padding: 1.5rem 2rem 2rem;
}
.form-label-app { font-weight: 600; font-size: .82rem; color: #344050; margin-bottom: .35rem; }
.form-control-app, .form-select-app {
    border-radius: 10px;
    border: 1px solid #e3e6ea;
    padding: .55rem .9rem;
    font-size: .9rem;
}
.form-control-app:focus, .form-select-app:focus {
    border-color: var(--app-primary-light);
    box-shadow: 0 0 0 .2rem rgba(47, 111, 98, .12);
}
.subsection-title {
    font-weight: 700;
    font-size: .9rem;
    color: var(--app-primary);
    border-bottom: 1px solid #eef0f2;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

/* ── Ficha densa (estilo del formulario de Notes) ────────
   Las fichas del sistema antiguo son rejillas de etiqueta + valor muy
   apretadas: se ve todo de un vistazo, sin desplazar la página. Se reproduce
   esa densidad porque es lo que la gente tiene en la mano todos los días. */
.ficha-bloque {
    background: #fff;
    border: 1px solid #dfe3e6;
    border-radius: 6px;
    overflow: hidden;
}
.ficha-bloque + .ficha-bloque { margin-top: .6rem; }

.ficha-titulo {
    background: var(--app-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: .3rem .6rem;
}
.ficha-titulo.alerta { background: #b02a37; }

/* La cabecera de la ficha lleva el nombre de la persona: es lo primero que se
   busca al abrirla, así que va mucho mayor que el resto de títulos de bloque. */
.ficha-titulo.nombre {
    font-size: 1.15rem;
    letter-spacing: .3px;
    padding: .5rem .7rem;
}

.ficha-fila {
    display: grid;
    grid-template-columns: 44% 56%;
    border-top: 1px solid #edf0f2;
}
.ficha-bloque .ficha-fila:first-of-type { border-top: 0; }

.ficha-et {
    background: #f4f6f7;
    color: #33475b;
    font-weight: 600;
    font-size: .75rem;
    padding: .3rem .55rem;
    display: flex;
    align-items: center;
    border-right: 1px solid #edf0f2;
}
.ficha-val {
    padding: .3rem .55rem;
    font-size: .8rem;
    min-height: 28px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}
.ficha-val.vacio { color: #b6bec5; }
.ficha-val.destacado { font-weight: 700; color: var(--app-primary); }

/* Sí / No en columna de valor, como los radios del formulario original. */
.ficha-si { color: #1b7a52; font-weight: 600; }
.ficha-no { color: #98a2ab; }

/* ── Tabla de usuarios con edición en línea ─────────────── */
/* Los campos parecen texto plano hasta que el ratón pasa por la fila: así la
   tabla se lee como una tabla y no como un formulario gigante. */
.user-row:hover { background: #f8f9fa; }
.user-row:hover .edit-field {
    border: 1px solid var(--app-border) !important;
    background: #fff !important;
}
.edit-field { max-width: 200px; }
.password-input { max-width: 160px; font-size: .85rem; }

/* --- PIA + OE ------------------------------------------------------------
   La entrevista y el GENCAT son cuestionarios largos: se leen de arriba
   abajo, no en dos columnas como el resto de la ficha. El enunciado va en
   gris y pequeño y la respuesta destacada debajo, para poder recorrer sólo
   las respuestas sin volver a leer las preguntas. */
.pia-epigrafe {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-primary);
    margin: .6rem 0 .25rem;
}
.pia-pregunta {
    padding: .35rem .5rem;
    border-left: 2px solid #e6e6e6;
    margin-bottom: .3rem;
}
.pia-enunciado {
    font-size: .78rem;
    color: #6c757d;
    line-height: 1.35;
}
.pia-respuesta {
    font-size: .85rem;
    white-space: pre-wrap;
}
/* GENCAT: 69 ítems con un radio por columna, como el cuadernillo en papel. */
.gencat-items thead th {
    font-weight: 600;
    font-size: .72rem;
    line-height: 1.15;
}
.gencat-items td input[type="radio"] {
    width: 1.05em;
    height: 1.05em;
    margin: 0;
}
/* Cierre de cada dimensión: directa, estándar y percentil en una línea. */
.gencat-puntuacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem 1.5rem;
    padding: .6rem .9rem;
    border-top: 1px solid var(--app-border);
    background: #fafbfb;
}
.gencat-puntuacion > div { display: flex; align-items: center; gap: .5rem; }
.gencat-puntuacion-et { font-size: .78rem; font-weight: 600; color: #344050; margin: 0; }
.gencat-puntuacion-directa { font-size: 1rem; font-weight: 700; color: var(--app-primary); min-width: 2ch; }
.gencat-puntuacion .form-control-app { width: 5.5rem; padding: .3rem .5rem; font-size: .85rem; }
/* Tablas con un cuadro de texto en cada celda (resumen del GENCAT,
   objetivos, incidencias y modificaciones del PIA): columnas de ancho fijo
   —`table-layout: fixed`, con el ancho de cada una puesto en el `<th>`—,
   iguales en todas las filas. Lo único que crece es el alto: los `textarea`
   se ajustan solos según lo que se escribe (`autogrow.js`), así que una
   fila con mucho texto se hace más alta sin ensanchar ninguna columna. */
.gencat-resumen, .tabla-compacta { table-layout: fixed; }
.gencat-resumen td, .gencat-resumen th,
.tabla-compacta td, .tabla-compacta th { padding-top: .25rem; padding-bottom: .25rem; }
.gencat-resumen th.text-center, .gencat-resumen td.text-center { width: 5rem; }
.gencat-resumen textarea.form-control-app,
.tabla-compacta textarea.form-control-app,
.tabla-compacta input.form-control-app {
    width: 100%;
    padding: .25rem .5rem;
    font-size: .8rem;
}
.tabla-compacta textarea.form-control-app,
.gencat-resumen textarea.form-control-app {
    min-height: 3.2em;
    resize: none;
    overflow: hidden;
}
/* Cabecera fija de un formulario por pasos (GENCAT, entrevista...): va
   encima de los pasos, visible todo el rato, así que se comprime bastante
   más que el resto del formulario — son datos de una sola vez, no hace
   falta que compitan en tamaño con lo que se rellena paso a paso. */
.cabecera-compacta .form-label-app {
    font-size: .68rem;
    margin-bottom: .15rem;
}
.cabecera-compacta .form-control-app,
.cabecera-compacta .form-select-app {
    padding: .3rem .55rem;
    font-size: .8rem;
}
.cabecera-compacta .form-section-body { padding: .6rem .75rem; }
.cabecera-compacta .form-section-header { padding: .5rem .75rem; }
.cabecera-compacta .form-section-icon { width: 1.7rem; height: 1.7rem; font-size: .85rem; }
.cabecera-compacta .form-section-title { font-size: .85rem; }
.cabecera-compacta .form-check-label { font-size: .82rem; }
.pia-respuesta.vacio { color: #adb5bd; }
.pia-objetivo {
    border: 1px solid #e6e6e6;
    border-radius: .3rem;
    padding: .5rem;
    margin-bottom: .5rem;
}
.pia-objetivo-usu {
    font-size: .82rem;
    font-style: italic;
    color: #6c757d;
    margin: .2rem 0 .35rem;
}
.pia-log {
    border-top: 1px dashed #e0e0e0;
    margin-top: .4rem;
    padding-top: .35rem;
    font-size: .78rem;
}

/* ── Formulario de alta/edición de expediente, por secciones ───────────────
   El formulario de Notes era una rejilla densa de campos. Para el alta no
   interesa esa densidad —es la primera vez que alguien lo rellena, no una
   consulta rápida—, así que aquí se agrupa en tarjetas con icono y se añade
   un índice arriba para saltar directo a la sección que falta. */
.form-nav {
    position: sticky;
    top: var(--app-navbar-h);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    background: var(--app-bg);
    padding: .6rem 0 .9rem;
    margin-bottom: .25rem;
}
.form-nav a {
    font-size: .78rem;
    font-weight: 600;
    color: var(--app-primary-dark);
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    padding: .3rem .8rem;
    text-decoration: none;
    white-space: nowrap;
}
.form-nav a:hover { background: #eef5f3; border-color: var(--app-primary-light); }

.form-section {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    margin-bottom: 1rem;
    overflow: hidden;
    scroll-margin-top: 3.2rem; /* para que el anchor no quede bajo el .form-nav */
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.25rem;
    background: #fafbfb;
    border-bottom: 1px solid #eef0f2;
}
.form-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #e7f1ee;
    color: var(--app-primary);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.form-section-title { font-weight: 700; font-size: .95rem; color: #212529; }
.form-section-sub { font-size: .78rem; color: #6c757d; }
.form-section-body { padding: 1.25rem; }

/* Casillas como interruptor: ya es el patrón de "activo" en Usuarios y
   Maestros, así que un booleano aquí se reconoce igual a simple vista. */
.form-check.form-switch { padding-left: 2.6em; }
.form-check.form-switch .form-check-input { width: 2.1em; margin-left: -2.6em; }

/* Foto: redonda, con una inicial de respaldo si todavía no hay ninguna. */
.foto-preview {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--app-border);
    background: #e7f1ee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-primary);
    font-size: 1.8rem;
    flex-shrink: 0;
}

/* ── Campo multivalor en líneas sueltas (multilinea.js) ────────────────── */
.multilinea-filas .input-group:last-child { margin-bottom: 0 !important; }
.multilinea-add { width: 100%; }

/* ── Formulario por pasos (wizard) ──────────────────────────────────────
   Un bloque a la vez, con flecha para avanzar: en vez de bajar y bajar por
   un formulario largo, se rellena un apartado y se pasa al siguiente. */
.wizard-steps {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    background: var(--app-bg);
    padding: .6rem 0 .9rem;
    margin-bottom: .25rem;
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    padding: .3rem .8rem .3rem .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
}
.wizard-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #eef0f2;
    color: #6c757d;
    font-size: .72rem;
}
.wizard-step.activo { border-color: var(--app-primary); color: var(--app-primary-dark); }
.wizard-step.activo .wizard-step-num { background: var(--app-primary); color: #fff; }
.wizard-step.completado .wizard-step-num { background: #cfe3de; color: var(--app-primary-dark); }

.wizard-contador {
    font-size: .78rem;
    color: #6c757d;
    margin-bottom: .5rem;
}


/* ── Campo sí/no como "chip" clicable ───────────────────────────────────
   El interruptor (.form-switch) por defecto queda pálido y es difícil de
   alinear con un select o un input que lleva etiqueta encima. Esto es una
   casilla con más presencia visual, y con un hueco igual que el de una
   etiqueta normal arriba, para que quede exactamente a la misma altura que
   el campo de al lado en vez de intentar centrarlo a ojo.

       <label class="form-label-app d-block">&nbsp;</label>
       <label class="campo-toggle">{{ form.carnet }}<span class="campo-toggle-icono">
       <i class="bi bi-check-lg"></i></span>Carnet</label>

   El estado visual lo pone `campo-toggle.js` añadiendo la clase .activo al
   marcar la casilla, no :has() — por si hace falta que funcione en un
   navegador más viejo. */
.campo-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    height: calc(1.5em + 1.1rem + 2px); /* misma altura que .form-control-app */
    padding: 0 .9rem;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: .85rem;
    color: #6c757d;
    background: #fff;
    user-select: none;
    transition: background .15s, border-color .15s, color .15s;
}
.campo-toggle input { display: none; }
.campo-toggle-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 2px solid #c7ccd1;
    color: transparent;
    flex-shrink: 0;
    transition: inherit;
}
.campo-toggle.activo {
    border-color: var(--app-primary);
    background: #eef5f3;
    color: var(--app-primary-dark);
}
.campo-toggle.activo .campo-toggle-icono {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #fff;
}