/* ==========================================================================
   NUEVO DISEÑO (beta) — capa de estilos opcional
   Responsabilidad: re-vestir la app SIN tocar su estructura ni su lógica. Todo está
   bajo `body.ui-nueva`, así que con el interruptor apagado (Ajustes → «Nuevo diseño»
   o ?ui=clasica) la app se ve exactamente como antes. Los datos son los mismos.
   Cada pantalla nueva se suma acá, una a la vez.
   ========================================================================== */

/* ─── Fuentes autoalojadas (funcionan sin internet) ───────────────────────── */
@font-face {
    font-family: "Fredoka";
    src: url("fonts/fredoka-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Nunito";
    src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 1000; font-style: normal; font-display: swap;
}

/* ─── Sistema de diseño: los mismos tokens de style.css, con valores nuevos ── */
body.ui-nueva {
    --bg-body:      #2E412A;   /* encabezado: el verde de Fullder */
    --bg-layout:    #EEF5E4;   /* fondo salvia */
    --bg-panel:     #FFFFFF;
    --text-main:    #2E412A;
    --text-muted:   #5E7058;
    --border-color: #D3E3C3;
    --shadow-sm:    0 3px 0 rgba(46,65,42,0.10);
    --shadow-md:    0 5px 0 rgba(46,65,42,0.12);
    --border-radius-xl: 28px;
    --border-radius-lg: 22px;
    --border-radius-md: 16px;
    --border-radius-sm: 12px;
    --color-primary:   #3D7A45;
    --color-secondary: #2E412A;
    --font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* tokens propios del diseño nuevo */
    --nv-titulo:        "Fredoka", "Nunito", system-ui, sans-serif;
    --nv-amarillo:      #FFD45E;
    --nv-amarillo-sombra: #E0AE27;
    --nv-menta:         #DCEFD9;
    --nv-nav-alto:      68px;
    --nv-linea:         #C5D9B2;   /* renglones de las miniaturas de papel */
    --nv-verde-texto:   #38703F;   /* verde para texto chico sobre la menta (contraste 4,9:1; el #3D7A45 daba 4,3:1) */
}
body.ui-nueva.dark-theme {
    --bg-body:      #101A10;
    --bg-layout:    #17231A;
    --bg-panel:     #1F2E22;
    --text-main:    #EAF2E3;
    --text-muted:   #A9BBA2;
    --border-color: #2F4333;
    --shadow-sm:    0 3px 0 rgba(0,0,0,0.35);
    --shadow-md:    0 5px 0 rgba(0,0,0,0.40);
    --color-primary:   #6FCF7C;
    --color-secondary: #3D7A45;   /* verde medio: el texto blanco encima se lee en claro y en oscuro */
    --nv-menta:        #2A4030;
    --nv-linea:        #476650;
    --nv-verde-texto:  #6FCF7C;
}

/* ─── Piezas comunes ─────────────────────────────────────────────────────── */
body.ui-nueva .header__logo-txt,
body.ui-nueva .panel__title,
body.ui-nueva .modal__title { font-family: var(--nv-titulo); font-weight: 600; letter-spacing: 0; }
body.ui-nueva .layout { border-radius: 28px 28px 0 0; }
body.ui-nueva .search-input { border-radius: 999px; }
body.ui-nueva .header__btn-user,
body.ui-nueva .header__btn-instalar { border-radius: 999px; }
body.ui-nueva .btn { border-radius: 999px; font-weight: 800; }
body.ui-nueva .btn--primary {
    background-color: var(--nv-amarillo); color: #2E412A;
    box-shadow: 0 4px 0 var(--nv-amarillo-sombra);
}
body.ui-nueva .btn--primary:hover { filter: none; transform: translateY(1px); box-shadow: 0 3px 0 var(--nv-amarillo-sombra); }
body.ui-nueva .btn--primary:active { transform: translateY(4px); box-shadow: none; }
body.ui-nueva .fab {
    background-color: var(--nv-amarillo); color: #2E412A; border: none;
    box-shadow: 0 5px 0 var(--nv-amarillo-sombra);
}
body.ui-nueva .fab:hover { filter: none; transform: translateY(1px); }
body.ui-nueva .modal__box { border-radius: 28px; }
body.ui-nueva .item,
body.ui-nueva .tarjeta-hoja { border-radius: var(--border-radius-lg); }
body.ui-nueva .settings-item,
body.ui-nueva .settings-action { border-radius: var(--border-radius-md); }

/* Las carátulas de materia son de colores claros en los dos temas: su texto siempre es oscuro
   (salvo que la persona haya elegido otro color de texto en la carátula). */
body.ui-nueva .tarjeta-materia { --text-main: #2E412A; --text-muted: #4B5F45; color: var(--nv-letra, var(--color-texto-materia, var(--text-main))); }
/* la letra de la carátula: la que eligió la persona o, si no se lee sobre el fondo, la que deja `--nv-letra` (inicio.js). El nombre lleva su color en el
   estilo de la propia etiqueta (ui.js), por eso acá hace falta «!important»; sin colores elegidos sale igual que antes (verde oscuro) */
body.ui-nueva .tarjeta-materia .item-info-nombre > span { color: var(--nv-letra, var(--color-texto-materia, var(--text-main))) !important; }
/* Las carátulas y las hojas se reordenan con una pulsación larga: que el celular no la tome como «seleccionar texto» */
body.ui-nueva .tarjeta-materia, body.ui-nueva .tarjeta-hoja { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ─── Barra inferior (solo celular) ──────────────────────────────────────── */
.nv-nav { display: none; }

@media (max-width: 767px) {
    body.ui-nueva .nv-nav {
        display: flex; gap: 4px;
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: var(--z-header);
        padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
        background-color: var(--bg-panel);
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -4px 14px rgba(46,65,42,0.12);
    }
    body.ui-nueva .nv-nav__btn {
        flex: 1; min-height: 56px; border: 0; background: none; cursor: pointer;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        border-radius: 20px; color: var(--text-muted); font-size: 12px; font-weight: 700;
    }
    body.ui-nueva .nv-nav__btn svg { width: 24px; height: 24px; }
    body.ui-nueva .nv-nav__btn.is-active { background: var(--nv-menta); color: var(--text-main); font-weight: 800; }
    /* el editor ocupa toda la pantalla: sin barra */
    body.ui-nueva.nv-en-editor .nv-nav { display: none; }

    /* el área de paneles deja lugar a la barra */
    body.ui-nueva:not(.nv-en-editor) .layout__main { height: calc(100dvh - 72px - var(--nv-nav-alto) - env(safe-area-inset-bottom)); }
    /* ya están en la barra: salen del encabezado de «Mis Materias» */
    body.ui-nueva #panelMaterias .calendario-btn-mobile,
    body.ui-nueva #panelMaterias .papelera,
    body.ui-nueva .header__btn-user { display: none; }
    body.ui-nueva .fab { bottom: calc(var(--nv-nav-alto) + 16px + env(safe-area-inset-bottom)); right: 16px; }

    /* Mis Materias: de carrusel a grilla de carátulas */
    body.ui-nueva #panelMaterias .panel__list {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px;
        align-content: start; align-items: stretch; gap: 12px;
        overflow-x: hidden; overflow-y: auto; scroll-snap-type: none;
        padding: 4px 16px 24px; height: auto; flex: 1; min-height: 0;
    }
    body.ui-nueva #panelMaterias .panel__list::before,
    body.ui-nueva #panelMaterias .panel__list::after { content: none; }
    body.ui-nueva #panelMaterias .panel__list .empty-state { grid-column: 1 / -1; }
    body.ui-nueva .tarjeta-materia {
        flex: none; width: auto; height: auto; min-height: 0; max-height: none;
        border-radius: 26px; padding: 14px; scroll-snap-align: none;
        border: 0; box-shadow: 0 5px 0 rgba(46,65,42,0.14);
    }
    body.ui-nueva .tarjeta-materia .item-info { height: 100%; }
    body.ui-nueva .tarjeta-materia .item-info-materias { flex-direction: column; justify-content: space-between; gap: 8px; height: 100%; }
    body.ui-nueva .tarjeta-materia .logo-materias {
        width: 44px; height: 44px; padding: 8px; border-radius: 50%;
        background-color: #fff !important; box-shadow: none;
    }
    body.ui-nueva .tarjeta-materia .item-info span {
        font-family: var(--nv-titulo); font-size: 1.15rem; font-weight: 600; line-height: 1.3;
        white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    }
    body.ui-nueva .tarjeta-materia .item-info-nombre { gap: 0; overflow: visible; }
    body.ui-nueva .tarjeta-materia .item-fecha { margin-top: 0; font-size: 0.78rem; font-weight: 600; opacity: 0.85; }
    /* el menú de tres puntos va arriba a la derecha, sin ocupar lugar en la carátula */
    body.ui-nueva .tarjeta-materia .contenedor-opciones { position: absolute; top: 8px; right: 8px; z-index: 5; }
    body.ui-nueva .tarjeta-materia .btn-opciones { background: rgba(255,255,255,0.55); border-radius: 50%; }
}

/* ─── Hojas: encabezado en tarjeta menta y miniatura del papel de cada hoja (celular, tablet y escritorio) ── */
body.ui-nueva #panelHojas .panel__header {
    background-color: var(--nv-menta); border-radius: 28px; margin: 12px 16px 4px; padding: 14px; gap: 12px; align-items: center;
}
body.ui-nueva #panelHojas .panel__header > .btn-icon:first-child {
    flex: none; width: 44px; height: 44px; padding: 0; justify-content: center;
    border-radius: 50%; background-color: var(--bg-panel); box-shadow: var(--shadow-sm);
}
body.ui-nueva #tituloHojas { flex: 1; min-width: 0; text-align: left; font-size: 0; line-height: 1; }
body.ui-nueva #tituloHojas::before {
    content: attr(data-materia); display: block; font-family: var(--nv-titulo); font-size: 1.6rem; font-weight: 600;
    line-height: 1.2; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ui-nueva #tituloHojas::after {
    content: attr(data-subtitulo); display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 700; line-height: 1.2; color: var(--nv-verde-texto);
}
body.ui-nueva #btnAgregarHoja {
    flex: none; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%;
    background-color: var(--nv-amarillo); color: #2E412A; box-shadow: 0 4px 0 var(--nv-amarillo-sombra);
}
body.ui-nueva #btnAgregarHoja:hover { filter: none; transform: translateY(1px); }
body.ui-nueva #btnAgregarHoja svg { width: 22px; height: 22px; }
body.ui-nueva #panelHojas .panel__list { padding: 8px 16px 24px; gap: 10px; }

body.ui-nueva .tarjeta-hoja { min-height: 84px; padding: 10px 12px 10px 10px; border-radius: 24px; box-shadow: var(--shadow-sm); }
/* la barra de color de siempre pasa a ser la miniatura del papel de la hoja */
body.ui-nueva .tarjeta-hoja::before {
    position: static; order: 1; flex: none; width: 52px; height: 64px; margin-left: 2px;
    border: 2px solid var(--border-color); border-radius: 14px; background-color: var(--bg-panel);
    opacity: 1; transform: none; transition: none;
}
body.ui-nueva .tarjeta-hoja:hover::before { transform: none; }
body.ui-nueva .tarjeta-hoja[data-patron="rayada"]::before {
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 9px, var(--nv-linea) 9px, var(--nv-linea) 10px);
}
body.ui-nueva .tarjeta-hoja[data-patron="cuadriculada"]::before {
    background-image: linear-gradient(var(--nv-linea) 1px, transparent 1px), linear-gradient(90deg, var(--nv-linea) 1px, transparent 1px);
    background-size: 10px 10px;
}
body.ui-nueva .tarjeta-hoja[data-patron="punteada"]::before {
    background-image: radial-gradient(var(--nv-linea) 1.2px, transparent 1.6px); background-size: 10px 10px;
}
body.ui-nueva .tarjeta-hoja .drag-handle { order: 0; }
body.ui-nueva .tarjeta-hoja .item-info { order: 2; padding-left: 14px; min-width: 0; }
body.ui-nueva .tarjeta-hoja .contenedor-opciones { order: 3; }
body.ui-nueva .tarjeta-hoja .hoja-icono { display: none; }   /* la miniatura ya muestra el papel */
body.ui-nueva .tarjeta-hoja .hoja-titulo__texto { font-family: var(--nv-titulo); font-size: 1.05rem; font-weight: 600; }
body.ui-nueva .tarjeta-hoja .item-fecha { font-size: 0.78rem; font-weight: 600; }

/* ─── Hojas: atajos «Carátula» y «Papelera» en el encabezado, y fila de filtros (celular; tablet y escritorio, más abajo) ──
   Los dos grupos están en index.html con `hidden` y solo se ven con el diseño nuevo. Los filtros los maneja hojas-filtros.js. */
body.ui-nueva #panelHojas .panel__header { flex-wrap: wrap; row-gap: 10px; }
body.ui-nueva .nv-atajos { display: flex; flex: 1 0 100%; order: 5; flex-wrap: wrap; gap: 8px; }
body.ui-nueva .nv-atajo, body.ui-nueva .nv-filtro {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; padding: 0 16px;
    border: 0; border-radius: 22px; background-color: var(--bg-panel); color: var(--text-main);
    font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: transform 0.1s ease;
}
body.ui-nueva .nv-atajo:hover { box-shadow: inset 0 0 0 2px var(--color-primary); }
body.ui-nueva .nv-filtro:not(.is-active):hover { background-color: var(--nv-menta); }
body.ui-nueva .nv-atajo:active, body.ui-nueva .nv-filtro:active { transform: scale(0.97); }
body.ui-nueva .nv-atajo:focus-visible, body.ui-nueva .nv-filtro:focus-visible, body.ui-nueva .nv-filtros__nueva:focus-visible {
    outline: 3px solid var(--color-primary); outline-offset: 2px;
}
body.ui-nueva .nv-atajo svg { flex: none; }
/* con un filtro puesto la lista no se puede reordenar (ui.js lo marca con data-sin-reorden): tampoco se muestra el agarre */
body.ui-nueva #listaHojas[data-sin-reorden="true"] .drag-handle { display: none; }
body.ui-nueva .nv-filtro.is-active { background-color: var(--text-main); color: var(--bg-panel); }
/* La fila de filtros queda fuera de la lista: no se desplaza con las hojas. Si los botones no entran, se deslizan de costado. */
body.ui-nueva .nv-filtros:not([hidden]) { display: flex; position: relative; align-items: center; gap: 8px; padding: 10px 0 2px 16px; }
body.ui-nueva .nv-filtros__botones {
    display: flex; flex: 1; min-width: 0; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 3px 16px 3px 3px; margin: -3px 0 -3px -3px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body.ui-nueva .nv-filtros__botones::-webkit-scrollbar { display: none; }
/* texto solo para lectores de pantalla (avisa cuántas hojas quedan al cambiar de filtro) */
.nv-solo-lectores {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ─── Calendario: «Próximas fechas» en tarjetas (todos los tamaños) y fechas como puntos de color (solo celular) ── */
body.ui-nueva .calendario-evento-lateral {
    background-color: var(--bg-panel); border: 0; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm);
}
body.ui-nueva .calendario-evento-lateral__titulo { font-family: var(--nv-titulo); font-weight: 600; font-size: 1rem; }
body.ui-nueva .calendario-evento-lateral__fecha {
    display: inline-block; padding: 2px 10px; border-radius: 999px; background-color: var(--nv-menta); font-size: 0.72rem; font-weight: 800; color: var(--text-main);
}
body.ui-nueva .calendario-proximos-titulo, body.ui-nueva .calendario-hoy-titulo { font-family: var(--nv-titulo); font-weight: 600; font-size: 1rem; }
/* Barra lateral del escritorio, en oscuro: los colores por tipo del título están pensados para fondo claro y casi no se leen; el tipo lo sigue marcando el puntito */
body.ui-nueva.dark-theme .evento-sidebar-titulo { color: var(--text-main) !important; }
@media (max-width: 767px) {
    body.ui-nueva .calendario-celda__eventos { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; margin-top: 2px; }
    body.ui-nueva .calendario-evento-chip {
        flex: none; width: 8px; height: 8px; min-height: 0; padding: 0; border-radius: 50%;
        filter: saturate(2.2) brightness(0.82);
    }
    body.ui-nueva .calendario-evento-chip > * { display: none; }
}

/* ─── Editor: encabezado y barra de herramientas ─────────────────────────────
   El papel y sus renglones NO se tocan (la grilla de --renglon manda): solo se viste lo de alrededor. */
body.ui-nueva .btn-editor { border: 0; border-radius: 999px; background-color: var(--nv-menta); box-shadow: none; }
body.ui-nueva .toolbar { background-color: var(--nv-menta); border-radius: 22px; }
body.ui-nueva .toolbar__btn { border-radius: 14px; }
body.ui-nueva .toolbar__btn.active { background-color: var(--bg-panel); color: var(--text-main); box-shadow: var(--shadow-sm); }
body.ui-nueva .toolbar__select-header { background-color: var(--bg-panel); border-radius: 14px; box-shadow: var(--shadow-sm); }
body.ui-nueva .toolbar__dropdown,
body.ui-nueva .toolbar__dropdown--colores { border-radius: var(--border-radius-md); }
body.ui-nueva .buscador-hoja { border-radius: 999px; background-color: var(--nv-menta); border: 0; }
@media (max-width: 767px) {
    body.ui-nueva #fechaModificacionHoja { font-size: 0.72rem; font-weight: 700; color: var(--color-primary); }
}

/* ─── Papelera: tarjetas blancas con acciones en píldoras (en celular, título arriba y acciones debajo) ── */
body.ui-nueva .tarjeta-papelera { border: 0; border-radius: 24px; background-color: var(--bg-panel); box-shadow: var(--shadow-sm); }
body.ui-nueva .tarjeta-papelera .papelera-titulo > span { font-family: var(--nv-titulo); font-weight: 600; font-size: 1.05rem; }
body.ui-nueva .btn-restaurar, body.ui-nueva .btn-borrar-def {
    min-height: 44px; border-radius: 999px; font-weight: 800; font-size: 0.9rem; color: var(--text-main);
}
body.ui-nueva .btn-restaurar { background-color: var(--nv-menta); }
body.ui-nueva .btn-borrar-def { background-color: #FFC1B3; }
body.ui-nueva.dark-theme .btn-borrar-def { background-color: #6B3A33; color: #FFD9D2; }
@media (max-width: 767px) {
    body.ui-nueva .tarjeta-papelera { flex-wrap: wrap; gap: 10px; padding: 14px; }
    body.ui-nueva .tarjeta-papelera .item-info { flex: 1 1 100%; min-width: 0; }
    body.ui-nueva .acciones-papelera { flex: 1 1 100%; display: flex; gap: 8px; }
}
/* La barra de abajo (celular) flota sobre el área de paneles, que llega hasta el borde de la pantalla: al final de las listas largas
   (materias, hojas, papelera) y de Repaso falta lugar para subir lo último por encima de la barra, y quedaba tapado casi a la mitad.
   En las listas, solo cuando hay tarjetas: el aviso de «lista vacía» sigue ocupando todo el espacio. */
@media (max-width: 767px) {
    body.ui-nueva #repasoCuerpo { padding-bottom: calc(var(--nv-nav-alto) + 24px + env(safe-area-inset-bottom)); }
    body.ui-nueva #panelMaterias .panel__list:not(:has(.empty-state)),
    body.ui-nueva #listaHojas:not(:has(.empty-state)),
    body.ui-nueva #listaPapelera:not(:has(.empty-state)) { padding-bottom: calc(var(--nv-nav-alto) + 24px + env(safe-area-inset-bottom)); }
}
/* Calendario (celular): el consejo del pie («Tip: …») está fuera del área que se desplaza, así que la barra de abajo lo tapaba entero
   (y le comía unos píxeles al final de la lista). Ahora se desplaza todo el panel —el encabezado queda fijo arriba— y el consejo
   queda al final, con lugar para subirlo por encima de la barra. */
@media (max-width: 767px) {
    body.ui-nueva .panel--calendario { overflow-x: hidden; overflow-y: auto; }
    body.ui-nueva .panel--calendario > .calendario-header { position: sticky; top: 0; z-index: 2; flex: none; background-color: var(--bg-panel); }
    body.ui-nueva .calendario-cuerpo { flex: none; overflow: visible; }
    body.ui-nueva .calendario-tip { padding-bottom: calc(var(--nv-nav-alto) + 16px + env(safe-area-inset-bottom)); }
}

/* ─── Calendario: filtros por tipo de evento («Todos», «Examen», «Entrega», «Proyecto», «Recordatorio») ──────────────────
   El grupo está en index.html con `hidden` y lo maneja calendario-filtros.js, que lo muestra (y le pone `data-con-tipos` al panel)
   solo si calendario.js sabe volver a dibujar. Con el grupo a la vista, la leyenda de colores de siempre («Tipos de eventos»,
   que no se podía tocar) se esconde: ahora esos mismos botones hacen de leyenda. Si el grupo no se muestra, todo queda como estaba.
   Celular: una fila arriba de la grilla, de borde a borde, que se desliza de costado. Tablet y escritorio: más abajo. */
body.ui-nueva .nv-cal-tipos:not([hidden]) { display: block; }
body.ui-nueva #panelCalendario[data-con-tipos] .calendario-filtro-card--leyenda { display: none; }
body.ui-nueva .nv-tipo {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: 22px; background-color: var(--bg-layout); color: var(--text-main);
    font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: transform 0.1s ease;
}
body.ui-nueva .nv-tipo:not([aria-pressed="true"]):hover { background-color: var(--nv-menta); }
body.ui-nueva .nv-tipo:active { transform: scale(0.97); }
body.ui-nueva .nv-tipo:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
body.ui-nueva .nv-tipo[aria-pressed="true"] { background-color: var(--text-main); color: var(--bg-panel); }
/* el puntito lleva los mismos colores por tipo que el calendario (calendario.js); el aro lo hace visible sobre el fondo claro */
body.ui-nueva .nv-tipo__punto { width: 10px; height: 10px; flex: none; border-radius: 50%; background-color: var(--nv-tipo, #E9D5FF); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
body.ui-nueva .nv-tipo[data-tipo="examen"] { --nv-tipo: #FDE68A; }
body.ui-nueva .nv-tipo[data-tipo="entrega"] { --nv-tipo: #BBF7D0; }
body.ui-nueva .nv-tipo[data-tipo="proyecto"] { --nv-tipo: #FED7AA; }
body.ui-nueva .nv-tipo[data-tipo="recordatorio"] { --nv-tipo: #E9D5FF; }
@media (max-width: 767px) {
    body.ui-nueva .nv-cal-tipos:not([hidden]) { margin-bottom: -14px; }   /* el hueco entre este bloque y la grilla ya lo pone .calendario-cuerpo (20px) */
    body.ui-nueva .nv-cal-tipos__titulo { display: none; }
    /* los botones llegan hasta el borde de la pantalla y se deslizan de costado (el último asoma cortado: así se nota que hay más) */
    body.ui-nueva .nv-cal-tipos__botones {
        display: flex; gap: 8px; margin: 0 -10px; padding: 6px 10px; scroll-padding-inline: 10px;
        overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    body.ui-nueva .nv-cal-tipos__botones::-webkit-scrollbar { display: none; }
    /* en el celular los puntos del calendario van más fuertes (ver arriba): este va igual, para que se reconozca */
    body.ui-nueva .nv-tipo__punto { box-shadow: none; filter: saturate(2.2) brightness(0.82); }
}

/* ═══ Tablet y escritorio (≥768px) ═════════════════════════════════════════════
   Mismo diseño que el celular, pero con un riel lateral en lugar de la barra inferior.
   Tablet: riel angosto (ícono con el texto abajo). Escritorio (≥1100px): riel ancho, con el texto al lado.
   El diseño de siempre no usa nada de esto: todo cuelga de body.ui-nueva. */
.nv-enc-acciones, .nv-nueva-materia, .nv-nueva-hoja, .nv-materia-nueva, .nv-personalizar, .nv-previa, .nv-login, .nv-atajos, .nv-filtros, .nv-filtros__nueva, .nv-cal-tipos { display: none; }

/* Encabezado: Ajustes ya está en el riel, así que «Estudiante Mode» (que abría Ajustes) se cambia por «Iniciar sesión»,
   un lugar reservado para el futuro inicio de sesión (por ahora solo avisa que llega pronto). En celular el botón no se ve. */
@media (min-width: 768px) {
    body.ui-nueva .header__btn-user { display: none; }
    body.ui-nueva .nv-login {
        display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 18px;
        border: 1px solid rgba(255,255,255,0.05); border-radius: 999px; background-color: rgba(255,255,255,0.1);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        color: #fff; font: inherit; font-size: 0.95rem; font-weight: 600; white-space: nowrap; cursor: pointer;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }
    body.ui-nueva .nv-login:hover { background-color: rgba(255,255,255,0.15); transform: scale(1.02); }
    body.ui-nueva .nv-login:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    /* igual que el botón de siempre: solo el ícono (el buscador achicado necesita el espacio) */
    body.ui-nueva .nv-login { padding: 10px; }
    body.ui-nueva .nv-login__texto { display: none; }
}

@media (min-width: 768px) {
    body.ui-nueva { --nv-riel: 104px; --nv-encabezado: 72px; }

    /* el encabezado tiene alto fijo para que el riel arranque justo debajo */
    body.ui-nueva .header { height: var(--nv-encabezado); box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
    body.ui-nueva .layout { margin-left: var(--nv-riel); }

    body.ui-nueva .nv-nav {
        display: flex; flex-direction: column; gap: 8px;
        position: fixed; left: 0; top: var(--nv-encabezado); bottom: 0; width: var(--nv-riel);
        padding: 8px 10px 20px; overflow-y: auto;
        background-color: var(--bg-body);
        z-index: var(--z-header);
    }
    body.ui-nueva .nv-nav__btn {
        flex: none; min-height: 76px; padding: 0; border: 0; background: none; cursor: pointer;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        border-radius: 22px; color: #CFE0C2; font: inherit; font-size: 12px; font-weight: 700;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    body.ui-nueva .nv-nav__btn svg { width: 24px; height: 24px; flex: none; }
    body.ui-nueva .nv-nav__btn:hover { background-color: rgba(255,255,255,0.08); color: #fff; }
    body.ui-nueva .nv-nav__btn.is-active { background-color: rgba(255,255,255,0.16); color: #fff; font-weight: 800; }
    body.ui-nueva .nv-nav__btn:focus-visible { outline-color: #fff; }

    /* ya están en el riel: salen del encabezado de «Mis Materias» (y el «+» flotante pasa a ser un botón del encabezado) */
    body.ui-nueva #panelMaterias .repaso-btn-entrada,
    body.ui-nueva #panelMaterias .papelera { display: none; }
    body.ui-nueva #btnFab.fab { display: none !important; }
    body.ui-nueva .nv-enc-acciones { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
    body.ui-nueva .nv-nueva-materia,
    body.ui-nueva .nv-nueva-hoja {
        display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 0 20px;
        border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 800; font-size: 0.95rem;
        background-color: var(--nv-amarillo); color: #2E412A; box-shadow: 0 4px 0 var(--nv-amarillo-sombra);
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }
    body.ui-nueva .nv-nueva-materia:hover,
    body.ui-nueva .nv-nueva-hoja:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--nv-amarillo-sombra); }
    body.ui-nueva .nv-nueva-materia:active,
    body.ui-nueva .nv-nueva-hoja:active { transform: translateY(4px); box-shadow: none; }

    /* Mis Materias: grilla de carátulas (el mismo aspecto que en el celular) */
    body.ui-nueva #panelMaterias .panel__header { padding: 2px 4px 16px; flex-wrap: wrap; row-gap: 12px; }   /* si el saludo y los botones no entran juntos, los botones bajan */
    body.ui-nueva #panelMaterias .panel__list {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 176px;
        align-content: start; gap: 14px; padding: 4px 4px 24px;
    }
    body.ui-nueva #panelMaterias .panel__list .empty-state { grid-column: 1 / -1; }
    /* los resultados del buscador son una lista, no carátulas */
    body.ui-nueva #panelMaterias .panel__list.modo-busqueda { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    body.ui-nueva .tarjeta-materia {
        flex: none; width: auto; height: auto; min-height: 0; max-height: none;
        position: relative; display: flex; flex-direction: column; overflow: hidden;
        padding: 16px; border: 0; border-radius: 26px; box-shadow: 0 5px 0 rgba(46,65,42,0.14);
        color: var(--color-texto-materia, var(--text-main));
    }
    body.ui-nueva .tarjeta-materia.is-arrastrando { position: fixed; }   /* mientras se arrastra sale de la grilla (gana a «position: relative» de arriba) */
    body.ui-nueva .tarjeta-materia::after  { display: block; }   /* la imagen de la carátula, si la persona puso una */
    body.ui-nueva .tarjeta-materia::before { display: none; }
    body.ui-nueva .tarjeta-materia > * { position: relative; z-index: 1; }
    body.ui-nueva .tarjeta-materia .item-info { width: 100%; height: 100%; padding: 0; display: flex; flex-direction: column; }
    body.ui-nueva .tarjeta-materia .item-info-materias { flex-direction: column; justify-content: space-between; gap: 8px; height: 100%; }
    body.ui-nueva .tarjeta-materia .logo-materias {
        width: 48px; height: 48px; padding: 9px; border-radius: 50%;
        background-color: #fff !important; box-shadow: none;
    }
    body.ui-nueva .tarjeta-materia .item-info span {
        display: block; max-width: 100%; font-family: var(--nv-titulo); font-size: 1.25rem; font-weight: 600; line-height: 1.25;
        white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    }
    body.ui-nueva .tarjeta-materia .item-info-nombre { gap: 0; overflow: visible; }
    body.ui-nueva .tarjeta-materia .item-fecha { margin-top: 2px; font-size: 0.82rem; font-weight: 600; opacity: 0.85; }
    body.ui-nueva .tarjeta-materia .contenedor-opciones { position: absolute; top: 10px; right: 10px; z-index: 5; }
    body.ui-nueva .tarjeta-materia .btn-opciones { background: rgba(255,255,255,0.55); border-radius: 50%; }
    /* con el mouse, el agarre para reordenar aparece al pasar por la carátula; con el dedo se reordena con una pulsación larga */
    body.ui-nueva .tarjeta-materia .drag-handle { display: none; }

    /* Hojas: encabezado con «Nueva hoja» en píldora, y lista en dos columnas con la etiqueta del papel */
    body.ui-nueva #panelHojas .panel__header { margin: 0 0 8px; padding: 14px 18px; }
    body.ui-nueva #panelHojas .panel__header > .btn-icon:first-child .btn-icon__text { display: none; }
    body.ui-nueva #tituloHojas::before { font-size: 1.7rem; }
    body.ui-nueva #btnAgregarHoja { width: auto; padding: 0 20px; border-radius: 999px; gap: 8px; }
    body.ui-nueva #btnAgregarHoja .btn-icon__text { display: inline; font-weight: 800; }
    body.ui-nueva #panelHojas .panel__list {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px; padding: 6px 2px 24px;
    }
    body.ui-nueva #panelHojas .panel__list .empty-state { grid-column: 1 / -1; }
    body.ui-nueva .tarjeta-hoja { min-height: 100px; padding: 12px 14px 12px 12px; }
    body.ui-nueva .tarjeta-hoja::before { width: 60px; height: 74px; }
    body.ui-nueva .tarjeta-hoja .item-info { padding-left: 12px; }
    body.ui-nueva .tarjeta-hoja .hoja-titulo__texto { font-size: 1.1rem; }
    body.ui-nueva .tarjeta-hoja .item-fecha { font-size: 0.82rem; }
    body.ui-nueva .tarjeta-hoja .contenedor-opciones { align-self: center; }
    body.ui-nueva .tarjeta-hoja .item-info { gap: 4px; }
    body.ui-nueva .tarjeta-hoja .item-info::after {
        content: "Lisa"; align-self: flex-start; margin-top: 2px; padding: 2px 10px; border-radius: 10px;
        background-color: var(--nv-menta); font-size: 0.72rem; font-weight: 800; color: var(--text-main);
    }
    body.ui-nueva .tarjeta-hoja[data-patron="rayada"] .item-info::after       { content: "Rayada"; }
    body.ui-nueva .tarjeta-hoja[data-patron="cuadriculada"] .item-info::after { content: "Cuadriculada"; }
    body.ui-nueva .tarjeta-hoja[data-patron="punteada"] .item-info::after     { content: "Punteada"; }
    body.ui-nueva .tarjeta-hoja.nv-en-previa { background-color: var(--nv-menta); }
    body.ui-nueva .tarjeta-hoja.nv-en-previa .item-info::after { background-color: var(--bg-panel); }

    /* Hojas: «Carátula» y «Papelera» van a la derecha del encabezado; «Nueva hoja» pasa a la fila de filtros
       (si la materia no tiene hojas no hay filtros, y «Nueva hoja» se queda en el encabezado) */
    body.ui-nueva #panelHojas .panel__header { flex-wrap: nowrap; }
    body.ui-nueva .nv-atajos { flex: none; order: 0; flex-wrap: nowrap; }
    body.ui-nueva #panelHojas[data-con-filtros] #btnAgregarHoja { display: none; }
    body.ui-nueva .nv-filtros:not([hidden]) { padding: 0 0 6px; gap: 12px; }
    body.ui-nueva .nv-filtros__botones { padding-right: 3px; }
    body.ui-nueva .nv-filtros__nueva {
        display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 0 20px;
        border: 0; border-radius: 999px; background-color: var(--nv-amarillo); color: #2E412A; cursor: pointer;
        font-family: inherit; font-size: 15px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 0 var(--nv-amarillo-sombra);
    }
    body.ui-nueva .nv-filtros__nueva:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--nv-amarillo-sombra); }
    body.ui-nueva .nv-filtros__nueva:active { transform: translateY(4px); box-shadow: none; }
}

@media (min-width: 1100px) {
    body.ui-nueva { --nv-riel: 232px; }
    body.ui-nueva .nv-nav { padding: 12px 14px 20px; }
    body.ui-nueva .nv-nav__btn {
        flex-direction: row; justify-content: flex-start; gap: 12px;
        min-height: 48px; padding: 0 16px; font-size: 15px; border-radius: 24px;
    }
}

/* Tablet: el sidebar del calendario no entra al lado de las carátulas (el Calendario está en el riel), y el editor usa todo el ancho */
@media (min-width: 768px) and (max-width: 1099px) {
    body.ui-nueva .sidebar { display: none !important; }
    body.ui-nueva.nv-en-editor .nv-nav { display: none; }
    body.ui-nueva.nv-en-editor .layout { margin-left: 0; }
}
/* Escritorio: en el editor el encabezado de la app no está, así que el riel ocupa toda la altura */
@media (min-width: 1100px) {
    body.ui-nueva.nv-en-editor .nv-nav { top: 0; }
    body.ui-nueva .sidebar { width: 270px; border-radius: 28px; }
}

/* Escritorio con mouse: vista previa de la hoja al pasar por ella, y agarre para reordenar las carátulas */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
    body.ui-nueva #panelHojas.is-active {
        display: grid !important; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 20px;
    }
    body.ui-nueva #panelHojas .panel__header { grid-column: 1 / -1; }
    body.ui-nueva #panelHojas .nv-filtros { grid-column: 1; grid-row: 2; }
    body.ui-nueva #panelHojas .panel__list { grid-column: 1; grid-row: 3; min-height: 0; }
    body.ui-nueva .nv-previa:not([hidden]) {
        display: flex; flex-direction: column; gap: 12px; grid-column: 2; grid-row: 2 / -1; align-self: start;
        padding: 20px; border-radius: 26px; background-color: var(--bg-panel); box-shadow: var(--shadow-sm);
    }
    body.ui-nueva .tarjeta-materia .drag-handle {
        display: flex; position: absolute; right: 10px; bottom: 10px; margin: 0; z-index: 5;
        background: rgba(255,255,255,0.55); color: #2E412A; opacity: 0; transition: opacity 0.15s ease;
    }
    body.ui-nueva .tarjeta-materia:hover .drag-handle,
    body.ui-nueva .tarjeta-materia:focus-within .drag-handle { opacity: 1; }
}
/* Materia sin hojas: el aviso ocupa todo el espacio (como en el celular y en el diseño de siempre).
   Sin hojas no hay vista previa, así que la lista también usa la columna de la derecha. */
@media (min-width: 768px) {
    body.ui-nueva #panelHojas .panel__list:has(> .empty-state) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-content: stretch; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
    body.ui-nueva #panelHojas:has(> .nv-previa[hidden]) > .panel__list,
    body.ui-nueva #panelHojas:has(> .nv-previa[hidden]) > .nv-filtros { grid-column: 1 / -1; }
}
/* Escritorio angosto con vista previa (1100–1239 px): en la columna de la izquierda no entran los cuatro filtros y «Nueva hoja»,
   así que esta se queda en el encabezado, donde sobra lugar. */
@media (min-width: 1100px) and (max-width: 1239px) and (hover: hover) and (pointer: fine) {
    body.ui-nueva #panelHojas[data-con-filtros] #btnAgregarHoja { display: inline-flex; }
    body.ui-nueva .nv-filtros__nueva { display: none; }
}
.nv-previa__encabezado { font-family: var(--nv-titulo); font-size: 1.15rem; font-weight: 600; }
.nv-previa__papel {
    height: 230px; overflow: hidden; padding: 10px 16px; border: 2px solid var(--border-color); border-radius: 18px;
    background-color: var(--bg-panel); font-size: 15px; line-height: 28px; color: var(--text-main);
}
.nv-previa__papel[data-patron="rayada"] {
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--nv-linea) 27px, var(--nv-linea) 28px);
    background-position: 0 10px;
}
.nv-previa__papel[data-patron="cuadriculada"] {
    background-image: linear-gradient(var(--nv-linea) 1px, transparent 1px), linear-gradient(90deg, var(--nv-linea) 1px, transparent 1px);
    background-size: 14px 14px;
}
.nv-previa__papel[data-patron="punteada"] { background-image: radial-gradient(var(--nv-linea) 1.2px, transparent 1.6px); background-size: 14px 14px; }
.nv-previa__titulo { font-family: var(--nv-titulo); font-size: 1.1rem; font-weight: 600; line-height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nv-previa__texto { overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; }
.nv-previa__dato { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 2px solid var(--bg-layout); font-size: 0.88rem; }
.nv-previa__dato span { color: var(--text-muted); font-weight: 600; }
.nv-previa__dato b { text-align: right; }
.nv-previa__abrir {
    min-height: 48px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: 0.95rem;
    background-color: var(--nv-amarillo); color: #2E412A; box-shadow: 0 4px 0 var(--nv-amarillo-sombra);
}
.nv-previa__abrir:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--nv-amarillo-sombra); }

/* Calendario: título grande, filtros como píldoras arriba, grilla de días con tarjetas y «Próximas fechas» al lado (escritorio) o abajo (tablet) */
@media (min-width: 768px) {
    body.ui-nueva .panel--calendario { border-radius: 28px; }
    body.ui-nueva .calendario-header { padding: 20px 24px 12px; gap: 12px; }
    body.ui-nueva .calendario-breadcrumb a,
    body.ui-nueva .calendario-breadcrumb__separador { display: none; }
    body.ui-nueva .calendario-breadcrumb__activo { font-family: var(--nv-titulo); font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
    body.ui-nueva .calendario-header__nav { border: 0; background-color: var(--bg-layout); }
    body.ui-nueva .calendario-header__tabs { padding: 4px; border-radius: 999px; background-color: var(--bg-layout); }
    /* align-items y justify-content: la regla global `.is-active { display: flex !important }` (style.css) vuelve «flex» solo al botón activo, y un flex más alto que su texto
       lo deja arriba de todo; «Semana» y «Agenda» (deshabilitados) siguen siendo «block» y el navegador los centra solo. Así los tres quedan igual, y también cuando se habiliten. */
    body.ui-nueva .calendario-tab { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font-weight: 800; align-items: center; justify-content: center; }
    body.ui-nueva .calendario-tab.is-active { background-color: var(--color-secondary); color: #fff; }

    body.ui-nueva .calendario-cuerpo {
        display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px;
        grid-template-areas: "filtro" "grilla" "lista";
        padding: 0 24px 16px; overflow-y: auto;
    }
    body.ui-nueva .calendario-filtro { grid-area: filtro; width: auto; flex-direction: column; gap: 8px; overflow: visible; }
    body.ui-nueva .calendario-grilla-wrap { grid-area: grilla; flex: none; min-height: auto; }
    body.ui-nueva .calendario-lista-detallada { grid-area: lista; width: auto; padding: 0; border-left: 0; overflow: visible; }

    /* los filtros pasan de columna de casillas a una fila de píldoras */
    body.ui-nueva .calendario-filtro-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; border: 0; background: none; }
    body.ui-nueva .calendario-filtro-titulo { margin: 0 6px 0 0; font-size: 0.72rem; }
    body.ui-nueva #calendarioFiltroMaterias { display: contents; }
    body.ui-nueva .calendario-filtro-item { padding: 6px 12px; border-radius: 999px; background-color: var(--bg-layout); font-weight: 700; }
    body.ui-nueva .calendario-filtro-tip { display: none; }

    /* grilla: días como tarjetas redondeadas */
    body.ui-nueva .calendario-grilla-dias-semana { gap: 6px; border-bottom: 0; padding: 4px 0 8px; }
    body.ui-nueva .calendario-grilla-dias-semana span { font-size: 0; }
    body.ui-nueva .calendario-grilla-dias-semana span::first-letter { font-size: 0.8rem; }
    body.ui-nueva .calendario-grilla { flex: none; gap: 6px; grid-template-rows: repeat(6, 88px); }
    body.ui-nueva .calendario-celda { padding: 8px; border: 0; border-radius: 18px; background-color: var(--bg-layout); }
    body.ui-nueva .calendario-celda:hover { background-color: var(--nv-menta); }
    body.ui-nueva .calendario-celda--vacia { background-color: var(--bg-layout); opacity: 0.4; }
    body.ui-nueva .calendario-celda__numero { font-size: 0.9rem; font-weight: 700; }
    body.ui-nueva .calendario-evento-chip { border-radius: 10px; padding: 2px 8px; }
    body.ui-nueva .calendario-evento-chip__titulo { font-weight: 700; }
    body.ui-nueva .calendario-tip { padding: 4px 24px 16px; }

    /* «Próximas fechas»: tarjetas en varias columnas si hay lugar */
    body.ui-nueva #calendarioPanelLateral { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
    body.ui-nueva #calendarioPanelLateral > :not(.calendario-evento-lateral) { grid-column: 1 / -1; margin: 6px 0 0; }
    body.ui-nueva .calendario-evento-lateral { background-color: var(--bg-layout); box-shadow: none; }
    body.ui-nueva .calendario-lista-detallada__titulo { font-family: var(--nv-titulo); font-weight: 600; }
    body.ui-nueva .calendario-btn-agregar { margin-top: 14px; }
}
/* Escritorio (≥1100px): el calendario nunca se aplasta.
   Antes los días se repartían «el alto que sobrara»: con varias materias (los filtros ocupan renglones) y una ventana baja
   (~600 px, por ejemplo con las herramientas del navegador abiertas) cada día quedaba de ~20 px y se cortaban los números.
   Ahora: título y herramientas en un renglón, «Materias» y «Tipos de eventos» lado a lado (ocupan menos alto), cada semana
   tiene un alto mínimo y, si igual no entra, el cuerpo del calendario hace scroll (el encabezado queda fijo arriba). */
@media (min-width: 1100px) {
    body.ui-nueva .calendario-header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 16px 24px 8px; }
    body.ui-nueva .calendario-header__acciones { flex: 1 1 auto; }
    body.ui-nueva .calendario-cuerpo {
        grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; gap: 10px 20px;
        grid-template-areas: "filtro filtro" "grilla lista";
        overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent;
    }
    body.ui-nueva .calendario-filtro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 28px; }
    body.ui-nueva .calendario-filtro-card { gap: 6px; }
    body.ui-nueva .calendario-filtro-item { padding: 4px 11px; }
    body.ui-nueva .calendario-filtro-card + .calendario-filtro-card { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 6px; }
    body.ui-nueva .calendario-filtro-card + .calendario-filtro-card .calendario-filtro-titulo { grid-column: 1 / -1; margin: 0; }
    body.ui-nueva .calendario-grilla-wrap { --nv-celda-min: 64px; --nv-dias-h: 30px; flex: 1; min-height: calc(var(--nv-dias-h) + 6 * var(--nv-celda-min) + 5 * 6px); }
    body.ui-nueva .calendario-grilla { flex: 1; grid-template-rows: repeat(6, minmax(var(--nv-celda-min), 1fr)); }
    /* «Próximas fechas»: el título y «+ Agregar evento» quedan fijos y lo del medio es lo que hace scroll
       (antes el botón quedaba al final de la lista y, con varias fechas, no se veía). */
    body.ui-nueva .calendario-lista-detallada { overflow: hidden; }
    body.ui-nueva #calendarioPanelLateral { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
    /* Si el mes no necesita la última fila (la sexta de un mes de 5 semanas, o la quinta de un febrero de 28 días que arranca
       en lunes) quedaría toda vacía: se esconde y las semanas que sí hay quedan más altas. Si el navegador no entiende :has(),
       se ven las 6 filas como siempre. El día 36 (o el 29) vacío implica que todos los que le siguen también lo están. */
    body.ui-nueva .calendario-grilla-wrap:has(> .calendario-grilla > .calendario-celda--vacia:nth-child(36)) { min-height: calc(var(--nv-dias-h) + 5 * var(--nv-celda-min) + 4 * 6px); }
    body.ui-nueva .calendario-grilla:has(> .calendario-celda--vacia:nth-child(36)) { grid-template-rows: repeat(5, minmax(var(--nv-celda-min), 1fr)); }
    body.ui-nueva .calendario-grilla:has(> .calendario-celda--vacia:nth-child(36)) > .calendario-celda:nth-child(n+36) { display: none; }
    body.ui-nueva .calendario-grilla-wrap:has(> .calendario-grilla > .calendario-celda--vacia:nth-child(29)) { min-height: calc(var(--nv-dias-h) + 4 * var(--nv-celda-min) + 3 * 6px); }
    body.ui-nueva .calendario-grilla:has(> .calendario-celda--vacia:nth-child(29)) { grid-template-rows: repeat(4, minmax(var(--nv-celda-min), 1fr)); }
    body.ui-nueva .calendario-grilla:has(> .calendario-celda--vacia:nth-child(29)) > .calendario-celda:nth-child(n+29) { display: none; }
}
@media (min-width: 1100px) and (max-height: 900px) {
    /* ventana baja: semanas más bajas, y lo que hay en cada día en un solo renglón para que entre al menos una fecha */
    body.ui-nueva .calendario-grilla-wrap { --nv-celda-min: 52px; }
    body.ui-nueva .calendario-celda { padding: 5px 8px; gap: 2px; }
    body.ui-nueva .calendario-celda__numero { width: 20px; height: 20px; font-size: 0.82rem; }
    body.ui-nueva .calendario-celda__eventos { gap: 2px; scrollbar-width: none; }
    body.ui-nueva .calendario-celda__eventos::-webkit-scrollbar { display: none; }
    body.ui-nueva .calendario-evento-chip { flex: none; flex-direction: row; align-items: baseline; gap: 5px; padding: 1px 7px; border-radius: 8px; }
    body.ui-nueva .calendario-evento-chip__titulo { min-width: 0; }
    body.ui-nueva .calendario-evento-chip__hora { flex: none; }
}
@media (min-width: 1100px) and (max-height: 760px) {
    body.ui-nueva .calendario-tip { display: none; }
}
@media (min-width: 1100px) and (max-height: 650px) {
    /* ventana muy baja (una notebook de 1366×768 con la barra del navegador, por ejemplo): se aprietan un poco el encabezado y los
       márgenes para que un mes de 5 semanas entre entero sin scroll */
    body.ui-nueva .calendario-header { padding: 8px 24px 4px; }
    body.ui-nueva .calendario-cuerpo { gap: 6px 20px; padding-bottom: 8px; }
}

/* Calendario, tablet y escritorio: los botones de «Tipos de eventos» ocupan el lugar de la leyenda de colores de siempre
   (tablet: una fila de píldoras debajo de «Materias»; escritorio: arriba de «Próximas fechas», título y dos renglones como antes). */
@media (min-width: 768px) {
    body.ui-nueva #panelCalendario[data-con-tipos] .calendario-cuerpo { grid-template-areas: "filtro" "tipos" "grilla" "lista"; }
    body.ui-nueva .nv-cal-tipos:not([hidden]) { grid-area: tipos; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    body.ui-nueva .nv-cal-tipos__titulo { margin: 0 2px 0 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
    body.ui-nueva .nv-cal-tipos__botones { display: contents; }
    body.ui-nueva .nv-tipo { min-height: 36px; padding: 0 10px; gap: 6px; font-size: 0.8rem; }   /* como las píldoras de «Materias»; así los cinco entran en un renglón */
}
@media (min-width: 1100px) {
    body.ui-nueva #panelCalendario[data-con-tipos] .calendario-cuerpo { grid-template-areas: "filtro tipos" "grilla lista"; }
    body.ui-nueva .nv-cal-tipos:not([hidden]) { align-content: start; gap: 6px; }
    body.ui-nueva .nv-cal-tipos__titulo { flex: 1 0 100%; margin: 0; }
    body.ui-nueva .nv-tipo { min-height: 0; padding: 4px 11px; font-size: 0.85rem; }
}

/* Papelera: una columna centrada */
@media (min-width: 768px) {
    body.ui-nueva #panelPapelera { max-width: 900px; margin: 0 auto; }
}

/* Impresión (exportar a PDF): sin el riel y sin el corrimiento que le hace lugar */
@media print {
    body.ui-nueva .nv-nav { display: none !important; }
    body.ui-nueva .layout { margin-left: 0 !important; }
}

/* ═══ Repaso (solo con el diseño nuevo) ══════════════════════════════════════
   Tarjetas de estudio: panel de mazos, lista de tarjetas, crear/editar y práctica.
   Todo está oculto con el diseño de siempre. */
.toolbar__btn--repaso, .repaso-btn-entrada, .repaso-btn-volver { display: none; }
body.ui-nueva .toolbar__btn--repaso { display: inline-flex; }
@media (min-width: 768px) { body.ui-nueva .repaso-btn-entrada, body.ui-nueva .repaso-btn-volver { display: inline-flex; } }

#panelRepaso [hidden], .practica [hidden] { display: none !important; }
#panelRepaso .panel__header { gap: 12px; align-items: center; }
.repaso-header__titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
#panelRepaso .panel__title { text-align: left; font-size: 2rem; line-height: 1.1; }
@media (min-width: 768px) { #panelRepaso .panel__title { font-size: 1.8rem; } }
.repaso-header__sub { font-size: 0.82rem; font-weight: 700; color: var(--color-primary); }
body.ui-nueva .repaso-btn-nueva {
    flex: none; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%;
    background-color: var(--nv-amarillo); color: #2E412A; box-shadow: 0 4px 0 var(--nv-amarillo-sombra); border: 0;
}
body.ui-nueva .repaso-btn-nueva .btn-icon__text { display: none; }
@media (min-width: 768px) {
    body.ui-nueva .repaso-btn-nueva { width: auto; padding: 0 18px; border-radius: 999px; gap: 8px; }
    body.ui-nueva .repaso-btn-nueva .btn-icon__text { display: inline; font-weight: 800; }
}
.repaso-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 12px; }

.repaso-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px;
    border-radius: 26px; background-color: var(--nv-amarillo); color: #2E412A; box-shadow: 0 5px 0 var(--nv-amarillo-sombra);
}
.repaso-hero__texto { display: flex; flex-direction: column; min-width: 0; }
.repaso-hero__etiqueta { font-size: 0.8rem; font-weight: 800; }
.repaso-hero__titulo { font-family: var(--nv-titulo); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.repaso-hero__sub { font-size: 0.82rem; font-weight: 700; }
.repaso-hero__boton {
    flex: none; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
    background-color: #2E412A; color: #fff; font-weight: 800; font-size: 0.95rem;
}
.repaso-examen {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 22px;
    background-color: #FFC1B3; color: #2E412A; text-align: left; cursor: pointer;
}
.repaso-examen__fecha {
    flex: none; display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 6px 8px;
    border-radius: 16px; background-color: #fff; font-family: var(--nv-titulo); font-size: 0.85rem; line-height: 1.2;
}
.repaso-examen__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.repaso-examen__texto strong { font-size: 0.95rem; }
.repaso-examen__texto small { font-size: 0.82rem; font-weight: 600; }
.repaso-examen__flecha { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background-color: #fff; }

.repaso-seccion { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.repaso-seccion h2 { margin: 0; font-family: var(--nv-titulo); font-size: 1.15rem; font-weight: 600; }
.repaso-leyenda { display: flex; gap: 8px; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); }
.repaso-leyenda i { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; }
.repaso-leyenda .d, .repaso-barra .d { background-color: var(--color-primary); }
.repaso-leyenda .p, .repaso-barra .p { background-color: var(--nv-amarillo); }
.repaso-leyenda .n { background-color: var(--border-color); }
.repaso-mazos { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 768px) { .repaso-mazos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.repaso-mazo {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 12px; border: 0; border-radius: 24px;
    background-color: var(--bg-panel); box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; color: var(--text-main);
}
.repaso-mazo__insignia {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    background-color: var(--color-materia, var(--nv-menta)); color: #2E412A; font-family: var(--nv-titulo); font-weight: 600; font-size: 1.05rem;
}
.repaso-mazo__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.repaso-mazo__info strong { font-family: var(--nv-titulo); font-size: 1.05rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repaso-mazo__info small { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.repaso-barra { display: flex; height: 8px; margin-top: 6px; border-radius: 4px; background-color: var(--border-color); overflow: hidden; }
.repaso-barra i { display: block; height: 100%; }
.repaso-mazo__hoy { flex: none; padding: 5px 12px; border-radius: 999px; background-color: var(--nv-menta); font-size: 0.78rem; font-weight: 800; }
.repaso-mazo__hoy.hay { background-color: var(--nv-amarillo); color: #2E412A; }
.repaso-pasos { display: flex; gap: 8px; margin-top: 4px; }
.repaso-pasos > div {
    flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border-radius: 20px;
    background-color: var(--bg-panel); font-size: 0.75rem; font-weight: 700; line-height: 1.25;
}
.repaso-pasos i {
    flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    background-color: var(--nv-amarillo); color: #2E412A; font-family: var(--nv-titulo); font-style: normal; font-weight: 600; font-size: 0.9rem;
}
/* «Cómo funciona» y «Tu semana» van juntas en `.repaso-lado`. En el celular ese contenedor no existe (display: contents: «Cómo funciona»
   queda como hijo directo de la pantalla, igual que antes) y «Tu semana» no se muestra, como en las maquetas. */
.repaso-lado { display: contents; }
.repaso-semana { display: none; }
.repaso-semana h2 { margin: 0; font-family: var(--nv-titulo); font-size: 1.1rem; font-weight: 600; line-height: 1.2; }
.repaso-semana__sub { margin: 4px 0 0; font-size: 0.82rem; font-weight: 700; line-height: 1.3; color: var(--text-muted); }
.repaso-semana__barras { display: flex; align-items: flex-end; justify-content: space-between; min-height: 104px; margin-top: 10px; }
.repaso-dia { flex: 0 1 28px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 800; line-height: 1.25; }
.repaso-dia i { display: block; width: 100%; border-radius: 8px; background-color: var(--color-primary); }
.repaso-dia--hoy i { background-color: var(--nv-amarillo); box-shadow: 0 3px 0 var(--nv-amarillo-sombra); }
.repaso-dia--futuro i { background-color: var(--border-color); }
.repaso-dia--vacio i { background-color: #FFC1B3; }
.repaso-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border-radius: 26px; background-color: var(--bg-panel); box-shadow: var(--shadow-sm); }
.repaso-vacio strong { font-family: var(--nv-titulo); font-size: 1.2rem; font-weight: 600; }
.repaso-vacio p { margin: 0 0 6px; color: var(--text-muted); font-weight: 600; }

/* Repaso en tablet y escritorio: el repaso de hoy y el examen lado a lado, los mazos en dos columnas y «Cómo funciona» como tarjeta
   (a la derecha en escritorio). El orden y los textos son los mismos de siempre; solo cambia cómo se acomodan. */
@media (min-width: 768px) {
    body.ui-nueva #panelRepaso .repaso-btn-volver { display: none; }   /* el riel de la izquierda ya lleva a Materias */
    body.ui-nueva .repaso-cuerpo {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start;
        /* Las filas no se encogen por debajo de su contenido. Sin esto, «Repaso de hoy» y la tarjeta del examen (que tienen min-height, y con eso pierden el
           mínimo automático) se achicaban cuando lo de abajo no entraba en el alto de la pantalla (ventana baja, letra grande) y su texto se salía de la
           tarjeta y pisaba «Tus mazos». Ahora la pantalla se desplaza en vez de apretar las tarjetas. */
        grid-auto-rows: minmax(min-content, auto);
        padding: 12px 28px 28px;
    }
    body.ui-nueva .repaso-seccion, body.ui-nueva .repaso-mazos, body.ui-nueva .repaso-vacio, body.ui-nueva .repaso-lado { grid-column: 1 / -1; }
    body.ui-nueva .repaso-hero:not(:has(+ .repaso-examen)) { grid-column: 1 / -1; }
    body.ui-nueva .repaso-hero, body.ui-nueva .repaso-examen { min-height: 92px; box-sizing: border-box; }
    body.ui-nueva .repaso-pasos {
        flex-wrap: wrap; gap: 10px; margin: 4px 0 0; padding: 16px 18px 18px; border-radius: 26px; background-color: var(--bg-panel);
        box-shadow: var(--shadow-sm);
    }
    body.ui-nueva .repaso-pasos::before {
        content: "Cómo funciona"; flex: 1 0 100%; font-family: var(--nv-titulo); font-size: 1.1rem; font-weight: 600; line-height: 1.2;
    }
    body.ui-nueva .repaso-pasos > div { background-color: var(--bg-layout); }
    /* «Tu semana» (solo si ya hay tarjetas) es una tarjeta de la misma familia que «Cómo funciona» y va al lado (tablet) o abajo (escritorio) */
    body.ui-nueva .repaso-lado { display: flex; gap: 12px 16px; }
    body.ui-nueva .repaso-pasos { flex: 2 1 0; min-width: 0; }
    body.ui-nueva .repaso-semana {
        display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; margin: 4px 0 0; padding: 16px 18px 18px; border-radius: 26px;
        background-color: var(--bg-panel); box-shadow: var(--shadow-sm);
    }
    body.ui-nueva .repaso-semana__sub { margin-bottom: auto; }   /* si la tarjeta es más alta que sus barras, las barras quedan abajo */
}
@media (min-width: 768px) and (max-width: 1099px) {
    /* tablet: «Tu semana» al lado de «Cómo funciona» (dos partes contra tres). Los tres pasos van en columna, como en escritorio: en tres columnas
       quedan angostos a 768 px. Así las dos tarjetas quedan casi del mismo alto. Sin tarjetas no hay «Tu semana» y los pasos quedan como siempre. */
    body.ui-nueva .repaso-lado--semana .repaso-pasos { flex: 3 1 0; flex-direction: column; }
    body.ui-nueva .repaso-lado--semana .repaso-pasos::before { flex: none; }
    body.ui-nueva .repaso-lado--semana .repaso-pasos > div { flex: none; flex-direction: row; align-items: center; gap: 10px; }
    body.ui-nueva .repaso-lado--semana .repaso-semana { flex: 2 1 0; }
}
@media (min-width: 1100px) {
    body.ui-nueva .repaso-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px; grid-template-rows: repeat(3, minmax(min-content, auto)) 1fr; column-gap: 20px; }
    body.ui-nueva .repaso-seccion, body.ui-nueva .repaso-mazos, body.ui-nueva .repaso-vacio { grid-column: 1 / 3; }
    body.ui-nueva .repaso-hero:not(:has(+ .repaso-examen)) { grid-column: 1 / 3; }
    /* escritorio: la columna de la derecha. La cuarta fila (1fr) es la que absorbe el alto de la columna: así, con pocos mazos, lo de la
       izquierda no se estira para acompañar a la derecha. */
    body.ui-nueva .repaso-lado { grid-column: 3; grid-row: 1 / span 4; align-self: start; flex-direction: column; }
    body.ui-nueva .repaso-pasos { flex: none; flex-direction: column; margin-top: 0; }
    body.ui-nueva .repaso-pasos > div { flex: none; flex-direction: row; align-items: center; gap: 10px; }
    body.ui-nueva .repaso-semana { flex: none; margin-top: 0; }
}

/* Modales: nueva/editar tarjeta y lista del mazo */
.tarjeta-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 0.85rem; font-weight: 800; }
.tarjeta-campo .input { margin-bottom: 0; font-weight: 600; resize: vertical; }
.tarjeta-campo[hidden] { display: none; }
.tarjeta-pista { margin: 0 0 8px; min-height: 1em; font-size: 0.82rem; font-weight: 700; color: var(--color-primary); }
.mazo-sub { margin: -4px 0 10px; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.mazo-lista { list-style: none; margin: 0 0 12px; padding: 0; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mazo-item { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 12px; border-radius: 18px; background-color: var(--bg-layout); }
.mazo-item__texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mazo-item__texto strong { font-family: var(--nv-titulo); font-weight: 600; overflow-wrap: anywhere; }
.mazo-item__texto span { font-size: 0.9rem; color: var(--text-muted); overflow-wrap: anywhere; }
.mazo-item__texto small { font-size: 0.72rem; font-weight: 800; }
.mazo-item__texto .e-nueva { color: var(--text-muted); }
.mazo-item__texto .e-practicando { color: #A67C00; }
.mazo-item__texto .e-dominada { color: var(--color-primary); }
.mazo-item__acciones { flex: none; display: flex; flex-direction: column; gap: 6px; }
.mazo-item__acciones button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background-color: var(--nv-menta); color: var(--text-main); font-weight: 800; font-size: 0.78rem; cursor: pointer; }
.mazo-item__acciones button[data-repaso="eliminar"] { background-color: #FFC1B3; color: #2E412A; }
.mazo-vacio { padding: 18px; text-align: center; color: var(--text-muted); font-weight: 600; }

/* Práctica: pantalla completa */
.modal--practica { padding: 0; align-items: stretch; background-color: var(--bg-layout); backdrop-filter: none; -webkit-backdrop-filter: none; }
.practica { width: 100%; max-width: 680px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.practica__top { display: flex; align-items: center; gap: 12px; }
.practica__cerrar { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background-color: var(--nv-menta); color: var(--text-main); display: grid; place-items: center; cursor: pointer; }
.practica__barra { flex: 1; height: 12px; border-radius: 6px; background-color: var(--border-color); overflow: hidden; }
.practica__barra i { display: block; height: 100%; width: 0; border-radius: 6px; background-color: var(--color-primary); transition: width 0.3s; }
.practica__contador { font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
.practica__tarjeta {
    flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; padding: 20px;
    border-radius: 32px; background-color: var(--bg-panel); box-shadow: 0 6px 0 rgba(46,65,42,0.12); cursor: pointer; text-align: left; color: var(--text-main);
}
.practica__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.practica__meta small { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.practica__chip { padding: 4px 12px; border-radius: 999px; background-color: var(--color-materia, var(--nv-menta)); color: #2E412A; font-weight: 800; font-size: 0.8rem; }
.practica__label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.practica__frente { margin: 6px 0 0; font-family: var(--nv-titulo); font-size: 1.5rem; line-height: 1.25; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.practica__respuesta { padding: 16px; border-radius: 22px; background-color: var(--nv-menta); }
.practica__respuesta p { margin: 6px 0 0; font-size: 1.1rem; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; }
.practica__respuesta, .practica__pista { margin-top: auto; }
.practica__pista { margin-bottom: 0; text-align: center; font-weight: 700; color: var(--text-muted); }
.practica__ver-hoja { align-self: flex-start; min-height: 40px; padding: 0 16px; border: 2px solid var(--border-color); border-radius: 999px; background: none; color: var(--text-main); font-weight: 800; font-size: 0.85rem; cursor: pointer; }
.practica__botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-bottom: env(safe-area-inset-bottom); }
.practica__botones button {
    min-height: 68px; border: 0; border-radius: 24px; color: #2E412A; font-weight: 800; font-size: 0.95rem; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 0 rgba(46,65,42,0.18);
}
.practica__botones small { font-size: 0.75rem; font-weight: 700; }
.practica__botones [data-r="nolasabia"] { background-color: #FFC1B3; }
.practica__botones [data-r="dude"] { background-color: var(--nv-amarillo); }
.practica__botones [data-r="lasabia"] { background-color: #C8EBCF; }
.practica__fin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; border-radius: 32px; background-color: var(--bg-panel); box-shadow: 0 6px 0 rgba(46,65,42,0.12); }
.practica__fin-titulo { font-family: var(--nv-titulo); font-size: 2rem; font-weight: 600; }
.practica__fin p { margin: 0; font-weight: 700; color: var(--text-muted); }
.practica__fin-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.practica__fin-chips span { padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; color: #2E412A; }
.practica__fin-chips .r-lasabia { background-color: #C8EBCF; }
.practica__fin-chips .r-dude { background-color: var(--nv-amarillo); }
.practica__fin-chips .r-no { background-color: #FFC1B3; }

/* Panel de la práctica (desde 1100 px): a la derecha de la tarjeta, «De tu hoja» (el pasaje de la hoja con la respuesta resaltada y «Abrir hoja»)
   y «Esta sesión» (cuántas respondiste y cuántas quedan). Lo arma y lo llena repaso.js (#practicaPanel) solo con el diseño nuevo y a ese ancho:
   con menos de 1100 px, o con el diseño de siempre, no existe o no se ve. Los renglones y la hoja se escriben siempre como texto. */
.practica-panel { display: none; }
.practica-panel [hidden] { display: none !important; }
@media (min-width: 1100px) {
    body.ui-nueva .modal--practica { gap: 28px; }   /* el centrado de todo el conjunto ya lo da .modal (justify-content: center) */
    body.ui-nueva .modal--practica > .practica { flex: 0 1 680px; margin: 0; }   /* sin panel queda igual que antes: 680 px, centrada */
    body.ui-nueva .practica-panel {
        display: flex; flex-direction: column; gap: 16px; flex: 0 0 300px; align-self: flex-start; box-sizing: border-box; width: 300px;
        margin-top: 16px; max-height: calc(100% - 32px); overflow-y: auto; padding: 20px; border-radius: 26px;
        background-color: var(--bg-panel); color: var(--text-main); box-shadow: var(--shadow-sm);
    }
}
body.ui-nueva .practica-panel__bloque { display: flex; flex-direction: column; gap: 12px; }
body.ui-nueva .practica-panel__titulo { margin: 0; font-family: var(--nv-titulo); font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
/* el papel de la hoja: los renglones miden 1,75 rem, igual que el texto, para que las líneas del papel queden debajo de cada renglón */
body.ui-nueva .practica-panel__papel {
    min-height: 230px; padding: 0.625rem 1rem; border: 2px solid var(--border-color); border-radius: 18px; background-color: var(--bg-panel);
    font-size: 0.9375rem; line-height: 1.75rem; overflow: hidden;
}
body.ui-nueva .practica-panel__papel[data-patron="rayada"] {
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.75rem - 1px), var(--nv-linea) calc(1.75rem - 1px), var(--nv-linea) 1.75rem);
    background-position: 0 0.625rem;
}
body.ui-nueva .practica-panel__papel[data-patron="cuadriculada"] {
    background-image: linear-gradient(var(--nv-linea) 1px, transparent 1px), linear-gradient(90deg, var(--nv-linea) 1px, transparent 1px);
    background-size: 14px 14px;
}
body.ui-nueva .practica-panel__papel[data-patron="punteada"] { background-image: radial-gradient(var(--nv-linea) 1.2px, transparent 1.6px); background-size: 14px 14px; }
body.ui-nueva .practica-panel__hoja-titulo {
    padding: 0 0 1.75rem; font-family: var(--nv-titulo); font-size: 1.125rem; font-weight: 600; line-height: 1.75rem; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
body.ui-nueva .practica-panel__renglon { overflow-wrap: anywhere; }
body.ui-nueva .practica-panel__renglon mark {
    padding: 0 3px; border-radius: 6px; background-color: var(--nv-amarillo); color: #2E412A;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.ui-nueva .practica-panel__nota { margin: 0; font-size: 0.82rem; font-weight: 700; line-height: 1.35; color: var(--text-muted); }
body.ui-nueva .practica-panel__abrir {
    min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 0.95rem;
    background-color: var(--nv-amarillo); color: #2E412A; box-shadow: 0 4px 0 var(--nv-amarillo-sombra);
}
body.ui-nueva .practica-panel__abrir:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--nv-amarillo-sombra); }
body.ui-nueva .practica-panel__hoja:not([hidden]) + .practica-panel__sesion { margin-top: 6px; }
body.ui-nueva .practica-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.ui-nueva .practica-panel__chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 14px; font-weight: 800; font-size: 0.82rem; color: #2E412A; }
body.ui-nueva .practica-panel__chip[data-r="lasabia"] { background-color: #C8EBCF; }
body.ui-nueva .practica-panel__chip[data-r="dude"] { background-color: var(--nv-amarillo); }
body.ui-nueva .practica-panel__chip[data-r="nolasabia"] { background-color: #FFC1B3; }
body.ui-nueva .practica-panel__quedan { margin: 0; font-size: 0.88rem; font-weight: 700; }

/* Los modales que se abren desde la lista del mazo tienen que quedar por encima de ella */
body.ui-nueva #modalTarjeta { z-index: calc(var(--z-modal) + 1); }
body.ui-nueva #modalConfirmacion { z-index: calc(var(--z-modal) + 2); }

/* ==========================================================================
   INICIO — saludo, «Seguí donde quedaste», próxima fecha y título de la grilla de materias
   Lo llena inicio.js con los datos de siempre (nada nuevo se guarda). Con el diseño de siempre no se ve nada de esto.
   El «hidden» de index.html en .nv-saludo y .nv-inicio es solo un respaldo por si este archivo no carga: acá se muestran.
   ========================================================================== */

/* Saludo: ocupa el lugar del título «Mis Materias» del encabezado */
body.ui-nueva .nv-saludo { display: block; flex: 1; min-width: 0; }
@media (max-width: 767px) {
    body.ui-nueva #panelMaterias .panel__header:has(> .nv-saludo) { padding: 10px 14px 6px; }
    body.ui-nueva .nv-saludo { padding-left: 2px; }   /* alineado con las tarjetas de abajo */
}
body.ui-nueva .nv-saludo + .titulo-materias { display: none; }
body.ui-nueva .nv-saludo__titulo { margin: 0; font-family: var(--nv-titulo); font-size: 1.55rem; font-weight: 600; line-height: 1.15; color: var(--text-main); }
body.ui-nueva .nv-saludo__sub { margin: 2px 0 0; font-size: 0.82rem; font-weight: 700; color: #2F6B38; }
body.ui-nueva.dark-theme .nv-saludo__sub { color: var(--color-primary); }
body.ui-nueva .nv-solo-grande { display: none; }

/* Lo que va arriba de la grilla (se desplaza con ella) */
body.ui-nueva .nv-inicio { display: block; grid-column: 1 / -1; min-width: 0; }
body.ui-nueva .nv-inicio__fila:not([hidden]) { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 6px; }
body.ui-nueva .nv-inicio__seccion-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 2px; }   /* «wrap»: con letra muy grande el botón del celular baja en vez de pisar el título */
body.ui-nueva .nv-inicio__seccion { margin: 0; min-width: 0; font-family: var(--nv-titulo); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--text-main); }
/* la primera fila de la grilla (estas tarjetas) mide lo que su contenido; las filas de carátulas siguen midiendo lo mismo que siempre */
body.ui-nueva #panelMaterias .panel__list { grid-template-rows: auto; }

/* Seguí donde quedaste */
body.ui-nueva .nv-seguir:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
    padding: 16px 16px 16px 18px; border-radius: 26px;
    background-color: var(--nv-amarillo); color: #2E412A; box-shadow: 0 5px 0 var(--nv-amarillo-sombra);
}
body.ui-nueva .nv-seguir__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.ui-nueva .nv-seguir__etiqueta { font-size: 0.8rem; font-weight: 800; }
body.ui-nueva .nv-seguir__titulo { font-family: var(--nv-titulo); font-size: 1.3rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-nueva .nv-seguir__detalle { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-nueva .nv-seguir__abrir {
    flex: none; min-height: 48px; padding: 0 22px; border: 0; border-radius: 24px; cursor: pointer;
    background-color: #2E412A; color: #fff; font: inherit; font-size: 0.95rem; font-weight: 800;
}
body.ui-nueva .nv-seguir__abrir:active { transform: translateY(1px); }
body.ui-nueva .nv-seguir__abrir:focus-visible { outline: 3px solid #2E412A; outline-offset: 3px; }

/* Píldoras de las fechas: los mismos colores por tipo que el calendario (calendario.js) */
body.ui-nueva .nv-pildora {
    display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 64px; min-height: 34px; padding: 0 10px;
    border-radius: 14px; font-size: 0.8rem; font-weight: 800; white-space: nowrap;
    background-color: #E9D5FF; color: #7E22CE;
}
body.ui-nueva .nv-pildora[data-tipo="examen"]   { background-color: #FDE68A; color: #B45309; }
body.ui-nueva .nv-pildora[data-tipo="entrega"]  { background-color: #BBF7D0; color: #15803D; }
body.ui-nueva .nv-pildora[data-tipo="proyecto"] { background-color: #FED7AA; color: #C2410C; }

/* Celular: la próxima fecha en una línea */
body.ui-nueva .nv-proxima:not([hidden]) {
    display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 0 2px;
    border: 0; background: none; color: var(--text-main); font: inherit; font-size: 0.9rem; font-weight: 700; text-align: left; cursor: pointer;
}
body.ui-nueva .nv-proxima__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tablet: tarjeta con las próximas fechas (en el celular va la línea de arriba y en escritorio, el calendario lateral) */
body.ui-nueva .nv-fechas { display: none; }
body.ui-nueva .nv-fechas__encabezado { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.ui-nueva .nv-fechas__titulo { font-family: var(--nv-titulo); font-size: 1.1rem; font-weight: 600; }
body.ui-nueva .nv-fechas__ver { min-height: 36px; padding: 0 2px; border: 0; background: none; color: #2F6B38; font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; }
body.ui-nueva.dark-theme .nv-fechas__ver { color: var(--color-primary); }
body.ui-nueva .nv-fechas__lista:not([hidden]) { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
body.ui-nueva .nv-fechas__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.ui-nueva .nv-fechas__item .nv-pildora { width: 78px; padding: 0 6px; }
body.ui-nueva .nv-fechas__texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
body.ui-nueva .nv-fechas__texto b { font-size: 0.92rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-nueva .nv-fechas__texto small { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-nueva .nv-fechas__vacio:not([hidden]) { margin: 8px 0 0; font-size: 0.9rem; font-weight: 600; line-height: 1.35; color: var(--text-muted); }

/* «N hojas» en cada carátula, en lugar de «Modificado: …» (la fecha pasa a «Seguí donde quedaste»). Si faltara la línea, queda la fecha de siempre. */
body.ui-nueva .tarjeta-materia .item-hojas { display: block; margin-top: 0; font-size: 0.78rem; font-weight: 600; opacity: 0.85; }
body.ui-nueva .tarjeta-materia .item-hojas, body.ui-nueva .tarjeta-materia .item-fecha { color: var(--nv-letra, var(--color-texto-materia, var(--text-muted))); }   /* «N hojas» (y la fecha, si faltara) siguen a la letra de la carátula; sin letra elegida, gris verdoso como siempre */
body.ui-nueva .tarjeta-materia .item-info-nombre:has(.item-hojas) .item-fecha { display: none; }

/* Símbolo de cada materia (0.4.38): el círculo blanco de la carátula lleva π, H₂, Aa… (según el nombre de la materia) en lugar del logo.
   Lo pone inicio.js (un <div class="item-simbolo" hidden> que se suma a cada carátula y marca la carátula con «nv-con-simbolo»);
   si inicio.js no llegara a cargar, queda el logo de siempre. El círculo mide lo mismo que el logo (44 px en el celular, 48 en tablet
   y escritorio), así que la carátula no cambia de medidas; si el símbolo no entra (letra del sistema muy grande) el círculo se ensancha. */
body.ui-nueva .tarjeta-materia.nv-con-simbolo .logo-materias { display: none; }
body.ui-nueva .tarjeta-materia.nv-con-simbolo .item-simbolo {
    display: flex; align-items: center; justify-content: center; align-self: flex-start; flex: none;
    box-sizing: border-box; min-width: 44px; max-width: 100%; height: 44px; padding: 0 4px; overflow: hidden;
    border-radius: 22px; background-color: #fff; color: #2E412A;
    font-family: var(--nv-titulo); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; white-space: nowrap;
}
body.ui-nueva .tarjeta-materia.materia-blanca .item-simbolo { box-shadow: inset 0 0 0 2px rgba(46, 65, 42, 0.14); }   /* carátula blanca: sin este aro el círculo blanco se perdería */
@media (min-width: 768px) {
    body.ui-nueva .tarjeta-materia.nv-con-simbolo .item-simbolo { min-width: 48px; height: 48px; border-radius: 24px; font-size: 16px; }
}

/* Mientras se muestran resultados de la búsqueda, la lista no lleva las tarjetas de Inicio */
body.ui-nueva #panelMaterias .panel__list.modo-busqueda { grid-template-rows: none; }
body.ui-nueva #panelMaterias .panel__list.modo-busqueda .nv-inicio { display: none; }
@media (max-width: 767px) {
    /* los resultados son una lista de una columna (no carátulas de 132 px en dos columnas, como salía antes en el celular) */
    body.ui-nueva #panelMaterias .panel__list.modo-busqueda { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 8px; }
}

@media (min-width: 768px) {
    body.ui-nueva .nv-saludo { flex: 1 1 320px; }   /* el título necesita unos 315 px para quedar en un renglón: si no los tiene, los botones bajan */
    body.ui-nueva .nv-solo-celu { display: none; }
    body.ui-nueva .nv-solo-grande { display: inline; }
    body.ui-nueva .nv-saludo__titulo { font-size: 1.9rem; }
    body.ui-nueva .nv-proxima { display: none !important; }
    body.ui-nueva .nv-inicio__seccion-fila { margin: 14px 0 4px; }
    body.ui-nueva .nv-inicio__seccion { font-size: 1.35rem; }
    body.ui-nueva .tarjeta-materia .item-hojas { margin-top: 2px; font-size: 0.82rem; }
}
@media (min-width: 768px) and (max-width: 1099px) {
    body.ui-nueva .nv-inicio__fila:not([hidden]) { flex-direction: row; align-items: stretch; }
    body.ui-nueva .nv-seguir:not([hidden]), body.ui-nueva .nv-fechas { flex: 1 1 0; min-width: 0; }
    body.ui-nueva .nv-fechas { display: block; padding: 16px 18px; border-radius: 26px; background-color: var(--bg-panel); box-shadow: var(--shadow-md); }
}

/* ==========================================================================
   NUEVA HOJA DESDE INICIO (0.4.37)
   Como en la maqueta: en el celular el «+» flotante crea hojas y «Nueva materia» queda como botón chico al lado de «Mis Materias»;
   en tablet y escritorio, «Nueva hoja» es la píldora amarilla del encabezado (y «Nueva materia» pasa a ser la secundaria).
   El cuadro es el de siempre, con un selector de materia que muestra inicio.js solo cuando se abre desde acá.
   Sin ninguna materia no hay dónde poner una hoja: inicio.js marca <body> con «nv-sin-materias» y todo vuelve a crear materias.
   Con el diseño de siempre no se ve nada de esto.
   ========================================================================== */
@media (max-width: 767px) {
    body.ui-nueva .nv-materia-nueva {
        display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%; min-height: 40px; margin: -8px 0 -8px auto; padding: 0 14px 0 10px;   /* el margen negativo deja la fila igual de alta que antes; «max-width»: con la letra al máximo el texto pasa a dos renglones en vez de salirse de la pantalla */
        border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 800;
        background-color: var(--nv-menta); color: var(--text-main);
    }
    body.ui-nueva .nv-materia-nueva:active { transform: translateY(1px); }
    /* el «+» de siempre (crea materias) solo queda mientras no hay ninguna; si no, lo reemplaza el de «Nueva hoja» */
    body.ui-nueva:not(.nv-sin-materias) #btnFab.fab { display: none !important; }   /* «!important»: style.css le da «display: flex !important» a todo lo que tenga .is-active */
    body.ui-nueva #btnFab.is-active + .nv-fab-hoja { display: flex; }
    body.ui-nueva.nv-sin-materias #btnFab.is-active + .nv-fab-hoja { display: none; }
}
/* El cuadro «Nueva Hoja» con el selector de materia (solo cuando se abre desde Inicio): suma unos 73 px, así que si no entra en la
   pantalla (celular chico, celular de costado, teclado abierto) se desplaza por dentro en vez de cortarse arriba y abajo, y en pantallas
   bajas se ajustan un poco los espacios para que en un celular de 320×568 «Guardar» siga a la vista sin desplazar.
   Los demás usos del cuadro (nueva materia, renombrar, «Nueva Hoja» del panel de Hojas) se ven exactamente igual que antes. */
body.ui-nueva #modalInput:has(#nvMateriaCampo:not([hidden])) .modal__box { max-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 600px) {
    body.ui-nueva #modalInput:has(#nvMateriaCampo:not([hidden])) { padding: 8px; }
    body.ui-nueva #modalInput:has(#nvMateriaCampo:not([hidden])) .modal__box { padding: 14px 16px; }
    body.ui-nueva #modalInput:has(#nvMateriaCampo:not([hidden])) .modal__title { margin-bottom: 4px; }
    body.ui-nueva #modalInput:has(#nvMateriaCampo:not([hidden])) .modal__papel-opciones { margin-top: 6px; }
    body.ui-nueva #modalInput:has(#nvMateriaCampo:not([hidden])) .modal__footer { margin-top: 14px; }
}
@media (min-width: 768px) {
    body.ui-nueva.nv-sin-materias .nv-nueva-hoja { display: none; }
    /* con «Nueva hoja» al lado, «Nueva materia» es el botón secundario; sin materias vuelve a ser el principal */
    body.ui-nueva:not(.nv-sin-materias) .nv-nueva-materia,
    body.ui-nueva:not(.nv-sin-materias) .nv-nueva-materia:hover,
    body.ui-nueva:not(.nv-sin-materias) .nv-nueva-materia:active { background-color: var(--nv-menta); color: var(--text-main); box-shadow: none; }
}

/* ==========================================================================
   PERSONALIZAR (0.4.39)
   El botón «Personalizar» de «Mis Materias» (en el celular, solo el lápiz; en tablet y escritorio, con la palabra) abre una lista con las
   materias (cada una con su símbolo) que lleva a «Personalizar Carátula», donde ahora también se elige el símbolo del círculo.
   Lo pone todo inicio.js. Con el diseño de siempre no se ve nada de esto (el campo «Símbolo» viene «hidden» desde index.html).
   ========================================================================== */
body.ui-nueva:not(.nv-sin-materias) .nv-personalizar {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
    min-width: 40px; min-height: 40px; margin: -8px 0 -8px auto; padding: 0 10px;   /* el margen negativo deja la fila igual de alta que antes */
    border: 0; border-radius: 999px; cursor: pointer; background: none; color: var(--nv-verde-texto);
    font: inherit; font-size: 0.9rem; font-weight: 800;
}
body.ui-nueva .nv-personalizar:hover { background-color: var(--nv-menta); }
body.ui-nueva .nv-personalizar:active { transform: translateY(1px); }
body.ui-nueva .nv-personalizar:focus-visible { outline: 3px solid var(--nv-verde-texto); outline-offset: 2px; }
body.ui-nueva .nv-personalizar__texto { display: none; }   /* celular: solo el ícono */
@media (max-width: 767px) {
    body.ui-nueva:not(.nv-sin-materias) .nv-personalizar + .nv-materia-nueva { margin-left: 0; }   /* los dos botones juntos, a la derecha */
}
@media (min-width: 768px) {
    body.ui-nueva .nv-personalizar__texto { display: inline; }
    body.ui-nueva:not(.nv-sin-materias) .nv-personalizar { min-height: 44px; margin-top: -9px; margin-bottom: -9px; padding: 0 14px 0 12px; }
}
/* Si en el renglón de «Mis Materias» no entran juntos el título, el lápiz y «Nueva materia» (celular de 320 px, o letra muy grande), el lápiz
   se oculta: si no, «Nueva materia» bajaría de renglón y correría las tarjetas. La carátula se sigue alcanzando desde el ⋮ de cada materia.
   Sin el lápiz, «Nueva materia» vuelve a su margen de siempre (`auto`: pegada al borde derecho, también cuando baja de renglón con la letra
   grande); si no se restituyera, quedaría a la izquierda. Un navegador sin «@container» deja el lápiz siempre a la vista y los dos botones juntos.
   El ancho se mide en «rem» (20 rem = 320 px con la letra normal; juntos necesitan unos 314), así acompaña al tamaño de letra del sistema. */
body.ui-nueva .nv-inicio__seccion-fila { container-type: inline-size; }
@container (max-width: 20rem) {
    body.ui-nueva:not(.nv-sin-materias) .nv-personalizar { display: none; }
    body.ui-nueva:not(.nv-sin-materias) .nv-personalizar + .nv-materia-nueva { margin-left: auto; }
}

/* La lista de materias */
body.ui-nueva .nv-pers { display: flex; flex-direction: column; max-height: 100%; max-width: 420px; overflow-y: auto; overscroll-behavior: contain; }   /* si ni así entra (letra al 300 % en un celular chico) se desplaza todo el cuadro y «Cerrar» se alcanza */
body.ui-nueva .nv-pers__texto { flex: none; margin-bottom: 14px; }
body.ui-nueva .nv-pers__lista {
    list-style: none; margin: 0; padding: 2px; min-height: 4.5rem; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 8px;
}
body.ui-nueva .nv-pers__fila {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 16px 8px 8px;
    border: 0; border-radius: 30px; cursor: pointer; text-align: left; font: inherit;
    background-color: var(--bg-layout); color: var(--text-main);
}
body.ui-nueva .nv-pers__fila:hover { background-color: var(--nv-menta); }
body.ui-nueva .nv-pers__fila:active { transform: translateY(1px); }
body.ui-nueva .nv-pers__fila:focus-visible { outline: 3px solid var(--nv-verde-texto); outline-offset: 2px; }
body.ui-nueva .nv-pers__simbolo,
body.ui-nueva .nv-simbolo-vista {
    flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-width: 44px; max-width: 96px; height: 44px; padding: 0 4px; overflow: hidden; border-radius: 22px;
    background-color: #fff; box-shadow: inset 0 0 0 2px rgba(46, 65, 42, 0.16); color: #2E412A;
    font-family: var(--nv-titulo); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
}
body.ui-nueva .nv-pers__nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
body.ui-nueva .nv-pers__ir { flex: none; font-size: 1.5rem; line-height: 1; color: var(--text-muted); }
body.ui-nueva .nv-pers .modal__footer { flex: none; margin-top: 16px; }
body.ui-nueva .nv-pers .modal__title { overflow-wrap: anywhere; }   /* con la letra del sistema al 300 % «Personalizar» no entra en una línea y se salía del cuadro */
body.ui-nueva .nv-pers .modal__footer .btn:focus-visible { outline: 3px solid var(--nv-verde-texto); outline-offset: 2px; }   /* «Cerrar» no mostraba el foco del teclado */

/* El campo «Símbolo» de «Personalizar Carátula» */
body.ui-nueva .nv-simbolo-grupo[hidden] { display: block; }
body.ui-nueva .nv-simbolo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }   /* con letra grande (o en un celular muy angosto) «Automático» baja a otra línea en vez de salirse del cuadro */
body.ui-nueva .nv-simbolo-vista { min-width: 48px; height: 48px; border-radius: 24px; font-size: 16px; }
body.ui-nueva .nv-simbolo-vista--auto { opacity: 0.55; }   /* la muestra del símbolo automático se ve más apagada */
body.ui-nueva .nv-simbolo-campo { flex: 1 1 5.5rem; width: auto; min-width: 0; height: 48px; text-align: center; }
body.ui-nueva .nv-simbolo-campo::placeholder { color: var(--text-muted); opacity: 1; }   /* el «Automático: π» gris del navegador se leía a 4,1 a 1 (claro) y 3,5 a 1 (oscuro); así pasa de 4,5 a 1 */
body.ui-nueva .nv-simbolo-auto { flex: none; min-height: 48px; padding: 0 14px; font-size: 0.85rem; }
body.ui-nueva .nv-simbolo-ayuda { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--text-muted); }
body.ui-nueva .nv-simbolo-sugeridos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.ui-nueva .nv-simbolo-sugerido {
    box-sizing: border-box; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 22px; cursor: pointer;
    background-color: var(--nv-menta); color: var(--text-main);
    font-family: var(--nv-titulo); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
}
body.ui-nueva .nv-simbolo-sugerido:active { transform: translateY(1px); }
body.ui-nueva .nv-simbolo-sugerido:focus-visible,
body.ui-nueva .nv-simbolo-auto:focus-visible { outline: 3px solid var(--nv-verde-texto); outline-offset: 2px; }

/* Con el campo «Símbolo» el cuadro de la carátula es más alto que antes: si no entra en la pantalla (celular chico, apaisado o con la letra
   grande) se desplaza por dentro, igual que Ajustes. Antes de esto quedaba cortado arriba y abajo y «Guardar» no se alcanzaba. */
body.ui-nueva #modalCaratula .modal__box { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }

/* ==========================================================================
   AJUSTES — «Nuevo diseño (beta)» y «Estado de tu Fullder» (0.4.35)
   Dos piezas que solo existen con el diseño nuevo: la salida a la vista («Volver al diseño anterior» y «Reportar un problema»)
   y una tarjeta con el estado de la app y de los datos (la llena estado.js). Con el diseño de siempre no se ven.
   ========================================================================== */

/* Con estas dos tarjetas el cuadro de Ajustes puede ser más alto que la pantalla: que se pueda desplazar */
body.ui-nueva #modalAjustes .modal__box { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; scroll-padding-bottom: 88px; }
/* «Cerrar Ajustes» queda siempre a la vista, al pie del cuadro (antes, en el celular y en ventanas bajas, había que bajar hasta el final
   para encontrarlo): lo demás se desplaza por detrás. El cuadro no tiene relleno abajo: esos 24 px (los de siempre) pasan a ser el margen del
   botón, así que cuando Ajustes entra entero en la pantalla mide y se ve igual que antes. La franja que hay debajo del botón es del color
   del cuadro (tapa lo que pasa por ahí) y no recibe toques. */
body.ui-nueva #modalAjustes .modal__box > .btn--block { position: sticky; bottom: 24px; z-index: 3; margin-bottom: 24px; }
body.ui-nueva #modalAjustes .modal__box > .btn--block::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 4px); height: 20px;
    background-color: var(--bg-layout); pointer-events: none;
}

/* «hidden» es lo que las oculta en el diseño de siempre; el diseño nuevo las muestra (la de estado, solo cuando estado.js la marca con data-listo) */
body.ui-nueva #nvBeta { display: block; }
body.ui-nueva #nvEstado[data-listo] { display: block; }
body.ui-nueva .nv-btn[hidden],
body.ui-nueva .nv-estado__bloque[hidden] { display: none; }

body.ui-nueva .nv-beta__caja { padding: 14px 16px; border-radius: var(--border-radius-md); background-color: var(--nv-menta); }
body.ui-nueva .nv-beta__texto { margin: 0 0 12px; font-size: 0.9rem; font-weight: 700; line-height: 1.4; color: var(--text-main); }
body.ui-nueva .nv-beta__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
body.ui-nueva .nv-beta__acciones .nv-btn { flex: 1 1 200px; }
body.ui-nueva .nv-btn { min-height: 44px; font-size: 0.9rem; }
body.ui-nueva .nv-btn:focus-visible,
body.ui-nueva .nv-estado__cabeza:focus-visible,
body.ui-nueva .nv-reporte__texto:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* La tarjeta se cierra y muestra una línea con lo principal; abierta, el detalle */
body.ui-nueva .nv-estado { border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background-color: var(--bg-panel); overflow: hidden; }
body.ui-nueva .nv-estado__cabeza {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center;
    min-height: 56px; padding: 10px 16px; cursor: pointer; list-style: none;
}
body.ui-nueva .nv-estado__cabeza::-webkit-details-marker { display: none; }
body.ui-nueva .nv-estado__cabeza::after {
    content: ""; grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px; margin-right: 4px;
    border-right: 2.5px solid var(--text-muted); border-bottom: 2.5px solid var(--text-muted); transform: rotate(45deg); transition: transform 0.2s ease;
}
body.ui-nueva .nv-estado[open] > .nv-estado__cabeza::after { transform: rotate(-135deg); }
body.ui-nueva .nv-estado__titulo { grid-column: 1; font-size: 0.95rem; font-weight: 800; color: var(--text-main); }
body.ui-nueva .nv-estado__resumen { grid-column: 1; min-width: 0; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); overflow-wrap: anywhere; }
body.ui-nueva .nv-estado__cuerpo { padding: 2px 16px 16px; border-top: 1px solid var(--border-color); }

body.ui-nueva .nv-estado__subtitulo { display: block; margin: 14px 0 6px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
body.ui-nueva .nv-estado__lista { margin: 0; }
body.ui-nueva .nv-estado__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-color); }
body.ui-nueva .nv-estado__fila:last-child { border-bottom: 0; }
body.ui-nueva .nv-estado__fila dt { flex: 0 1 auto; max-width: 46%; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
body.ui-nueva .nv-estado__fila dd { flex: 1 1 0; min-width: 0; margin: 0; font-size: 0.88rem; font-weight: 800; text-align: right; color: var(--text-main); overflow-wrap: anywhere; }
body.ui-nueva .nv-estado__huella { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.3px; }
body.ui-nueva .nv-estado__nota { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--border-radius-sm); background-color: var(--nv-menta); font-size: 0.85rem; font-weight: 700; line-height: 1.4; color: var(--text-main); }

body.ui-nueva .nv-estado__ayuda { margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; line-height: 1.4; color: var(--text-muted); }
body.ui-nueva .nv-estado__texto { margin: 0 0 10px; font-size: 0.9rem; font-weight: 800; line-height: 1.4; color: var(--text-main); }
body.ui-nueva .nv-estado__texto[data-estado="igual"] { color: var(--nv-verde-texto); }
body.ui-nueva .nv-estado__texto[data-estado="distinto"] { color: #8A4B08; }
body.ui-nueva.dark-theme .nv-estado__texto[data-estado="distinto"] { color: #FFC27A; }
body.ui-nueva .nv-estado__aviso { min-height: 1.2em; margin: 8px 0 0; font-size: 0.85rem; font-weight: 700; line-height: 1.4; color: var(--text-muted); }

/* El reporte: 16 px para que el iPhone no agrande la pantalla al tocar el texto */
body.ui-nueva .nv-reporte__texto { display: block; min-height: 180px; margin: 6px 0 10px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.4; }