/* weakareas.v2.css — Cajón derecho «Prioridades de repaso», rediseño fase 1
 * con el acabado visual de la referencia 11f (14-09-2026).
 *
 * Spec: desarrollo/seccion-ui-specs/11_spec_cajon_derecho_temas_flojos.md (v4).
 * Referencia visual: desarrollo/seccion-ui-specs/11f_referencia_visual_cajon_derecho.md.
 * Se carga SOLO con el flag `theme_remui/weakareasredesign` activo para el curso
 * (layout/common_end.php). Con el flag apagado esta hoja no llega al navegador y
 * el bloque se pinta exactamente como siempre.
 *
 * Todo está acotado a `#theme_remui-drawers-blocks .block_weakareas` (§4.6).
 * El radio del propio panel del cajón NO va aquí: es común a los dos cajones y
 * se resuelve en la tanda del cajón izquierdo.
 *
 * Los tokens `--wa-*` de partida están COPIADOS de courseindex.v2.css §1 y §2.
 * Las ADICIONES de esta ronda visual van marcadas «(11f)» y con su contraste.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens (§4.1)
 * ------------------------------------------------------------------ */

#theme_remui-drawers-blocks .block_weakareas {
    /* superficie: panel blanco (11f §6); las tarjetas se distinguen por borde */
    --wa-canvas: #fff;
    --wa-card: #fff;
    --wa-well: #f6f8fb;
    --wa-card-border: rgb(16 42 67 / .08);
    --wa-card-shadow: 0 1px 2px rgb(16 42 67 / .04);
    --wa-card-radius: 14px;
    --wa-sub-radius: 10px;
    --wa-btn-radius: 10px;
    --wa-item-hover: rgb(98 168 234 / .08);
    /* texto */
    --wa-text: #37474f;
    --wa-text-strong: #222c31;
    --wa-text-muted: #6a737b;
    --wa-accent: #62a8ea;
    --wa-accent-strong: #0051f9;
    /* (11f) contorno del botón «Repasar»: 5,9:1 sobre blanco; en oscuro pasa a
     * --wa-accent (#0051f9 sobre #1a1f27 solo da 2,8:1). */
    --wa-btn-outline: #0051f9;
    /* estado */
    --wa-done: #1e8e3e;
    --wa-fail: #c5221f;
    --wa-lock: #8a94a6;
    --wa-track: #e5e7eb;
    --wa-ring: #c3cbd6;
    /* azulejo y pastillas */
    --wa-tile-tests: #fee2e2;
    --wa-type-tests: #b91c1c;
    --wa-tile-other: #e9edf2;
    /* banda «A medias» (§4.1). Medido 6,7:1. */
    --wa-warn: #ffc107;
    --wa-tile-warn: #fff3cd;
    --wa-type-warn: #7a4b00;
    /* (11f) tarjeta de racha: crema. muted sobre crema 4,6:1; strong 13,7:1 */
    --wa-streak-bg: #fff7e6;
    --wa-streak-border: rgb(122 75 0 / .08);
    /* (11f) tarjeta de aviso: azul muy claro. título 9,3:1; texto 8,4:1 */
    --wa-notice-bg: #eaf3fe;
    --wa-notice-border: #c7ddf8;
    --wa-notice-title: #1b3f7a;
    --wa-notice-icon: #1b3f7a;
    /* (11f) aviso «todo bien» (S3): verde. título 7,4:1 */
    --wa-tile-done: #dcfce7;
    --wa-type-done: #166534;
    /* métrica */
    --wa-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wa-pad: 16px;
    --wa-gap: 12px;
    --wa-num: 36px;
}

/* ------------------------------------------------------------------ *
 * 2. Modo oscuro (§4.5)
 *
 * Lo aplica el bundle de NightEye marcando la raíz con
 * html[nighteyeplgn="active"] (theme/remui/js/bundle.js). Solo tokens.
 * ------------------------------------------------------------------ */

html[nighteyeplgn="active"] #theme_remui-drawers-blocks .block_weakareas {
    --wa-canvas: #151a21;
    --wa-card: #1a1f27;
    --wa-well: #151a21;
    --wa-card-border: rgb(255 255 255 / .09);
    --wa-card-shadow: 0 1px 2px rgb(0 0 0 / .4);
    --wa-item-hover: rgb(255 255 255 / .06);
    --wa-text: #d6dbe1;
    --wa-text-strong: #f2f4f7;
    --wa-text-muted: #98a2b3;
    --wa-btn-outline: #62a8ea;
    --wa-done: #4ade80;
    --wa-fail: #f87171;
    --wa-lock: #7b8496;
    --wa-track: #2b323c;
    --wa-ring: #4b5563;
    --wa-tile-tests: rgb(248 113 113 / .2);
    --wa-type-tests: #fca5a5;
    --wa-tile-other: rgb(255 255 255 / .08);
    --wa-tile-warn: rgb(251 191 36 / .22);
    --wa-type-warn: #fcd34d;
    --wa-streak-bg: rgb(251 191 36 / .12);
    --wa-streak-border: rgb(251 191 36 / .18);
    --wa-notice-bg: rgb(98 168 234 / .12);
    --wa-notice-border: rgb(98 168 234 / .3);
    --wa-notice-title: #9cc7f5;
    --wa-notice-icon: #9cc7f5;
    --wa-tile-done: rgb(74 222 128 / .16);
    --wa-type-done: #86efac;
}

/* ------------------------------------------------------------------ *
 * 3. Lienzo del bloque y cabecera (11f §1 y §6)
 *
 * El lienzo se pinta sobre el propio bloque y no sobre `#theme_remui-drawers-blocks`
 * para no repintar otros bloques que compartan el cajón (§4.6 acota a .block_weakareas).
 * ------------------------------------------------------------------ */

#theme_remui-drawers-blocks .block_weakareas {
    background: var(--wa-canvas);
    border: 0;
    box-shadow: none;
    font-family: var(--wa-font);
    color: var(--wa-text);
}

#theme_remui-drawers-blocks .block_weakareas .card-body,
#theme_remui-drawers-blocks .block_weakareas .card-text {
    background: transparent;
}

/* Cabecera del bloque (la pinta remui: h4.block-header). Título grande y
 * casi negro; el subtítulo va justo debajo, en el primer nodo del contenido. */
#theme_remui-drawers-blocks .block_weakareas .block-header-wrapper {
    padding: 20px 20px 0;
}

#theme_remui-drawers-blocks .block_weakareas .block-header {
    margin: 0;
    font-family: var(--wa-font);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--wa-text-strong);
}

#theme_remui-drawers-blocks .block_weakareas .block-content-area {
    padding: 6px 20px 20px;
}

#theme_remui-drawers-blocks .block_weakareas .wa-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--wa-gap);
    font-family: var(--wa-font);
    line-height: 1.45;
    color: var(--wa-text);
}

#theme_remui-drawers-blocks .block_weakareas .wa-subtitle {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--wa-text-muted);
}

/* ------------------------------------------------------------------ *
 * 4. Tarjeta de racha (11f §2)
 * ------------------------------------------------------------------ */

#theme_remui-drawers-blocks .block_weakareas .wa-streak {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px var(--wa-pad);
    border-radius: var(--wa-card-radius);
    background: var(--wa-streak-bg);
    border: 1px solid var(--wa-streak-border);
}

#theme_remui-drawers-blocks .block_weakareas .wa-streak-icon {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1;
}

#theme_remui-drawers-blocks .block_weakareas .wa-streak-text {
    min-width: 0;
}

#theme_remui-drawers-blocks .block_weakareas .wa-streak-line {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: var(--wa-text-strong);
}

#theme_remui-drawers-blocks .block_weakareas .wa-streak-num {
    font-size: 22px;
    font-weight: 800;
    margin-right: 2px;
}

#theme_remui-drawers-blocks .block_weakareas .wa-streak-cheer {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--wa-text-muted);
}

/* ------------------------------------------------------------------ *
 * 5. Tarjeta de aviso (11f §3) y estados vacíos (§4.3, misma familia)
 * ------------------------------------------------------------------ */

#theme_remui-drawers-blocks .block_weakareas .wa-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px var(--wa-pad);
    border-radius: var(--wa-card-radius);
    background: var(--wa-notice-bg);
    border: 1px solid var(--wa-notice-border);
}

#theme_remui-drawers-blocks .block_weakareas .wa-notice-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wa-card);
    color: var(--wa-notice-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Iconos SVG en línea (la Font Awesome del tema está recortada): tamaño
   aquí, color heredado por currentColor. */
#theme_remui-drawers-blocks .block_weakareas .wa-svg {
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

#theme_remui-drawers-blocks .block_weakareas .wa-notice-icon .wa-svg {
    width: 24px;
    height: 24px;
}

#theme_remui-drawers-blocks .block_weakareas .wa-notice-text {
    flex: 1 1 auto;
    min-width: 0;
}

#theme_remui-drawers-blocks .block_weakareas .wa-heading {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--wa-notice-title);
}

#theme_remui-drawers-blocks .block_weakareas .wa-notice-body {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wa-text);
}

#theme_remui-drawers-blocks .block_weakareas .wa-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--wa-text-muted);
    white-space: nowrap;
}

/* S3: la misma tarjeta en verde. */
#theme_remui-drawers-blocks .block_weakareas .wa-notice-done {
    background: var(--wa-tile-done);
    border-color: transparent;
}

#theme_remui-drawers-blocks .block_weakareas .wa-notice-done .wa-notice-icon,
#theme_remui-drawers-blocks .block_weakareas .wa-notice-done .wa-heading {
    color: var(--wa-type-done);
}

#theme_remui-drawers-blocks .block_weakareas .wa-cta {
    margin-top: 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: var(--wa-btn-radius);
    background: var(--wa-accent-strong);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

#theme_remui-drawers-blocks .block_weakareas .wa-cta:hover,
#theme_remui-drawers-blocks .block_weakareas .wa-cta:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.08);
}

#theme_remui-drawers-blocks .block_weakareas .wa-cta:focus-visible {
    outline: 2px solid var(--wa-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 6. Tarjetas de tema (11f §4)
 * ------------------------------------------------------------------ */

#theme_remui-drawers-blocks .block_weakareas .wa-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--wa-gap);
}

#theme_remui-drawers-blocks .block_weakareas .wa-row {
    display: grid;
    grid-template-columns: var(--wa-num) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
    padding: var(--wa-pad);
    border-radius: var(--wa-card-radius);
    background: var(--wa-card);
    border: 1px solid var(--wa-card-border);
    box-shadow: var(--wa-card-shadow);
    color: var(--wa-text);
    text-decoration: none;
}

#theme_remui-drawers-blocks .block_weakareas a.wa-row:hover,
#theme_remui-drawers-blocks .block_weakareas a.wa-row:focus {
    border-color: var(--wa-accent);
    text-decoration: none;
    color: var(--wa-text);
}

#theme_remui-drawers-blocks .block_weakareas a.wa-row:focus-visible {
    outline: 2px solid var(--wa-accent);
    outline-offset: 2px;
}

#theme_remui-drawers-blocks .block_weakareas .wa-num {
    grid-column: 1;
    width: var(--wa-num);
    height: var(--wa-num);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
}

#theme_remui-drawers-blocks .block_weakareas .wa-top {
    grid-column: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: var(--wa-num);
}

#theme_remui-drawers-blocks .block_weakareas .wa-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--wa-text-strong);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#theme_remui-drawers-blocks .block_weakareas .wa-band {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

#theme_remui-drawers-blocks .block_weakareas .wa-num.wa-band-weak,
#theme_remui-drawers-blocks .block_weakareas .wa-band.wa-band-weak {
    background: var(--wa-tile-tests);
    color: var(--wa-type-tests);
}

#theme_remui-drawers-blocks .block_weakareas .wa-num.wa-band-medium,
#theme_remui-drawers-blocks .block_weakareas .wa-band.wa-band-medium {
    background: var(--wa-tile-warn);
    color: var(--wa-type-warn);
}

#theme_remui-drawers-blocks .block_weakareas .wa-body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#theme_remui-drawers-blocks .block_weakareas .wa-bar {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--wa-track);
    overflow: hidden;
}

#theme_remui-drawers-blocks .block_weakareas .wa-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    /* Sin transición en el primer pintado (§4.2). */
    transition: none;
}

#theme_remui-drawers-blocks .block_weakareas .wa-bar-fill.wa-band-weak {
    background: var(--wa-fail);
}

#theme_remui-drawers-blocks .block_weakareas .wa-bar-fill.wa-band-medium {
    background: var(--wa-warn);
}

#theme_remui-drawers-blocks .block_weakareas .wa-detail {
    font-size: 12px;
    color: var(--wa-text-muted);
}

#theme_remui-drawers-blocks .block_weakareas .wa-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

#theme_remui-drawers-blocks .block_weakareas .wa-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: var(--wa-btn-radius);
    border: 1px solid var(--wa-btn-outline);
    background: var(--wa-card);
    color: var(--wa-btn-outline);
    font-size: 14px;
    font-weight: 600;
}

#theme_remui-drawers-blocks .block_weakareas a.wa-row:hover .wa-btn,
#theme_remui-drawers-blocks .block_weakareas a.wa-row:focus .wa-btn {
    background: var(--wa-item-hover);
}

/* ------------------------------------------------------------------ *
 * 7. Pie (11f §5)
 * ------------------------------------------------------------------ */

#theme_remui-drawers-blocks .block_weakareas .wa-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
    padding-top: var(--wa-pad);
    border-top: 1px solid var(--wa-card-border);
}

#theme_remui-drawers-blocks .block_weakareas .wa-foot-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--wa-card-border);
    border-radius: var(--wa-btn-radius);
    background: var(--wa-card);
    font-size: 14px;
    font-weight: 600;
    color: var(--wa-text-strong);
    text-align: center;
    text-decoration: none;
}

#theme_remui-drawers-blocks .block_weakareas .wa-foot-btn:hover,
#theme_remui-drawers-blocks .block_weakareas .wa-foot-btn:focus {
    background: var(--wa-item-hover);
    text-decoration: none;
    color: var(--wa-text-strong);
}

#theme_remui-drawers-blocks .block_weakareas .wa-foot-btn-primary,
#theme_remui-drawers-blocks .block_weakareas .wa-foot-btn-primary:hover,
#theme_remui-drawers-blocks .block_weakareas .wa-foot-btn-primary:focus {
    background: var(--wa-accent-strong);
    border-color: var(--wa-accent-strong);
    color: #fff;
}

#theme_remui-drawers-blocks .block_weakareas .wa-foot-btn-primary:hover,
#theme_remui-drawers-blocks .block_weakareas .wa-foot-btn-primary:focus {
    filter: brightness(1.08);
}

#theme_remui-drawers-blocks .block_weakareas .wa-foot-btn:focus-visible {
    outline: 2px solid var(--wa-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 8. Táctil y anchos pequeños (§4.4, §5)
 * ------------------------------------------------------------------ */

@media (hover: none) {
    #theme_remui-drawers-blocks .block_weakareas .wa-btn,
    #theme_remui-drawers-blocks .block_weakareas .wa-cta {
        min-height: 44px;
    }
}

@media (max-width: 359px) {
    #theme_remui-drawers-blocks .block_weakareas .wa-footer {
        grid-template-columns: 1fr;
    }
}