:root {
    --primario: #2563eb;
    --primario-oscuro: #1d4ed8;
    --fondo: #f3f4f6;
    --tarjeta: #ffffff;
    --texto: #1f2937;
    --texto-suave: #6b7280;
    --borde: #e5e7eb;
    --verde: #16a34a;
    --amarillo: #d97706;
    --rojo: #dc2626;
    --anual: #7c3aed;
    --semestral: #0891b2;
    --mensual: #2563eb;
    --diario: #059669;
}

* { box-sizing: border-box; }

/* Los campos de archivo no se encogen solos y desbordan en el celular. */
input[type="file"] { max-width: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--fondo);
    color: var(--texto);
}

.navbar {
    background: var(--tarjeta);
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
    position: sticky;
    top: 0;
    z-index: 30;
}

.nav-brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }

/* En escritorio el botón ☰ y el checkbox no se usan. */
.nav-bar-top { display: contents; }
.nav-toggle { display: none; }
.nav-check { display: none; }

.nav-links { display: flex; align-items: center; gap: 12px; }
/* Nombre de colegio acotado para que no ensanche la barra. */
.nav-colegio select { max-width: 130px; text-overflow: ellipsis; }

.nav-links a {
    text-decoration: none;
    color: var(--texto);
    font-weight: 500;
    white-space: nowrap;
}

.nav-links a:hover { color: var(--primario); }

.nav-user { color: var(--texto-suave); font-size: 0.9rem; text-decoration: none; }
.nav-user:hover { color: var(--primario); }

/* Memos internos */
.nav-memos { position: relative; text-decoration: none; }
.memo-destinatarios {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px; border: 1px solid var(--borde); border-radius: 12px; padding: 12px;
    max-height: 260px; overflow-y: auto; margin-top: 4px;
}
.memo-dest-item { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.memo-dest-item input { width: 18px; height: 18px; }
.memo-cuerpo {
    white-space: pre-wrap; margin-top: 12px; padding: 14px 16px;
    background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px; line-height: 1.5;
    overflow-wrap: break-word; word-break: break-word;
}
.memo-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.memo-acciones .btn { margin-top: 0; }
.memo-dest-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; }
.memo-dest-buscar { flex: 1 1 200px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; }
.memo-dest-todos { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.memo-firma { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 22px; }
.memo-firma-img { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.memo-firma-img img { max-height: 90px; max-width: 200px; object-fit: contain; }
.memo-firma-img .etiqueta { border-top: 1px solid var(--texto); padding-top: 4px; }

.firma-timbre { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.firma-item { min-width: 0; }
.firma-item .logo-form { flex-direction: column; align-items: stretch; gap: 8px; }
.firma-item .logo-form input[type=file] { width: 100%; max-width: 100%; min-width: 0; font-size: .82rem; }
.firma-item .logo-form button { align-self: flex-start; margin-top: 0; }
.firma-titulo { font-weight: 600; margin-bottom: 6px; }
.firma-preview {
    height: 100px; border: 1px solid var(--borde); border-radius: 12px; background: #fff;
    display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px;
}
.firma-preview img { max-height: 100%; max-width: 100%; object-fit: contain; }
.memo-no-leido td { font-weight: 700; }
.memo-badge-nuevo {
    display: inline-block; background: var(--primario); color: #fff; border-radius: 999px;
    padding: 1px 8px; font-size: .7rem; font-weight: 700; margin-left: 6px;
}

/* Mi perfil */
.perfil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.perfil-datos { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px 14px; }
.perfil-datos dt { color: var(--texto-suave); font-size: .88rem; }
.perfil-datos dd { margin: 0; font-weight: 600; }

.btn-logout {
    background: var(--rojo);
    color: white !important;
    padding: 7px 16px;
    border-radius: 999px;
    font-weight: 600;
    transition: transform .08s ease, box-shadow .12s ease;
}
.btn-logout:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); }

.container {
    width: 100%;
    margin: 28px auto;
    padding: 0 clamp(16px, 3vw, 48px);
}

h1 { margin-bottom: 4px; }

.subtitulo { color: var(--texto-suave); margin-top: 0; margin-bottom: 24px; }

.titulo-seccion { margin-top: 40px; }

/* Alertas */
.alerta {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.95rem;
}
.alerta-success { background: #dcfce7; color: #166534; }
.alerta-danger { background: #fee2e2; color: #991b1b; }
.alerta-warning { background: #fef3c7; color: #92400e; }
.alerta-info { background: #dbeafe; color: #1e40af; }

/* Autenticación */
.auth-box, .form-box {
    background: var(--tarjeta);
    padding: 32px;
    border-radius: 12px;
    max-width: 420px;
    margin: 40px auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.form-box { max-width: 600px; }

form { display: flex; flex-direction: column; gap: 6px; }

label { font-weight: 600; margin-top: 10px; font-size: 0.9rem; }

input, select, textarea {
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primario);
}

.ayuda { font-size: 0.8rem; color: var(--texto-suave); margin: 0; }

.btn {
    display: inline-block;
    text-align: center;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
    line-height: 1.2;
    transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.avance-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.avance-acciones .btn { flex: 0 0 auto; }
.btn-primario { box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28); }
.btn-primario:hover { box-shadow: 0 5px 16px rgba(37, 99, 235, 0.36); }

.btn-primario { background: var(--primario); color: white; margin-top: 16px; }
.btn-primario:hover { background: var(--primario-oscuro); }

.btn-secundario { background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); }
.btn-secundario:hover { background: #e5e7eb; }

.btn-peligro { background: var(--rojo); color: white; }
.btn-peligro:hover { background: #b91c1c; }

.enlace-secundario { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--texto-suave); }

.enlace-volver { display: inline-block; margin-bottom: 20px; color: var(--primario); text-decoration: none; }

/* Tarjetas resumen dashboard */
.tarjetas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.tarjeta {
    background: var(--tarjeta);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.tarjeta h2 { margin: 0 0 8px 0; font-size: 1.1rem; }

.numero-grande { font-size: 2rem; font-weight: 700; margin: 0; }

.etiqueta { color: var(--texto-suave); font-size: 0.85rem; margin: 2px 0 10px 0; }

.barra-progreso {
    background: var(--borde);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 8px 0;
}

.barra-progreso-relleno {
    background: var(--primario);
    height: 100%;
    border-radius: 999px;
}

/* Tabla */
.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--tarjeta);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.tabla th, .tabla td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borde);
    font-size: 0.9rem;
}

.tabla th { background: var(--fondo); font-weight: 600; }

.etiqueta-tipo {
    padding: 3px 10px;
    border-radius: 999px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.etiqueta-anual { background: var(--anual); }
.etiqueta-semestral { background: var(--semestral); }
.etiqueta-mensual { background: var(--mensual); }
.etiqueta-diario { background: var(--diario); }

/* Lista de avances por tipo */
.lista-avances { display: flex; flex-direction: column; gap: 16px; }

.avance-card {
    background: var(--tarjeta);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.avance-header { display: flex; justify-content: space-between; align-items: center; }

.avance-header h3 { margin: 0; }

.avance-fecha { color: var(--texto-suave); font-size: 0.8rem; margin: 4px 0 12px 0; }

.avance-autor { color: var(--texto-suave); font-size: 0.85rem; margin: 2px 0; font-weight: 600; }

.filtro-anios { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px 0; }
.filtro-anios .btn { padding: 6px 14px; }
.filtro-etiqueta { color: var(--texto-suave); font-weight: 600; margin-right: 4px; }

/* Tarjetas que son enlaces (panel del administrador) */
.tarjeta-enlace { text-decoration: none; color: inherit; display: block; transition: transform .08s ease, box-shadow .08s ease; }
.tarjeta-enlace:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }

/* Diseño de sección admin: menú lateral + contenido */
.admin-layout { display: flex; gap: 22px; margin-top: 14px; align-items: flex-start; }
.admin-menu { flex: 0 0 210px; display: flex; flex-direction: column; gap: 4px; }
.admin-menu-item { display: block; padding: 3px 11px; border-radius: 7px; text-decoration: none; color: inherit; font-weight: 400; font-size: .89rem; }
.admin-menu-item:hover { background: rgba(0,0,0,.05); }
.admin-menu-item.activo { background: var(--primario, #2563eb); color: #fff; font-weight: 600; }
.admin-contenido { flex: 1 1 0; min-width: 0; }
.menu-movil-toggle { display: none; }
.menu-movil-cuerpo { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 1260px) {
    .admin-layout { flex-wrap: wrap; }
    /* Menú como desplegable "☰ Menú" (más cómodo en celular/tablet). */
    .admin-menu { flex-basis: 100%; margin-bottom: 10px; }
    .menu-movil-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 11px 14px; border: 1px solid var(--borde); background: var(--tarjeta);
        border-radius: 10px; font-weight: 600; cursor: pointer; user-select: none;
    }
    .menu-movil-cuerpo { display: none; margin-top: 8px; }
    .menu-movil-chk:checked ~ .menu-movil-cuerpo { display: flex; }

    /* Barra superior con menú hamburguesa: fila con logo + ☰; los enlaces
       se despliegan solo al tocar el botón. */
    .navbar { flex-direction: column; align-items: stretch; padding: 10px 16px; }
    .nav-bar-top { display: flex; align-items: center; justify-content: space-between; }
    .nav-brand { font-size: 1.05rem; }
    .nav-toggle {
        display: block; font-size: 1.7rem; line-height: 1; cursor: pointer;
        padding: 4px 10px; border-radius: 10px; user-select: none; color: var(--texto);
    }
    .nav-toggle:active { background: rgba(0,0,0,.06); }

    /* Menú colapsado por defecto; se abre con el checkbox (☰). */
    .nav-links { display: none; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 10px; }
    .nav-check:checked ~ .nav-links { display: flex; }

    /* Cada opción como fila cómoda para el dedo. */
    .nav-links > a, .nav-links > span {
        padding: 12px 10px; border-radius: 10px; font-size: 1rem;
        border-bottom: 1px solid var(--borde);
    }
    .nav-links > a:active { background: rgba(0,0,0,.05); }
    .nav-campana { display: flex !important; align-items: center; gap: 6px; }
    .nav-campana::after { content: "Alertas del Plan Anual"; font-weight: 500; }
    .nav-colegio, .nav-anio { border: none; border-bottom: 1px solid var(--borde); border-radius: 0; background: transparent; }
    .nav-colegio select, .nav-anio select { flex: 1 1 auto; width: 100%; }
    .nav-anio select { max-width: none; }
    .nav-user { color: var(--texto); font-weight: 600; }
    .btn-logout { text-align: center; margin-top: 8px; }

    /* Tablas anchas: que scrolleen dentro de su caja y no ensanchen la página. */
    .tabla { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Márgenes/tipografía más compactos en pantallas chicas. */
    .container { margin: 16px auto; }
    h1 { font-size: 1.5rem; }
}
.aviso-construccion { background: rgba(0,0,0,.04); border: 1px dashed rgba(0,0,0,.18); border-radius: 10px; padding: 18px 20px; }

.datos-centro { max-width: 100%; margin: 0; }

/* Vista de un caso de protocolo: aprovecha el ancho (datos + RICE en 2 columnas) */
.protocolo-detalle { max-width: 1500px; margin: 0 auto; }
.protocolo-top {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px; align-items: start; margin-bottom: 8px;
}
.protocolo-top > .rice-panel { margin-top: 0; }
@media (max-width: 900px) { .protocolo-top { grid-template-columns: 1fr; } }
.form-datos { display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; width: 100%; }
.form-datos label { font-weight: 600; margin: 12px 0 4px 0; }
.form-datos input { padding: 9px 11px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; font-size: 1rem; }
.form-datos button { margin-top: 20px; align-self: flex-start; }

.form-ingreso { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: rgba(0,0,0,.04); border-radius: 10px; padding: 14px 16px; }
.form-ingreso label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 4px; }
.form-ingreso select, .form-ingreso input { padding: 8px 10px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; font-size: 1rem; }
.ingreso-detalle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0; }
.btn-quitar { background: none; border: none; color: var(--peligro, #dc2626); cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px; }
.btn-quitar:hover { color: #991b1b; }
.decl-ok { color: var(--verde, #16a34a); font-weight: 700; }
.decl-na { font-style: italic; opacity: .7; }

/* Jefatura (módulo Personal) */
.jefatura-panel { background: var(--fondo); border: 1px solid var(--borde);
    border-left: 4px solid var(--primario); border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; }
.jefatura-tit { font-weight: 700; }
.jefatura-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jefatura-item { background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 999px; padding: 4px 12px; font-size: .9rem; }
.badge-jefatura { display: inline-block; background: #eff6ff; border: 1px solid #dbeafe;
    color: var(--primario); border-radius: 999px; padding: 0 8px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
/* Jefatura: multi-select dinámico (buscador + chips) */
#field-jefatura_ids { grid-column: 1 / -1; align-self: start; }  /* fila propia; no descuadra al crecer */
.jefatura-select { position: relative; border: 1px solid var(--borde); border-radius: 10px;
    background: var(--tarjeta); padding: 6px 8px; }
.jefatura-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jefatura-chips:not(:empty) { margin-bottom: 4px; }
.jefatura-chip { display: inline-flex; align-items: center; gap: 4px; background: #eff6ff;
    border: 1px solid #dbeafe; color: var(--primario); border-radius: 999px;
    padding: 2px 4px 2px 10px; font-size: .82rem; font-weight: 600; }
.jefatura-chip button { border: none; background: transparent; color: inherit; cursor: pointer;
    font-size: 1.05rem; line-height: 1; padding: 0 3px; }
.jefatura-buscar { width: 100%; border: none; outline: none; padding: 6px 4px;
    font: inherit; background: transparent; color: var(--texto); }
.jefatura-opciones { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin-top: 3px;
    max-height: 240px; overflow-y: auto; background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.jefatura-opcion { padding: 8px 12px; cursor: pointer; font-size: .9rem; }
.jefatura-opcion:hover { background: var(--fondo); }
input.calc { background: rgba(0,0,0,.06); font-weight: 600; }

/* Carpeta personal: lista de documentos */
.doc-tipo { margin-bottom: 14px; }
.doc-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); }
.doc-icono { font-size: 1.1rem; }
.doc-nombre { font-weight: 600; color: var(--primario); text-decoration: none; flex: 1 1 auto; word-break: break-all; }
.doc-nombre:hover { text-decoration: underline; }
.doc-fecha { color: var(--texto-suave); font-size: .82rem; white-space: nowrap; }
.doc-periodo { font-weight: 700; min-width: 120px; }

/* Botón de ícono (submódulos en el listado de Personal) */
.btn-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid var(--borde); background: var(--fondo);
    font-size: 1.2rem; text-decoration: none; cursor: pointer;
    transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn-icono:hover { transform: translateY(-1px); border-color: var(--primario); box-shadow: 0 3px 10px rgba(37,99,235,.16); }
.btn-icono-peligro { font-size: 1rem; color: var(--rojo); border-color: rgba(220,38,38,.35); }
.btn-icono-peligro:hover { border-color: var(--rojo); background: rgba(220,38,38,.08); box-shadow: 0 3px 10px rgba(220,38,38,.16); }
.acciones-fila { display: inline-flex; align-items: center; gap: 8px; }

/* Tabla con scroll horizontal en pantallas chicas */
.tabla-scroll { overflow-x: auto; }
.btn-mes { padding: 5px 10px; min-width: 44px; text-align: center; }
.nav-brand { text-decoration: none; color: inherit; }
.nav-colegio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 3px 8px 3px 14px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.nav-colegio:hover { border-color: var(--primario); box-shadow: 0 2px 10px rgba(37, 99, 235, 0.14); }
.nav-colegio select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 4px center;
    color: var(--texto);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 24px 6px 2px;
    max-width: 200px;
    cursor: pointer;
}
.nav-colegio select:focus { outline: none; }
.nav-colegio select option { color: #111; }
.nav-anio select { max-width: 90px; }
.nav-campana { position: relative; text-decoration: none; font-size: 1.05rem; line-height: 1; }
.nav-campana-num {
    position: absolute; top: -8px; right: -10px; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 999px; background: var(--rojo); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center;
}
.nav-colegio-logo {
    width: 22px; height: 22px; border-radius: 5px;
    object-fit: contain; background: #fff; display: block;
    margin: -2px 0;
}
.nav-brand-logo {
    width: 30px; height: 30px; border-radius: 7px;
    object-fit: contain; background: #fff; vertical-align: middle;
    margin-right: 2px;
}

/* Impuestos (F29): resumen + tarjetas plegables */
.dash-tile-oscuro { background: #0f172a; }
.f29-subir {
    display: flex; flex-direction: row; align-items: center; gap: 16px;
    background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 14px; padding: 16px 20px; margin: 4px 0 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.f29-subir > div { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.f29-subir label { font-weight: 600; font-size: .9rem; }
.f29-subir input[type=file] { padding: 6px 0; }
.f29-subir button { flex: 0 0 auto; }
@media (max-width: 560px) { .f29-subir { flex-wrap: wrap; } .f29-subir button { margin-left: auto; } }

.cert-generar {
    display: flex; flex-direction: row; align-items: center; gap: 16px;
    background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 14px; padding: 16px 20px; margin: 4px 0 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cert-anual-aviso {
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
    border-radius: 12px; padding: 12px 16px; margin: 4px 0 18px;
    font-size: .92rem; line-height: 1.4;
}

/* Panel de avances: avance global */
.dash-global {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 14px; padding: 16px 20px; margin: 8px 0 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.dash-global-info { display: flex; flex-direction: column; gap: 2px; }
.dash-global-pct { font-size: 2rem; font-weight: 800; color: var(--primario); }

/* Carta Gantt */
.gantt-plan-titulo {
    font-size: 1.05rem; margin: 22px 0 8px; padding-bottom: 6px;
    border-bottom: 2px solid var(--borde);
}
.gantt-filtro {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
    background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 12px; padding: 10px 16px;
}
.gantt-filtro label { font-weight: 600; font-size: .9rem; }
.gantt-filtro select {
    padding: 7px 12px; border: 1px solid var(--borde); border-radius: 10px;
    background: var(--fondo); color: var(--texto); font: inherit; font-weight: 600;
}
.gantt-resumen { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.gantt-chip {
    background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 999px; padding: 6px 14px; font-size: .9rem; color: var(--texto);
}
.gantt-chip.verde { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.gantt-chip.azul  { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.gantt-chip.amarillo { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.gantt-chip.rojo  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.gantt-chip.morado { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }

/* Solicitudes de autorización (cola del sostenedor) */
.gantt-solicitudes {
    background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 12px;
    padding: 14px 18px; margin: 4px 0 16px;
}
.gantt-solicitudes-tit { font-weight: 700; color: #6d28d9; margin-bottom: 8px; }
.gantt-solicitudes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gantt-solicitudes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gantt-solicitud-info { font-size: .9rem; }
.gantt-solicitud-motivo { color: var(--texto-suave); font-size: .84rem; margin-top: 2px; }
.btn-mini { padding: 6px 12px !important; font-size: .82rem; margin-top: 0 !important; }

.gantt-badge-auth {
    display: inline-block; border-radius: 999px; padding: 1px 8px;
    font-weight: 700; font-size: .72rem; margin-left: 4px;
}
.gantt-badge-auth.solicitada { background: #f5f3ff; border: 1px solid #ddd6fe; color: #6d28d9; }
.gantt-badge-auth.autorizada { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.gantt-badge-auth.rechazada  { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.btn-icono-auth { border-color: #ddd6fe; color: #6d28d9; }
.btn-icono-ok { border-color: #a7f3d0; color: #047857; }

/* Notificaciones del Plan Anual */
.gantt-alertas {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
    padding: 14px 18px; margin: 4px 0 16px;
}
.gantt-alertas-tit { font-weight: 700; color: #b45309; margin-bottom: 8px; }
.gantt-alertas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gantt-alertas li { font-size: .9rem; color: var(--texto); }
.gantt-alerta-badge {
    display: inline-block; border-radius: 999px; padding: 1px 8px;
    font-weight: 700; font-size: .72rem; margin-right: 4px;
}
.gantt-alerta-badge.amarillo { background: #fef3c7; color: #b45309; }
.gantt-alerta-badge.rojo { background: #fee2e2; color: #b91c1c; }
.gantt-badge-porvencer {
    display: inline-block; background: #fffbeb; border: 1px solid #fde68a; color: #b45309;
    border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: .72rem; margin-left: 4px;
}

.gantt-nueva {
    display: flex; flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 12px;
    background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 14px; padding: 16px 20px; margin: 0 0 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.gantt-nueva > div { display: flex; flex-direction: column; gap: 6px; }
.gantt-nueva > div:first-child { flex: 1 1 240px; min-width: 200px; }
.gantt-nueva label { font-weight: 600; font-size: .88rem; }
.gantt-nueva input, .gantt-nueva select {
    padding: 9px 12px; border: 1px solid var(--borde); border-radius: 10px;
    background: var(--fondo); color: var(--texto); font: inherit;
}
.gantt-nueva button { flex: 0 0 auto; margin-top: 0; }

.gantt-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: 14px; }
.gantt-tabla { border-collapse: collapse; width: 100%; min-width: 760px; }
.gantt-tabla th, .gantt-tabla td {
    border-bottom: 1px solid var(--borde); padding: 2px 6px; text-align: center;
}
/* Meta + acciones en una sola línea, fluyendo con el texto. */
.gantt-meta-linea { line-height: 1.5; }
.gantt-meta-linea .gantt-chip { padding: 0 7px; font-size: .66rem; }
.gantt-meta-linea .gantt-evid,
.gantt-meta-linea .gantt-nivel-edit,
.gantt-meta-linea .gantt-editar-det { display: inline-block; vertical-align: middle; }
.gantt-editar-det > summary { display: inline; cursor: pointer; font-size: .9rem; list-style: none; }
.gantt-editar-det > summary::-webkit-details-marker { display: none; }
.gantt-editar-form { width: 340px; max-width: 86vw; margin-top: 6px; padding: 10px; text-align: left;
    background: #f8fafc; border: 1px solid var(--borde); border-radius: 8px; white-space: normal; }
.gantt-editar-form > * { display: block; width: 100%; box-sizing: border-box; margin: 0 0 7px; }
.gantt-editar-form input[type=text], .gantt-editar-form select, .gantt-editar-form input[type=date] {
    padding: 5px 8px; border: 1px solid var(--borde); border-radius: 6px; font-size: .82rem; }
.gantt-editar-form label { font-size: .72rem; color: var(--texto-suave); margin-bottom: 7px; }
.gantt-editar-form label input { display: block; width: 100%; box-sizing: border-box; margin-top: 2px; }
.gantt-editar-form button { width: auto; margin-bottom: 0; }
.gantt-meta-linea .gantt-evid summary,
.gantt-meta-linea .gantt-nivel-edit summary { display: inline; }
/* Botones de acción más chicos dentro del Plan Anual (fila compacta). */
.gantt-tabla .btn-icono { width: 26px; height: 26px; border-radius: 8px; font-size: .9rem; }
.gantt-tabla .btn-icono-peligro { font-size: .85rem; }
.gantt-tabla .acciones-fila { gap: 4px; }
.gantt-col-acc { width: 74px; }
.gantt-tabla .btn-quitar { font-size: .82rem; padding: 0 3px; }
/* "Malo": el detalle (fuera de plazo) aparece al pasar el mouse o tocar. */
.gantt-malo { cursor: help; }
.gantt-malo-det { display: none; font-size: .68rem; color: #b91c1c; margin-left: 4px; }
.gantt-malo:hover + .gantt-malo-det, .gantt-malo:focus + .gantt-malo-det { display: inline; }
/* Desplegable por meta: la cabecera colapsa/expande sus objetivos. */
.gantt-meta-toggle { cursor: pointer; user-select: none; }
.gantt-meta-caret { display: inline-block; transition: transform .12s ease; color: var(--texto-suave); font-size: .72rem; margin-right: 2px; }
.gantt-meta-grupo.colapsada .gantt-meta-caret { transform: rotate(-90deg); }
.gantt-meta-grupo.colapsada .gantt-control-row,
.gantt-meta-grupo.colapsada .gantt-sin-controles { display: none; }
.gantt-copiar-det { margin: 0 0 12px; }
.gantt-copiar-det > summary { display: inline-block; cursor: pointer; list-style: none;
    color: var(--primario); font-size: .78rem; font-weight: 600; }
.gantt-copiar-det > summary::-webkit-details-marker { display: none; }
.gantt-copiar { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    padding: 6px 10px; margin: 6px 0 0; font-size: .78rem; }
.gantt-copiar select { padding: 3px 8px; border: 1px solid var(--borde); border-radius: 8px; font-size: .78rem; min-width: 240px; max-width: 100%; }
.gantt-plan-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.gantt-plan-cab .gantt-plan-titulo { margin: 0; }
.btn-plan-eliminar { background: none; border: 1px solid rgba(220,38,38,.4); color: var(--rojo, #dc2626);
    border-radius: 8px; padding: 4px 12px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.btn-plan-eliminar:hover { background: rgba(220,38,38,.08); }
.btn-plan-pdf { display: inline-block; text-decoration: none; background: #eff6ff; border: 1px solid #bfdbfe;
    color: #1e40af; border-radius: 8px; padding: 4px 12px; font-size: .78rem; font-weight: 600; }
.btn-plan-pdf:hover { background: #dbeafe; }
.gantt-copiar .btn { padding: 4px 12px; font-size: .78rem; }
.gantt-tabla thead th { background: var(--fondo); font-size: .78rem; color: var(--texto-suave); font-weight: 700; }
.gantt-col-tarea { text-align: left !important; min-width: 220px; padding-left: 16px !important; }
.gantt-col-mes { width: 40px; }
.gantt-col-acc { width: 84px; }
.gantt-tarea-nombre { font-weight: 600; font-size: .88rem; line-height: 1.15; }
.gantt-tarea-meta { font-size: .72rem; color: var(--texto-suave); margin-top: 0; line-height: 1.2; }
.gantt-cat {
    display: inline-block; background: var(--fondo); border: 1px solid var(--borde);
    border-radius: 999px; padding: 1px 8px; font-weight: 600; font-size: .72rem;
}
.gantt-badge-vencida {
    display: inline-block; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: .72rem; margin-left: 4px;
}
.gantt-celda { padding: 6px 2px !important; }
.gantt-barra {
    display: block; height: 20px; line-height: 20px; color: #fff;
    font-size: .72rem; font-weight: 700;
}
.gantt-barra.ini { border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin-left: 3px; }
.gantt-barra.fin { border-top-right-radius: 6px; border-bottom-right-radius: 6px; margin-right: 3px; }
.gantt-barra.verde { background: #10b981; }
.gantt-barra.azul  { background: #3b82f6; }
.gantt-barra.amarillo { background: #f59e0b; }
.gantt-barra.rojo  { background: #ef4444; }
.fila-cumplida .gantt-tarea-nombre { text-decoration: line-through; color: var(--texto-suave); }
.gantt-meta-fila td { background: #f8fafc; border-top: 2px solid var(--borde); }
.gantt-meta-fila .gantt-col-tarea { font-size: .95rem; }
.gantt-meta-icono { margin-right: 2px; }
.gantt-control-nombre-col { padding-left: 28px !important; }
.gantt-sin-controles td { background: var(--tarjeta); }

.logo-colegio {
    display: flex; flex-direction: row; align-items: center; gap: 20px;
    background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 14px; padding: 18px 20px; margin: 4px 0 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.logo-preview {
    flex: 0 0 auto; width: 96px; height: 96px; border-radius: 12px;
    border: 1px solid var(--borde); background: var(--fondo);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-vacio { color: var(--texto-suave); font-size: .82rem; }
.logo-acciones { flex: 1 1 auto; min-width: 0; }
.logo-form { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-form button { margin-top: 0; }
.logo-acciones .btn-quitar { margin-top: 8px; }
@media (max-width: 560px) { .logo-colegio { flex-wrap: wrap; } }

.cert-generar > div:first-child { flex: 1 1 auto; min-width: 0; }
.cert-botones { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cert-botones .btn { margin-top: 0; display: inline-flex; align-items: center; gap: 6px; line-height: 1; border: 1px solid transparent; }
@media (max-width: 560px) { .cert-generar { flex-wrap: wrap; } .cert-botones { margin-left: auto; } }

/* Formulario de opciones para generar el contrato */
.contrato-form { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
.contrato-form-cab strong { font-size: 1.02rem; }
.contrato-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.contrato-form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--texto); }
.contrato-form-grid select, .contrato-form-grid input[type="date"],
.contrato-form-grid input[type="text"], .contrato-form-grid input[type="number"] {
    width: 100%; padding: 9px 11px; border: 1px solid var(--borde); border-radius: 10px;
    background: #fff; font-size: .92rem; font-weight: 500; color: var(--texto);
}
.contrato-form .cert-botones { justify-content: flex-start; }

/* Panel "Datos para la consulta" de inhabilidad (Certificados Anuales) */
.consulta-inhab { margin: 4px 0 18px; }
.consulta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.consulta-tit { font-weight: 700; font-size: .82rem; color: var(--texto); margin-bottom: 6px; }
.dato-fila { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.dato-et { font-size: .78rem; color: var(--texto-suave); min-width: 108px; }
.dato-val { background: #f1f5f9; border: 1px solid var(--borde); border-radius: 8px; padding: 3px 9px; font-size: .9rem; font-weight: 600; }
.dato-copiar { margin: 0 !important; }
.consulta-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Nivel de logro del objetivo (se elige al cumplir) */
.gantt-nivel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.gantt-nivel-botones { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.gantt-nivel-botones .btn { margin: 0; }
.gantt-nivel-edit summary { cursor: pointer; color: var(--primario); font-size: .8rem; font-weight: 600; list-style: none; }
.gantt-nivel-edit summary::-webkit-details-marker { display: none; }
.gantt-nivel-edit .gantt-nivel-botones { margin-top: 5px; }

/* Evidencia por objetivo en el Plan Anual */
.gantt-evid { display: inline-block; margin-top: 2px; }
.gantt-evid summary { cursor: pointer; color: var(--primario); font-size: .82rem; font-weight: 600; list-style: none; }
.gantt-evid summary::-webkit-details-marker { display: none; }
.gantt-evid-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.gantt-evid-form input[type=file] { font-size: .8rem; max-width: 210px; }

/* Checkbox "Es jefatura" en el formulario de usuario */
.check-jefatura { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; font-weight: 500; cursor: pointer; }
.check-jefatura input { width: auto; height: 18px; margin: 0; flex: 0 0 auto; }

.f29-card {
    background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 14px; margin-bottom: 12px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .12s ease;
}
.f29-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.10); }
.f29-card summary {
    list-style: none; cursor: pointer; display: flex; align-items: center;
    gap: 14px; padding: 16px 20px;
}
.f29-card summary::-webkit-details-marker { display: none; }
.f29-mes { font-weight: 700; font-size: 1.05rem; min-width: 108px; }
.f29-folio { color: var(--texto-suave); font-size: .85rem; }
.f29-total { margin-left: auto; font-weight: 800; color: var(--primario); font-size: 1.1rem; }
.f29-caret { color: var(--texto-suave); transition: transform .15s ease; }
.f29-card[open] .f29-caret { transform: rotate(180deg); }
.f29-card[open] summary { border-bottom: 1px solid var(--borde); }
.f29-body { padding: 14px 20px 18px; }
.f29-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.f29-actions .btn-quitar { border: 1px solid rgba(220,38,38,.4); border-radius: 999px; padding: 4px 12px; font-size: .85rem; }

/* Selector de mes: control segmentado */
.mes-seg-wrap { display: flex; align-items: center; gap: 10px; margin: 14px 0 22px; flex-wrap: wrap; }
.mes-seg {
    display: inline-flex;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 3px;
    max-width: 100%;
    overflow-x: auto;
}
.mes-seg-item {
    padding: 7px 13px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--texto-suave);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.mes-seg-item:hover { color: var(--texto); }
.mes-seg-item.activo {
    background: var(--primario);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}
/* Segmentador hecho con <button> (sin navegar): mismo aspecto que los enlaces */
.mes-seg button.mes-seg-item { cursor: pointer; border: none; font: inherit; font-weight: 600; font-size: .85rem; }
.mes-seg button.mes-seg-item:not(.activo) { background: none; }

/* Navegación del PISE agrupada por fases */
.pise-nav { margin: 12px 0 20px; }
.pise-nav-home {
    display: inline-block;
    margin-bottom: 10px;
    background: var(--fondo);
    border: 1px solid var(--borde);
}
.pise-nav-grupos { display: flex; flex-wrap: wrap; gap: 12px; }
.pise-nav-grupo {
    background: var(--fondo-suave, #f1f5f9);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 8px 10px 10px;
}
.pise-nav-grupo-lbl {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-suave);
    margin: 2px 4px 7px;
}
.pise-nav-items { display: flex; flex-wrap: wrap; gap: 6px; }
.pise-nav-items .mes-seg-item { background: var(--fondo); border: 1px solid var(--borde); }
.pise-nav-items .mes-seg-item.activo { background: var(--primario); border-color: var(--primario); }

/* Zona de colegios en Datos */
.colegios-bar { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 26px; }
.colegios-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.colegio-pill {
    padding: 9px 18px; border-radius: 999px; border: 1px solid var(--borde);
    background: var(--tarjeta); color: var(--texto); text-decoration: none;
    font-weight: 600; font-size: 0.9rem;
    transition: border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.colegio-pill:hover { border-color: var(--primario); color: var(--primario); transform: translateY(-1px); }
.colegio-pill.activo {
    background: var(--primario); border-color: var(--primario); color: #fff;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.30);
}
.colegio-add { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.colegio-add input {
    padding: 10px 16px; border: 1px solid var(--borde); border-radius: 999px;
    font-size: 0.92rem; min-width: 250px;
}
.colegio-add input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }

/* Formulario de gastos (compacto, en grilla) */
.form-gasto { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; align-items: end; background: rgba(0,0,0,.04); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; }
.form-gasto > div { display: flex; flex-direction: column; min-width: 0; }
.form-gasto label { font-weight: 600; font-size: .8rem; margin-bottom: 3px; }
.form-gasto input, .form-gasto select { width: 100%; padding: 7px 9px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; font-size: .95rem; }
.form-gasto-ancho { grid-column: span 2; }
.form-gasto button { grid-column: 1 / -1; justify-self: start; }

/* Dashboard del administrador */
.dash-tiles { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 18px 0; }
.dash-tile { flex: 1 1 200px; background: var(--primario, #2563eb); color: #fff; border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.dash-tile-enlace { background: #0f172a; transition: transform .08s ease, box-shadow .12s ease; }
.dash-tile-enlace:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,.18); }
.dash-tile-alertas { background: #b91c1c; }
.dash-notif { gap: 8px; }
.dash-notif-linea { color: #fff; text-decoration: none; font-size: .92rem; opacity: .96; }
.dash-notif-linea:hover { text-decoration: underline; }
.dash-notif-linea strong { font-size: 1.05rem; }
.dash-tile-alertas:hover { box-shadow: 0 6px 18px rgba(185,28,28,.30); }
.dash-label { font-size: .85rem; opacity: .9; }
.dash-valor { font-size: 1.5rem; font-weight: 700; }
.dash-desglose { margin-bottom: 22px; }
.dash-barra-fila { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.dash-barra-nombre { flex: 0 0 210px; }
.dash-barra { flex: 1 1 auto; background: rgba(0,0,0,.08); border-radius: 6px; height: 14px; overflow: hidden; }
.dash-barra-relleno { height: 100%; background: var(--primario, #2563eb); border-radius: 6px; }
.dash-barra-monto { flex: 0 0 130px; text-align: right; font-weight: 600; }
@media (max-width: 640px) { .dash-barra-nombre { flex-basis: 120px; } .dash-barra-monto { flex-basis: 90px; } }

/* Formulario de liquidación (Subvención General) */
.form-liquidacion { max-width: 620px; }
.liq-seccion { border: 1px solid rgba(0,0,0,.15); border-radius: 10px; padding: 10px 16px 16px; margin: 0 0 16px 0; }
.liq-seccion legend { font-weight: 700; padding: 0 8px; }
.liq-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.liq-fila label { flex: 1 1 auto; }
.liq-fila input { flex: 0 0 160px; text-align: right; padding: 7px 10px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; font-size: 1rem; }
.liq-subtotal { border-top: 1px solid rgba(0,0,0,.15); margin-top: 6px; padding-top: 8px; }
.liq-totales { margin-top: 22px; }
.liq-final td { border-top: 2px solid rgba(0,0,0,.25); font-size: 1.05rem; }

.avance-descripcion { white-space: pre-line; margin-bottom: 12px; }

.avance-acciones { display: flex; gap: 10px; margin-top: 12px; }

.vacio { color: var(--texto-suave); text-align: center; padding: 40px 0; }

.doc-fila { flex-wrap: wrap; }
/* Etiqueta tipo píldora (se usa, p. ej., para marcar "Jefatura"). */
.firma-badge { border-radius: 999px; padding: 2px 10px; font-size: .74rem; font-weight: 700; }
.firma-badge.ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.firma-badge.pend { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.firma-badge.no { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* Tabla de licencias médicas: período legible y estado. */
.lic-tabla .lic-fecha { font-variant-numeric: tabular-nums; font-weight: 600; }
.lic-tabla .lic-flecha { color: var(--texto-suave, #64748b); margin: 0 4px; }
.lic-badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.lic-vig { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.lic-prox { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.lic-fin { background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b; }
/* Filtros */
.lic-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }
.lic-filtros #lic-estado .mes-seg-item { cursor: pointer; border: none; background: none; }
.lic-buscar { flex: 1 1 220px; max-width: 320px; padding: 7px 12px; border: 1px solid var(--borde, #e2e8f0);
    border-radius: 10px; font-size: .9rem; }
/* Calendario de licencias */
.lic-cal-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lic-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lic-cal th { background: var(--fondo, #f1f5f9); padding: 5px; font-size: .78rem; color: var(--texto-suave, #64748b);
    border: 1px solid var(--borde, #e2e8f0); }
.lic-cal td { border: 1px solid var(--borde, #e2e8f0); vertical-align: top; min-height: 74px; height: 74px; padding: 3px 4px; width: 14.28%; }
.lic-cal .lic-cal-dia { display: flex; align-items: center; gap: 4px; }
.lic-cal-n { display: inline-block; min-width: 16px; text-align: center; background: #b91c1c; color: #fff;
    border-radius: 999px; padding: 0 5px; font-size: .64rem; font-weight: 700; }
.lic-cal .lic-cal-vacio { background: #f8fafc; }
.lic-cal .lic-cal-dia { font-size: .78rem; font-weight: 700; color: var(--texto-suave, #64748b); }
.lic-cal .lic-cal-con { background: #fff7ed; }
.lic-cal .lic-cal-hoy { outline: 2px solid var(--primario, #2563eb); outline-offset: -2px; }
.lic-cal .lic-cal-hoy .lic-cal-dia { color: var(--primario, #2563eb); }
.lic-cal-p { font-size: .72rem; background: #64748b; border: none; color: #fff;
    border-radius: 6px; padding: 1px 6px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lic-cal .lic-cal-finde { background: #f8fafc; }
.lic-cal th.lic-cal-finde { color: #94a3b8; }
.lic-cal-mas { font-size: .7rem; color: var(--texto-suave, #64748b); margin-top: 2px; }

/* % de avance en la lista de protocolos */
.avance-mini { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.avance-mini .barra-progreso { flex: 1 1 auto; margin: 0; height: 8px; }
.avance-mini-num { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--texto-suave); }

/* Lector de documentos en Gastos */
.gasto-lector {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    background: var(--fondo); border: 1px dashed var(--borde);
    border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px;
}
.gasto-lector > div { flex: 1 1 260px; min-width: 0; }
.gasto-lector input[type=file] { display: block; margin-top: 4px; max-width: 100%; }
.gasto-lector .btn { margin-top: 0; }
.gasto-lector-btn { display: inline-block; cursor: pointer; background: var(--primario, #2563eb);
    color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; text-align: center; }
.gasto-lector-btn:hover { filter: brightness(1.05); }
.gasto-lector-estado { flex: 1 1 100%; margin-top: 6px; }
@media (max-width: 560px) {
    .gasto-lector { padding: 12px; }
    .gasto-lector-btn { display: block; width: 100%; font-size: 1.05rem; padding: 15px; }
    .form-gasto { padding: 12px; }
    .form-gasto input, .form-gasto select { font-size: 16px; padding: 10px; }  /* 16px evita el zoom de iOS */
    .form-gasto button { width: 100%; justify-self: stretch; }
}

/* Acceso a colegios por usuario (casillas) */
.colegios-acceso { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px;
    border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); margin-top: 4px; }
.colegios-acceso-item { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.colegios-acceso-item input { width: 17px; height: 17px; }

/* Matriz de acceso a módulos por usuario */
.matriz-modulos th.matriz-col { text-align: center; font-size: .8rem; }
.matriz-modulos td.matriz-check { text-align: center; }
.matriz-modulos td.matriz-check input { width: 18px; height: 18px; cursor: pointer; }
.matriz-modulos td.matriz-total { color: var(--texto-suave); font-style: italic; text-align: center; }

/* Acceso a módulos por usuario (paneles colapsables) */
.acceso-user { border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 10px; background: var(--tarjeta); }
.acceso-user > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; padding: 12px 16px; }
.acceso-user > summary::-webkit-details-marker { display: none; }
.acceso-user > summary::before { content: '▸'; color: var(--texto-suave); font-size: .8rem; transition: transform .12s ease; }
.acceso-user[open] > summary::before { transform: rotate(90deg); }
.acceso-nom { font-weight: 600; }
.acceso-count { margin-left: auto; font-size: .75rem; color: #1e40af; background: #eff6ff;
    border: 1px solid #bfdbfe; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.acceso-cuerpo { padding: 4px 16px 16px; }
.acceso-quick { display: flex; gap: 8px; margin-bottom: 10px; }
.acceso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.acceso-item { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--borde);
    border-radius: 10px; padding: 8px 10px; cursor: pointer; background: var(--fondo); }
.acceso-item:hover { border-color: var(--primario); }
.acceso-item input { width: 17px; height: 17px; margin-top: 2px; cursor: pointer; flex: none; }
.acceso-item .acceso-label { display: block; font-weight: 600; font-size: .86rem; }
.acceso-item .acceso-desc { display: block; font-size: .72rem; color: var(--texto-suave); }
.acceso-modulo-subs { grid-column: 1 / -1; border: 1px solid var(--borde); border-radius: 10px;
    padding: 8px 10px; background: var(--fondo); }
.acceso-padre { border: none; background: none; padding: 2px 4px; }
.acceso-padre .acceso-label em { font-style: normal; color: #1e40af; font-weight: 600; font-size: .74rem; }
.acceso-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px; margin-top: 8px; padding-left: 26px; }
.acceso-sub { padding: 5px 8px; align-items: center; }
.acceso-sub .acceso-label { font-weight: 500; font-size: .8rem; }
.acceso-sub input:disabled ~ .acceso-label { color: var(--texto-suave); }

/* Formulario de Recordatorios: ventana con fecha y hora */
.rec-fechas { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 12px; margin-top: 6px; }
.rec-fechas > label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--texto-suave); font-weight: 600; }
.rec-fechas input { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; }
@media (min-width: 640px) { .rec-fechas { grid-template-columns: repeat(4, 1fr); } }

/* Carta Gantt por paso (Activación de Protocolos) */
.pgantt-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: 12px; }
.pgantt { width: 100%; border-collapse: collapse; min-width: 620px; }
.pgantt th { text-align: left; font-size: .78rem; color: var(--texto-suave); font-weight: 600;
    padding: 8px 12px; border-bottom: 1px solid var(--borde); background: var(--fondo); }
.pgantt td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.pgantt tr:last-child td { border-bottom: 0; }
.pgantt-col-info { width: 46%; min-width: 250px; }
.pgantt-col-track { width: 46%; min-width: 220px; }
.pgantt-col-acc { width: 8%; white-space: nowrap; }
.pgantt-nombre { font-weight: 600; line-height: 1.35; }
.pgantt-num { display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--fondo); border: 1px solid var(--borde); font-size: .74rem; margin-right: 4px; }
.pgantt-meta { font-size: .82rem; color: var(--texto-suave); margin-top: 3px; }
.pgantt-edit { margin-top: 6px; }
.pgantt-edit > summary { cursor: pointer; font-size: .8rem; color: var(--acento, #2563eb); width: max-content; }
.pgantt-form { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
    align-items: flex-end; margin-top: 8px; overflow-x: auto; }  /* todo en una línea */
.pgantt-form label { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto;
    font-size: .72rem; font-weight: 600; color: var(--texto-suave); }
.pgantt-form select, .pgantt-form input { padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; }
.pgantt-form select { width: 160px; }                      /* responsable compacto */
.pgantt-form input[type=date] { width: 118px; }            /* fechas compactas */
.pgantt-form .btn { flex: 0 0 auto; align-self: flex-end; }
/* Eje de fechas en el encabezado de la línea de tiempo */
.pgantt-eje { position: relative; height: 16px; margin-top: 4px; }
.pgantt-tick { position: absolute; top: 0; transform: translateX(-50%);
    font-size: .68rem; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.pgantt-track { position: relative; height: 22px; background: var(--fondo);
    border-radius: 6px; border: 1px solid var(--borde); overflow: hidden; }
.pgantt-bar { position: absolute; top: 0; bottom: 0; border-radius: 5px; min-width: 8px;
    color: #fff; font-size: .72rem; font-weight: 700; text-align: center; line-height: 22px; }
.pgantt-bar.verde { background: #10b981; }
.pgantt-bar.azul { background: #3b82f6; }
.pgantt-bar.amarillo { background: #f59e0b; }
.pgantt-bar.rojo { background: #ef4444; }
.pgantt-sinfecha { font-size: .78rem; color: var(--texto-suave); padding-left: 8px; line-height: 22px; }
/* Botón de marcar paso: azul mientras está pendiente, verde al confirmarse */
.btn-paso { font-size: 1.15rem; font-weight: 800; color: #fff; }
.btn-paso-pend { background: var(--primario); border-color: var(--primario); }
.btn-paso-pend:hover { background: var(--primario-oscuro); border-color: var(--primario-oscuro);
    box-shadow: 0 3px 10px rgba(37,99,235,.25); }
.btn-paso-ok { background: var(--verde, #16a34a); border-color: var(--verde, #16a34a); }
.btn-paso-ok:hover { background: #15803d; border-color: #15803d;
    box-shadow: 0 3px 10px rgba(22,163,74,.25); }
/* Agregar paso: tarjeta con campos etiquetados */
.pgantt-nuevo { margin-top: 14px; padding: 14px; border: 1px solid var(--borde);
    border-radius: 12px; background: var(--fondo); }
.pgantt-nuevo-tit { font-weight: 700; font-size: .92rem; margin-bottom: 10px; }
.pgantt-nuevo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 12px; }
.pgantt-nuevo-grid label, .prot-doc-subir label {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    font-size: .78rem; font-weight: 600; color: var(--texto-suave); }
.pgantt-nuevo-grid .campo-ancho { grid-column: 1 / -1; }
.pgantt-nuevo-grid input, .pgantt-nuevo-grid select,
.prot-doc-subir input, .prot-doc-subir select {
    padding: 8px 10px; border: 1px solid var(--borde); border-radius: 9px;
    font: inherit; color: var(--texto); background: var(--tarjeta); max-width: 100%; }
.pgantt-nuevo button { margin-top: 0; }

/* Subir documento: archivo + a qué paso corresponde */
.prot-doc-subir { display: grid; grid-template-columns: 2fr 1.5fr auto; gap: 12px;
    align-items: end; padding: 14px; border: 1px solid var(--borde);
    border-radius: 12px; background: var(--fondo); margin-bottom: 12px; }
.prot-doc-subir button { margin-top: 0; }
@media (max-width: 700px) { .prot-doc-subir { grid-template-columns: 1fr; } }
.doc-paso { font-size: .74rem; font-weight: 600; color: var(--primario);
    background: #eff6ff; border: 1px solid #dbeafe; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.doc-paso-gen { color: var(--texto-suave); background: var(--fondo); border-color: var(--borde); }

.btn-mini { padding: 5px 10px; font-size: .82rem; }

/* Panel de pasos y medidas del RICE */
.rice-panel { border-left: 4px solid var(--acento, #2563eb); }
/* Panel del RICE como desplegable */
.rice-desplegable { padding: 0; }
.rice-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 14px 16px; list-style: none; font-weight: 600; }
.rice-summary::-webkit-details-marker { display: none; }
.rice-summary-tit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rice-summary-toggle { transition: transform .18s; color: var(--texto-suave, #64748b); flex: 0 0 auto; }
.rice-desplegable[open] .rice-summary-toggle { transform: rotate(180deg); }
.rice-desplegable[open] .rice-summary { border-bottom: 1px solid rgba(0,0,0,.08); }
.rice-desplegable > .rice-lista { margin: 12px 16px 0; }
.rice-desplegable > .rice-cuerpo { padding: 4px 16px 16px; }
.rice-desplegable > .etiqueta { margin: 10px 16px 14px; }
.rice-lista { max-height: 460px; overflow-y: auto; padding-right: 6px; }
.rice-item { margin: 4px 0; line-height: 1.5; }
.rice-item.rice-n0 { margin-top: 12px; font-weight: 600; color: var(--texto); }
.rice-item.rice-n1 { margin-left: 20px; }
.rice-item.rice-n2 { margin-left: 42px; color: var(--texto-suave); }

/* Selector de colegio (desplegable con logos) */
.colegio-sel { position: relative; }
.colegio-sel > summary { list-style: none; cursor: pointer; }
.colegio-sel > summary::-webkit-details-marker { display: none; }
.colegio-sel-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px; border: 1px solid var(--borde); border-radius: 999px;
    background: var(--fondo); font-weight: 600; font-size: .9rem; color: var(--texto);
    max-width: 240px;
}
.colegio-sel-trigger:hover { border-color: var(--primario); }
.colegio-sel-logo {
    width: 24px; height: 24px; border-radius: 6px; object-fit: contain;
    background: #fff; border: 1px solid var(--borde); flex: 0 0 auto;
}
.colegio-sel-emoji { font-size: 1.1rem; line-height: 1; flex: 0 0 auto; }
.colegio-sel-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colegio-sel-caret { font-size: .7rem; color: var(--texto-suave); transition: transform .15s; flex: 0 0 auto; }
.colegio-sel[open] .colegio-sel-caret { transform: rotate(180deg); }
.colegio-sel-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    min-width: 240px; max-width: 300px; padding: 6px;
    background: var(--tarjeta); border: 1px solid var(--borde);
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.colegio-sel-tit {
    margin: 4px 8px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--texto-suave);
}
.colegio-sel-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 9px; text-decoration: none; color: var(--texto); font-size: .92rem;
}
.colegio-sel-item:hover { background: var(--fondo); color: var(--texto); }
.colegio-sel-item.activo { background: var(--fondo); font-weight: 700; }
.colegio-sel-check { margin-left: auto; color: var(--primario); font-weight: 800; }

/* Avisos dentro de la app (cartelitos), por si el PC oculta las notificaciones */
.rec-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.rec-toast { background: #0f172a; color: #fff; border-radius: 12px;
    padding: 12px 30px 12px 14px; box-shadow: 0 10px 34px rgba(0,0,0,.30);
    cursor: pointer; position: relative; transition: opacity .4s; animation: recToastIn .25s ease; }
.rec-toast strong { display: block; font-size: .95rem; }
.rec-toast-body { font-size: .85rem; opacity: .92; margin-top: 2px; }
.rec-toast-x { position: absolute; top: 5px; right: 10px; font-size: 1.15rem; opacity: .8; line-height: 1; }
@keyframes recToastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

footer {
    text-align: center;
    color: var(--texto-suave);
    font-size: 0.8rem;
    padding: 30px 0;
}

/* ---- Remuneraciones ---- */
.remun-importar {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    justify-content: space-between;
    background: var(--fondo-suave, #f7f9fc);
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 12px; padding: 16px 18px; margin: 6px 0 18px;
}
.remun-importar-campos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Cierre de mes: misma caja que la de importar, en rojo cuando está cerrado. */
.remun-cierre {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    justify-content: space-between;
    background: var(--fondo-suave, #f7f9fc);
    border: 1px solid var(--borde, #e2e8f0);
    border-radius: 12px; padding: 16px 18px; margin: 6px 0 18px;
}
.remun-cierre-on { background: #fef2f2; border-color: #fca5a5; }
.remun-liq { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 12px; }
.remun-col h2 { font-size: 1.05rem; margin: 0 0 10px; }
.remun-grupo { margin-bottom: 14px; }
.remun-grupo-tit {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-suave, #64748b); font-weight: 700; margin-bottom: 4px;
    border-bottom: 1px solid var(--borde, #e2e8f0); padding-bottom: 3px;
}
.remun-linea {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 4px 0; font-size: 0.92rem;
}
.remun-linea span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.remun-total {
    border-top: 2px solid var(--borde, #e2e8f0); margin-top: 6px;
    padding-top: 8px; font-weight: 700;
}
.remun-liquido {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 18px; padding: 14px 18px; border-radius: 12px;
    background: #ecfdf5; border: 1px solid #a7f3d0;
    font-size: 1.15rem; font-weight: 800; color: #065f46;
}
.remun-liquido span:last-child { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .remun-liq { grid-template-columns: 1fr; } }

/* ---- Asistencia ---- */
.asis-pincel {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 10px 0 14px;
}
.asis-brush {
    border: 1px solid var(--borde, #e2e8f0); background: #fff;
    border-radius: 999px; padding: 6px 12px; cursor: pointer;
    font-size: 0.85rem; font-weight: 600; color: var(--texto, #1e293b);
    display: inline-flex; align-items: center; gap: 6px;
}
.asis-brush .asis-brush-letra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px; font-size: 0.72rem;
    font-weight: 800; color: #fff;
}
.asis-brush.activo { outline: 3px solid rgba(37,99,235,.35); border-color: #2563eb; }
.asis-tabla { border-collapse: separate; border-spacing: 0; }
.asis-tabla th, .asis-tabla td { border: 1px solid var(--borde, #e2e8f0); }
.asis-dia { text-align: center; padding: 4px 0; min-width: 30px; font-size: 0.8rem; }
.asis-dow { font-size: 0.68rem; color: var(--texto-suave, #64748b); font-weight: 700; }
.asis-finde { background: #f1f5f9; }
.asis-finde-cell { background: #f8fafc; }
.asis-sticky { position: sticky; left: 0; z-index: 2; background: #fff; }
.asis-col-nombre { min-width: 210px; text-align: left; }
thead .asis-col-nombre { z-index: 3; }
.asis-cell {
    text-align: center; cursor: pointer; user-select: none;
    font-weight: 800; font-size: 0.75rem; color: #fff; min-width: 30px;
    height: 34px; padding: 0;
}
.asis-total-col, .asis-total { text-align: center; min-width: 54px; font-weight: 700; }
.asis-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 0.85rem; }
.asis-ley-item { display: inline-flex; align-items: center; gap: 6px; }
.asis-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 22px; border-radius: 6px; font-size: 0.72rem;
    font-weight: 800; color: #fff;
}
/* Colores por estado (comparten .asis-a etc. entre pincel, chip y celda) */
.asis-p  { background: #16a34a; }   /* Presente (no se usa en celda) */
.asis-a.asis-cell, .asis-a.asis-chip, .asis-a .asis-brush-letra, .asis-brush.asis-a .asis-brush-letra { background: #dc2626; }
.asis-lm.asis-cell, .asis-lm.asis-chip, .asis-brush.asis-lm .asis-brush-letra { background: #7c3aed; }
.asis-psg.asis-cell, .asis-psg.asis-chip, .asis-brush.asis-psg .asis-brush-letra { background: #64748b; }
.asis-in.asis-cell, .asis-in.asis-chip, .asis-brush.asis-in .asis-brush-letra { background: #2563eb; }
.asis-tc.asis-cell, .asis-tc.asis-chip, .asis-brush.asis-tc .asis-brush-letra { background: #0f172a; }
.asis-p.asis-chip, .asis-brush.asis-p .asis-brush-letra { background: #16a34a; }

/* ---- Asistencia: barra superior, dia administrativo y resumen ---- */
.asis-barra {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    justify-content: space-between; margin: 10px 0 14px;
}
.asis-barra .asis-pincel { margin: 0; }
.asis-guardar-top { white-space: nowrap; }
.asis-da.asis-cell, .asis-da.asis-chip, .asis-brush.asis-da .asis-brush-letra { background: #0891b2; }
.asis-co.asis-cell, .asis-co.asis-chip, .asis-brush.asis-co .asis-brush-letra { background: #ea580c; }
.asis-sum-h { text-align: center; min-width: 42px; font-size: 0.74rem; }
.asis-sum { text-align: center; min-width: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
.asis-tabla tfoot td { border-top: 2px solid var(--borde, #e2e8f0); background: #f8fafc; }

/* El sticky de la columna nombre requiere que la tabla NO recorte (overflow
   hidden de .tabla la convertia en el contenedor de scroll y anulaba el sticky). */
.asis-tabla { overflow: visible; border-radius: 0; }

/* ---- Asistencia v2: findes cuentan, celdas chicas, encabezado fijo ---- */
/* Presente suave en la celda (el grid queda claro; las excepciones resaltan). */
.asis-p.asis-cell { background: #dcfce7; color: #166534; }
/* Sábado y domingo: presente en un color distinto (gris azulado) para
   distinguir la columna de fin de semana. Los otros estados mantienen su color. */
.asis-p.asis-cell.asis-finde { background: #dbe3ee; color: #475569; }
.asis-cell.asis-finde { border-left: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; }
/* El encabezado del día es clickeable: pinta la columna completa (cerrar día). */
.asis-tabla thead th.asis-dia { cursor: pointer; }
.asis-tabla thead th.asis-dia:hover { background: #e0e7ff; }
/* Cuadrados más chicos. */
.asis-dia { min-width: 24px; padding: 3px 0; font-size: 0.72rem; }
.asis-cell { min-width: 24px; height: 26px; font-size: 0.68rem; }
/* Scroll interno: fija el encabezado de días (arriba) y el nombre (izquierda). */
.asis-scroll { max-height: calc(100vh - 250px); min-height: 320px; overflow: auto; }
.asis-tabla thead th { position: sticky; top: 0; z-index: 4; background: #fff; }
.asis-tabla thead th.asis-finde { background: #f1f5f9; }
.asis-tabla thead .asis-col-nombre { left: 0; z-index: 6; }

/* Filas compactas en asistencia (la base .tabla usa padding 12px 16px). */
.asis-tabla th, .asis-tabla td { padding: 2px 5px; vertical-align: middle; line-height: 1.15; }
.asis-cell { padding: 0; }
.asis-col-nombre { padding: 4px 9px; }
.asis-col-nombre .etiqueta { font-size: 0.68rem; }

/* ---- Horario semanal (ficha de personal) ---- */
.horario-tabla th, .horario-tabla td { padding: 6px 8px; text-align: center; }
.horario-tabla td:first-child, .horario-tabla th:first-child { text-align: left; }
.horario-tabla input[type="time"] {
    width: 100%; max-width: 130px; padding: 5px 6px;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 8px; font: inherit;
}

/* ---- Haberes por subvención (ficha de personal) ---- */
.hab-grupo {
    border: 1px solid var(--borde, #e2e8f0); border-radius: 12px;
    padding: 8px 16px; margin-bottom: 10px; background: var(--tarjeta, #fff);
}
.hab-grupo summary {
    cursor: pointer; font-weight: 700; padding: 6px 0;
    display: flex; align-items: center; gap: 10px;
}
.hab-grupo summary .etiqueta { font-weight: 500; }
.hab-grupo[open] summary { border-bottom: 1px solid var(--borde, #e2e8f0); margin-bottom: 4px; }

/* Marca imponible / no imponible de cada haber. */
.hab-badge {
    display: inline-block; font-size: 0.66rem; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
}
.hab-badge.imp { background: #dbeafe; color: #1e40af; }
.hab-badge.noimp { background: #f1f5f9; color: #475569; }

/* Bonos acordados con el sostenedor: filas dinámicas. */
.bono-fila {
    display: flex; gap: 10px; align-items: center; margin-bottom: 8px;
}
.bono-fila input[name="bono_nombre"] { flex: 1 1 auto; }
.bono-fila input[name="bono_monto"] { flex: 0 0 160px; text-align: right; }
.bono-quitar { flex: 0 0 auto; }

/* Tabla con encabezado fijo y scroll interno (reutilizable). */
.scroll-fijo { max-height: calc(100vh - 250px); min-height: 300px; overflow: auto; }
.tabla-fija { overflow: visible; }  /* anula el overflow:hidden de .tabla que rompe el sticky */
.tabla-fija thead th {
    position: sticky; top: 0; z-index: 4;
    background: var(--fondo, #f1f5f9);
}
.barra-guardar { display: flex; justify-content: flex-end; margin: 4px 0 12px; }

/* Tabla de Personal compacta: más trabajadores visibles por pantalla. */
.tabla-personal th, .tabla-personal td { padding: 5px 12px; font-size: 0.84rem; vertical-align: middle; }
.tabla-personal .col-rut { white-space: nowrap; }
.tabla-personal td strong { font-weight: 600; }
.tabla-personal .btn-icono { width: 30px; height: 30px; border-radius: 9px; font-size: 1rem; }
.tabla-personal .acciones-fila { gap: 5px; }
.tabla-personal .acciones-fila .btn { padding: 5px 12px; font-size: 0.8rem; }
.tabla-personal .badge-jefatura { font-size: 0.72rem; }

/* Cabecera de Personal compacta: recupera alto para la tabla. */
.personal-cab h1 { margin: 0 0 8px; }
.personal-cab .jefatura-compacta { display: flex; align-items: center; gap: 10px;
    padding: 6px 12px; margin: 0 0 10px; }
.personal-cab .jefatura-compacta .jefatura-lista { margin-top: 0; }
.personal-cab .jefatura-vacia { margin: 0 0 10px; }
.personal-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.personal-acciones .btn { margin: 0; }
.personal-buscar { flex: 1 1 240px; max-width: 360px; padding: 7px 12px; border: 1px solid var(--borde, #e2e8f0);
    border-radius: 10px; font: inherit; font-size: .9rem; }
.personal-buscar:focus { outline: none; border-color: var(--primario, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.personal-cuenta { white-space: nowrap; }
.scroll-personal { max-height: calc(100vh - 190px); }

/* Editor tipo planilla: todos los trabajadores editables en línea. */
.tabla-editor th, .tabla-editor td { padding: 3px 6px; font-size: 0.8rem; white-space: nowrap; }
.tabla-editor input, .tabla-editor select {
    width: 100%; padding: 3px 6px; font-size: 0.8rem; box-sizing: border-box; }
.tabla-editor .cin-texto { min-width: 160px; }
.tabla-editor .cin-rut { min-width: 115px; }
.tabla-editor .cin-fecha { min-width: 105px; }
.tabla-editor .cin-entero, .tabla-editor .cin-real { min-width: 85px; text-align: right; }
.tabla-editor select { min-width: 125px; }
.tabla-editor .cel-nombre {
    position: sticky; left: 0; z-index: 3; background: var(--tarjeta);
    min-width: 150px; white-space: normal; box-shadow: 2px 0 5px rgba(0,0,0,.05); }
.tabla-editor thead th:first-child { left: 0; z-index: 6; }
.tabla-editor input.zona-warn { border-color: #dc2626; background: #fef2f2; color: #b91c1c; font-weight: 600; }

/* Reparto del sueldo base por subvención: filas dinámicas. */
.jsub-fila { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.jsub-fila select { flex: 0 0 200px; }
.jsub-fila input[name="jsub_horas"] { flex: 0 0 120px; text-align: right; }
.jsub-quitar { flex: 0 0 auto; }

/* ---- Libro de Remuneraciones: encabezado fijo (2 filas) + columnas fijas ---- */
.libro-tabla { border-collapse: separate; border-spacing: 0; }
/* Celdas compactas: menos alto en los encabezados de grupo y filas. */
.libro-tabla th, .libro-tabla td { padding: 5px 9px; font-size: 0.82rem; }
.libro-tabla thead tr:first-child th { padding-top: 4px; padding-bottom: 4px; }
/* Encabezado siempre por encima del cuerpo (z alto y fondo opaco). */
.libro-tabla thead th { position: sticky; z-index: 5; background: var(--fondo, #f1f5f9); }
.libro-tabla thead tr:first-child th { top: 0; }
.libro-tabla thead tr:nth-child(2) th { top: 42px; }  /* el JS ajusta el valor real */
/* Columnas fijas a la izquierda (N° hasta Días trab.). Los offsets 'left' los
   calcula el JS según el ancho real de cada columna. */
.libro-tabla tbody .lf, .libro-tabla tfoot .lf { position: sticky; left: 0; z-index: 2; background: var(--tarjeta, #fff); }
.libro-tabla thead .lf { position: sticky; left: 0; z-index: 7; background: var(--fondo, #f1f5f9); }
.libro-tabla .lf2 { min-width: 190px; }
.libro-tabla .lf5 { box-shadow: 2px 0 0 var(--borde, #e2e8f0); }  /* separador de la zona fija */
/* Subtotales por subvención y total general en el pie del Libro. */
.libro-tabla tfoot .fila-subtotal td { background: #eef2ff; border-top: 1px solid #c7d2fe; }
.libro-tabla tfoot .fila-total-gral td { background: #e2e8f0; border-top: 2px solid #94a3b8; }

/* Bonos acordados con el sostenedor (410121): filas dinámicas por subvención. */
.b121-fila { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.b121-fila input[name$="_nombre"] { flex: 1 1 auto; }
.b121-fila input[name$="_monto"] { flex: 0 0 140px; text-align: right; }
.b121-quitar { flex: 0 0 auto; }

/* Columna Total Imponible del Libro: resaltada. */
.libro-tabla .col-total-imp { background: #eff6ff; }
.libro-tabla thead .col-total-imp { background: #dbeafe; }
.libro-tabla .col-total-hab { background: #ecfdf5; }
.libro-tabla thead .col-total-hab { background: #d1fae5; }
.libro-tabla .col-desc { background: #fef2f2; }
.libro-tabla thead .col-desc { background: #fee2e2; }
.libro-tabla .col-liquido { background: #dcfce7; }
.libro-tabla thead .col-liquido { background: #bbf7d0; }
/* Grupos de descuentos: cada uno con un tono distinto para diferenciarlos. */
.libro-tabla .g-afp { background: #fef2f2; }   /* rosado */
.libro-tabla thead .g-afp { background: #fecaca; }
.libro-tabla .g-sal { background: #fff7ed; }   /* ámbar */
.libro-tabla thead .g-sal { background: #fed7aa; }
.libro-tabla .g-ces { background: #fefce8; }   /* amarillo */
.libro-tabla thead .g-ces { background: #fef08a; }
.libro-tabla .g-imp { background: #faf5ff; }   /* violeta */
.libro-tabla thead .g-imp { background: #e9d5ff; }
.libro-tabla .g-otr { background: #f0f9ff; }   /* celeste */
.libro-tabla thead .g-otr { background: #bae6fd; }
/* Separador vertical al inicio de cada grupo. */
.libro-tabla .gstart { border-left: 2px solid #cbd5e1; }
.libro-tabla thead .gstart { border-left: 2px solid #94a3b8; }

/* Fila de continuación (misma persona, otra subvención) en el Libro. */
.libro-tabla tr.fila-cont td { background: #fafcff; }
.libro-tabla tr.fila-cont .lf { background: #fafcff; }

/* Base previsional: formato tipo Previred (dos columnas, encabezados morados). */
.prev-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .prev-cols { grid-template-columns: 1fr; } }
.prev-col { display: flex; flex-direction: column; gap: 16px; }
.prev-card { border: 1px solid #e3e0ec; border-radius: 8px; overflow: hidden;
    background: #fff; }
.prev-h { background: #6d5b8e; color: #fff; font-weight: 600; font-size: .82rem;
    letter-spacing: .02em; text-align: center; padding: 8px 10px; }
.prev-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prev-tabla td, .prev-tabla th { padding: 6px 10px; border-bottom: 1px solid #eef0f4; }
.prev-tabla tr:last-child td { border-bottom: none; }
.prev-tabla thead th { background: #efeaf5; color: #4a3f63; font-weight: 600;
    font-size: .8rem; text-align: center; border-bottom: 1px solid #e3e0ec; }
.prev-tabla .der { text-align: right; white-space: nowrap; }
.prev-tabla thead th.der { text-align: right; }
.prev-in { border: 1px solid transparent; border-radius: 4px; background: #f7f8fa;
    padding: 3px 6px; font-size: .9rem; text-align: right; width: 100px;
    font-family: inherit; color: inherit; }
.prev-in:hover { border-color: #d7dae0; }
.prev-in:focus { border-color: #6d5b8e; background: #fff; outline: none; }
.prev-in.mini { width: 56px; }
.prev-in.txt { width: 92px; text-align: left; }
.prev-afp td, .prev-afp th { padding: 5px 7px; text-align: center; }
.prev-afp td:first-child { text-align: left; }
.prev-money { font-variant-numeric: tabular-nums; color: #223; }

/* ---- Reportes ---- */
.reporte-ident { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px; }
.reporte-ident > div { display: flex; flex-direction: column; }
.reporte-ident .etiqueta { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; }
.reporte-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 18px; }
.reporte-kpi { flex: 1 1 150px; min-width: 150px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.reporte-kpi span { font-size: .74rem; color: #64748b; }
.reporte-kpi strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; color: #0f172a; }
.reporte-kpi em { font-style: normal; }
.reporte-kpi.kpi-ok { border-left: 4px solid #16a34a; }
.reporte-kpi.kpi-gasto { border-left: 4px solid #f59e0b; }
.reporte-kpi.kpi-neg { border-left: 4px solid #dc2626; }
.reporte-kpi.kpi-neg strong { color: #dc2626; }
.reporte-grafico { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin-bottom: 16px; overflow-x: auto; }
.reporte-barra { height: 12px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: 4px 0 18px; }
.reporte-barra-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 999px; }
.reporte-persona-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.reporte-pct { font-weight: 700; font-size: .9rem; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.reporte-pct.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.reporte-pct.media { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.reporte-pct.baja { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.reporte-persona-det { border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 8px; background: var(--tarjeta); }
.reporte-persona-det > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 14px; flex-wrap: wrap; }
.reporte-persona-det > summary::-webkit-details-marker { display: none; }
.reporte-persona-det > summary::before { content: '▸'; color: var(--texto-suave); font-size: .8rem; transition: transform .12s ease; }
.reporte-persona-det[open] > summary::before { transform: rotate(90deg); }
.reporte-persona-nom { font-weight: 600; }
.reporte-persona-det > .tabla-scroll { padding: 0 14px 10px; }
.gestion-metas { padding: 2px 14px 10px; }
.gestion-meta { padding: 8px 0; border-top: 1px solid var(--borde); }
.gestion-meta:first-child { border-top: none; }
.gestion-meta-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gestion-meta-nom { font-weight: 600; }
.gestion-pend-num { font-size: .72rem; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 1px 8px; }
.gestion-pend-lista { margin: 6px 0 0; padding-left: 2px; list-style: none; }
.gestion-pend-lista li { padding: 2px 0; font-size: .82rem; }
.gestion-badge-pend { font-size: .68rem; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 999px; padding: 0 7px; }
.gestion-todo-ok { margin: 4px 0 0; font-size: .78rem; color: #047857; }

@media print {
    .no-print, .admin-menu, .enlace-volver { display: none !important; }
    .admin-layout { display: block; }
    .admin-contenido { padding: 0; }
    body { background: #fff; }
}

/* ---- Finiquito electrónico: grilla del formulario ---- */
.finiq-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 16px; margin: 6px 0 18px;
}
.finiq-campo { display: flex; flex-direction: column; gap: 3px; }
.finiq-campo label { font-size: 0.82rem; font-weight: 600; color: var(--texto-suave, #475569); }
.finiq-campo input, .finiq-campo select { padding: 7px 9px; border: 1px solid var(--borde, #e2e8f0); border-radius: 8px; }
.finiq-campo.finiq-monto input { text-align: right; font-variant-numeric: tabular-nums; }
.btn-desactivado { opacity: .5; pointer-events: none; }

/* ---- Certificados Laborales: tarjetas de documentos ---- */
.cert-doc {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--borde, #e2e8f0);
    border-radius: 10px; background: #fff; margin-bottom: 10px;
}

/* ---- Certificados: guía de pasos del F30-1 ---- */
.cert-guia { margin: 6px 0; padding-left: 18px; display:flex; flex-direction:column; gap:8px; font-size:0.92rem; }
.cert-guia li { line-height: 1.6; }

/* ---- Certificados: tarjetas de Documentos ---- */
.cert-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin: 6px 0 16px; }
.cert-card { position: relative; border: 1px solid var(--borde, #e2e8f0); border-radius: 12px;
    background: var(--tarjeta, #fff); padding: 16px 16px 16px 54px; }
.cert-card-num { position: absolute; left: 14px; top: 15px; width: 27px; height: 27px; border-radius: 50%;
    background: var(--primario, #2563eb); color: #fff; font-weight: 700; font-size: .9rem;
    display: flex; align-items: center; justify-content: center; }
.cert-card-tit { font-weight: 700; }
.cert-card-sub { font-size: .85rem; color: var(--texto-suave, #64748b); margin-top: 3px; }
.cert-card-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cert-card-full { grid-column: 1 / -1; }
.cert-adjuntar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cert-generar { margin-top: 18px; }
@media (max-width: 760px) { .cert-docs { grid-template-columns: 1fr; } }

/* ---- Certificados enviados: tabla ordenada ---- */
.enviados-tabla td, .enviados-tabla th { vertical-align: middle; }
.enviados-archivo { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.enviados-acciones { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.enviados-acciones .btn { padding: 5px 10px; }

/* ---- Nuevo ordinario: layout de 2 columnas ---- */
.memo-nuevo-wrap { max-width: 1080px; margin: 0 auto; }
.memo-form.form-datos { max-width: none; }
.memo-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.memo-grid .memo-col { display: flex; flex-direction: column; min-width: 0; }
.form-datos textarea, .form-datos select { padding: 9px 11px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; font-size: 1rem; width: 100%; box-sizing: border-box; }
.adj-input { display: block; margin-top: 6px; }
@media (max-width: 820px) { .memo-grid { grid-template-columns: 1fr; gap: 8px; } }

/* --- Activación de Protocolos: lista más amigable --- */
.prot-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.prot-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid rgba(0,0,0,.10); border-radius: 12px; background: #f8fafc; text-decoration: none; color: inherit; }
.prot-tile-num { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.prot-tile-lbl { font-size: .82rem; color: #64748b; }
.prot-tile-venc { background: #fef2f2; border-color: #fecaca; }
.prot-tile-venc .prot-tile-num { color: #dc2626; }
.prot-tile-prox { background: #fffbeb; border-color: #fde68a; }
.prot-tile-prox .prot-tile-num { color: #b45309; }

.prot-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.prot-buscar { flex: 1; min-width: 200px; padding: 9px 12px; border: 1px solid rgba(0,0,0,.2); border-radius: 999px; font-size: .95rem; box-sizing: border-box; }
.prot-filtro { display: flex; align-items: center; gap: 6px; }
.prot-filtro select { padding: 8px 10px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; }

.prot-tabla tbody .prot-fila { cursor: pointer; transition: background .12s; }
.prot-tabla tbody .prot-fila:hover { background: #eff6ff; }
.prot-fila-venc { box-shadow: inset 4px 0 0 #dc2626; }
.prot-fila-venc:hover { background: #fef2f2; }
.prot-fila-prox { box-shadow: inset 4px 0 0 #f59e0b; }
.prot-fila-prox:hover { background: #fffbeb; }

.prot-vacio { text-align: center; padding: 20px 0; }

@media (prefers-color-scheme: dark) {
  .prot-tile { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
  .prot-tile-lbl { color: #94a3b8; }
  .prot-tile-venc { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.4); }
  .prot-tile-prox { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); }
  .prot-tabla tbody .prot-fila:hover { background: rgba(59,130,246,.14); }
}
@media (max-width: 820px) {
  .prot-resumen { grid-template-columns: repeat(2, 1fr); }
  .prot-buscar { min-width: 0; width: 100%; flex: 1 1 100%; order: 3; }
}

/* Nueva carpeta de protocolo: campos cortos en pares */
.prot-pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.prot-pareja > div { display: flex; flex-direction: column; }
@media (max-width: 620px) { .prot-pareja { grid-template-columns: 1fr; } }

/* --- Pasos del protocolo: tarjetas (con destacado y evidencia) --- */
.pasos-lista { display: flex; flex-direction: column; gap: 8px; }
.paso-card { border: 1px solid rgba(0,0,0,.10); border-radius: 10px; padding: 9px 12px; background: #fff; }
.paso-card.paso-hecho { background: #f0fdf4; border-color: #bbf7d0; }
.paso-card.paso-venc { box-shadow: inset 4px 0 0 #dc2626; }
.paso-card.paso-prox { box-shadow: inset 4px 0 0 #f59e0b; }
.paso-card.paso-mio { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.28); background: #fffdf5; }
.paso-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paso-top .paso-nombre { font-weight: 600; flex: 1; min-width: 140px; }
.paso-destacado { background: #fef3c7; color: #92400e; border-radius: 999px; padding: 2px 9px; font-size: .78rem; font-weight: 600; }
.paso-estado-badge { flex: 0 0 auto; }
.paso-acc { display: flex; gap: 6px; margin-left: auto; }
.paso-controles { display: grid; grid-template-columns: minmax(150px, 1.6fr) 138px 138px auto minmax(120px, 1fr); gap: 8px 10px; align-items: center; margin-top: 6px; }
.paso-edit-row { display: contents; }
.paso-edit-row select, .paso-edit-row input[type=date] { min-width: 0; width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px; font-size: .88rem; height: 34px; }
.paso-edit-row .btn-mini { white-space: nowrap; }
.paso-ro { grid-column: 1 / 5; font-size: .9rem; color: inherit; }
.paso-evi { grid-column: 5; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: .86rem; justify-content: flex-end; }
.paso-evi-btn { cursor: pointer; }
@media (max-width: 720px) {
  .paso-controles { grid-template-columns: 1fr; }
  .paso-ro, .paso-evi { grid-column: 1; justify-content: flex-start; }
}
.paso-evi-estado { font-size: .9rem; font-weight: 600; }
.paso-evi-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-chip { display: inline-block; background: rgba(0,0,0,.05); border-radius: 999px; padding: 3px 10px; font-size: .82rem; text-decoration: none; color: inherit; }
.doc-chip:hover { background: rgba(0,0,0,.10); }

@media (prefers-color-scheme: dark) {
  .paso-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
  .paso-card.paso-hecho { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.4); }
  .paso-card.paso-mio { background: rgba(245,158,11,.10); }
  .paso-linea label { color: #94a3b8; }
  .paso-evidencia { border-top-color: rgba(255,255,255,.14); }
  .doc-chip { background: rgba(255,255,255,.08); }
}
@media (max-width: 640px) { .paso-linea, .paso-linea-ro { grid-template-columns: 1fr; } }

/* --- Menú lateral: grupos (Módulos/Gestión/Cuenta) desplegables ---
   Cada módulo lleva su propio color y una línea que lo separa del siguiente:
   con quince entradas seguidas, el gris pequeño de antes no dejaba ver dónde
   terminaba un módulo y empezaba el otro. */
.menu-seccion {
    display: block;
    margin-top: 2px;
    --mod-color: #94a3b8;
    --mod-fondo: rgba(148, 163, 184, .12);
}
.menu-seccion:first-of-type { margin-top: 2px; }
.menu-seccion.mod-colegio        { --mod-color: #4f46e5; --mod-fondo: rgba(79, 70, 229, .055); }
.menu-seccion.mod-administracion { --mod-color: #2563eb; --mod-fondo: rgba(37, 99, 235, .055); }
.menu-seccion.mod-convivencia    { --mod-color: #dc2626; --mod-fondo: rgba(220, 38, 38, .055); }
.menu-seccion.mod-direccion      { --mod-color: #0f766e; --mod-fondo: rgba(15, 118, 110, .055); }
.menu-seccion.mod-orientacion    { --mod-color: #0891b2; --mod-fondo: rgba(8, 145, 178, .055); }
.menu-seccion.mod-unidad-tecnica { --mod-color: #7c3aed; --mod-fondo: rgba(124, 58, 237, .055); }
.menu-seccion.mod-inspectoria    { --mod-color: #d97706; --mod-fondo: rgba(217, 119, 6, .06); }
.menu-seccion.mod-pie            { --mod-color: #059669; --mod-fondo: rgba(5, 150, 105, .06); }
.menu-seccion.mod-pise           { --mod-color: #65a30d; --mod-fondo: rgba(101, 163, 13, .06); }
.menu-seccion.mod-gestion        { --mod-color: #db2777; --mod-fondo: rgba(219, 39, 119, .055); }
.menu-seccion.mod-cuenta         { --mod-color: #475569; --mod-fondo: rgba(71, 85, 105, .055); }

.menu-seccion-tit {
    margin: 0 0 1px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mod-color);
    font-weight: 700;
    padding: 3px 9px;
    background: var(--mod-fondo);
    border-left: 3px solid var(--mod-color);
    border-radius: 6px;
    cursor: pointer;
}
.menu-seccion-tit:hover { background: var(--mod-fondo); filter: brightness(.985); }
.menu-seccion[open] > .menu-seccion-tit { margin-bottom: 1px; }
.menu-seccion-tit .menu-caret { margin-left: auto; color: var(--mod-color); opacity: .8; }

/* Submódulos: quedan indentados y algo más chicos que el encabezado del módulo */
.menu-seccion > .admin-menu-item,
.menu-seccion > .menu-grupo > .menu-grupo-sum { padding-left: 17px; font-size: .85rem; }
.menu-seccion-tit::-webkit-details-marker { display: none; }
.menu-seccion[open] > .menu-seccion-tit .menu-caret { transform: rotate(180deg); }

/* --- Menú lateral: submódulos desplegables --- */
.menu-grupo { display: block; }
.menu-grupo-sum { cursor: pointer; list-style: none; }
.menu-grupo-sum { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.menu-grupo-sum::-webkit-details-marker { display: none; }
.menu-caret { transition: transform .18s; font-size: .78em; opacity: .65; flex: 0 0 auto; }
.menu-grupo[open] > .menu-grupo-sum .menu-caret { transform: rotate(180deg); }
.menu-sub { display: flex; flex-direction: column; gap: 0; margin: 1px 0 2px 10px; padding-left: 8px; border-left: 2px solid rgba(0,0,0,.10); }
.admin-submenu-item { display: block; padding: 3px 10px; border-radius: 6px; text-decoration: none; color: inherit; font-size: .82rem; font-weight: 400; }
.admin-submenu-item:hover { background: rgba(0,0,0,.05); }
.admin-submenu-item.activo { background: var(--primario, #2563eb); color: #fff; font-weight: 600; }
.admin-menu .filtro-etiqueta { margin-top: 12px; margin-bottom: 2px; }
.admin-menu .filtro-etiqueta:first-child { margin-top: 0; }
@media (prefers-color-scheme: dark) {
  .menu-sub { border-left-color: rgba(255,255,255,.14); }
  .admin-submenu-item:hover { background: rgba(255,255,255,.06); }
  .menu-seccion { border-top-color: rgba(255,255,255,.14); }
}

/* ------- Configuración de contratos (editor de plantillas) ------- */
.contrato-cfg { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.contrato-cfg-form { min-width: 0; }
.campo-lbl { display: block; font-weight: 600; margin-bottom: 4px; }
.campo-txt { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: .95rem; box-sizing: border-box; }
.ayuda-mini { font-size: .82rem; color: #64748b; margin: 2px 0 6px; }
.ayuda-mini code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
.contrato-cfg-txt { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #cbd5e1;
    border-radius: 8px; font-family: "Cascadia Code", Consolas, monospace; font-size: .9rem; line-height: 1.5; resize: vertical; }
.contrato-cfg-acciones { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pill-ok { background: #dcfce7; color: #166534; border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 600; }
.pill-info { background: #e0f2fe; color: #075985; border-radius: 999px; padding: 3px 12px; font-size: .8rem; }
.btn-sm { padding: 5px 12px; font-size: .85rem; }
.contrato-cfg-vars { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; position: sticky; top: 10px; }
.contrato-cfg-vars h3 { margin: 0 0 2px; font-size: 1rem; }
.var-grupo { margin-top: 12px; }
.var-grupo-tit { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 700; }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.var-chip { background: #fff; border: 1px solid #cbd5e1; border-radius: 999px; padding: 4px 11px; font-size: .82rem;
    cursor: pointer; color: #1e293b; transition: background .12s, border-color .12s; }
.var-chip:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
@media (max-width: 820px) {
    .contrato-cfg { grid-template-columns: 1fr; }
    .contrato-cfg-vars { position: static; }
}
@media (prefers-color-scheme: dark) {
    .campo-txt, .contrato-cfg-txt { background: #0f172a; border-color: #334155; color: #e2e8f0; }
    .contrato-cfg-vars { background: #0f172a; border-color: #334155; }
    .var-chip { background: #1e293b; border-color: #334155; color: #e2e8f0; }
    .ayuda-mini code { background: #1e293b; }
}

/* ------- Visualizador de la plantilla de contrato ------- */
.cfg-editor-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.btn-secundario.activo { background: #2563eb; color: #fff; border-color: #2563eb; }
.cfg-preview-wrap { margin-top: 16px; }
.cfg-preview-nota { font-size: .82rem; color: #64748b; margin: 0 0 8px; }
.contrato-preview {
    background: #fff; color: #111; border: 1px solid #cbd5e1; border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    padding: 48px 56px; max-width: 794px; margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 1.4;
}
.contrato-preview .prev-par { text-align: justify; margin: 0; min-height: 1em; }
.contrato-preview .prev-tabla { border-collapse: collapse; width: 100%; margin: 6px 0 10px; }
.contrato-preview .prev-tabla th, .contrato-preview .prev-tabla td { border: 1px solid #333; padding: 3px 8px; text-align: left; font-size: 10pt; }
.contrato-preview .prev-tabla th { font-weight: bold; }
.contrato-preview .prev-par.prev-left { text-align: left; }
.contrato-preview .prev-centro { text-align: center; }
.contrato-preview .prev-bold { font-weight: bold; }
.contrato-preview .prev-titulo { font-size: 13pt; margin: 4px 0 12px; }
@media (prefers-color-scheme: dark) {
    /* El documento se ve siempre como papel blanco, aunque el tema sea oscuro. */
    .contrato-preview { background: #fff; color: #111; border-color: #334155; }
}

/* Campo de ancho completo (textarea de Detalle / Hechos adicionales) */
.campo-ancho { display: block; margin-top: 12px; font-weight: 600; }
.campo-ancho textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: 5px;
    padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px;
    background: #fff; color: #0f172a;
    font-family: inherit; font-size: .95rem; font-weight: 400; line-height: 1.4;
    resize: vertical; min-height: 60px;
}

.cfg-editor-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* Panel "Crear documento para un trabajador" en configuración de contratos */
.cfg-generar { margin-top: 20px; padding: 16px 18px; background: #f0f9ff; border: 1px solid #7dd3fc; border-radius: 10px; }
.cfg-generar h3 { margin: 0 0 2px; font-size: 1.05rem; }
.cfg-generar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 8px; }
.cfg-generar-grid label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }
.cfg-generar-grid select, .cfg-generar-grid input { padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 8px; font-weight: 400; background: #fff; color: #0f172a; }
@media (prefers-color-scheme: dark) {
    .cfg-generar { background: #0b2233; border-color: #1e4f6b; }
}

/* Lista y editor de plantillas de contrato */
.plant-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; }
.plant-tabla td { vertical-align: middle; }
.plant-fila-acc { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.cfg-datos-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.cfg-datos-grid .campo-lbl { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 680px) { .cfg-datos-grid { grid-template-columns: 1fr; } }

/* Encabezado (logo + texto) en la vista previa del contrato.
   Slots fijos e iguales a izquierda y derecha para que el texto quede
   centrado respecto a toda la hoja (como en el documento). */
.contrato-preview .prev-enc-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.contrato-preview .prev-enc-slot { flex: 0 0 64px; }
.contrato-preview .prev-enc-logo { height: 46px; width: auto; max-width: 100%; }
.contrato-preview .prev-enc-txt { flex: 1; text-align: center; }
.contrato-preview .prev-enc-linea { margin: 0; font-family: Verdana, Geneva, sans-serif; font-size: 8pt; font-weight: bold; line-height: 1.15; }

/* Lista de bonos (declaraciones) con nombre */
.decl-bono { display: flex; align-items: center; gap: 6px; margin: 2px 0; white-space: nowrap; }
.decl-bono-nom { font-weight: 600; }

/* Desplegable de carga/importación de licencias */
.lic-cargar { border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 16px; background: #f8fafc; }
.lic-cargar-sum { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 10px 14px; font-weight: 600; }
.lic-cargar-sum::-webkit-details-marker { display: none; }
.lic-cargar[open] .lic-cargar-sum .menu-caret { transform: rotate(180deg); }
.lic-cargar-cuerpo { padding: 0 14px 12px; }

/* Ingresos: barra de proporción por concepto */
.ingreso-bar { height: 5px; background: #e5e7eb; border-radius: 999px; margin-top: 6px; max-width: 320px; overflow: hidden; }
.ingreso-bar span { display: block; height: 100%; background: #16a34a; border-radius: 999px; }
.ingreso-pend { color: #94a3b8; font-style: italic; }
.ingresos-tabla td { vertical-align: middle; }

/* Datos del establecimiento: tarjetas y grilla elegante */
.datos-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 18px; }
.datos-doble > * { min-width: 0; }        /* deja que las tarjetas se encojan (no se desborden) */
.datos-doble .datos-logo-card { margin: 0; height: 100%; }
.datos-doble .logo-acciones, .datos-doble .logo-form { min-width: 0; }
.datos-doble .logo-form input[type="file"] { max-width: 100%; min-width: 0; }
.datos-tarjeta { background: var(--tarjeta, #fff); border: 1px solid var(--borde, #e2e8f0);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.datos-tarjeta h2 { font-size: 1rem; margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px; border-bottom: 1px solid var(--borde, #eef2f7); }
.datos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.datos-grid .campo { display: flex; flex-direction: column; gap: 4px; }
.datos-grid .campo.full { grid-column: 1 / -1; }
.datos-grid label { font-size: .82rem; font-weight: 600; color: var(--texto-suave, #475569); }
.datos-grid input { padding: 9px 11px; border: 1px solid var(--borde, #cbd5e1); border-radius: 8px;
    font-size: .95rem; background: var(--fondo, #fff); color: inherit; box-sizing: border-box; }
.datos-grid input:focus { outline: none; border-color: var(--primario, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
@media (max-width: 760px) { .datos-doble, .datos-grid { grid-template-columns: 1fr; } }

/* Ventana emergente para elegir estamentos del archivo Previred */
.prev-modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.prev-modal-caja { background: var(--tarjeta, #fff); color: inherit; border: 1px solid var(--borde, #e5e7eb);
    border-radius: 14px; padding: 22px; width: 100%; max-width: 420px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.prev-modal-ops { display: flex; flex-direction: column; gap: 10px; }
.prev-modal-ops label { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--borde, #e5e7eb); border-radius: 10px; cursor: pointer; font-weight: 600; }
.prev-modal-ops label:hover { border-color: var(--primario, #2563eb); }
.prev-modal-ops input[type="checkbox"] { width: 18px; height: 18px; }

/* Estadísticas de Asistencia */
.ea-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.ea-panel { min-width: 0; }
.ea-tabla td { padding: 5px 8px; vertical-align: middle; }
.ea-nom { white-space: nowrap; font-size: .9rem; }
.ea-val { text-align: right; white-space: nowrap; font-size: .9rem; }
.ea-graf { width: 60%; }
.ea-bar { background: var(--borde, #e5e7eb); border-radius: 6px; height: 14px; overflow: hidden; }
.ea-bar > span { display: block; height: 100%; border-radius: 6px; }
@media (max-width: 820px) { .ea-cols { grid-template-columns: 1fr; } }

/* Matriz curso × mes (comparación por mes) */
.ea-matriz td, .ea-matriz th { padding: 4px 8px; font-size: .85rem; }
.ea-matriz td.ea-celda { text-align: center; white-space: nowrap; }
.ea-matriz-tot td { border-top: 2px solid var(--borde, #e5e7eb); }
.ea-matriz-mat td { color: #64748b; font-size: .8rem; }

/* Controles de la matriz interactiva de asistencia */
.ea-controles { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 4px 0 8px; }
.ea-controles .mes-seg-item { cursor: pointer; }
.ea-ord { cursor: pointer; user-select: none; }
.ea-ord:hover { color: var(--primario, #2563eb); }
.ea-matriz tbody tr:hover td { background: rgba(37, 99, 235, .06); }
.ea-matriz tbody tr:hover .ea-celda[style*="background"] { filter: brightness(.97); }

/* ===== Nerudin: asistente/mascota animada ===== */
.nerudin {
    position: fixed; right: 18px; bottom: 14px; z-index: 900;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    transform: translateY(150%); transition: transform .6s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
.nerudin.visible { transform: translateY(0); }
/* Nerudin, con vida: la figura "respira" (escala) y la imagen "flota/saluda"
   (traslado + rotación). Son capas de transform distintas (padre vs. hijo) para
   que se compongan sin pisarse. */
.nerudin-fig {
    position: relative; cursor: pointer; pointer-events: auto; line-height: 0;
    animation: nerudinBreathe 4s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.nerudin-img {
    width: 118px; height: auto; display: block;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
    animation: nerudinIdle 6s ease-in-out infinite;
    transform-origin: 50% 92%;          /* pivota desde los pies al inclinarse */
    transition: filter .18s ease;
}
/* Al pasar el mouse: se agranda la sombra (feedback sin pelear con la animación). */
.nerudin-fig:hover .nerudin-img { filter: drop-shadow(0 12px 20px rgba(0,0,0,.36)); }
/* Canvas de la animación Rive (cuando el colegio subió un .riv): Rive lo mueve,
   sin animación CSS encima. */
.nerudin-canvas { width: 118px; height: auto; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
/* Video de Nerudin (clips recortados): Nerudin animado con sus videos. */
.nerudin-video { width: 132px; height: auto; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
.nerudin-fig:hover .nerudin-video { filter: drop-shadow(0 12px 20px rgba(0,0,0,.36)); }
/* El atributo hidden debe ganarle al display:block de estas clases (si no, se
   ven la imagen y el video a la vez). */
.nerudin-img[hidden], .nerudin-canvas[hidden], .nerudin-video[hidden] { display: none !important; }
/* Con avisos pendientes: saluda cada tanto para llamar la atención. */
.nerudin.con-avisos .nerudin-img { animation: nerudinLlama 3.4s ease-in-out infinite; }
/* Saludo puntual (al aparecer o al tocarlo): salto con squash & stretch. */
.nerudin.saluda .nerudin-img { animation: nerudinWave .9s cubic-bezier(.34,1.56,.64,1); }

@keyframes nerudinBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes nerudinIdle {
    0%,100% { transform: translateY(0) rotate(0); }
    25%     { transform: translateY(-7px) rotate(-1.5deg); }
    50%     { transform: translateY(0) rotate(0); }
    70%     { transform: translateY(-5px) rotate(2deg); }
    85%     { transform: translateY(-2px) rotate(-1deg); }
}
@keyframes nerudinLlama {
    0%, 55%, 100% { transform: translateY(0) rotate(0); }   /* descansa la mayor parte */
    12% { transform: translateY(-11px) rotate(0); }
    22% { transform: translateY(0) rotate(-9deg); }
    32% { transform: translateY(0) rotate(7deg); }
    42% { transform: translateY(0) rotate(-5deg); }
}
@keyframes nerudinWave {
    0%   { transform: translateY(0) scale(1,1) rotate(0); }
    15%  { transform: translateY(5px) scale(1.08,.92) rotate(0); }      /* aterriza: squash */
    45%  { transform: translateY(-20px) scale(.95,1.07) rotate(-7deg); } /* salta: stretch */
    65%  { transform: translateY(0) scale(1.03,.97) rotate(6deg); }
    82%  { transform: translateY(-5px) rotate(-3deg); }
    100% { transform: translateY(0) scale(1,1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .nerudin-fig, .nerudin-img, .nerudin-badge { animation: none !important; }
}
.nerudin-badge {
    position: absolute; top: 0; right: 0; z-index: 3; min-width: 22px; height: 22px; padding: 0 5px;
    background: #ef4444; color: #fff; border-radius: 999px; font-size: .78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35);
    border: 2px solid #fff; animation: nerudinPulse 1.8s ease-in-out infinite;
}
@keyframes nerudinPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.nerudin-globo {
    position: relative; pointer-events: auto; max-width: 260px; margin-right: 24px;
    background: var(--tarjeta, #fff); color: var(--texto, #1e293b);
    border: 1px solid var(--borde, #e2e8f0); border-radius: 16px;
    padding: 14px 16px 12px; box-shadow: 0 14px 34px rgba(0,0,0,.20);
    animation: nerudinPop .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes nerudinPop { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } }
.nerudin-globo::after {
    content: ""; position: absolute; right: 26px; bottom: -9px; width: 18px; height: 18px;
    background: var(--tarjeta, #fff); border-right: 1px solid var(--borde, #e2e8f0);
    border-bottom: 1px solid var(--borde, #e2e8f0); transform: rotate(45deg);
}
.nerudin-texto { font-size: .92rem; line-height: 1.45; padding-right: 10px; }
.nerudin-ir {
    display: inline-block; margin-top: 8px; font-weight: 700; font-size: .85rem;
    color: var(--primario, #2563eb); text-decoration: none;
}
.nerudin-ir:hover { text-decoration: underline; }
.nerudin-cerrar {
    position: absolute; top: 6px; right: 8px; border: none; background: none; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: var(--texto-suave, #94a3b8);
}
.nerudin-cerrar:hover { color: var(--texto, #334155); }
.nerudin-nav { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.nerudin-punto {
    width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
    background: var(--borde, #cbd5e1); cursor: pointer; transition: background .15s;
}
.nerudin-punto:hover { background: var(--texto-suave, #94a3b8); }
.nerudin-punto.on { background: var(--primario, #2563eb); }
.nerudin-flecha {
    border: none; background: none; cursor: pointer; padding: 0 2px;
    font-size: 1.15rem; line-height: 1; color: var(--primario, #2563eb);
}
.nerudin-flecha:hover { opacity: .7; }
@media (max-width: 640px) {
    .nerudin { right: 10px; bottom: 10px; }
    .nerudin-img, .nerudin-canvas { width: 84px; }
    .nerudin-video { width: 94px; }
    .nerudin-globo { max-width: 210px; margin-right: 16px; }
}

/* ===== Orientación: mapeo socioemocional ===== */
/* Niveles del semáforo: 0 sin dato, 1 bien, 2 atención, 3 riesgo. */
.mp-lvl0 { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
.mp-lvl1 { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.mp-lvl2 { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.mp-lvl3 { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* Selector de cursos agrupado por nivel, con buscador y colapso */
.mp-picker-wrap { margin: 12px 0 8px; }
.mp-picker-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mp-picker-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 9px; background: var(--tarjeta, #fff);
    font-weight: 700; font-size: .84rem; color: #1e293b; cursor: pointer; max-width: 100%; }
.mp-picker-toggle:hover { border-color: #93c5fd; }
.mp-picker-caret { color: #64748b; transition: transform .15s; }
.mp-picker-wrap.colapsado .mp-picker-caret { transform: rotate(-90deg); }
.mp-picker-sel { color: #2563eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-picker-buscar { padding: 5px 10px; border: 1px solid var(--borde, #e2e8f0); border-radius: 8px;
    font-size: .82rem; min-width: 150px; }
.mp-picker-wrap.colapsado .mp-picker,
.mp-picker-wrap.colapsado .mp-picker-buscar { display: none; }

.mp-picker { display: flex; flex-direction: column; gap: 6px; }
.mp-picker-grupo { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.mp-picker-nivel { flex: 0 0 70px; padding-top: 7px; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.mp-picker-tiles { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.mp-tile { display: flex; flex-direction: column; gap: 1px; min-width: 92px; padding: 5px 9px;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 9px; background: var(--tarjeta, #fff);
    text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; }
.mp-tile:hover { border-color: #93c5fd; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.mp-tile.activo { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.18); }
.mp-tile.tiene-riesgo { background: #fff6f6; border-color: #fecaca; }
.mp-tile.tiene-riesgo.activo { border-color: #2563eb; }
.mp-tile-todos { min-width: auto; justify-content: center; text-align: center; }
.mp-tile-nom { font-size: .82rem; font-weight: 700; }
.mp-tile-meta { display: flex; gap: 8px; font-size: .72rem; color: #64748b; }
.mp-tile-riesgo { color: #b91c1c; font-weight: 700; }

/* Barra de leyenda + resumen en vivo */
.mp-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-top: 8px; }
.mp-leyenda, .mp-resumen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-chip { padding: 2px 9px; border: 1px solid transparent; border-radius: 999px;
    font-size: .78rem; font-weight: 700; }

/* Filtros rápidos */
.mp-filtros { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.mp-filtro { padding: 4px 12px; border: 1px solid var(--borde, #e2e8f0); border-radius: 999px;
    background: var(--tarjeta, #fff); font-size: .8rem; font-weight: 600; cursor: pointer; }
.mp-filtro:hover { border-color: #93c5fd; }
.mp-filtro.activo { background: #2563eb; color: #fff; border-color: #2563eb; }
.mp-buscar { margin-left: auto; padding: 5px 10px; border: 1px solid var(--borde, #e2e8f0);
    border-radius: 8px; font-size: .82rem; min-width: 180px; }

/* Matriz interactiva: recuadro con scroll propio, encabezado y nombres fijos */
.mp-scroll { margin-top: 8px; max-height: 72vh; overflow: auto;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; }
.mp-tabla { border-collapse: separate; border-spacing: 0; overflow: visible;
    box-shadow: none; border-radius: 0; width: 100%; }
.mp-tabla th, .mp-tabla td { padding: 5px 7px; text-align: center; vertical-align: middle; }
.mp-tabla thead th { position: sticky; top: 0; z-index: 4; background: var(--fondo, #f1f5f9); }
.mp-col-nom { text-align: left !important; position: sticky; left: 0; z-index: 3;
    background: var(--tarjeta, #fff); box-shadow: 2px 0 5px rgba(0,0,0,.04); }
.mp-tabla thead .mp-col-nom { z-index: 6; background: var(--fondo, #f1f5f9); }
.mp-nom { white-space: nowrap; font-size: .86rem; font-weight: 600; }
.mp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px;
    border: 1px solid rgba(0,0,0,.12); vertical-align: middle; }
.mp-cell { width: 38px; height: 30px; border: 1px solid; border-radius: 7px; cursor: pointer;
    font-weight: 800; font-size: .9rem; line-height: 1; padding: 0; transition: transform .08s; }
.mp-cell:hover { transform: scale(1.08); }
.mp-cell:active { transform: scale(.94); }
.mp-prio { min-width: 62px; border: 1px solid var(--borde, #e2e8f0); border-radius: 999px;
    padding: 3px 10px; font-size: .78rem; font-weight: 700; cursor: pointer; background: #f8fafc; color: #64748b; }
.mp-p-alta { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.mp-p-media { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.mp-p-baja { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.mp-obs { width: 100%; min-width: 160px; border: 1px solid var(--borde, #e2e8f0);
    border-radius: 6px; padding: 4px 7px; font-size: .82rem; }
.mp-row:hover td { background: #f8fafc; }
.mp-row:hover .mp-col-nom { background: #f1f5f9; }
.mp-row-riesgo .mp-col-nom { box-shadow: inset 3px 0 0 #ef4444; }

/* Barra de guardado */
.mp-guardar-barra { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.mp-estado { font-size: .82rem; font-weight: 700; color: #94a3b8; }
.mp-estado.sucio { color: #b45309; }

/* Toggle Editar / Lectura */
.mp-modos { display: inline-flex; gap: 2px; margin: 12px 0 2px; padding: 3px;
    background: var(--fondo, #f1f5f9); border-radius: 10px; }
.mp-modo { padding: 5px 13px; border-radius: 8px; font-size: .82rem; font-weight: 700;
    color: #64748b; text-decoration: none; }
.mp-modo.activo { background: var(--tarjeta, #fff); color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Resumen por área: barras de distribución */
.mp-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin: 10px 0; }
.mp-area { border: 1px solid var(--borde, #e2e8f0); border-radius: 10px; padding: 8px 10px;
    background: var(--tarjeta, #fff); }
.mp-area-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mp-area-nom { font-size: .82rem; font-weight: 700; }
.mp-area-alerta { font-size: .76rem; font-weight: 700; color: #64748b; }
.mp-area-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #f1f5f9; }
.mp-area-bar span { display: block; height: 100%; }
.mp-area-bar .mp-lvl1 { background: #22c55e; }
.mp-area-bar .mp-lvl2 { background: #f59e0b; }
.mp-area-bar .mp-lvl3 { background: #ef4444; }
.mp-area-bar .mp-lvl0 { background: #e2e8f0; }

.mp-orden-sel { padding: 4px 8px; border: 1px solid var(--borde, #e2e8f0); border-radius: 8px;
    font-size: .8rem; font-weight: 600; }

/* Fila de totales por área (al pie de la matriz) */
.mp-tot-row td { position: sticky; bottom: 0; z-index: 2; border-top: 2px solid var(--borde, #cbd5e1);
    font-weight: 700; font-size: .8rem; background: var(--fondo, #f1f5f9); }
.mp-tot-row .mp-col-nom { color: #64748b; font-weight: 700; z-index: 3; }

/* Vista de lectura / informe */
.mp-lectura-curso { font-weight: 600; color: #64748b; font-size: 1rem; }
.mp-lectura-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mp-kpi { display: flex; flex-direction: column; align-items: center; min-width: 92px;
    padding: 8px 14px; border-radius: 12px; border: 1px solid var(--borde, #e2e8f0);
    font-size: .76rem; font-weight: 600; }
.mp-kpi-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.mp-lectura-barra { display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.mp-lectura-cel { display: inline-block; min-width: 56px; text-align: center; padding: 2px 8px;
    border-radius: 6px; border: 1px solid; font-size: .78rem; font-weight: 700; }
.mp-lectura-tabla td, .mp-lectura-tabla th { padding: 6px 8px; }
.mp-lectura-obs { text-align: left !important; font-size: .82rem; color: #475569;
    max-width: 280px; white-space: normal; }

/* Mapa de calor: cursos × áreas */
.mp-calor-leyenda { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.mp-calor-escala { width: 180px; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, hsl(120,72%,88%), hsl(60,72%,72%), hsl(0,72%,62%)); }
.mp-calor-tabla td, .mp-calor-tabla th { padding: 4px 5px; text-align: center; }
.mp-calor-th { font-size: .76rem; }
.mp-calor-curso { text-align: left !important; white-space: nowrap; }
.mp-calor-curso a { font-weight: 700; text-decoration: none; color: #1e293b; font-size: .84rem; }
.mp-calor-curso a:hover { color: #2563eb; text-decoration: underline; }
.mp-calor-tot { display: block; font-size: .7rem; color: #94a3b8; }
.mp-calor-td { padding: 3px; }
.mp-calor-cel { display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 54px; height: 42px; margin: 0 auto; border-radius: 8px; color: #1e293b; font-weight: 800;
    animation: mpCalorIn .45s cubic-bezier(.2, .8, .3, 1.2) both; }
.mp-calor-cel:hover { outline: 2px solid rgba(37,99,235,.55); outline-offset: 1px; }
.mp-calor-pct { font-size: .9rem; line-height: 1; }
.mp-calor-r { font-size: .62rem; font-weight: 700; margin-top: 1px; }
.mp-calor-peor { border: 2px solid rgba(0,0,0,.14); }
@keyframes mpCalorIn { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .mp-calor-cel { animation: none; } }

/* Plano de la sala de clases (heatmap por puesto) */
.sala-leyenda { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.sala-chip { padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.sala-resumen { margin-left: auto; font-size: .82rem; font-weight: 700; color: #475569; }
.sala-l0 { background: #e2e8f0; color: #475569; }
.sala-l1 { background: #86efac; color: #14532d; }
.sala-l2 { background: #fcd34d; color: #713f12; }
.sala-l3 { background: #fca5a5; color: #7f1d1d; }

.sala { border: 1px solid var(--borde, #e2e8f0); border-radius: 16px; padding: 16px;
    background: var(--fondo, #f8fafc); }
.sala-frente { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; }
.sala-pizarra { width: min(60%, 340px); height: 16px; border-radius: 5px;
    background: linear-gradient(#7c5b3a, #5f4529); color: transparent; font-size: 0; }
.sala-escritorio { display: flex; align-items: center; justify-content: center;
    width: 66px; height: 34px; border-radius: 7px; border: 2px solid #cbb994; background: #efe6d2; font-size: 1.1rem; }
.sala-puestos { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sala-fila { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.sala-par { display: flex; gap: 8px; }
.sala-puesto { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 88px;
    cursor: default; animation: salaIn .4s cubic-bezier(.2, .8, .3, 1.2) both; }
.sala-puesto:hover { transform: translateY(-2px); }
.sala-mesa { display: flex; align-items: center; justify-content: center; width: 100%; height: 26px;
    border-radius: 7px 7px 4px 4px; font-weight: 800; font-size: .9rem; box-shadow: inset 0 -3px rgba(0,0,0,.08); }
.sala-silla { width: 58%; height: 12px; border-radius: 4px 4px 7px 7px; background: #ddccae; border: 1px solid #cdbb98; }
.sala-nom { font-size: .72rem; font-weight: 600; color: #334155; line-height: 1.12; text-align: center;
    max-width: 100%; word-break: break-word; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sala-l0 .sala-mesa { background: #e2e8f0; color: #64748b; }
.sala-l1 .sala-mesa { background: #86efac; color: #14532d; }
.sala-l2 .sala-mesa { background: #fcd34d; color: #713f12; }
.sala-l3 .sala-mesa { background: #fca5a5; color: #7f1d1d; }
.sala-puesto.sala-l3 { filter: drop-shadow(0 0 0 transparent); }
@keyframes salaIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sala-puesto { animation: none; } }
@media (max-width: 640px) { .sala-fila { gap: 16px; } .sala-puesto { width: 70px; } .sala-nom { font-size: .68rem; } }

/* Impresión de la vista de lectura */
@media print {
    .no-print, .admin-menu, .navbar, footer, .nerudin { display: none !important; }
    .admin-layout { display: block; }
    .admin-contenido { box-shadow: none; padding: 0; border: none; }
    .mp-scroll { max-height: none; overflow: visible; border: none; }
    .mp-col-nom { position: static; box-shadow: none; }
    .mp-tabla thead th { position: static; }
    body { background: #fff; }
    .mp-lectura-tabla { font-size: 11px; }
}

/* ===== Relaciones del curso (sociograma) ===== */
.rel-electores { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.rel-electores-it { padding: 4px 10px; border: 1px solid var(--borde, #e2e8f0); border-radius: 8px;
    font-size: .78rem; text-decoration: none; color: #334155; background: var(--tarjeta, #fff); }
.rel-electores-it.resp { border-color: #86efac; }
.rel-electores-it.activo { background: #2563eb; color: #fff; border-color: #2563eb; }

.rel-form { margin-top: 8px; }
.rel-titulo { font-size: 1rem; margin: 6px 0 12px; }
.rel-bloque { border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; padding: 12px 14px;
    margin-bottom: 12px; background: var(--tarjeta, #fff); }
.rel-sub { margin: 0 0 4px; font-size: .92rem; }
.rel-sub-neg { margin-top: 12px; }
.rel-preg { margin: 8px 0 2px; font-weight: 600; font-size: .84rem; color: #475569; }
.rel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.rel-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 999px; font-size: .8rem;
    background: var(--tarjeta, #fff); cursor: pointer; }
.rel-chip input { margin: 0; }
.rel-chip:has(input:checked) { background: #dbeafe; border-color: #60a5fa; color: #1e40af; font-weight: 700; }
.rel-com-fila { display: flex; gap: 8px; margin-bottom: 6px; }
.rel-com-fila select { flex: 0 0 170px; }
.rel-com-fila input { flex: 1; }

.rel-auto-sel { border: 1px solid var(--borde, #e2e8f0); border-radius: 6px; padding: 4px 6px; font-weight: 600; }
.rel-auto-1 { background: #fee2e2; } .rel-auto-2 { background: #fef3c7; }
.rel-auto-3 { background: #e0f2fe; } .rel-auto-4 { background: #dcfce7; }

.rel-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; }
.rel-rol { border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; padding: 10px 12px; background: var(--tarjeta, #fff); }
.rel-rol h3 { margin: 0 0 8px; font-size: .92rem; }
.rel-rol-it { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0;
    padding: 3px 9px; border-radius: 999px; background: #eff6ff; color: #1e40af; font-size: .78rem;
    text-decoration: none; font-weight: 600; }
.rel-rol-neg { background: #fef2f2; color: #b91c1c; }
.rel-rol-solo { background: #f1f5f9; color: #475569; }

.rel-diana-ctrl { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 8px 0; font-size: .8rem; }
.rel-toggle { display: inline-flex; align-items: center; gap: 5px; }
.rel-leg { display: inline-flex; align-items: center; gap: 5px; color: #64748b; }
.rel-leg-linea { width: 20px; border-top: 3px solid; display: inline-block; }
.rel-leg-pos { border-color: #22c55e; }
.rel-leg-mut { border-color: #15803d; }
.rel-leg-neg { border-top-style: dashed; border-color: #ef4444; }
.rel-diana { width: 100%; max-width: 560px; height: auto; display: block; margin: 6px auto; }
.rel-arista { stroke-width: 1.4; }
.rel-pos { stroke: #22c55e; opacity: .5; }
.rel-mutua { stroke: #15803d; stroke-width: 2.6; opacity: .85; }
.rel-neg { stroke: #ef4444; stroke-dasharray: 4 3; opacity: .55; }
.rel-nodo { animation: relIn .4s cubic-bezier(.2, .8, .3, 1.2) both; cursor: pointer; }
.rel-nodo-ini { fill: #fff; font-size: 11px; font-weight: 700; }
.rel-nodo-nom { fill: #334155; font-size: 10px; }
@keyframes relIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rel-nodo { animation: none; } }

.rel-estatus-leg { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.rel-est-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; color: #fff;
    font-size: .74rem; font-weight: 700; }

.rel-det-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; }
.rel-det-card { border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; padding: 10px 12px; background: var(--tarjeta, #fff); }
.rel-det-card h3 { margin: 0 0 8px; font-size: .9rem; }
.rel-det-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 9px; border-radius: 999px;
    background: #eff6ff; color: #1e40af; font-size: .78rem; font-weight: 600; }
.rel-det-neg { background: #fef2f2; color: #b91c1c; }
.rel-det-valor { background: #fffbeb; color: #92400e; }
.rel-coment { display: flex; flex-direction: column; gap: 8px; }
.rel-coment-it { border-left: 3px solid #cbd5e1; border-radius: 0; padding: 6px 10px; background: var(--fondo, #f8fafc); }
.rel-coment-it p { margin: 0 0 2px; }

/* Editor de preguntas de Relaciones */
.rel-preg-lista { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.rel-preg-fila { display: flex; flex-direction: row; gap: 8px; align-items: center;
    flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--borde, #e2e8f0);
    border-radius: 10px; background: var(--tarjeta, #fff); }
.rel-preg-fila input, .rel-preg-fila button { padding: 6px 9px; font-size: .88rem; }
.rel-preg-off { opacity: .55; }
.rel-preg-ico { width: 44px; text-align: center; flex: 0 0 auto; }
.rel-preg-txt { flex: 1 1 220px; min-width: 160px; }
.rel-preg-ord { width: 56px; flex: 0 0 auto; }
.rel-preg-act { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem;
    color: #64748b; flex: 0 0 auto; white-space: nowrap; }
.rel-preg-fila .btn { margin-top: 0; flex: 0 0 auto; }
.rel-preg-fila .btn-quitar { flex: 0 0 auto; }
.rel-preg-add { border-style: dashed; margin-top: 4px; }

/* Edición manual del Libro de Remuneraciones */
.libro-edit { text-decoration: none; font-size: .82rem; opacity: .55; margin-left: 4px; }
.libro-edit:hover { opacity: 1; }
.libro-edit-badge { color: #b45309; font-weight: 700; }
.libro-editado > td { background: #fffbeb; }
.libro-editado .lf2 { box-shadow: inset 3px 0 0 #f59e0b; }
.libro-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px 14px; margin-top: 12px; }
.libro-edit-campo { display: flex; flex-direction: column; gap: 3px; }
.libro-edit-campo label { font-size: .8rem; color: #475569; font-weight: 600; }
.libro-edit-campo input { padding: 7px 9px; text-align: right; }
.libro-edit-campo.editado input { background: #fffbeb; border-color: #f59e0b; }
.libro-edit-mark { color: #b45309; font-weight: 700; font-size: .72rem; }

/* Crosshair del Libro de Remuneraciones: resalta la fila y la columna al pasar el mouse */
.libro-tabla tbody tr:hover > td { box-shadow: inset 0 0 0 100px rgba(37, 99, 235, .10); }
.libro-tabla td.libro-hl-col { box-shadow: inset 0 0 0 100px rgba(37, 99, 235, .10); }
.libro-tabla tbody tr:hover > td:hover { box-shadow: inset 0 0 0 100px rgba(37, 99, 235, .26); }

/* Ordenar personal (arrastrar) para el Libro */
.ord-mes-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
/* Barra de controles limpia: mes/año a la izquierda, estado a la derecha. */
.ord-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    max-width: 760px; margin: 14px 0; padding: 12px 14px;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; background: var(--tarjeta, #fff); }
.ord-barra-mes { display: flex; flex-direction: row; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }
.ord-barra-mes label { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.ord-barra-estado { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ord-barra-estado form { margin: 0; }
.ord-chip { font-size: .82rem; padding: 3px 10px; border-radius: 999px;
    background: var(--fondo-suave, #f1f5f9); color: var(--texto-suave, #64748b); }
.ord-chip-ok { background: #dcfce7; color: #166534; }
.ord-link { background: none; border: none; padding: 0; color: var(--texto-suave, #64748b);
    cursor: pointer; font-size: .82rem; text-decoration: underline; }
.ord-link:hover { color: var(--primario, #2563eb); }
/* La lista va dentro de una caja con scroll para que una nómina larga no
   estire la página; la barra de guardar queda fija abajo, siempre a la vista. */
.ord-caja { max-width: 760px; max-height: 62vh; overflow-y: auto; margin: 12px 0;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; padding: 8px; background: var(--fondo-suave, #f8fafc); }
.ord-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ord-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 10px; background: var(--tarjeta, #fff); cursor: grab; }
.ord-item:hover { border-color: #cbd5e1; }
.ord-item.arrastrando { opacity: .5; border-color: #2563eb; }
.ord-drag { color: #94a3b8; cursor: grab; font-weight: 700; letter-spacing: -3px; }
.ord-num { min-width: 26px; text-align: right; font-weight: 800; color: #2563eb; }
.ord-nom { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ord-nom .etiqueta { font-size: .76rem; }
.ord-btns { display: flex; gap: 3px; }
.ord-btns .btn-icono { width: 30px; height: 30px; }
.ord-guardar { position: sticky; bottom: 0; z-index: 2; max-width: 760px;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 12px 0 4px;
    background: linear-gradient(to top, var(--fondo, #fff) 72%, transparent); }

/* Enfermería: elección de condición (puede seguir / debe retirarse). */
.enf-condicion { display: flex; gap: 12px; flex-wrap: wrap; }
.enf-opcion { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; cursor: pointer;
    font-weight: 600; background: var(--tarjeta, #fff); }
.enf-opcion:has(input:checked) { border-color: #16a34a; background: #f0fdf4; }
.enf-opcion-retiro:has(input:checked) { border-color: #dc2626; background: #fef2f2; }
/* Cabecera de la ficha: título a la izquierda y el botón de acción (Iniciar /
   Terminar) arriba a la derecha. */
.enf-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.enf-cabecera-tit { flex: 1 1 260px; min-width: 240px; }
.enf-cabecera-tit h1 { margin: 0 0 2px; }
.enf-cabecera-accion { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.enf-estado-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.enf-fun-detalle { font-weight: 700; }
.enf-btn-top { white-space: nowrap; }
.btn.btn-terminar { background: #d97706; border-color: #d97706; color: #fff; }
.btn.btn-terminar:hover { background: #b45309; border-color: #b45309; }
.enf-terminada-chip { display: inline-block; padding: 9px 16px; border-radius: 10px;
    background: #dcfce7; color: #166534; font-weight: 700; white-space: nowrap; }
/* PISE: pasos numerados de la portada. */
.pise-pasos { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column;
    gap: 10px; max-width: 820px; counter-reset: none; }
.pise-paso { display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; background: var(--tarjeta, #fff); }
.pise-paso-final { border-style: dashed; }
.pise-fase { list-style: none; font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--texto-suave, #64748b); margin: 12px 2px 2px;
    padding-bottom: 4px; border-bottom: 2px solid var(--borde, #e2e8f0); }
.pise-fase:first-child { margin-top: 0; }

/* Antecedentes: subtítulos y validación de matrícula */
.ant-subt { font-size: 0.9rem; font-weight: 700; color: var(--texto, #1e293b);
    margin: 16px 0 6px; padding-top: 10px; border-top: 1px solid var(--borde, #e2e8f0); }
.ant-check { margin: 8px 0 0; font-size: 0.85rem; font-weight: 600; padding: 7px 12px;
    border-radius: 10px; display: inline-block; }
.ant-check:empty { display: none; }
.ant-check.ok { background: #dcfce7; color: #166534; }
.ant-check.warn { background: #fef3c7; color: #92400e; }
.ant-check.info { background: var(--fondo-suave, #f1f5f9); color: var(--texto-suave, #475569); }
.pise-paso-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
    background: var(--fondo-suave, #f1f5f9); color: var(--texto-suave, #64748b); }
.pise-paso-num.listo { background: #16a34a; color: #fff; }
.pise-paso-cuerpo { flex: 1 1 auto; min-width: 0; }
.pise-paso-tit { font-weight: 700; text-decoration: none; color: var(--texto, #1e293b); }
.pise-paso-tit:hover { text-decoration: underline; }
.pise-paso-desc { font-size: .84rem; color: var(--texto-suave, #64748b); margin-top: 2px; }
.pise-paso-estado { flex: 0 0 auto; }
.pise-paso-ir { flex: 0 0 auto; margin-top: 0; }
@media (max-width: 640px) {
    .pise-paso { flex-wrap: wrap; }
    .pise-paso-cuerpo { flex-basis: 60%; }
}
/* Ciclo de vida de la atención: badges de estado. */
.enf-estado { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    background: var(--fondo-suave, #f1f5f9); color: var(--texto-suave, #64748b); white-space: nowrap; }
.enf-estado-encurso { background: #dbeafe; color: #1e40af; }
.enf-estado-terminada { background: #dcfce7; color: #166534; }
/* Selector de destinatarios del aviso. */
.enf-dest { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.enf-dest-item { display: flex; align-items: center; gap: 8px; padding: 4px 2px; cursor: pointer; }
/* Ventana emergente del aviso de enfermería. */
.enf-modal-fondo { position: fixed; inset: 0; z-index: 3000; background: rgba(15,23,42,.55);
    display: flex; align-items: center; justify-content: center; padding: 20px; }
.enf-modal-caja { background: var(--tarjeta, #fff); border-radius: 16px; padding: 22px 24px; max-width: 420px;
    width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3); border-top: 6px solid #2563eb; }
.enf-modal-caja.enf-modal-retiro { border-top-color: #dc2626; }
.enf-modal-caja.enf-modal-termino { border-top-color: #16a34a; }
.enf-modal-icono { font-size: 2.4rem; line-height: 1; }
.enf-modal-titulo { margin: 8px 0 6px; }
.enf-modal-texto { margin: 0 0 16px; color: var(--texto, #334155); font-size: 1.02rem; }

/* Editor de todo el Libro de Remuneraciones */
.libro-todos-tabla th, .libro-todos-tabla td { padding: 4px 6px; }
.libro-todos-tabla .lt-hab, .libro-todos-tabla .lt-otro { text-align: center; }
.lt-in { width: 80px; padding: 4px 6px; text-align: right; border: 1px solid var(--borde, #e2e8f0); border-radius: 6px; font-size: .84rem; }
.lt-edit { background: #fffbeb; border-color: #f59e0b; }
.lt-desc { background: #fef2f2; }
.lt-ro { background: #f1f5f9; color: #334155; }
.libro-todos-tabla thead th.lt-ro { background: #e2e8f0; }
.lt-liq { font-weight: 700; }

/* Editor de todo el Libro: pantalla completa */
.lt-topbar { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.lt-scroll { max-height: 80vh; }
.lt-savebar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 12px; align-items: center;
    padding: 10px 0; margin-top: 2px; background: var(--fondo, #f8fafc); border-top: 1px solid var(--borde, #e2e8f0); }

/* Selector de personas específicas en el modal Previred */
.prev-personas { max-height: 220px; overflow-y: auto; border: 1px solid var(--borde, #e2e8f0);
    border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.prev-persona { display: flex; align-items: center; gap: 7px; font-size: .84rem; padding: 2px 0; }
.prev-personas-det summary { user-select: none; }

/* Unidad Técnica: adecuación curricular */
.ut-bloque { border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; padding: 12px 14px;
    margin: 12px 0; background: var(--tarjeta, #fff); }
.ut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.ut-grid > div { display: flex; flex-direction: column; gap: 3px; }
.ut-grid label, .ut-bloque > label { font-size: .82rem; font-weight: 600; color: #475569; }
.ut-ancho { grid-column: 1 / -1; }
.ut-asig { border: 1px solid var(--borde, #e2e8f0); border-radius: 10px; padding: 10px;
    margin-bottom: 8px; background: var(--fondo, #f8fafc); }
.ut-asig-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.ut-asig-nom { flex: 1; min-width: 150px; }
.ut-asig-tipo { flex: 0 0 260px; }
.ut-asig textarea { margin-bottom: 4px; }
.ut-tarea { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.ut-tarea-resp { flex: 0 0 200px; }
.ut-tarea-txt { flex: 1; min-width: 180px; }
.ut-tarea-plazo { flex: 0 0 150px; }
.ut-tarea-estado { flex: 0 0 130px; }

/* Unidad Técnica: espacios y textareas dinámicas */
.ut-campos-txt { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px; margin-top: 10px; }
.ut-campo { display: flex; flex-direction: column; gap: 4px; }
.ut-bloque textarea, .ut-campo textarea, .ut-asig textarea {
    width: 100%; box-sizing: border-box; display: block; min-height: 40px;
    resize: vertical; overflow: hidden; line-height: 1.4; }
.ut-asig textarea { margin-bottom: 6px; }
.ut-bloque { padding: 14px 16px; }
.ut-bloque .rel-sub { margin-bottom: 8px; }

/* Secciones plegables del menú (Administración, Orientación, Unidad Técnica) */
.menu-seccion-det > summary.menu-seccion-tit { cursor: pointer; }

/* Editor de todo el Libro: cálculo en vivo y estado pendiente de guardar */
.lt-pendiente .lt-c-imp strong, .lt-pendiente .lt-c-hab strong { color: #b45309; }
.lt-pendiente .lt-legal { opacity: .45; }
.lt-pendiente .lt-liq { font-style: italic; }

/* --- Gráfico mensual del panel (SVG dibujado en el servidor) --- */
.graf-card { margin: 12px 0 20px; padding: 14px 16px 10px; background: var(--tarjeta);
             border: 1px solid rgba(0,0,0,.10); border-radius: 12px; }
.graf-card figcaption { display: flex; justify-content: space-between; align-items: baseline;
                        gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.graf-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; }
.graf-leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.graf-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.graf-lienzo { position: relative; }
/* La zona sensible es todo el mes, no la barra: el lector apunta al mes. */
.graf-mes .graf-zona { cursor: default; }
.graf-mes:hover .graf-zona { fill: rgba(15,23,42,.04); }
.graf-barra { transition: opacity .12s; }
.graf-mes:hover .graf-barra { opacity: .82; }
.graf-tip { position: absolute; z-index: 5; pointer-events: none; background: #0f172a;
            color: #f8fafc; border-radius: 8px; padding: 7px 10px; font-size: .82rem;
            line-height: 1.35; box-shadow: 0 6px 18px rgba(15,23,42,.25); white-space: nowrap; }
.graf-tip-mes { font-size: .74rem; opacity: .75; margin-bottom: 3px; }
.graf-tip-fila { display: flex; align-items: center; gap: 6px; }
.graf-tip-key { width: 10px; height: 2px; border-radius: 2px; flex: 0 0 auto; }
.graf-tip-val { font-weight: 700; }
.graf-tip-nom { opacity: .75; }
.graf-tabla { margin-top: 8px; }
.graf-tabla > summary { cursor: pointer; font-size: .85rem; color: var(--texto-suave); }

/* --- Resumen por módulo: el panel de cada usuario y el de Dirección --- */
.res-card { display: block; text-decoration: none; color: inherit; }
.res-card:hover { border-color: var(--primario); }
.res-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
              gap: 8px 14px; margin-top: 8px; }
.res-cifra { display: flex; flex-direction: column; }
.res-cifra-num { font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
.res-cifra-num.res-alta { color: var(--rojo); }
.res-monto { font-size: 1.25rem; font-weight: 700; margin: 6px 0 0; }
.res-spark { display: block; margin: 6px 0 2px; }
.res-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.res-chip { font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 2px 7px;
            white-space: nowrap; }
.res-chip-ok { background: #dcfce7; color: #166534; }
.res-chip-alerta { background: #fee2e2; color: #991b1b; }
.res-card.res-pendiente { border-color: rgba(220,38,38,.35); }

/* Medidor: el relleno lleva el estado; la pista es un paso claro del mismo
   color, para que el avance se lea a lo largo de toda la barra. */
.res-meter { margin: 8px 0 2px; }
.res-meter-barra { height: 8px; border-radius: 999px; overflow: hidden; background: #dbeafe; }
.res-meter-barra span { display: block; height: 100%; border-radius: 999px; background: #2563eb; }
.res-meter-medio .res-meter-barra { background: #fef3c7; }
.res-meter-medio .res-meter-barra span { background: #d97706; }
.res-meter-bajo .res-meter-barra { background: #fee2e2; }
.res-meter-bajo .res-meter-barra span { background: #dc2626; }

/* Filtro de los bloques: una sola fila, arriba de lo que filtra. */
.res-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.res-filtro { font: inherit; font-size: .85rem; cursor: pointer; border-radius: 999px;
              padding: 5px 12px; border: 1px solid var(--borde); background: var(--tarjeta);
              color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.res-filtro:hover { border-color: var(--primario); }
.res-filtro.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.res-filtro-n { font-size: .75rem; opacity: .75; }
.res-grid.solo-pendientes .res-card:not(.res-pendiente) { display: none; }

/* --- Protocolos ↔ Orientación: ficha del estudiante dentro del caso --- */
.prot-ficha { border: 1px solid rgba(0,0,0,.10); border-radius: 12px; padding: 12px 14px;
              background: #f8fafc; display: flex; flex-direction: column; gap: 10px; }
.prot-ficha-datos, .prot-ficha-mapeo, .prot-ficha-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.est-proto { background: #eef2ff; color: #3730a3; padding: 1px 6px; border-radius: 8px;
             font-size: .72rem; text-decoration: none; }
.est-proto:hover { background: #e0e7ff; }
.est-adec { background: #ecfdf5; color: #065f46; padding: 1px 6px; border-radius: 8px;
            font-size: .72rem; text-decoration: none; }
.est-adec:hover { background: #d1fae5; }
@media (prefers-color-scheme: dark) {
  .prot-ficha { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
  .est-proto { background: rgba(99,102,241,.18); color: #c7d2fe; }
  .est-adec { background: rgba(16,185,129,.18); color: #a7f3d0; }
}

/* --- Ingresos ↔ asistencia declarada a SIGE --- */
.ing-asistencia { display: flex; justify-content: space-between; align-items: center; gap: 12px;
                  flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px;
                  border: 1px solid rgba(0,0,0,.10); background: #f8fafc; }
.ing-asistencia-cifras { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ing-sube { color: #166534; }
.ing-baja { color: #991b1b; }
@media (prefers-color-scheme: dark) {
  .ing-asistencia { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
  .ing-sube { color: #86efac; }
  .ing-baja { color: #fca5a5; }
}

/* --- Contabilidad: accesos, asientos, cuentas T y balance --- */
.conta-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 18px 0; }
.conta-acceso { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px;
                border: 1px solid rgba(0,0,0,.10); background: #f8fafc; text-decoration: none; color: inherit;
                transition: transform .08s ease, box-shadow .08s ease; }
.conta-acceso:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.conta-acceso-ico { font-size: 1.6rem; line-height: 1; }
.conta-acceso-tit { font-weight: 700; }
.conta-acceso-txt { font-size: .82rem; color: var(--texto-suave); }

.cuenta-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.cuenta-form-ancho { grid-column: span 2; }
.cuenta-form input, .cuenta-form select { width: 100%; }
.cuenta-form .btn { margin-top: 0; }
.cuenta-inactiva { opacity: .55; }
.cuenta-activa { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--texto-suave); margin-left: 8px; }

.asiento-cab { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.asiento-cab-ancho { grid-column: span 2; }
.asiento-cab input { width: 100%; }
.asiento-tabla input, .asiento-tabla select { width: 100%; }
.asiento-tabla .monto-debe, .asiento-tabla .monto-haber { text-align: right; }
.asiento-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.asiento-acciones .btn { margin-top: 0; }
.asiento-quitar { padding: 4px 10px; margin-top: 0; }
.asiento-estado { font-size: .85rem; color: var(--texto-suave); }
.asiento-ok { color: #166534; font-weight: 600; }
.asiento-mal { color: #991b1b; font-weight: 600; }

/* Libro Diario: la primera línea de cada asiento marca dónde empieza uno nuevo. */
.diario-primera td { border-top: 2px solid var(--borde); }
.diario-abono { padding-left: 28px !important; color: var(--texto-suave); }
.mayor-titulo { margin-bottom: 6px; }

.cuentas-t { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.cuenta-t { border: 1px solid rgba(0,0,0,.10); border-radius: 12px; background: #f8fafc; padding: 10px 12px; }
.cuenta-t-tit { font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.cuenta-t-cuerpo { display: grid; grid-template-columns: 1fr 1fr; }
.cuenta-t-lado { padding: 0 8px; }
.cuenta-t-lado:first-child { border-right: 2px solid var(--texto); }
.cuenta-t-lbl { text-align: center; font-weight: 600; font-size: .8rem; border-bottom: 2px solid var(--texto);
                padding-bottom: 4px; margin-bottom: 6px; }
.cuenta-t-mov { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; padding: 1px 0; }
.cuenta-t-mov span:first-child { color: var(--texto-suave); }
.cuenta-t-sumas { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--texto);
                  margin-top: 6px; padding: 4px 8px 0; }
.cuenta-t-sumas .cuenta-t-mov { justify-content: flex-end; }
.cuenta-t-saldo { margin-top: 6px; font-size: .82rem; color: var(--texto-suave); text-align: right; }

.balance-8 th, .balance-8 td { font-size: .82rem; white-space: nowrap; }
.balance-8 thead th { text-align: center; }
.balance-8 tbody td:nth-child(n+3), .balance-8 tfoot th:nth-child(n+3),
.balance-8 tfoot td:nth-child(n+3) { text-align: right; }
.balance-sumas th { border-top: 2px solid var(--borde); }
.balance-ajuste td { font-style: italic; }
.balance-totales th { border-top: 2px solid var(--texto); }

@media (prefers-color-scheme: dark) {
  .conta-acceso, .cuenta-t { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
  .asiento-ok { color: #86efac; }
  .asiento-mal { color: #fca5a5; }
}

/* --- Orientación: bitácora de seguimiento --------------------------------- */
.seg-alerta { margin: 14px 0; padding: 12px 14px; border: 1px solid #fecaca; border-left: 4px solid var(--rojo);
              border-radius: 10px; background: #fef2f2; }
.seg-alerta h2 { margin: 0 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.seg-alerta p { margin: 0 0 8px; }
.seg-alerta-n { background: var(--rojo); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: .8rem; }
.seg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
            border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
            text-decoration: none; font-size: .85rem; }
.seg-chip:hover { border-color: var(--primario); }
.seg-chip-riesgo { border-color: #fca5a5; }
.seg-chip-curso { color: var(--texto-suave); font-size: .78rem; }

.seg-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 6px; }
.seg-filtros select { padding: 6px 9px; border: 1px solid var(--borde); border-radius: 8px;
                      background: var(--tarjeta); color: var(--texto); font-size: .9rem; }
.seg-nowrap { white-space: nowrap; }

/* Estado del compromiso de la próxima acción. */
.seg-estado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.seg-vencido { background: #fee2e2; color: #b91c1c; }
.seg-hoy { background: #fef3c7; color: #92400e; }
.seg-pendiente { background: #e0f2fe; color: #075985; }
.seg-cumplido { background: #dcfce7; color: #166534; }

.seg-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 14px 0; }
.seg-ficha-bloque { border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); padding: 12px 14px; }
.seg-ficha-bloque h3 { margin: 0 0 6px; font-size: .9rem; color: var(--texto-suave); text-transform: uppercase;
                       letter-spacing: .03em; }
.seg-ficha-bloque p { margin: 0; font-size: .9rem; }
.seg-areas { display: flex; flex-wrap: wrap; gap: 5px; }

.seg-form textarea { width: 100%; padding: 7px 9px; border: 1px solid rgba(0,0,0,.2); border-radius: 8px;
                     font: inherit; font-size: .95rem; resize: vertical; }

.seg-linea { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.seg-item { border: 1px solid var(--borde); border-left: 4px solid var(--primario); border-radius: 10px;
            background: var(--tarjeta); padding: 12px 14px; }
.seg-item-venc { border-left-color: var(--rojo); }
.seg-item p { margin: 6px 0; }
.seg-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.seg-item-fecha { font-weight: 700; }
.seg-item-tipo { font-weight: 600; color: var(--primario); }
.seg-acuerdos { background: rgba(37,99,235,.06); border-radius: 8px; padding: 7px 10px; }
.seg-prox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg-item-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
                gap: 8px; margin-top: 8px; }
.seg-item-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-item-acciones .btn { margin-top: 0; padding: 4px 10px; font-size: .82rem; }

@media (prefers-color-scheme: dark) {
  .seg-alerta { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.4); }
  .seg-chip-riesgo { border-color: rgba(220,38,38,.5); }
  .seg-vencido { background: rgba(220,38,38,.2); color: #fca5a5; }
  .seg-hoy { background: rgba(217,119,6,.2); color: #fcd34d; }
  .seg-pendiente { background: rgba(37,99,235,.2); color: #93c5fd; }
  .seg-cumplido { background: rgba(22,163,74,.2); color: #86efac; }
  .seg-form textarea { border-color: rgba(255,255,255,.18); }
  .seg-acuerdos { background: rgba(255,255,255,.05); }
}

/* El nombre del estudiante en el mapeo lleva a su bitácora, sin que la tabla
   se llene de azul ni el enlace se note al imprimir la vista de lectura. */
.mp-nom-enlace { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--borde); }
.mp-nom-enlace:hover { color: var(--primario); border-bottom-color: var(--primario); }
@media print { .mp-nom-enlace { border-bottom: none; } }

/* Aviso del año en curso dentro de Orientación, y sus acciones de año. */
.orient-anio { margin: 10px 0 4px; padding: 7px 12px; border-radius: 8px; font-size: .9rem;
               background: rgba(37,99,235,.07); border: 1px solid rgba(37,99,235,.18); }
.mp-copiar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 4px; }
.seg-hist { border-collapse: collapse; font-size: .82rem; }
.seg-hist th, .seg-hist td { padding: 2px 6px; text-align: center; border-bottom: 1px solid var(--borde); }
.seg-hist th:first-child, .seg-hist td:first-child { text-align: left; font-weight: 600; }
.seg-hist-hoy { background: rgba(37,99,235,.08); }
.seg-hist .mp-chip { min-width: 22px; padding: 2px 6px; }
@media (prefers-color-scheme: dark) {
  .orient-anio { background: rgba(37,99,235,.16); border-color: rgba(37,99,235,.35); }
}
@media print { .orient-anio .etiqueta { display: none; } }

/* --- Unidad Técnica: planificaciones, cobertura y acompañamiento --- */
/* `form` global es flex en columna; sin declarar la dirección aquí, la fila
   de filtros heredaba `column` y los selectores salían apilados y centrados. */
.ut-filtros { display: flex; flex-direction: row; gap: 8px; align-items: center;
              flex-wrap: wrap; margin: 10px 0 6px; }
.ut-filtros select { min-width: 170px; }
.ut-filtros-nueva { margin-left: auto; }

/* Cobertura: una celda por mes, coloreada por el porcentaje alcanzado. */
.ut-cob-tabla td, .ut-cob-tabla th { padding: 6px 8px; }
.ut-cob-celda { border: 1px solid var(--borde, #e2e8f0); border-radius: 8px; cursor: pointer;
                min-width: 46px; padding: 5px 6px; font-size: .78rem; font-weight: 700;
                background: #f8fafc; color: #475569; }
.ut-cob-celda:hover { outline: 2px solid rgba(37,99,235,.35); }
.ut-cob-celda.vacia { color: #94a3b8; font-weight: 400; }
.ut-cob-celda.alta { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.ut-cob-celda.media { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.ut-cob-celda.baja { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ut-cob-modal { margin-top: 14px; }
.ut-cob-form { border: 2px solid var(--azul, #2563eb); border-radius: 12px; padding: 14px 16px;
               background: var(--tarjeta, #fff); }

/* Pauta de observación de aula: indicador, nivel y evidencia en una línea. */
.ut-pauta-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
                 padding: 5px 0; border-bottom: 1px solid var(--borde, #e2e8f0); }
.ut-pauta-fila:last-child { border-bottom: none; }
.ut-pauta-ind { flex: 1 1 260px; font-size: .86rem; }
.ut-pauta-nivel { flex: 0 0 150px; }
.ut-pauta-com { flex: 1 1 220px; }

@media (prefers-color-scheme: dark) {
    .ut-cob-celda { background: rgba(255,255,255,.04); color: #cbd5e1; }
    .ut-cob-celda.alta { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.35); color: #6ee7b7; }
    .ut-cob-celda.media { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.35); color: #fcd34d; }
    .ut-cob-celda.baja { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.35); color: #fca5a5; }
}

/* --- Unidad Técnica: ACLE (talleres) --- */
/* Los estilos vivían en <style> dentro de cada plantilla; aquí hay una sola
   definición para la portada de talleres y la ficha de cada uno. */
.acle-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
                margin: 4px 0 14px; }
.acle-resumen .prot-tile-num { color: var(--primario, #2563eb); }
.acle-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
              margin: 0 0 10px; }
.acle-barra h3 { margin: 0; }
.acle-barra-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acle-barra-acciones form { margin: 0; flex-direction: row; align-items: center; gap: 6px; }
.acle-barra-acciones select { margin: 0; }
.acle-barra-acciones .btn { margin-top: 0; }
.acle-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
              margin-top: 8px; }
.acle-card { display: flex; flex-direction: column; border: 1px solid var(--borde, #e2e8f0); border-radius: 14px;
             padding: 14px 16px; background: var(--tarjeta, #fff); box-shadow: 0 1px 4px rgba(15,23,42,.06); }
.acle-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.acle-card-titulo { font-size: 1.05rem; font-weight: 800; }
.acle-card-objetivo { margin: 6px 0 0; font-size: .82rem; }
.acle-card-pie { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.acle-card-pie .btn { margin-top: 0; }
.acle-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .85rem;
             color: var(--texto-suave, #475569); }
.acle-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.acle-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--fondo-suave, #f1f5f9);
             border-radius: 999px; padding: 2px 9px; font-size: .75rem; font-weight: 600; }
.acle-chip form { margin: 0; }
.acle-chip .etiqueta { margin: 0; text-transform: none; }
.acle-agregar { margin: 10px 0; }
.acle-agregar > summary { cursor: pointer; display: inline-block; padding: 8px 14px; border-radius: 999px;
                          background: var(--fondo-suave, #f1f5f9); font-weight: 600; color: #334155; list-style: none; }
.acle-agregar > summary::-webkit-details-marker { display: none; }
.acle-agregar[open] > summary { background: var(--primario, #2563eb); color: #fff; }
.acle-bloque { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.acle-bloque select, .acle-bloque input { margin: 0; }
.acle-bloque .lbl { font-size: .78rem; color: #64748b; }
.acle-fila-form { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 0; }
.acle-fila-form.con-margen { margin-bottom: 12px; }
.acle-fila-form .btn { margin-top: 0; }
.acle-modal { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center;
              justify-content: center; z-index: 999; padding: 16px; }
.acle-modal[hidden] { display: none; }
.acle-modal-card { background: var(--tarjeta, #fff); border-radius: 16px; padding: 22px 24px; width: min(440px, 100%);
                   box-shadow: 0 20px 50px rgba(15,23,42,.35); }
/* Flujo de firma del contrato (empleador → revisar → enviar): modal ancho con visor */
.flujo-card { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.flujo-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.flujo-pasos { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.flujo-pasos li { flex: 1 1 160px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
                  background: var(--fondo, #f1f5f9); color: var(--texto-suave, #64748b); font-weight: 600; font-size: .88rem; }
.flujo-pasos li span { display: inline-flex; width: 24px; height: 24px; border-radius: 999px; align-items: center; justify-content: center;
                       background: #cbd5e1; color: #fff; font-size: .8rem; flex: none; }
.flujo-pasos li.activo { background: #dbeafe; color: #1d4ed8; }
.flujo-pasos li.activo span { background: var(--primario, #2563eb); }
.flujo-pasos li.hecho { background: #ecfdf5; color: #047857; }
.flujo-pasos li.hecho span { background: #10b981; font-size: 0; }
.flujo-pasos li.hecho span::before { content: "✓"; font-size: .8rem; }
.flujo-visor { border: 1px solid var(--borde, #e2e8f0); border-radius: 10px; overflow: hidden; height: 320px; }
.flujo-visor.alto { height: 460px; }
.flujo-visor iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .flujo-visor, .flujo-visor.alto { height: 280px; } }
/* Ficha del taller: horario, horas, objetivo y monitores bajo el título. */
.acle-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px;
              margin: -8px 0 4px; }
.acle-ficha-item { font-size: .88rem; }
.acle-ficha-item .lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
                        text-transform: uppercase; color: var(--texto-suave, #64748b); }
.acle-ficha-objetivo { grid-column: 1 / -1; }
.acle-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--borde, #e2e8f0); margin: 14px 0 16px; }
.acle-tab-btn { border: none; background: transparent; padding: 9px 16px; font-size: .92rem; font-weight: 600; color: #64748b;
                cursor: pointer; border-radius: 8px 8px 0 0; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.acle-tab-btn:hover { color: #1e293b; background: var(--fondo-suave, #f1f5f9); }
.acle-tab-btn.activo { color: #2563eb; border-bottom-color: #2563eb; }
.acle-tab-btn .cnt { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; font-size: .72rem;
                     line-height: 18px; text-align: center; background: var(--fondo-suave, #e2e8f0); color: #475569;
                     border-radius: 999px; }
.acle-tab-btn.activo .cnt { background: #dbeafe; color: #1d4ed8; }
.acle-panel[hidden] { display: none; }
.acle-clase-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 6px; }
.acle-clase { border: 1px solid var(--borde, #e2e8f0); border-radius: 12px; padding: 12px 14px; background: var(--tarjeta, #fff);
              box-shadow: 0 1px 4px rgba(15,23,42,.06); }
.acle-clase-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.acle-clase-head form { margin: 0; display: inline; }
.acle-clase-acciones { white-space: nowrap; }
.acle-clase-bloque { margin-top: 6px; }
.acle-clase-registro { margin: 8px 0 0; }
.acle-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.acle-foto { position: relative; }
.acle-foto img { max-height: 90px; border-radius: 8px; border: 1px solid var(--borde, #e2e8f0); display: block; }
.acle-foto form { position: absolute; top: -6px; right: -6px; margin: 0; }
.acle-asis { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto;
             border: 1px solid var(--borde, #e2e8f0); border-radius: 10px; padding: 8px 10px; }
.acle-asis label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.acle-asis-botones { margin-bottom: 6px; }
.acle-radios { margin-bottom: 8px; }
.acle-radios label { margin-right: 14px; }
.acle-separador { border: none; border-top: 1px solid var(--borde, #e2e8f0); margin: 12px 0; }
.acle-nota { margin: 2px 0 8px; }
@media (prefers-color-scheme: dark) {
  .acle-agregar > summary { color: #e2e8f0; }
  .acle-tab-btn:hover { color: #f1f5f9; }
  .acle-tab-btn.activo .cnt { background: rgba(37,99,235,.3); color: #bfdbfe; }
  .acle-tab-btn .cnt { color: #cbd5e1; }
  .acle-bloque .lbl { color: #94a3b8; }
}

/* --- Remuneraciones: alertas de atrasos reiterados --- */
.alerta-fila > td:first-child { border-left: 3px solid #f59e0b; }
.alerta-dias { margin: 6px 0 0; padding-left: 18px; font-size: .85em; line-height: 1.5; }
.alerta-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.alerta-acciones form { margin: 0; }
.alerta-form { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.alerta-form input[type="text"] { margin: 0; font-size: .9em; }
.alerta-form .btn { margin-top: 0; }