/* ════════════════════════════════════════════════════════════════
   Sistema de acceso de amimegusta.com — estilos comunes
   Identidad tomada de la portada (index.html): marino, rojo pasión,
   amarillo bandera; tipografías Carnero (títulos) y Jost (texto).
   ════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Carnero W04';
    src: url('/identidad/Carnero W04 Bold.ttf') format('truetype');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --fondo:     #FCFDFE;   /* blanco frío de la portada */
    --blanco:    #FFFFFF;
    --cielo:     #EAF6FB;   /* azul cielo suave: avisos informativos */
    --tinta:     #25204C;   /* marino: texto y títulos */
    --gris:      #5B566E;   /* texto secundario */
    --rojo:      #9F2626;   /* botones principales, acentos */
    --rojo-osc:  #821E1E;
    --rojo-cl:   #F4E5E5;   /* avisos de error */
    --amarillo:  #E3AB47;
    --verde:     #2E7D52;   /* mensajes de éxito */
    --verde-cl:  #EAF5EF;
    --linea:     rgba(37, 32, 76, .12);
    --sombra:    0 10px 30px rgba(37, 32, 76, .10);
    --radio:     24px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fondo);
}

a { color: var(--rojo); }
a:hover { color: var(--rojo-osc); }

h1, h2, h3 {
    font-family: 'Carnero W04', 'Jost', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 .5em;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }

/* ── Cabecera ── */
.cab {
    background: rgba(252, 253, 254, .92);
    border-bottom: 1px solid var(--linea);
}
.cab-dentro {
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 16px;
    min-height: 68px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
}
.cab-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.cab-marca { height: 28px; width: auto; display: block; flex-shrink: 0; }
.cab-nombre {
    font-family: 'Carnero W04', 'Jost', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--tinta);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.cab-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: .92rem;
}
.cab-nav a { color: var(--tinta); font-weight: 500; text-decoration: none; opacity: .8; }
.cab-nav a:hover { opacity: 1; color: var(--rojo); }
.cab-usuario { color: var(--gris); }
.cab-salir { margin: 0; }
.cab-salir button {
    font: inherit;
    font-weight: 600;
    font-size: .85rem;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    border: 1.5px solid var(--linea);
    background: transparent;
    color: var(--tinta);
    cursor: pointer;
    transition: all .2s;
}
.cab-salir button:hover { border-color: var(--rojo); color: var(--rojo); }

/* ── Contenido ── */
.contenido {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 36px 16px 56px;
}

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 2rem;
}
.tarjeta-estrecha { max-width: 440px; margin: 0 auto; }
.centrado { text-align: center; }
.sub { color: var(--gris); margin-top: 0; }

/* ── Formularios ── */
label { display: block; font-size: .85rem; font-weight: 600; margin-top: 16px; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], select {
    width: 100%;
    margin-top: 6px;
    padding: .8rem 1rem;
    font: inherit;
    font-size: .96rem;
    color: var(--tinta);
    border: 1.5px solid var(--linea);
    border-radius: 14px;
    background: var(--blanco);
    transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--rojo);
    box-shadow: 0 0 0 3px var(--rojo-cl);
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

.boton, button.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.6rem;
    font: inherit;
    font-weight: 600;
    color: var(--blanco);
    background: var(--rojo);
    border: 1.5px solid transparent;
    border-radius: 999px;
    box-shadow: var(--sombra);
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
}
.boton:hover { background: var(--rojo-osc); color: var(--blanco); transform: translateY(-2px); }
.boton-ancho { width: 100%; margin-top: 24px; }

/* ── Mensajes ── */
.aviso {
    padding: 12px 14px;
    border-radius: 14px;
    margin: 0 0 16px;
    border-left: 4px solid var(--rojo);
    background: var(--rojo-cl);
}
.aviso-ok { border-left-color: var(--verde); background: var(--verde-cl); }
.aviso-info { border-left-color: var(--tinta); background: var(--cielo); }

/* ── Mis recursos ── */
.mr-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 20px;
}
.mr-cabecera .sub { margin-bottom: 0; }
.mr-buscar { margin: 0; flex: 0 1 320px; }
.mr-buscar input { margin-top: 0; }
.solo-lector {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.mr-seccion { margin-bottom: 20px; padding: 1.5rem 1.6rem; }
.mr-seccion > h2 { display: flex; align-items: center; gap: 10px; }

.carpeta-num {
    font-family: 'Jost', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    color: var(--gris);
    background: var(--cielo);
    border-radius: 999px;
    padding: 1px 9px;
}

details.carpeta {
    border-top: 1px solid var(--linea);
}
details.carpeta > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
details.carpeta > summary::-webkit-details-marker { display: none; }
details.carpeta > summary::before {
    content: '▸';
    color: var(--rojo);
    transition: transform .2s;
}
details.carpeta[open] > summary::before { transform: rotate(90deg); }
details.carpeta > summary:hover .carpeta-nombre { color: var(--rojo); }
.carpeta-dentro { padding: 0 0 8px 20px; }

ul.fichas {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    columns: 2 320px;
    column-gap: 28px;
}
li.ficha { break-inside: avoid; }
li.ficha a {
    display: block;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--tinta);
    text-decoration: none;
}
li.ficha a:hover { background: var(--rojo-cl); color: var(--rojo); }
.etiqueta {
    font-size: .68rem;
    font-weight: 700;
    color: var(--rojo);
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0 4px;
    vertical-align: 1px;
}

/* Tablas de "Mis recursos": un recurso por fila */
.tabla-recursos { margin-top: 6px; }
.tabla-recursos td { padding: 8px 10px; vertical-align: middle; }
.tabla-recursos tbody tr:hover { background: var(--cielo); }
.tabla-recursos .col-titulo a { color: var(--tinta); font-weight: 500; }
.tabla-recursos .col-titulo a:hover { color: var(--rojo); }
.tabla-recursos th:nth-child(1), .tabla-recursos th:nth-child(2) { width: 1%; white-space: nowrap; }
.tabla-simple td { padding-left: 4px; }
.nivel {
    display: inline-block;
    font-weight: 700;
    font-size: .8rem;
    color: var(--blanco);
    background: var(--tinta);
    border-radius: 6px;
    padding: 1px 8px;
}
.tipo {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--gris);
    background: #F3F1F6;
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}
.filtro-nivel { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.filtro-nivel button {
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    padding: .3rem .95rem;
    border-radius: 999px;
    border: 1.5px solid var(--linea);
    background: transparent;
    color: var(--tinta);
    cursor: pointer;
}
.filtro-nivel button:hover { border-color: var(--rojo); color: var(--rojo); }
.filtro-nivel button.activo { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
@media (max-width: 720px) {
    /* En el móvil: nivel, unidad y tipo en una línea; el título debajo */
    .tabla.tabla-recursos tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    .tabla.tabla-recursos td { width: auto; padding: 0; }
    .tabla.tabla-recursos td[data-titulo]::before { content: none; }
    .tabla.tabla-recursos td.col-titulo { order: 5; width: 100%; }
}

/* ── Panel de administración ── */
.menu-admin {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -8px 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linea);
}
.menu-admin a {
    padding: .4rem 1rem;
    border-radius: 999px;
    color: var(--tinta);
    text-decoration: none;
    font-weight: 500;
}
.menu-admin a:hover { background: var(--cielo); }
.menu-admin a.activo { background: var(--tinta); color: var(--blanco); }

.tarjeta + .tarjeta { margin-top: 20px; }
h1 .estado { vertical-align: middle; margin-left: 8px; }

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin: 12px 0 20px;
}
.cifra {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 18px;
    padding: 16px 20px;
    color: var(--tinta);
    text-decoration: none;
}
a.cifra:hover { border-color: var(--rojo); }
.cifra b { display: block; font-family: 'Carnero W04', 'Jost', sans-serif; font-size: 2.2rem; line-height: 1.1; }
.cifra span { color: var(--gris); font-size: .9rem; }

/* Tablas: en el móvil cada fila pasa a ser una tarjeta */
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th {
    text-align: left;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris);
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--linea);
}
.tabla td { padding: 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td .sub { display: block; font-size: .82rem; word-break: break-all; }
.tabla a { text-decoration: none; }
.fila-inactiva td { color: var(--gris); }
.enlace-accion { white-space: nowrap; font-weight: 600; }

@media (max-width: 720px) {
    .tabla thead { display: none; }
    .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
    .tabla tr { padding: 10px 0; border-bottom: 1px solid var(--linea); }
    .tabla tr:last-child { border-bottom: 0; }
    .tabla td { border: 0; padding: 3px 0; }
    .tabla td[data-titulo]::before {
        content: attr(data-titulo) ': ';
        color: var(--gris);
        font-size: .82rem;
    }
}

.estado, .evento {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.estado-activo   { background: var(--verde-cl); color: var(--verde); }
.estado-inactivo { background: #EEECEF; color: var(--gris); }
.estado-admin    { background: #FBF1DE; color: #8A5D12; }
.evento-login_ok    { background: var(--verde-cl); color: var(--verde); }
.evento-logout      { background: #EEECEF; color: var(--gris); }
.evento-login_fallo { background: var(--rojo-cl); color: var(--rojo); }
.evento-bloqueo     { background: var(--rojo); color: var(--blanco); }
.evento-recurso     { background: var(--cielo); color: var(--tinta); }

.buscador { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.buscador input { flex: 1 1 260px; margin-top: 0; }

.boton-secundario, button.boton-secundario {
    background: transparent;
    color: var(--tinta);
    border-color: var(--linea);
    box-shadow: none;
}
.boton-secundario:hover { background: transparent; color: var(--rojo); border-color: var(--rojo); }
.boton-peligro, button.boton-peligro { background: var(--rojo-osc); margin-top: 16px; }

.rejilla-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 24px;
    margin-bottom: 8px;
}
form > .boton, form > button.boton { margin-top: 18px; }
.ayuda { font-weight: 400; font-size: .83rem; color: var(--gris); margin: 4px 0 0; }
label .ayuda { margin-left: 4px; }
.error-campo { color: var(--rojo); font-size: .88rem; font-weight: 600; margin: 6px 0 0; }
.campo-con-boton { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.campo-con-boton input { margin-top: 0; font-family: ui-monospace, Consolas, monospace; }
.campo-con-boton .boton { padding: .6rem 1.1rem; }
label.casilla { display: flex; align-items: center; gap: 8px; font-weight: 500; }
label.casilla input { width: 18px; height: 18px; accent-color: var(--rojo); }
.datos-extra { font-size: .88rem; margin: 14px 0 0; }

.clave-nueva { border: 2px solid var(--amarillo); }
.clave-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 16px; }
.clave-caja code {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: .06em;
    background: #FBF1DE;
    padding: 8px 16px;
    border-radius: 12px;
}
.clave-nueva details summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.clave-nueva pre {
    white-space: pre-wrap;
    font-family: inherit;
    background: var(--cielo);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 12px;
}

.zona-peligro { border-color: rgba(159, 38, 38, .35); }

/* ── Registro de accesos ── */
.filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0 16px;
    align-items: end;
    margin-bottom: 20px;
    padding: 1.2rem 1.5rem 1.4rem;
}
.filtros label { margin-top: 8px; }
.filtros input[type="date"] {
    width: 100%;
    margin-top: 6px;
    padding: .72rem 1rem;
    font: inherit;
    font-size: .96rem;
    color: var(--tinta);
    border: 1.5px solid var(--linea);
    border-radius: 14px;
}
.filtros-botones { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.filtros-botones .boton { padding: .7rem 1.4rem; }
.nowrap { white-space: nowrap; }
.celda-recurso { font-size: .85rem; word-break: break-all; }
.paginacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--linea);
}
.paginacion a { font-weight: 600; text-decoration: none; }

/* ── Permisos: árbol de carpetas ── */
.lista-permisos { margin: 0 0 16px; padding-left: 20px; }
.lista-permisos li { margin: 3px 0; }
.sugerencia {
    margin-top: 14px;
    padding: 4px 14px 12px;
    border-radius: 14px;
    background: #FBF1DE;
}
.arbol-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.arbol-botones .boton { padding: .45rem 1rem; font-size: .88rem; }

ul.arbol { list-style: none; margin: 0; padding: 0 0 0 22px; }
ul.arbol-raiz { padding-left: 0; }
li.nodo.plegado > ul.arbol { display: none; }
.nodo-fila {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 8px;
}
.nodo-fila:hover { background: var(--cielo); }
.nodo-fila label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
    flex: 0 1 auto;
}
.nodo-fila input { width: 18px; height: 18px; accent-color: var(--rojo); cursor: pointer; }
.nodo-flecha {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--rojo);
    font-size: .9rem;
    cursor: pointer;
    border-radius: 6px;
    transform: rotate(90deg);
    transition: transform .15s;
}
li.nodo.plegado > .nodo-fila .nodo-flecha { transform: none; }
span.nodo-flecha { cursor: default; }
li.nodo.heredado > .nodo-fila { color: var(--gris); }
li.nodo.heredado > .nodo-fila input { cursor: not-allowed; opacity: .55; }
ul.arbol-raiz > li.nodo > .nodo-fila .nodo-nombre { font-weight: 600; }
li.nodo.hoja > .nodo-fila label { font-weight: 400; }
.hoja-archivo {
    font-size: .78rem;
    color: var(--gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
#buscar-ficha { margin: 4px 0 10px; }
@media (max-width: 560px) { .hoja-archivo { display: none; } }

.barra-guardar {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px -2rem -2rem;
    padding: 14px 2rem;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--linea);
    border-radius: 0 0 var(--radio) var(--radio);
}
@media (max-width: 560px) {
    .barra-guardar { margin: 18px -1.1rem -1.5rem; padding: 12px 1.1rem; }
    ul.arbol { padding-left: 14px; }
}

/* ── Pie ── */
.pie {
    text-align: center;
    font-size: .85rem;
    color: var(--gris);
    padding: 18px 16px;
    border-top: 1px solid var(--linea);
}
.pie p { margin: 0; }

@media (max-width: 560px) {
    .cab-nav { margin-left: 0; width: 100%; }
    .tarjeta { padding: 1.5rem 1.1rem; }
    h1 { font-size: 1.45rem; }
}

/* ════════════════════════════════════════════════════════════════
   Mis recursos — Unidades por nivel (acordeón)
   Colores por nivel aprobados por Rosa. Para ajustar uno, basta con
   cambiar sus tres valores aquí: fondo claro, acento (borde) y texto.
   ════════════════════════════════════════════════════════════════ */
:root {
    --a0-fondo: #FAEEDA; --a0-acento: #BA7517; --a0-texto: #633806;   /* Arena */
    --a1-fondo: #EAF3DE; --a1-acento: #639922; --a1-texto: #27500A;   /* Huerta */
    --a2-fondo: #E1F5EE; --a2-acento: #1D9E75; --a2-texto: #085041;   /* Mar Menor */
    --b1-fondo: #E6F1FB; --b1-acento: #378ADD; --b1-texto: #0C447C;   /* Cielo */
    --b2-fondo: #EEEDFE; --b2-acento: #7F77DD; --b2-texto: #3C3489;   /* Lavanda */
    --c1-fondo: #FAECE7; --c1-acento: #D85A30; --c1-texto: #712B13;   /* Granada */
    --c2-fondo: #FBEAF0; --c2-acento: #D4537E; --c2-texto: #72243E;   /* Buganvilla */
    --bloq-fondo: #F1F1F3; --bloq-acento: #B9B8C0; --bloq-texto: #6E6C78;
}
.lv-a0 { --n-fondo: var(--a0-fondo); --n-acento: var(--a0-acento); --n-texto: var(--a0-texto); }
.lv-a1 { --n-fondo: var(--a1-fondo); --n-acento: var(--a1-acento); --n-texto: var(--a1-texto); }
.lv-a2 { --n-fondo: var(--a2-fondo); --n-acento: var(--a2-acento); --n-texto: var(--a2-texto); }
.lv-b1 { --n-fondo: var(--b1-fondo); --n-acento: var(--b1-acento); --n-texto: var(--b1-texto); }
.lv-b2 { --n-fondo: var(--b2-fondo); --n-acento: var(--b2-acento); --n-texto: var(--b2-texto); }
.lv-c1 { --n-fondo: var(--c1-fondo); --n-acento: var(--c1-acento); --n-texto: var(--c1-texto); }
.lv-c2 { --n-fondo: var(--c2-fondo); --n-acento: var(--c2-acento); --n-texto: var(--c2-texto); }
.lv-otros { --n-fondo: var(--cielo); --n-acento: var(--gris); --n-texto: var(--tinta); }
.nivel-caja.bloqueado { --n-fondo: var(--bloq-fondo); --n-acento: var(--bloq-acento); --n-texto: var(--bloq-texto); }

.niveles { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }

.nivel-cab {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    background: var(--n-fondo);
    border: 1.5px solid var(--n-acento);
    border-radius: 18px;
    padding: 12px 18px;
    color: var(--n-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.nivel-cab:hover { box-shadow: 0 4px 14px rgba(37, 32, 76, .10); }
.nivel-cab:focus-visible { outline: 3px solid var(--n-acento); outline-offset: 3px; }
.nivel-nombre { font-family: 'Carnero W04', 'Jost', sans-serif; font-size: 1.15rem; }
.nivel-num { font-size: .85rem; opacity: .85; }
.nivel-icono { margin-left: auto; font-size: 1rem; line-height: 1; }
.nivel-icono.flecha {
    width: 10px; height: 10px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s;
}
.nivel-cab[aria-expanded="true"] .nivel-icono.flecha { transform: rotate(225deg) translate(-2px, -2px); }

/* Globitos */
.globo {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 12px;
    font-size: .9rem;
    line-height: 1.5;
}
.globo-nivel {
    font-family: 'Carnero W04', 'Jost', sans-serif;
    font-size: .85rem;
    background: var(--n-acento);
    color: #fff;
    padding: 2px 10px;
}
.bloqueado .globo-nivel { background: var(--bloq-texto); }
.globo-titulo { background: var(--n-fondo); color: var(--n-texto); font-weight: 600; }
.globo-extra {
    background: var(--amarillo);
    color: var(--tinta);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Tarjetas de unidad */
.nivel-unidades { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 6px 14px; }
.nivel-unidades[hidden] { display: none; }
.unidad {
    display: block;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--n-acento);
    border-radius: 14px;
    padding: 12px 16px;
    color: var(--tinta);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.unidad:hover { border-color: var(--n-acento); box-shadow: 0 4px 14px rgba(37, 32, 76, .10); transform: translateY(-1px); }
.unidad:focus-visible { outline: 3px solid var(--n-acento); outline-offset: 2px; }
.globos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.conceptos { display: block; margin-top: 7px; font-size: .88rem; color: var(--gris); }

/* Niveles bloqueados: gris, candado y mensaje amable al pasar el ratón o pulsar */
.nivel-caja.bloqueado .nivel-cab { cursor: not-allowed; border-style: dashed; }
.nivel-caja.bloqueado .nivel-cab:hover { box-shadow: none; }
.nivel-aviso {
    display: block;
    max-height: 0;
    overflow: hidden;
    font-size: .88rem;
    color: var(--bloq-texto);
    padding: 0 18px;
    transition: max-height .2s, padding .2s;
}
.nivel-caja.bloqueado:hover .nivel-aviso,
.nivel-caja.bloqueado:focus-within .nivel-aviso { max-height: 4em; padding: 6px 18px 0; }

@media (max-width: 560px) {
    .nivel-cab { padding: 11px 14px; }
    .nivel-unidades { padding-left: 0; }
    .unidad { padding: 11px 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .nivel-icono.flecha, .unidad, .nivel-aviso { transition: none; }
}