/* ============================================================
   notebook.css — Interfaz del cuaderno del estudiante ESAM
   Paleta: navy #002B4D · gold #FFDE59
   ============================================================ */

:root {
    --nb-navy: #002B4D;
    --nb-navy-700: #013a66;
    --nb-navy-300: #4a6580;
    --nb-gold: #FFDE59;
    --nb-gold-soft: #FFF4C7;
    --nb-bg: #F4F8FB;
    --nb-surface: #FFFFFF;
    --nb-border: #DCE7F0;
    --nb-text: #0A1929;
    --nb-text-soft: #3d566e;
    --nb-text-mut: #6b8299;
    --nb-radius: 14px;
    --nb-shadow: 0 2px 10px rgba(0, 43, 77, 0.07);
    --nb-shadow-lg: 0 8px 30px rgba(0, 43, 77, 0.14);
    --nb-font: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-family: var(--nb-font);
    color: var(--nb-text);
    background: var(--nb-bg);
}

.nb-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── Barra superior ─────────────────────────────────────── */
.nb-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 50px;
    background: var(--nb-navy);
    color: #fff;
    flex-shrink: 0;
    z-index: 30;
}

.nb-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
}

.nb-title-main {
    font-size: 14px;
    font-weight: 700;
}

.nb-title-sub {
    font-size: 10.5px;
    color: #A8C4D8;
    margin-top: 0;
}

.nb-iconbtn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}

.nb-iconbtn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.nb-iconbtn--text {
    width: auto;
    height: 30px;
    gap: 6px;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nb-navy);
    background: var(--nb-gold);
}

.nb-iconbtn--text svg {
    flex-shrink: 0;
}

/* Los iconos del header se achican con él para no verse apretados */
.nb-logout svg {
    width: 17px;
    height: 17px;
}

.nb-iconbtn--text:hover {
    background: #ffe87a;
}

.nb-burger {
    position: relative;
    width: 17px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.nb-burger::before,
.nb-burger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 17px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.nb-burger::before {
    top: -5px;
}

.nb-burger::after {
    top: 5px;
}

/* ── Cuerpo ─────────────────────────────────────────────── */
.nb-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ── Panel lateral ──────────────────────────────────────── */
.nb-panel {
    width: 250px;
    flex-shrink: 0;
    background: var(--nb-surface);
    border-right: 1px solid var(--nb-border);
    overflow-y: auto;
    padding: 18px 14px;
    transition: margin-left .25s ease;
}

.nb-panel.is-hidden {
    margin-left: -251px;
}

.nb-panel-section {
    margin-bottom: 26px;
}

.nb-panel-h {
    font-size: 13px;
    font-weight: 700;
    color: var(--nb-navy);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.nb-panel-hint {
    font-size: 11.5px;
    color: var(--nb-text-mut);
    margin: 2px 0 12px;
}

.nb-doclist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nb-doc {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 9px;
    background: var(--nb-bg);
    font-size: 13px;
    position: relative;
}

.nb-doc-ico {
    width: 16px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--nb-navy-300);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h9l5 5v15a0 0 0 0 1 0 0H6z' fill='black'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h9l5 5v15H6z' fill='black'/></svg>") center/contain no-repeat;
}

.nb-doc-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nb-text);
}

.nb-doc-del {
    border: none;
    background: transparent;
    color: var(--nb-text-mut);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0;
    transition: opacity .15s;
}

.nb-doc:hover .nb-doc-del {
    opacity: 1;
}

.nb-doc-del:hover {
    color: #d33;
}

.nb-doc-empty {
    font-size: 12.5px;
    color: var(--nb-text-mut);
    font-style: italic;
    padding: 4px 2px;
}

.nb-upload {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding: 14px;
    border: 1.5px dashed var(--nb-border);
    border-radius: 11px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.nb-upload:hover {
    border-color: var(--nb-gold);
    background: var(--nb-gold-soft);
}

.nb-upload-text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nb-navy);
}

.nb-upload-formats {
    font-size: 11px;
    color: var(--nb-text-mut);
}

.nb-upload-status {
    margin-top: 8px;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 8px;
}

.nb-upload-status.is-loading {
    background: var(--nb-gold-soft);
    color: #7a6000;
}

.nb-upload-status.is-ok {
    background: #e3f5e8;
    color: #1c6b34;
}

.nb-upload-status.is-error {
    background: #fde8e8;
    color: #b32020;
}

/* ── Backdrop (móvil) ───────────────────────────────────── */
.nb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 43, 77, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s;
    z-index: 15;
}

.nb-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ── Chat ───────────────────────────────────────────────── */
.nb-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nb-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px clamp(14px, 2.2vw, 34px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.nb-msg {
    display: flex;
}

.nb-msg--user {
    justify-content: flex-end;
}

.nb-msg--bot {
    justify-content: flex-start;
}

.nb-msg-bubble {
    max-width: 76%;
    padding: 13px 16px;
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.55;
    box-shadow: var(--nb-shadow);
}

.nb-msg--user .nb-msg-bubble {
    background: var(--nb-navy);
    color: #fff;
    border-bottom-right-radius: 5px;
}

/* La respuesta del copiloto necesita mucho más ancho que la pregunta:
   trae explicaciones largas, listas, tablas y bloques de código.
   El tope en px evita que en pantallas anchas las líneas de texto se
   vuelvan tan largas que cueste seguir el renglón. */
.nb-msg--bot .nb-msg-bubble {
    max-width: min(94%, 1080px);
    background: var(--nb-surface);
    color: var(--nb-text);
    border: 1px solid var(--nb-border);
    border-bottom-left-radius: 5px;
}

/* El historial se imprime como Markdown crudo y el JS lo convierte
   añadiendo .nb-md. Si marked no llegara a cargar, esto evita que el
   texto quede en un bloque corrido sin saltos de línea. */
.nb-msg--bot .nb-msg-bubble:not(.nb-md) {
    white-space: pre-wrap;
}

/* Indicador de escritura */
.nb-typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}

.nb-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nb-navy-300);
    animation: nbblink 1.3s infinite both;
}

.nb-typing span:nth-child(2) {
    animation-delay: .2s;
}

.nb-typing span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes nbblink {

    0%,
    80%,
    100% {
        opacity: .3
    }

    40% {
        opacity: 1
    }
}

/* ── Pantalla de bienvenida ─────────────────────────────── */
.nb-welcome {
    margin: auto;
    max-width: 540px;
    text-align: center;
    padding: 30px 0;
}

/* El área de mensajes tiene fondo claro, así que el logo se sostiene
   solo y ya no necesita el chip navy que llevaba el texto ESAM.
   Como bloque hay que centrarlo a mano: el chip anterior era inline y
   heredaba el text-align del .nb-welcome. La imagen no es cuadrada
   (386x324), de ahí el object-fit para que no se estire. */
.nb-welcome-mark {
    display: block;
    margin: 0 auto 20px;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.nb-welcome-title {
    font-size: 23px;
    color: var(--nb-navy);
    margin-bottom: 10px;
}

.nb-welcome-text {
    font-size: 14.5px;
    color: var(--nb-text-soft);
    line-height: 1.6;
}

.nb-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 24px;
}

/* El display:flex de arriba gana sobre el [hidden] del navegador,
   así que el grupo de chips del modo inactivo hay que ocultarlo aquí. */
.nb-suggestions[hidden] {
    display: none;
}

.nb-chip {
    border: 1px solid var(--nb-border);
    background: var(--nb-surface);
    color: var(--nb-navy);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
    box-shadow: var(--nb-shadow);
}

.nb-chip:hover {
    border-color: var(--nb-gold);
    background: var(--nb-gold-soft);
}

/* ── Botón para volver al último mensaje ────────────────── */
/* El contenedor no ocupa alto: solo sirve de ancla para que el botón
   flote sobre el final de los mensajes, quede pegado a lo que haya
   debajo (barra de modos o composer) y no empuje el layout. */
.nb-jump-wrap {
    position: relative;
    height: 0;
    flex-shrink: 0;
}

.nb-jump {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--nb-border);
    background: var(--nb-surface);
    color: var(--nb-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--nb-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s, background .15s, border-color .15s;
    z-index: 15;
}

.nb-jump.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nb-jump:hover {
    background: var(--nb-gold-soft);
    border-color: var(--nb-gold);
}

.nb-jump:active {
    transform: translateX(-50%) scale(.93);
}

/* Aviso de que el copiloto respondió mientras leías más arriba */
.nb-jump.has-nuevo::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--nb-gold);
    border: 2px solid var(--nb-surface);
}

/* ── Selector de modo del copiloto ──────────────────────── */
.nb-modo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px clamp(14px, 2.2vw, 34px) 0;
    flex-shrink: 0;
}

.nb-modo-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: 999px;
    box-shadow: var(--nb-shadow);
}

.nb-modo-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: transparent;
    color: var(--nb-text-mut);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s, color .18s;
}

/* Tooltip: explica para qué es ideal cada modo, sin ensuciar el hilo.
   Se ancla al borde izquierdo del botón para que nunca se salga de
   la pantalla, ya que el switch vive pegado al margen. */
.nb-modo-opt::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 0;
    width: max-content;
    max-width: 250px;
    padding: 8px 11px;
    border-radius: 9px;
    background: var(--nb-navy);
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
    box-shadow: var(--nb-shadow-lg);
    z-index: 40;
}

.nb-modo-opt::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 22px;
    border: 5px solid transparent;
    border-top-color: var(--nb-navy);
    z-index: 40;
}

.nb-modo-opt::after,
.nb-modo-opt::before {
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .16s, transform .16s, visibility .16s;
}

.nb-modo-opt:hover::after,
.nb-modo-opt:hover::before,
.nb-modo-opt:focus-visible::after,
.nb-modo-opt:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nb-modo-opt:hover {
    color: var(--nb-navy);
}

.nb-modo-opt.is-active {
    background: var(--nb-navy);
    color: #fff;
}

.nb-modo-opt[data-modo="educativo"].is-active {
    background: var(--nb-gold);
    color: var(--nb-navy);
}

.nb-modo-hint {
    font-size: 12px;
    line-height: 1.4;
    color: var(--nb-text-mut);
}

/* Cuando el modo educativo está activo, el composer lo acompaña
   con el acento dorado para que el estudiante vea dónde está parado. */
.nb-chat.is-modo-educativo .nb-input:focus {
    border-color: var(--nb-gold);
}

.nb-chat.is-modo-educativo .nb-modo-hint {
    color: var(--nb-navy);
}

/* ── Composer ───────────────────────────────────────────── */
.nb-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px clamp(14px, 2.2vw, 34px) 18px;
    background: linear-gradient(to top, var(--nb-bg) 70%, transparent);
}

.nb-input {
    flex: 1;
    resize: none;
    max-height: 160px;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1px solid var(--nb-border);
    background: var(--nb-surface);
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.5;
    box-shadow: var(--nb-shadow);
    outline: none;
    transition: border-color .15s;
}

.nb-input:focus {
    border-color: var(--nb-navy-300);
}

.nb-send {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    border: none;
    background: var(--nb-navy);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .1s;
}

.nb-send:hover {
    background: var(--nb-navy-700);
}

.nb-send:active {
    transform: scale(.94);
}

.nb-send:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Modal de consigna ──────────────────────────────────── */
.nb-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 43, 77, 0.45);
    padding: 20px;
}

.nb-modal.is-open {
    display: flex;
}

.nb-modal-box {
    background: var(--nb-surface);
    border-radius: 18px;
    max-width: 520px;
    width: 100%;
    padding: 30px;
    box-shadow: var(--nb-shadow-lg);
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
}

.nb-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--nb-text-mut);
    cursor: pointer;
}

.nb-modal-close:hover {
    color: var(--nb-navy);
}

.nb-modal-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nb-navy);
    background: var(--nb-gold);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.nb-modal-title {
    font-size: 21px;
    color: var(--nb-navy);
    margin-bottom: 12px;
}

.nb-modal-desc {
    font-size: 14.5px;
    color: var(--nb-text-soft);
    line-height: 1.6;
}

.nb-modal-crit {
    margin-top: 20px;
    padding: 16px;
    border-radius: 12px;
    background: var(--nb-gold-soft);
}

.nb-modal-crit h3 {
    font-size: 13px;
    color: var(--nb-navy);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.nb-modal-crit p {
    font-size: 13.5px;
    color: var(--nb-text);
    line-height: 1.55;
}

.nb-declarar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.nb-field {
    width: 100%;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid var(--nb-border);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    resize: vertical;
}

.nb-field:focus {
    border-color: var(--nb-navy-300);
}

.nb-btn-primary {
    border: none;
    background: var(--nb-navy);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    padding: 13px;
    border-radius: 11px;
    cursor: pointer;
    transition: background .15s;
}

.nb-btn-primary:hover {
    background: var(--nb-navy-700);
}

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 820px) {
    .nb-panel {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 20;
        box-shadow: var(--nb-shadow-lg);
    }

    .nb-panel.is-hidden {
        margin-left: -251px;
    }

    .nb-msg-bubble {
        max-width: 88%;
    }

    .nb-msg--bot .nb-msg-bubble {
        max-width: 96%;
    }

    .nb-modo {
        gap: 8px;
        padding-top: 10px;
    }

    .nb-modo-hint {
        flex-basis: 100%;
        font-size: 11.5px;
    }
}

@media (max-width: 400px) {
    .nb-modo-opt {
        font-size: 12px;
        padding: 7px 11px;
        gap: 6px;
    }
}

/* ============================================================
   Markdown renderizado en las burbujas del asistente
   ============================================================ */
.nb-md {
    line-height: 1.6;
}

.nb-md p {
    margin: 0 0 10px;
}

.nb-md p:last-child {
    margin-bottom: 0;
}

.nb-md strong {
    font-weight: 700;
    color: var(--nb-navy);
}

.nb-md em {
    font-style: italic;
}

.nb-md ul,
.nb-md ol {
    margin: 8px 0 10px;
    padding-left: 22px;
}

.nb-md li {
    margin-bottom: 4px;
}

.nb-md h1,
.nb-md h2,
.nb-md h3 {
    color: var(--nb-navy);
    margin: 14px 0 8px;
    line-height: 1.3;
}

.nb-md h1 {
    font-size: 18px;
}

.nb-md h2 {
    font-size: 16px;
}

.nb-md h3 {
    font-size: 14.5px;
}

.nb-md hr {
    border: none;
    border-top: 1px solid var(--nb-border);
    margin: 14px 0;
}

.nb-md code {
    background: var(--nb-bg);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 13px;
    font-family: 'Consolas', monospace;
}

.nb-md pre {
    background: var(--nb-navy);
    color: #fff;
    padding: 12px 14px;
    border-radius: 9px;
    overflow-x: auto;
    margin: 10px 0;
}

.nb-md pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.nb-md blockquote {
    border-left: 3px solid var(--nb-gold);
    margin: 10px 0;
    padding: 4px 0 4px 14px;
    color: var(--nb-text-soft);
}

.nb-md a {
    color: var(--nb-navy-300);
    text-decoration: underline;
}

.nb-md table {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
}

.nb-md th,
.nb-md td {
    border: 1px solid var(--nb-border);
    padding: 7px 10px;
    font-size: 13px;
    text-align: left;
}

.nb-md th {
    background: var(--nb-bg);
    font-weight: 700;
}

/* ============================================================
   Selector de cuadernos (switcher) en la barra superior
   ============================================================ */
.nb-switcher {
    position: relative;
    flex: 1;
    min-width: 0;
}

.nb-switcher-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 3px 9px;
    border-radius: 8px;
    width: 100%;
    color: #fff;
    text-align: left;
    transition: background .15s;
}

.nb-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nb-switcher-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.nb-switcher-titles .nb-title-main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46vw;
}

.nb-switcher-caret {
    flex-shrink: 0;
    color: #A8C4D8;
    transition: transform .18s;
}

.nb-switcher.is-open .nb-switcher-caret {
    transform: rotate(180deg);
}

.nb-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 320px;
    max-width: 90vw;
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: 14px;
    box-shadow: var(--nb-shadow-lg);
    padding: 8px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}

.nb-switcher.is-open .nb-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nb-switcher-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--nb-text-mut);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 8px 12px 6px;
}

.nb-switcher-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--nb-text);
    transition: background .15s;
}

.nb-switcher-item:hover {
    background: var(--nb-bg);
}

.nb-switcher-item.is-current {
    background: var(--nb-gold-soft);
}

.nb-switcher-item-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.nb-switcher-item-dot.is-oficial {
    background: var(--nb-gold);
}

.nb-switcher-item-dot.is-propia {
    background: var(--nb-navy-300);
}

.nb-switcher-item-text {
    flex: 1;
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nb-switcher-item.is-current .nb-switcher-item-text {
    font-weight: 600;
    color: var(--nb-navy);
}

.nb-switcher-check {
    flex-shrink: 0;
    color: var(--nb-navy);
}

.nb-switcher-all {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nb-navy-300);
    padding: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--nb-border);
    border-radius: 0 0 8px 8px;
    transition: color .15s;
}

.nb-switcher-all:hover {
    color: var(--nb-navy);
}

@media (max-width: 600px) {
    .nb-switcher-titles .nb-title-main {
        max-width: 38vw;
    }

    .nb-switcher-menu {
        min-width: 260px;
    }
}
/* ── Aviso de respuesta cortada por longitud ─────────────── */
.nb-truncada {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--nb-border);
    font-size: 12.5px;
    color: var(--nb-text-mut);
}

.nb-truncada-btn {
    border: 1px solid var(--nb-border);
    background: var(--nb-gold-soft);
    color: var(--nb-navy);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.nb-truncada-btn:hover {
    background: var(--nb-gold);
    border-color: var(--nb-gold);
}

/* ── Medidor de uso mensual ──────────────────────────────────
   Discreto mientras sobra crédito, evidente cuando queda poco: el
   objetivo es que el estudiante se entere ANTES de quedarse sin
   copiloto, no que viva pendiente de un contador. */
.nb-uso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    cursor: default;
}

.nb-uso-barra {
    width: 54px;
    height: 5px;
    border-radius: 999px;
    background: var(--nb-border);
    overflow: hidden;
}

.nb-uso-relleno {
    height: 100%;
    border-radius: 999px;
    background: var(--nb-navy-300);
    transition: width .3s ease, background .3s ease;
}

.nb-uso-texto {
    font-size: 11.5px;
    color: var(--nb-text-mut);
    white-space: nowrap;
}

/* A partir del 75% el aviso deja de ser neutro. */
.nb-uso[data-nivel="medio"] .nb-uso-relleno {
    background: #d99a2b;
}

.nb-uso[data-nivel="medio"] .nb-uso-texto {
    color: #a06f10;
}

.nb-uso[data-nivel="alto"] .nb-uso-relleno {
    background: #c9453c;
}

.nb-uso[data-nivel="alto"] .nb-uso-texto {
    color: #b32020;
    font-weight: 600;
}

/* En pantallas estrechas la barra sobra: basta el número. */
@media (max-width: 600px) {
    .nb-uso-barra {
        display: none;
    }

    .nb-uso {
        margin-left: 0;
    }
}

/* Aviso de uso en el hilo, al cruzar 75% y 90%. */
.nb-uso-aviso {
    align-self: center;
    max-width: 90%;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
    background: var(--nb-gold-soft);
    color: #7a6000;
    border: 1px solid #f0d98a;
}

.nb-uso-aviso--90 {
    background: #fde8e8;
    color: #b32020;
    border-color: #f3c0c0;
}

/* ── Ritmo de gasto elegido por el estudiante ──────────────── */
.nb-ritmo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nb-ritmo-opt {
    display: flex;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--nb-border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--nb-bg);
    transition: border-color .15s, background .15s;
}

.nb-ritmo-opt:hover {
    border-color: var(--nb-navy-300);
}

/* :has permite marcar la tarjeta entera sin JavaScript. Donde no esté
   soportado simplemente no se resalta: la opción sigue funcionando. */
.nb-ritmo-opt:has(input:checked) {
    border-color: var(--nb-gold);
    background: var(--nb-gold-soft);
}

.nb-ritmo-opt input {
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--nb-navy);
}

.nb-ritmo-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--nb-text-mut);
}

.nb-ritmo-texto strong {
    font-size: 12.5px;
    color: var(--nb-navy);
}

.nb-ritmo-estado {
    margin-top: 8px;
    font-size: 11.5px;
    padding: 7px 9px;
    border-radius: 8px;
}

.nb-ritmo-estado.is-loading {
    background: var(--nb-gold-soft);
    color: #7a6000;
}

.nb-ritmo-estado.is-ok {
    background: #e3f5e8;
    color: #1c6b34;
}

.nb-ritmo-estado.is-error {
    background: #fde8e8;
    color: #b32020;
}