/* ==========================================================
   verbos-ej.css — las páginas de verbos con el mismo diseño de
   ejercicioN.html: cabecera azul marino con progreso, tarjeta blanca
   redondeada, chips con "sombra" inferior y botón verde.
   Se activa con <body class="vd-ej">. Ver también verbos-didactico.css
   ========================================================== */
:root{
    --ej-navy:#10295a; --ej-navy-2:#1c3a74; --ej-navy-3:#2a4a86;
    --ej-blue:#3b9bff; --ej-blue-soft:#e3f0ff; --ej-line:#cfe3fb; --ej-chip-line:#d6e6fb;
    --ej-text:#10295a; --ej-muted:#64748b; --ej-green:#16b36a; --ej-green-2:#2fd186; --ej-red:#ef4444;
}
body.vd-ej{
    font-family:"Poppins","Segoe UI",Arial,Helvetica,sans-serif;
    color:var(--ej-text);
    background:linear-gradient(180deg,#f5f9ff 0%,#e9f3ff 100%);
    background-attachment:fixed;
    position:relative; overflow-x:hidden; -webkit-tap-highlight-color:transparent;
    --text-body:#26406b; --text-heading:#10295a; --text-muted:#64748b;
    --bg-page:#f3f8ff; --bg-card:#fff; --border-soft:#d6e6fb;
    --primary:#1f6fe0; --primary-dark:#1556b8; --primary-light:#3b9bff; --primary-lighter:#8fc2f7;
    --vd-pref:#e11d48; --vd-fin:#1f6fe0; --vd-soft:#eef6ff;
}
body.vd-ej::before,body.vd-ej::after{content:"";position:fixed;bottom:-90px;width:260px;height:260px;border-radius:50%;z-index:0;pointer-events:none;}
body.vd-ej::before{left:-90px;background:#cfe3fb;}
body.vd-ej::after{right:-90px;background:#bdeede;}

/* ---------- Cabecera ---------- */
.ej-top{position:relative;z-index:5;display:flex;align-items:center;gap:8px;padding:12px 12px 30px;background:var(--ej-navy);color:#fff;}
.ej-btn-circ{flex:0 0 auto;width:42px;height:42px;border:none;border-radius:50%;background:var(--ej-navy-2);color:#fff;display:grid;place-items:center;cursor:pointer;text-decoration:none;font-size:18px;line-height:1;transition:background .15s ease,transform .1s ease;padding:0;}
.ej-btn-circ:hover{background:var(--ej-navy-3);}
.ej-btn-circ:active{transform:scale(.94);}
.ej-btn-circ svg{width:22px;height:22px;}
.ej-btn-circ img{width:20px;height:20px;}
.ej-btn-circ .icono-luna{display:none;}
html.dark-mode .ej-btn-circ .icono-sol{display:none;}
html.dark-mode .ej-btn-circ .icono-luna{display:block;}
.ej-top-titulo{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;line-height:1.15;}
.ej-top-titulo .ej-estrella{font-size:20px;flex:0 0 auto;}
.ej-top-prog{flex:0 1 150px;min-width:96px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--ej-navy-2);}
.ej-barra{flex:1;height:10px;border-radius:999px;background:var(--ej-navy-3);overflow:hidden;}
.ej-barra i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--ej-green-2),var(--ej-green));transition:width .35s ease;}
.ej-top .progreso{font-size:12.5px;font-weight:700;white-space:nowrap;}

/* ---------- Tarjeta ---------- */
.contenedor{position:relative;z-index:10;width:100%;max-width:980px;margin:-18px auto 0;padding:0 14px 40px;}
.panel{background:#fff;border:1px solid var(--ej-line);border-radius:28px;padding:6px 6px 10px;box-shadow:0 10px 30px rgba(16,41,90,.10);}
body.vd-ej .lesson-main{max-width:none;padding:14px 12px 28px;}
body.vd-ej .lesson-hero{margin-bottom:16px;padding:14px 16px;border-radius:20px;background:var(--ej-blue-soft);text-align:left;}
body.vd-ej .lesson-hero h1{display:none;}
body.vd-ej .lesson-hero p{margin:0;font-size:14px;line-height:1.55;color:var(--ej-text);}
body.vd-ej .lesson-section{background:transparent;box-shadow:none;border:none;padding:0;margin:0 0 22px;}
body.vd-ej .lesson-section h2{font-size:1.1rem;font-weight:800;color:var(--ej-text);text-align:left;margin:6px 2px 10px;}
body.vd-ej .lesson-section h2::after{content:"";display:block;width:48px;height:4px;margin:5px 0 0;border-radius:4px;background:#5fe0b3;}
body.vd-ej .vd-sec h2{font-size:1.25rem;}
body.vd-ej .lesson-footer{border-top:1px solid var(--ej-line);color:var(--ej-muted);margin-top:26px;}

/* ---------- Tablas ---------- */
body.vd-ej .lesson-table-wrap{border:2px solid var(--ej-line);border-radius:22px;box-shadow:none;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;}
body.vd-ej .lesson-table thead{background:var(--ej-navy);}
body.vd-ej .lesson-table tbody tr:nth-child(even){background:#f6faff;}
body.vd-ej .lesson-table tbody tr:hover{background:var(--ej-blue-soft);}
body.vd-ej .lesson-table td{border-bottom:1px solid #e4eefb;color:var(--ej-text);}
body.vd-ej .lesson-table td.word,body.vd-ej .lesson-table td .word{color:var(--ej-navy);font-weight:800;}
body.vd-ej .lesson-table td.ipa{color:#1f6fe0;}
body.vd-ej .lesson-table td.example em,body.vd-ej .vd-ex-es{color:var(--ej-muted);}
body.vd-ej .audio-btn{background:var(--ej-blue);box-shadow:0 3px 8px rgba(59,155,255,.4);}
body.vd-ej .audio-btn:hover{background:#2a88ee;}
body.vd-ej .audio-btn-sm{background:var(--ej-blue);width:26px;height:26px;}
body.vd-ej .vd-table tbody tr.vd-row.open,body.vd-ej tr.vd-detail td{background:var(--ej-blue-soft) !important;}
body.vd-ej .vd-table td.vd-irr{background:rgba(245,158,11,.20);}
body.vd-ej .vd-table td.vd-clk:hover{background:var(--ej-blue-soft);}

/* ---------- Tarjetas, notas, chips y botones ---------- */
body.vd-ej .vd-card,body.vd-ej .vd-exbox{background:#fff;border:2px solid var(--ej-line);border-radius:22px;box-shadow:none;}
body.vd-ej .vd-exbox{border-left-width:5px;border-radius:16px;}
body.vd-ej .vd-card h3,body.vd-ej .vd-h3{color:var(--ej-text);}
body.vd-ej .vd-num{background:var(--ej-blue);}
body.vd-ej .vd-pill,body.vd-ej .vd-form,body.vd-ej .vd-persons div,body.vd-ej .vd-note{background:#f3f8ff;border-color:var(--ej-chip-line);}
body.vd-ej .vd-note{border-left:4px solid var(--ej-blue);}
body.vd-ej .vd-note.pf{border-left-color:#8b5cf6;}
body.vd-ej .vd-note.tp{border-left-color:var(--ej-green);}
body.vd-ej .note,body.vd-ej .tip{background:var(--ej-blue-soft);border-left:6px solid var(--ej-blue);border-radius:18px;box-shadow:none;}
body.vd-ej .note p,body.vd-ej .tip p{color:var(--ej-text);}
body.vd-ej .vd-chip,body.vd-ej .vd-az a,body.vd-ej .vd-jump a{font-family:inherit;background:#fff;border:2px solid var(--ej-chip-line);border-radius:18px;box-shadow:0 3px 0 #e4eefb;color:var(--ej-text);transition:transform .1s ease,border-color .15s ease,background .15s ease;}
body.vd-ej .vd-chip:hover,body.vd-ej .vd-az a:hover,body.vd-ej .vd-jump a:hover{border-color:var(--ej-blue);background:#fff;color:var(--ej-text);}
body.vd-ej .vd-chip:active{transform:translateY(2px);box-shadow:0 1px 0 #e4eefb;}
body.vd-ej .vd-chip.on{background:var(--ej-blue-soft);border-color:var(--ej-blue);color:var(--ej-navy);}
body.vd-ej .vd-toggle{border:2px dashed #a9cdf5;color:var(--ej-muted);background:transparent;}
body.vd-ej .vd-toggle.on{background:var(--ej-navy);border-style:solid;border-color:var(--ej-navy);color:#fff;}
body.vd-ej .vd-search,body.vd-ej .vd-lab select{font-family:inherit;background:#fff;border:2px solid var(--ej-chip-line);color:var(--ej-text);}
body.vd-ej .vd-search:focus{outline:none;border-color:var(--ej-blue);}
body.vd-ej .vd-prog{background:#dbe9fb;}
body.vd-ej .vd-prog>i{background:linear-gradient(90deg,var(--ej-green-2),var(--ej-green));}
body.vd-ej .vd-star.on{color:#f59e0b;}
body.vd-ej .vd-btn{font-family:inherit;border-radius:999px;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--ej-green-2),var(--ej-green));box-shadow:0 6px 16px rgba(22,179,106,.35);padding:12px 24px;}
body.vd-ej .vd-btn:hover{filter:brightness(1.05);background:linear-gradient(180deg,var(--ej-green-2),var(--ej-green));}
body.vd-ej .vd-btn:active{transform:translateY(2px);box-shadow:0 3px 8px rgba(22,179,106,.35);}
body.vd-ej .vd-btn.ghost{background:transparent;color:var(--ej-navy);border:2px solid var(--ej-chip-line);box-shadow:none;}
body.vd-ej .vd-btn.ghost:hover{background:var(--ej-blue-soft);}

/* ---------- Práctica (mismo look que la caja de la oración y las palabras) ---------- */
body.vd-ej .vd-quiz{border:2px solid var(--ej-line);border-radius:22px;background:linear-gradient(180deg,#f8fbff,#eef6ff);box-shadow:none;}
body.vd-ej .vd-quiz h3,body.vd-ej .vd-q-prompt{color:var(--ej-text);}
body.vd-ej .vd-q-tag{color:var(--ej-blue);}
body.vd-ej .vd-opt{font-family:inherit;background:#fff;border:2px solid var(--ej-chip-line);border-radius:18px;box-shadow:0 3px 0 #e4eefb;color:var(--ej-text);}
body.vd-ej .vd-opt:hover:not(:disabled){border-color:var(--ej-blue);transform:none;}
body.vd-ej .vd-opt.ok{border-color:#22c55e;background:#f0fdf4;color:#15803d;}
body.vd-ej .vd-opt.bad{border-color:var(--ej-red);background:#fef2f2;color:#b91c1c;}
body.vd-ej .vd-input{font-family:inherit;background:#fff;border:2px solid var(--ej-chip-line);border-radius:18px;color:var(--ej-text);}
body.vd-ej .vd-input:focus{border-color:var(--ej-blue);}
body.vd-ej .vd-result .big{color:var(--ej-green);}
body.vd-ej .vd-lab-out{background:#fff;border:2px dashed #8fc2f7;color:var(--ej-text);}

@media(max-width:380px){
    .ej-top{gap:6px;padding-left:8px;padding-right:8px;}
    .ej-btn-circ{width:38px;height:38px;}
    .ej-top-titulo{font-size:10.5px;}
    .ej-top-prog{min-width:88px;padding:7px 9px;}
}
@media(min-width:700px){
    .contenedor{padding-top:8px;}
    .ej-top{padding-left:max(16px,calc((100% - 980px)/2));padding-right:max(16px,calc((100% - 980px)/2));}
    .ej-top-titulo{font-size:13px;}
    body.vd-ej .lesson-main{padding:20px 22px 34px;}
}

/* ---------- Modo oscuro (mismos tonos que ejercicioN) ---------- */
html.dark-mode body.vd-ej{
    background:linear-gradient(180deg,#0b1220,#0e1a30);color:#e5efff;
    --text-body:#cbd5e1; --text-heading:#f1f5f9; --text-muted:#9db3d4;
    --bg-page:#13223d; --bg-card:#14233f; --border-soft:#2a4068;
    --primary:#6aa9ff; --primary-dark:#4d8ee8; --primary-lighter:#4a78b8;
    --vd-pref:#fb7185; --vd-fin:#7db8ff; --vd-soft:rgba(59,155,255,.14);
}
html.dark-mode body.vd-ej::before{background:#14305a;}
html.dark-mode body.vd-ej::after{background:#0f3b3a;}
html.dark-mode .ej-top{background:#0a1836;}
html.dark-mode .panel{background:#111c33;border-color:#26406b;box-shadow:0 10px 30px rgba(0,0,0,.35);}
html.dark-mode body.vd-ej .lesson-hero{background:#1c3358;}
html.dark-mode body.vd-ej .lesson-hero p,html.dark-mode body.vd-ej .lesson-section h2,html.dark-mode body.vd-ej .vd-card h3,html.dark-mode body.vd-ej .vd-quiz h3,html.dark-mode body.vd-ej .vd-q-prompt,html.dark-mode body.vd-ej .note p,html.dark-mode body.vd-ej .tip p{color:#e5efff;}
html.dark-mode body.vd-ej .lesson-table-wrap,html.dark-mode body.vd-ej .vd-card,html.dark-mode body.vd-ej .vd-exbox{background:#14233f;border-color:#2a4068;}
html.dark-mode body.vd-ej .lesson-table thead{background:#0a1836;}
html.dark-mode body.vd-ej .lesson-table td{color:#e5efff;border-bottom-color:#23385c;}
html.dark-mode body.vd-ej .lesson-table tbody tr:nth-child(even){background:#122038;}
html.dark-mode body.vd-ej .lesson-table tbody tr:hover{background:rgba(59,155,255,.16);}
html.dark-mode body.vd-ej .lesson-table td.word,html.dark-mode body.vd-ej .lesson-table td .word{color:#9cc8ff;}
html.dark-mode body.vd-ej .lesson-table td.ipa{color:#7db8ff;}
html.dark-mode body.vd-ej .vd-pill,html.dark-mode body.vd-ej .vd-form,html.dark-mode body.vd-ej .vd-persons div,html.dark-mode body.vd-ej .vd-note{background:#182945;border-color:#2a4068;color:#e5efff;}
html.dark-mode body.vd-ej .note,html.dark-mode body.vd-ej .tip{background:#1c3358;}
html.dark-mode body.vd-ej .vd-chip,html.dark-mode body.vd-ej .vd-az a,html.dark-mode body.vd-ej .vd-jump a,html.dark-mode body.vd-ej .vd-opt,html.dark-mode body.vd-ej .vd-search,html.dark-mode body.vd-ej .vd-lab select,html.dark-mode body.vd-ej .vd-input,html.dark-mode body.vd-ej .vd-lab-out{background:#182945;border-color:#2a4068;color:#e5efff;box-shadow:0 3px 0 #0d1830;}
html.dark-mode body.vd-ej .vd-input,html.dark-mode body.vd-ej .vd-search{box-shadow:none;}
html.dark-mode body.vd-ej .vd-chip.on{background:#1c3358;border-color:#4a78b8;color:#fff;}
html.dark-mode body.vd-ej .vd-quiz{background:linear-gradient(180deg,#14233f,#122038);border-color:#2a4068;}
html.dark-mode body.vd-ej .vd-opt.ok{background:rgba(34,197,94,.16);border-color:#22c55e;color:#86efac;}
html.dark-mode body.vd-ej .vd-opt.bad{background:rgba(239,68,68,.16);border-color:#ef4444;color:#fca5a5;}
html.dark-mode body.vd-ej tr.vd-detail td,html.dark-mode body.vd-ej .vd-table tbody tr.vd-row.open{background:#1a2f52 !important;}
html.dark-mode body.vd-ej .vd-prog{background:#26406b;}
html.dark-mode body.vd-ej .lesson-footer{border-top-color:#26406b;}
@media(prefers-reduced-motion:reduce){ body.vd-ej *{transition:none !important;animation:none !important;} }
body.vd-ej .ej-btn-circ.btn-modo-oscuro{width:42px;height:42px;background:var(--ej-navy-2);color:#fff;}
body.vd-ej .ej-btn-circ.btn-modo-oscuro:hover{background:var(--ej-navy-3);}
body.vd-ej .ej-btn-circ.btn-modo-oscuro img{width:20px;height:20px;}
@media(max-width:380px){ body.vd-ej .ej-btn-circ.btn-modo-oscuro{width:38px;height:38px;} }