@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #fff3f0;
    --border: #f2e4e2;
    --ink: #1a1414;
    --muted: #6b7280;
    --muted-soft: #9ca3af;

    --brand: #ff0000;
    --brand-strong: #cc0000;
    --brand-soft: #ffe5e3;

    --accent-yellow: #ffff00;
    --accent-yellow-ink: #4d4d00;

    --hero-bg-1: #0d0000;
    --hero-bg-2: #6e0000;
    --hero-accent: #ffff00;
    --hero-text: #ffffff;
    --hero-text-2: #ffd1ce;

    --chip-red: #ff0000;
    --chip-gold: #ffc700;
    --chip-orange: #ff7a00;
    --chip-coral: #ff5252;
    --chip-graphite: #3f3b3b;

    --ok: #15803d;
    --ok-soft: #e1f4e7;
    --warn: #b3560a;
    --warn-soft: #fbecd9;

    --shadow: 0 1px 2px rgba(26, 20, 20, 0.04), 0 8px 24px -12px rgba(26, 20, 20, 0.08);
    --shadow-lg: 0 24px 64px -20px rgba(13, 0, 0, 0.45);

    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-pill: 999px;

    --font-display: 'Manrope', 'Segoe UI', sans-serif;
    --font-body: 'Public Sans', 'Segoe UI', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.icon { width: 18px; height: 18px; display: inline-block; }

/* ---------- shell: sidebar + content ---------- */

.app-shell { display: flex; align-items: flex-start; }

.sidebar {
    width: 268px;
    flex: none;
    min-height: 100vh;
    position: sticky;
    top: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 22px 18px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 100vh;
    overflow-y: auto;
}

.sidebar-brand { display: flex; align-items: center; gap: 10px; }

.brand-logo {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    flex: none;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.brand-logo .icon { width: 20px; height: 20px; }

.brand-text strong {
    display: block;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
}

.brand-text p { margin: 1px 0 0; font-size: 11px; color: var(--muted); line-height: 1.3; }

.nav-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted-soft);
    margin-bottom: 8px;
}

.sidebar-workspace .workspace-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13.5px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-item .icon { flex: none; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.activo { background: var(--brand-soft); color: var(--brand-strong); }

/* cursos en la barra lateral */

.curso-lista { display: flex; flex-direction: column; gap: 2px; }

.curso-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.curso-item:hover { background: var(--surface-2); color: var(--ink); }
.curso-item.activo { background: var(--brand-soft); color: var(--brand-strong); }

.curso-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: var(--brand);
}

.curso-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.curso-conteo {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-soft);
    font-variant-numeric: tabular-nums;
}

.curso-fila { display: flex; align-items: center; gap: 2px; }
.curso-fila .curso-item { flex: 1; min-width: 0; }
.curso-fila .btn-icono { flex: none; opacity: 0; }
.curso-fila:hover .btn-icono,
.curso-fila:focus-within .btn-icono { opacity: 1; }

@media (hover: none) { .curso-fila .btn-icono { opacity: 1; } }

.curso-renombrar {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    background: var(--surface);
    color: var(--ink);
}

.curso-nuevo { display: flex; gap: 6px; margin-top: 8px; }

.curso-nuevo input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 12.5px;
    background: var(--bg);
    color: var(--ink);
}

.btn-mini {
    border: none;
    background: var(--brand-soft);
    color: var(--brand-strong);
    border-radius: var(--radius-sm);
    width: 34px;
    flex: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.btn-mini:hover { background: var(--brand); color: #fff; }

.app-shell > main {
    flex: 1;
    min-width: 0;
    max-width: 1180px;
    padding: 28px 32px 80px;
}

/* ---------- barra superior y cajón lateral (solo móvil) ---------- */

.topbar-movil { display: none; }

.sidebar-fondo { display: none; }

@media (max-width: 860px) {
    .app-shell { display: block; }

    .topbar-movil {
        display: flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 30;
        padding: 10px 14px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .topbar-titulo {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* El sidebar no se oculta: se convierte en cajón deslizante para no
       perder la lista de cursos ni el formulario para crearlos. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: min(300px, 85vw);
        max-height: none;
        min-height: 0;
        transform: translateX(-100%);
        /* `visibility` además del desplazamiento: si no, el cajón cerrado sigue
           siendo enfocable con Tab y lo leen los lectores de pantalla. */
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
        box-shadow: 0 0 40px rgba(22, 22, 31, 0.25);
    }

    .sidebar.abierto { transform: translateX(0); visibility: visible; }

    .sidebar-fondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(22, 22, 31, 0.45);
    }

    .sidebar-fondo[hidden] { display: none; }

    .app-shell > main { padding: 18px 14px 64px; max-width: none; }

    /* Objetivos táctiles más grandes. */
    .btn-icono { width: 36px; height: 36px; }
    .nav-item, .curso-item { padding: 11px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}

.content-header { margin-bottom: 22px; }

.content-header .eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-soft);
    margin-bottom: 6px;
}

.content-header h1 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
}

.content-header p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------- hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 88% 12%, rgba(255, 0, 0, 0.4), transparent 55%),
        linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2));
    color: var(--hero-text);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-lg);
}

@media (max-width: 780px) {
    .hero { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
}

.hero-copy { max-width: 580px; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--hero-text-2);
    padding: 5px 11px 5px 9px;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
}

.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hero-accent);
}

.hero h1 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 6px;
    text-wrap: balance;
}

.hero-copy > p {
    color: var(--hero-text-2);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
    max-width: 500px;
}

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.hero-stats { display: flex; gap: 22px; flex-wrap: wrap; }

.hero-stats strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hero-stats span {
    display: block;
    font-size: 10px;
    color: var(--hero-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1px;
}

.hero-orbit { position: relative; width: 130px; height: 130px; flex: none; display: none; }

@media (min-width: 960px) { .hero-orbit { display: block; } }

.hero-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--brand) 55%, white), var(--brand));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 34px -8px rgba(255, 0, 0, 0.65);
}

.hero-orb::before, .hero-orb::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-orb::before { inset: -16px; }
.hero-orb::after { inset: -32px; }
.hero-orb .icon { width: 22px; height: 22px; color: #fff; }

.hero-chip {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.hero-chip .icon { width: 14px; height: 14px; }
.hero-chip-1 { top: 4%; left: 6%; color: var(--chip-orange); }
.hero-chip-2 { top: 10%; right: -2%; color: var(--chip-gold); }
.hero-chip-3 { bottom: 8%; left: -4%; color: var(--chip-coral); }
.hero-chip-4 { bottom: 2%; right: 8%; color: var(--hero-accent); }

/* ---------- botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(22, 22, 31, 0.08);
    transition: background 0.15s ease, transform 0.1s ease;
}

.btn .icon { width: 16px; height: 16px; }
.btn:hover { background: var(--brand-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-ghost .icon { width: 16px; height: 16px; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.13); }

.btn-suave {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-suave .icon { width: 15px; height: 15px; }
.btn-suave:hover { background: var(--surface-2); border-color: var(--brand-soft); }

.btn:focus-visible,
.btn-ghost:focus-visible,
.btn-suave:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- tarjetas ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px 26px;
    margin-bottom: 22px;
    box-shadow: var(--shadow);
}

.card h2 {
    font-family: var(--font-display);
    font-size: 16.5px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.muted { color: var(--muted); font-size: 13px; }

.error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--warn-soft);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    color: var(--warn);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-weight: 500;
}

.lista-check { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 8px; }
.lista-check li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.lista-check .icon { color: var(--ok); width: 16px; height: 16px; }

/* ---------- barra de captura ---------- */

.captura {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    margin-bottom: 20px;
}

.captura-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
}

.captura-titulo .icon { color: var(--brand); }

.captura-atajo {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted-soft);
    font-family: var(--font-body);
    font-weight: 500;
}

kbd {
    font-family: var(--font-mono);
    font-size: 10.5px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 1px 5px;
    color: var(--muted);
}

.captura-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 10px; }

@media (max-width: 900px) { .captura-fila { grid-template-columns: 1fr; } }

.captura-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 900px) { .captura-meta { grid-template-columns: 1fr; } }

.captura-curso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
}

.captura-curso .curso-punto { width: 10px; height: 10px; }

/* Exportar vive aquí, junto al curso, no en el aside. */
.btn-exportar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn-exportar .icon { width: 15px; height: 15px; }

/* El de importar es <button>, no <a>: hay que igualar la tipografía. */
button.btn-exportar { cursor: pointer; font-family: var(--font-display); line-height: inherit; }
button.btn-exportar:disabled { opacity: 0.6; cursor: default; }

.btn-exportar:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.captura[hidden], .sin-curso[hidden] { display: none; }

/* aviso cuando no hay curso abierto */

.sin-curso {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    margin-bottom: 20px;
}

.sin-curso > .icon { width: 26px; height: 26px; color: var(--brand); flex: none; }

.sin-curso strong {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.sin-curso p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }

.sin-curso-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.sin-curso-acciones .btn-suave { font-size: 12.5px; }
.sin-curso-acciones .curso-punto { width: 9px; height: 9px; }

.entrada {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 13.5px;
    background: var(--bg);
    color: var(--ink);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.entrada::placeholder { color: var(--muted-soft); }
.entrada:focus { border-color: var(--brand); background: var(--surface); }
.entrada-clave { font-family: var(--font-display); font-weight: 700; }
textarea.entrada { resize: vertical; min-height: 44px; line-height: 1.5; }

.captura-nota { margin-top: 10px; }
.captura-nota[hidden] { display: none; }
textarea.entrada-nota { font-family: var(--font-mono); font-size: 12.5px; min-height: 96px; }

.captura-pie {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.captura-aviso { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.captura-aviso.error-texto { color: var(--warn); font-weight: 600; }

.enlace-sutil {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.enlace-sutil:hover { color: var(--brand-strong); }

/* ---------- filtros ---------- */

.barra-filtros {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.buscador { position: relative; flex: 1; min-width: 220px; max-width: 420px; }

.buscador .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-soft);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.buscador input { padding-left: 36px; }

.contador {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.tags-barra { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    border-radius: var(--radius-pill);
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-display);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tag-chip:hover { background: var(--surface-2); color: var(--ink); }
.tag-chip.activo { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- lista de apuntes ---------- */

.apuntes-lista { display: grid; gap: 10px; }

.apunte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.apunte:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(22, 22, 31, 0.06), 0 16px 32px -18px rgba(22, 22, 31, 0.22);
}

.apunte-cabecera { display: flex; align-items: flex-start; gap: 10px; }

/* asa de arrastre (6 puntos) */

.apunte-asa {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    margin-left: -4px;
    color: var(--muted-soft);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    /* Sin esto, arrastrar en táctil haría scroll de la página en vez de mover. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.apunte-asa .icon { width: 16px; height: 16px; }

.apunte:hover .apunte-asa,
.apunte:focus-within .apunte-asa { opacity: 0.55; }

.apunte-asa:hover { opacity: 1 !important; color: var(--ink); }
.apunte-asa:active { cursor: grabbing; }

/* En táctil no hay hover: el asa se queda siempre visible. */
@media (hover: none) { .apunte-asa { opacity: 0.55; } }

.apunte.arrastrando {
    opacity: 0.5;
    box-shadow: 0 12px 28px -12px rgba(22, 22, 31, 0.45);
    transform: none;
}

.apunte.editando .apunte-asa { display: none; }

/* variante densa: pensada para revisar muchos apuntes de un curso de un vistazo */

.apuntes-lista:has(.apunte-compacto) { gap: 6px; }

.apunte-compacto { padding: 9px 12px; border-radius: var(--radius-sm); }

.apunte-compacto .apunte-cabecera { align-items: center; gap: 8px; }

.apunte-compacto .apunte-clave { font-size: 13.5px; line-height: 1.3; }

.apunte-compacto .apunte-valor {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #4a4342;
}

.apunte-compacto .apunte-nota { margin-top: 6px; padding: 8px 10px; }

.apunte-compacto .apunte-pie { margin-top: 6px; }

.apunte-fecha {
    flex: none;
    font-size: 11px;
    color: var(--muted-soft);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.apunte-compacto.editando { background: var(--surface-2); }

.apunte-compacto .editor-acciones { margin-top: 8px; }

.apunte-compacto textarea.entrada { margin-top: 6px; }

.apunte-clave {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: -0.01em;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}

.apunte-valor {
    margin: 5px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #37302f;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.apunte-nota {
    margin: 10px 0 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    color: #3f3b3b;
    white-space: pre-wrap;
    overflow-x: auto;
}

.apunte-pie {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}

.meta-chip .icon { width: 12px; height: 12px; }
.meta-chip-curso { color: var(--brand-strong); background: var(--brand-soft); border-color: transparent; }
.meta-chip-tag { cursor: pointer; }
.meta-chip-tag:hover { background: var(--brand-soft); color: var(--brand-strong); }
.meta-chip-fecha { margin-left: auto; color: var(--muted-soft); background: none; border: none; padding: 3px 0; }

.apunte-acciones { display: flex; gap: 4px; flex: none; opacity: 0; transition: opacity 0.15s ease; }
.apunte:hover .apunte-acciones,
.apunte:focus-within .apunte-acciones { opacity: 1; }

@media (hover: none) { .apunte-acciones { opacity: 1; } }

.btn-icono {
    border: none;
    background: none;
    color: var(--muted-soft);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-icono .icon { width: 15px; height: 15px; }
.btn-icono:hover { background: var(--surface-2); color: var(--ink); }
.btn-icono.peligro:hover { background: var(--brand-soft); color: var(--brand-strong); }

.confirmar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-soft);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-strong);
    margin-top: 10px;
}

.confirmar button {
    border: none;
    border-radius: 8px;
    padding: 4px 10px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.confirmar .si { background: var(--brand); color: #fff; }
.confirmar .no { background: var(--surface); color: var(--muted); }

.marca { background: var(--accent-yellow); color: var(--accent-yellow-ink); border-radius: 3px; padding: 0 2px; }

.editor-apunte { display: grid; gap: 8px; }
.editor-acciones { display: flex; gap: 8px; align-items: center; }

.vacio {
    text-align: center;
    padding: 44px 20px;
    color: var(--muted);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.vacio strong {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 4px;
}

.grupo-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-soft);
    margin: 18px 0 8px;
}

.grupo-titulo::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------- aviso flotante ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px);
    background: var(--ink);
    color: #fff;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 60;
}

.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.malo { background: var(--brand-strong); }

/* ---------- modo estudio ---------- */

.estudio-zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    /* La tarjeta entra desplazada 90px: hacia la derecha eso ensancharía el
       documento y sacaría una barra horizontal que empuja el scroll vertical.
       `clip` lo recorta sin volver el contenedor scrolleable (a diferencia de
       `hidden`, que forzaría overflow-y a auto). */
    overflow-x: clip;
    overflow-y: visible;
}

.flashcard {
    width: 100%;
    max-width: 640px;
    min-height: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.flashcard:hover { border-color: var(--brand-soft); }

.flashcard-eyebrow {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted-soft);
    font-family: var(--font-display);
}

.flashcard-clave {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.flashcard-valor {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #37302f;
    white-space: pre-wrap;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.flashcard-pista { margin: 18px 0 0; font-size: 12.5px; color: var(--muted-soft); }

.estudio-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }

.estudio-progreso {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    min-width: 78px;
    text-align: center;
}

/* La tarjeta se anima desde JS (ver estudio.php) para no depender de la caché
   del CSS. Aquí solo queda el fundido del valor al revelarlo. */
@keyframes fc-revela {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.flashcard-valor { animation: fc-revela 0.2s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .apunte, .toast, .quick-card, .btn { transition: none !important; }
}

/* ---------- ajustes de móvil ---------- */

@media (max-width: 700px) {
    .content-header h1 { font-size: 20px; }
    .content-header p { font-size: 13px; }
    .content-header { margin-bottom: 16px; }

    /* La cabecera del curso se apila: nombre arriba, exportar debajo. */
    .captura-titulo { flex-wrap: wrap; gap: 8px 10px; }
    .captura-atajo { display: none; }
    .captura-aviso { order: 3; width: 100%; }
    .btn-exportar { width: 100%; justify-content: center; margin-top: 2px; }

    .barra-filtros { flex-direction: column; align-items: stretch; gap: 8px; }
    .barra-filtros .btn-suave { justify-content: center; }

    .flashcard { min-height: 190px; padding: 30px 20px; }
    .flashcard-clave { font-size: 21px; }
    .flashcard-valor { font-size: 14px; margin-top: 14px; padding-top: 14px; }

    /* El campo de valor arranca con rows=1; en una columna estrecha el
       placeholder ocupa dos líneas y se salía de la caja. */
    .captura-fila textarea.entrada { min-height: 62px; }

    .estudio-controles { gap: 8px; }
    .estudio-controles .btn-suave { flex: 1 1 auto; justify-content: center; }
    .estudio-progreso { order: -1; width: 100%; min-width: 0; }

    .apunte-compacto { padding: 11px 12px; }
    .apunte-cabecera { gap: 6px; }

    .toast { left: 14px; right: 14px; bottom: 14px; text-align: center; }
}

/* En pantallas muy estrechas el asa se queda pero se aprieta todo lo demás. */
@media (max-width: 420px) {
    .app-shell > main { padding: 14px 10px 56px; }
    .apunte-clave { font-size: 13.5px; }
    .btn-exportar { padding: 6px 10px; font-size: 11.5px; }
}

/* Textos alternativos: los atajos de teclado no aplican en móvil. */
.solo-movil { display: none; }

@media (max-width: 700px) {
    .solo-escritorio { display: none; }
    .solo-movil { display: inline; }
}

/* ---------- pantalla de acceso ---------- */

.login-body { background: var(--surface); }

.login-shell {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 100vh;
}

/* panel rojo de la izquierda */

.login-marca {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 42px 48px;
    color: #fff;
    background:
        radial-gradient(115% 135% at 88% 8%, rgba(255, 60, 40, 0.55), transparent 58%),
        linear-gradient(150deg, #8d0000 0%, #c40000 45%, #7a0000 100%);
}

/* filo dorado inferior, como remate */
.login-marca::after {
    content: '';
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-yellow), transparent);
    opacity: 0.55;
}

.login-marca-top { display: flex; align-items: center; gap: 12px; }

.login-marca .brand-logo {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.login-eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.72);
}

.login-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.login-chip .icon { width: 14px; height: 14px; color: var(--accent-yellow); }

.login-titulo {
    margin: 22px 0 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.028em;
}

.login-titulo em { font-style: normal; color: var(--accent-yellow); }

.login-descripcion {
    margin: 20px 0 0;
    max-width: 30rem;
    font-size: 15px;
    line-height: 1.6;
    color: var(--hero-text-2);
}

.login-puntos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    margin: 0;
    padding: 0 0 22px;
    list-style: none;
}

.login-puntos li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
}

.login-punto-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-punto-icono .icon { width: 15px; height: 15px; color: var(--accent-yellow); }

/* panel blanco de la derecha */

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 32px;
}

.login-formulario { width: 100%; max-width: 350px; }

.login-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.login-badge .icon { width: 13px; height: 13px; }

.login-formulario h2 {
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.login-sub { margin: 7px 0 26px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.login-label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-soft);
}

.login-campo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-campo:focus-within {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.login-campo > .icon { flex: none; color: var(--muted-soft); }
.login-campo:focus-within > .icon { color: var(--brand); }

.login-campo input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    padding: 13px 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
}

.login-ojo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--muted-soft);
    transition: color 0.15s ease, background 0.15s ease;
}

.login-ojo:hover { background: var(--surface-2); color: var(--ink); }
.login-ojo.activo { color: var(--brand); }

.login-boton {
    width: 100%;
    margin-top: 8px;
    padding: 14px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 10px 24px -12px rgba(204, 0, 0, 0.9);
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.login-boton:hover { filter: brightness(1.06); box-shadow: 0 14px 30px -12px rgba(204, 0, 0, 0.95); }
.login-boton:active { transform: translateY(1px); }

.login-error {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    border: 1px solid #ffc9c4;
    color: var(--brand-strong);
    font-size: 13px;
    font-weight: 600;
}

.login-error .icon { flex: none; width: 16px; height: 16px; }

.login-pie { margin: 26px 0 0; text-align: center; font-size: 11.5px; color: var(--muted-soft); }

/* En móvil el panel rojo se reduce a una cabecera y el formulario manda. */
@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; min-height: 100dvh; }

    .login-marca { padding: 26px 22px 30px; gap: 22px; }
    .login-marca::after { left: 22px; right: 22px; bottom: 14px; }
    .login-titulo { font-size: clamp(28px, 8vw, 38px); margin-top: 16px; }
    .login-descripcion { font-size: 14px; margin-top: 12px; }
    .login-puntos { grid-template-columns: 1fr; gap: 10px; padding-bottom: 12px; }

    .login-panel { padding: 30px 22px 46px; align-items: flex-start; }
    .login-formulario { max-width: none; }
}

/* Pantallas bajas: el panel rojo estorba más de lo que aporta. */
@media (max-width: 900px) and (max-height: 620px) {
    .login-puntos, .login-descripcion { display: none; }
}

.nav-salir { margin-top: 6px; color: var(--muted-soft); }
.nav-salir:hover { background: var(--brand-soft); color: var(--brand-strong); }

/* ---------- repaso a pantalla completa ---------- */

/* Solo se ve el icono que toca según el estado. */
.fc-icono-contraer { display: none; }
#fc-pantalla[aria-pressed="true"] .fc-icono-expandir { display: none; }
#fc-pantalla[aria-pressed="true"] .fc-icono-contraer { display: inline-flex; }

/* Con la API nativa el fondo lo pinta el navegador (negro por defecto);
   se fuerza el del sitio para que no cambie el aspecto entre los dos modos. */
.estudio-zona.pantalla-completa,
.estudio-zona:fullscreen {
    background: var(--bg);
}

.estudio-zona.pantalla-completa {
    position: fixed;
    inset: 0;
    z-index: 80;
    margin: 0;
    padding: 26px clamp(16px, 5vw, 48px) 30px;
    justify-content: center;
    gap: 26px;
    overflow-y: auto;
    /* En móvil, 100dvh descuenta la barra del navegador; vh no. */
    height: 100dvh;
}

/* La barra de captura y el resto siguen ahí debajo: se evita que el body
   haga scroll por detrás mientras se repasa. */
body.con-pantalla-completa { overflow: hidden; }

.estudio-zona.pantalla-completa .flashcard {
    max-width: min(880px, 100%);
    min-height: min(58vh, 460px);
    padding: clamp(30px, 5vw, 56px) clamp(22px, 5vw, 52px);
}

.estudio-zona.pantalla-completa .flashcard-clave {
    font-size: clamp(28px, 5.2vw, 46px);
}

.estudio-zona.pantalla-completa .flashcard-valor {
    font-size: clamp(15px, 2.1vw, 20px);
    margin-top: 24px;
    padding-top: 24px;
}

.estudio-zona.pantalla-completa .flashcard-eyebrow { top: 22px; font-size: 12px; }

.estudio-zona.pantalla-completa .estudio-controles { gap: 12px; }

@media (max-width: 700px) {
    /* El padding lateral no debe superar al del modo normal: si no, la tarjeta
       sale más estrecha a pantalla completa, que es justo lo contrario. */
    .estudio-zona.pantalla-completa {
        padding: 16px 10px 22px;
        gap: 18px;
    }

    .estudio-zona.pantalla-completa .flashcard {
        min-height: 54vh;
        width: 100%;
    }

    /* A pantalla completa el pulgar manda: los botones se agrandan y el de
       salir ocupa su propia fila. */
    .estudio-zona.pantalla-completa .estudio-controles { width: 100%; }
    .estudio-zona.pantalla-completa .btn-suave { padding: 12px 14px; }
    .estudio-zona.pantalla-completa #fc-pantalla { flex: 1 0 100%; }
}

/* En móvil el texto largo del botón sobra: basta el icono. */
@media (max-width: 480px) {
    .fc-texto-pantalla { display: none; }
    #fc-pantalla { flex: none; }
    .estudio-zona.pantalla-completa #fc-pantalla { flex: 1 0 100%; }
    .estudio-zona.pantalla-completa .fc-texto-pantalla { display: inline; }
}