/* ============================================================
   DESIGN HANDOFF TOKENS — Home + Flashcards redesign
   Fuente: design_handoff/README.md ("Design Tokens" + tabla CEFR)
   Prefijo --dh- para no chocar con --ls- ni con shadcn (ya existentes).
   Todo lo que sigue es aditivo y solo se usa desde las clases
   .dh-* consumidas por front-page.php / page-diccionario.php.
   ============================================================ */

:root {
    /* Color */
    --dh-ink:            #111110;
    --dh-ink-hover:       #33332E;
    --dh-ink-muted:       #57574F;
    --dh-text-muted:      #6B6B66;
    --dh-text-subtle:     #6F6F69;
    --dh-text-faint:      #AFAFA7;
    --dh-on-dark-divider: #77776F;
    --dh-icon-faint:      #A8A8A0;
    --dh-bg:              #F6F6F3;
    --dh-surface:         #FFFFFF;
    --dh-surface-alt:     #F2F2EE;
    --dh-fill-track:      #F0F0EB;
    --dh-fill-placeholder:#E9E9E3;
    --dh-border:          #E6E6E1;
    --dh-border-strong:   #DCDCD6;
    --dh-accent:          #FFCE47;
    --dh-accent-soft-fill:   #FFE4A0;
    --dh-accent-soft-border: #E6C263;
    --dh-due-tint: #FBF3DC;
    --dh-due-ink:  #8A6410;
    --dh-ok-tint:  #E9F2EC;
    --dh-ok-ink:   #2F6B4C;
    --dh-mastery-mid:  #C97F7A;
    --dh-on-dark-track: #2E2E2A;
    --dh-dark-placeholder-1: #2A2A27;
    --dh-dark-placeholder-2: #232320;

    /* Typography */
    --dh-font-headline: 'Outfit', -apple-system, sans-serif;
    --dh-font-body:     'Outfit', -apple-system, sans-serif;
    --dh-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* Spacing (base 4px) */
    --dh-space-1: 4px;
    --dh-space-2: 8px;
    --dh-space-3: 12px;
    --dh-space-4: 16px;
    --dh-space-5: 20px;
    --dh-space-6: 24px;
    --dh-space-7: 28px;
    --dh-space-8: 32px;
    --dh-space-10: 40px;
    --dh-space-12: 48px;
    --dh-space-20: 80px;

    /* Radius */
    --dh-radius-xs: 3px;
    --dh-radius-sm: 5px;
    --dh-radius-md: 6px;
    --dh-radius-lg: 8px;
    --dh-radius-xl: 10px;
    --dh-radius-2xl: 12px;
    --dh-radius-3xl: 14px;
    --dh-radius-4xl: 18px;
    --dh-radius-full: 50%;
}

/* ------------------------------------------------------------
   Scope root — aplicado al <main> de las dos pantallas
   ------------------------------------------------------------ */
.dh-scope {
    background: var(--dh-bg);
    color: var(--dh-ink);
    font-family: var(--dh-font-body);
    -webkit-font-smoothing: antialiased;
}
.dh-scope a { color: inherit; text-decoration: none; }
.dh-scope * { box-sizing: border-box; }

/* Blindaje contra assets/css/luz-saber.css (cargado después de este archivo):
   sus reglas globales por etiqueta (h1-h6 con !important, y p/span/li/td/th/
   label/a sin él) ganan a la simple herencia de color/tipografía. Sin este
   bloque, cualquier texto dentro de .dh-scope que no fije su propio color
   (p. ej. dentro de .dh-card--dark) se vuelve casi invisible al heredar
   --ls-on-surface en vez del blanco/negro que le tocaba. */
.dh-scope h1, .dh-scope h2, .dh-scope h3, .dh-scope h4, .dh-scope h5, .dh-scope h6 {
    font-family: var(--dh-font-headline) !important;
    color: inherit !important;
}
.dh-scope p, .dh-scope span, .dh-scope li, .dh-scope td, .dh-scope th, .dh-scope label {
    font-family: var(--dh-font-body);
    color: inherit;
}
.dh-scope a:hover { color: inherit; }

.dh-eyebrow {
    font-family: var(--dh-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dh-text-subtle);
}
.dh-eyebrow--lg { font-size: 12px; letter-spacing: 0.1em; margin-bottom: 14px; }

.dh-h1 {
    margin: 0 0 10px;
    font-family: var(--dh-font-headline);
    font-size: 46px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: pretty;
}
.dh-h2 {
    margin: 0 0 6px;
    font-family: var(--dh-font-headline);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.dh-lead {
    margin: 0;
    font-size: 18px;
    color: var(--dh-text-muted);
}
.dh-lead strong { font-weight: 600; color: var(--dh-ink); }

/* ------------------------------------------------------------
   Card — una sola primitiva, con variante oscura
   ------------------------------------------------------------ */
.dh-card {
    background: var(--dh-surface);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius-4xl);
    padding: var(--dh-space-6);
}
.dh-card--dark {
    background: var(--dh-ink);
    color: #fff;
    border: none;
}
.dh-card--bank {
    border-radius: var(--dh-radius-3xl);
    padding: var(--dh-space-5);
    transition: border-color 150ms ease;
}
.dh-card--bank:hover,
.dh-card--library:hover {
    border-color: var(--dh-ink);
}
.dh-card--library {
    border-radius: var(--dh-radius-3xl);
    overflow: hidden;
    transition: border-color 150ms ease;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.dh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--dh-font-body);
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--dh-radius-xl);
    padding: 13px 26px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.dh-btn:focus-visible { outline: 2px solid var(--dh-ink); outline-offset: 2px; }

/* .dh-btn.dh-btn--variant (en vez de .dh-btn--variant a secas): un <a> con
   ambas clases necesita más especificidad que ".dh-scope a { color:inherit }"
   (tokens.css arriba) para que su color no vuelva a heredar el del fondo —
   así es como "Continuar lección" (blanco esperado) se volvía invisible
   sobre la tarjeta negra. */
.dh-btn.dh-btn--primary-dark { background: var(--dh-ink); color: #fff; }
.dh-btn.dh-btn--primary-dark:hover { background: var(--dh-ink-hover); color: #fff; }

.dh-btn.dh-btn--on-dark { background: #fff; color: var(--dh-ink); }
.dh-btn.dh-btn--on-dark:hover { background: var(--dh-accent); color: var(--dh-ink); }

.dh-btn.dh-btn--outline { background: transparent; color: var(--dh-ink-muted); border-color: var(--dh-border-strong); font-weight: 500; }
.dh-btn.dh-btn--outline:hover { background: var(--dh-bg); color: var(--dh-ink-muted); }

.dh-btn.dh-btn--quiet { background: transparent; color: var(--dh-ink-muted); border-color: var(--dh-border-strong); font-weight: 500; padding: 7px 14px; font-size: 14px; }
.dh-btn.dh-btn--quiet:hover { background: var(--dh-bg); }

.dh-btn--sm { padding: 11px 22px; font-size: 14px; border-radius: var(--dh-radius-lg); }

/* .dh-scope .dh-link (no ".dh-link" a secas): mismo motivo que los botones
   de arriba — un <a class="dh-link"> necesita más especificidad que
   ".dh-scope a { color:inherit }" para que gane su gris apagado. */
.dh-scope .dh-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--dh-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dh-scope .dh-link:hover { color: var(--dh-ink-muted); }
.dh-scope .dh-link--on-dark { color: var(--dh-text-faint); }
.dh-scope .dh-link--on-dark:hover { color: #fff; }

/* ------------------------------------------------------------
   CEFR badge / chip — solo lee de hsc_cefr_color() vía inline style
   Estas clases fijan la FORMA; el COLOR llega inline desde PHP.
   ------------------------------------------------------------ */
.dh-badge-cefr {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 12px;
    padding: 3px 7px;
    border-radius: var(--dh-radius-sm);
    line-height: 1.4;
}
.dh-chip {
    height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--dh-radius-xl);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}
.dh-chip--neutral {
    background: var(--dh-surface);
    border-color: var(--dh-border-strong);
    color: var(--dh-ink-muted);
}
.dh-chip--neutral-selected {
    background: var(--dh-ink);
    border-color: var(--dh-ink);
    color: #fff;
    font-weight: 600;
}
.dh-tag-official {
    font-family: var(--dh-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dh-ink-muted);
    border: 1px solid var(--dh-border-strong);
    padding: 3px 7px;
    border-radius: var(--dh-radius-sm);
}

/* ------------------------------------------------------------
   Progress — bar / ring / pips / week-strip, todas value/max
   ------------------------------------------------------------ */
.dh-progress-track {
    height: 6px;
    border-radius: var(--dh-radius-xs);
    background: var(--dh-fill-track);
    overflow: hidden;
}
.dh-progress-track--on-dark { background: var(--dh-on-dark-track); }
.dh-progress-track--thin { height: 5px; }
.dh-progress-fill {
    height: 100%;
    background: var(--dh-accent);
    transition: width 300ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .dh-progress-fill, .dh-ring-fill { transition: none; }
}

.dh-pips { display: flex; gap: 6px; }
.dh-pip { flex: 1; border-radius: var(--dh-radius-md); background: var(--dh-fill-track); }
.dh-pip--done { background: var(--dh-accent); }
.dh-pip--on-dark { background: var(--dh-on-dark-track); }
.dh-pip--on-dark.dh-pip--done { background: var(--dh-accent); }

.dh-ring {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dh-ring-inner {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--dh-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.dh-ring-count { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-family: var(--dh-font-headline); }
.dh-ring-unit { font-family: var(--dh-font-mono); font-size: 8px; letter-spacing: 0.08em; color: var(--dh-text-subtle); }

.dh-week-strip { display: flex; align-items: center; gap: 6px; }
.dh-week-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dh-week-bar { width: 100%; height: 5px; border-radius: var(--dh-radius-xs); background: var(--dh-fill-track); display: block; }
.dh-week-bar--done { background: var(--dh-accent); }
.dh-week-label { font-size: 11px; color: var(--dh-text-subtle); }
.dh-week-label--today { font-weight: 600; color: var(--dh-ink); }

.dh-chart { display: flex; align-items: flex-end; gap: 10px; height: 96px; }
.dh-chart-col { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.dh-chart-bar { width: 100%; border-radius: 5px 5px 0 0; background: var(--dh-accent); display: block; }
.dh-chart-bar--rest { height: 4px; border-radius: 2px; background: var(--dh-fill-track); }
.dh-chart-bar--today { background: var(--dh-accent-soft-fill); border: 1px dashed var(--dh-accent-soft-border); box-sizing: border-box; }
.dh-chart-label { font-size: 12px; color: var(--dh-text-subtle); }
.dh-chart-label--today { font-weight: 600; color: var(--dh-ink); }

/* ------------------------------------------------------------
   Search field
   ------------------------------------------------------------ */
.dh-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--dh-surface);
    border: 1px solid var(--dh-border-strong);
    border-radius: var(--dh-radius-xl);
    padding: 0 14px;
    height: 44px;
    flex: 1;
    min-width: 220px;
}
.dh-search:focus-within { border-color: var(--dh-ink); }
/* !important + [type="text"]: luz-saber.css tiene "body input[type=\"text\"]
   { background/border/radius ... !important }" (reset de formularios de
   todo el sitio) — esa regla tiene MÁS especificidad que un simple
   ".dh-search input" (que no iguala el selector de atributo), así que
   seguía ganando incluso con !important de este lado. Con
   "[type=\"text\"]" aquí también, ".dh-search input[type=\"text\"]" pasa a
   tener más especificidad y gana. Sin esto, el input quedaba con su propio
   fondo/borde grises DENTRO de la caja blanca de .dh-search, dando el
   aspecto de "caja recortada" dentro de la caja. */
.dh-search input,
.dh-search input[type="text"] {
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    border-radius: 0 !important;
    font-family: var(--dh-font-body) !important;
    font-size: 15px !important;
    color: var(--dh-ink) !important;
    width: 100%;
}
.dh-search input:focus,
.dh-search input[type="text"]:focus {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.dh-search-icon { width: 13px; height: 13px; border: 1.8px solid var(--dh-icon-faint); border-radius: 50%; display: block; flex-shrink: 0; }

/* ------------------------------------------------------------
   Layout shell shared by both screens
   ------------------------------------------------------------ */
/* 1384px = 1320px (spec) + 64px de padding lateral (--dh-space-8 × 2):
   los mockups no tienen reset box-sizing:border-box, así que su
   max-width:1320px se aplica solo al contenido y el padding se suma por
   fuera (ancho real renderizado 1384px). Este archivo sí fuerza
   border-box (línea de abajo, .dh-scope *), así que hay que subir el
   número para que coincida con el ancho real que se ve al abrir el
   mockup, no con su valor literal de max-width. */
.dh-main {
    max-width: 1384px;
    margin: 0 auto;
    padding: var(--dh-space-12) var(--dh-space-8) var(--dh-space-20);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--dh-space-10);
    align-items: start;
}
.dh-col-main { display: flex; flex-direction: column; gap: var(--dh-space-7); min-width: 0; }
.dh-aside { display: flex; flex-direction: column; gap: var(--dh-space-6); position: sticky; top: 108px; }

.dh-two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--dh-space-6); }
.dh-section { display: flex; flex-direction: column; gap: 22px; margin-top: var(--dh-space-5); }
.dh-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--dh-space-5); flex-wrap: wrap; }
.dh-filter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dh-chip-row { display: flex; gap: 6px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.dh-chip-row::-webkit-scrollbar { display: none; }

.dh-grid-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--dh-space-5); }
.dh-grid-banks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--dh-space-5); }
.dh-grid-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--dh-space-5); }

@media (max-width: 1100px) {
    .dh-main { grid-template-columns: 1fr; }
    .dh-aside { position: static; }
}
@media (max-width: 900px) {
    .dh-main { padding: 28px 18px; }
    .dh-h1 { font-size: 32px; }
}