/* ============================================================
   PEVAU TEMARIO · ESTILO COMPARTIDO
   Fusión: canaldocente.es/nueva (paleta + tipografía + nav)
          + MÉTODOS MATEMÁTICOS (componentes interactivos)
   ============================================================ */

:root{
  /* canaldocente — tokens base */
  --ink:#0B0A1F;
  --ink-2:#1A1733;
  --violet:#6E3AFF;
  --violet-deep:#4A1FC4;
  --coral:#FF5C5C;
  --mint:#00E5A8;
  --yellow:#FFE15C;
  --cream:#FAF6F0;
  --paper:#FFFDF8;
  --line:rgba(11,10,31,.10);
  --muted:#5C5878;

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;

  --container:min(1280px,92vw);
  --gutter:clamp(20px,4vw,40px);
  --r-card:18px;
  --r-pill:999px;

  /* roles didácticos heredados de MÉTODOS MATEMÁTICOS,
     reasignados a la paleta canaldocente */
  --pri:var(--violet);
  --ok:var(--mint);
  --warn:var(--yellow);
  --err:var(--coral);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cream);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.6;font-size:clamp(15.5px,.95rem + .15vw,17px)}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
p,li{text-wrap:pretty}
*:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:4px}

/* ===== NAV ===== */
.pevau-nav{position:sticky;top:0;z-index:50;background:rgba(250,246,240,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pevau-nav__inner{max-width:var(--container);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.pevau-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.pevau-brand__mark{width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--coral);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:16px}
.pevau-nav__links{display:flex;gap:4px;flex-wrap:wrap}
.pevau-nav__link{padding:8px 14px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;color:var(--ink-2);transition:all .18s}
.pevau-nav__link:hover,.pevau-nav__link.is-active{background:var(--ink);color:var(--paper)}
.pevau-nav__cta{margin-left:auto;display:flex;gap:10px}

/* ===== HEADER ===== */
.pevau-header{padding:48px var(--gutter) 32px;max-width:var(--container);margin:0 auto}
.pevau-header h1{font-size:clamp(36px,5vw,72px);line-height:.95;margin-bottom:12px}
.pevau-header h1 em{font-style:italic;font-weight:500;background:linear-gradient(120deg,var(--violet),var(--coral) 60%,var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.pevau-header .subtitle{font-size:clamp(15px,1.2vw,18px);color:var(--muted);max-width:680px}

/* ===== BUTTONS (heredado canaldocente) ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--r-pill);font-weight:600;font-size:14.5px;transition:all .2s;border:1.5px solid transparent;white-space:nowrap;min-height:44px}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--coral{background:var(--coral);color:#fff}
.btn--coral:hover{background:#ff4040;transform:translateY(-1px)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--violet)}
.btn--violet{background:var(--violet);color:#fff}
.btn--violet:hover{background:var(--violet-deep)}

/* ===== MAIN LAYOUT ===== */
.pevau-main{max-width:var(--container);margin:0 auto;padding:0 var(--gutter) 80px}

/* ===== TABS (heredadas MÉTODOS MATEMÁTICOS, restyled canaldocente) ===== */
.tab-bar{display:flex;gap:8px;background:transparent;padding:8px 0;margin-bottom:16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab-btn{flex:1 1 200px;padding:14px 18px;border-radius:var(--r-pill) var(--r-pill) 0 0;background:transparent;font-size:15px;font-weight:600;color:var(--muted);transition:.2s;border-bottom:3px solid transparent}
.tab-btn:hover{color:var(--ink);background:rgba(11,10,31,.04)}
.tab-btn.active{color:var(--ink);border-bottom-color:var(--coral);background:var(--paper)}
.tab-content{display:none}
.tab-content.active{display:block}

/* ===== CARDS DE UNIDAD ===== */
.units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:24px 0}
.unit-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:12px}
.unit-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px -24px rgba(11,10,31,.18)}
.unit-card-head{display:flex;align-items:center;gap:12px}
.unit-card-num{width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--coral);display:grid;place-items:center;font-family:var(--display);font-weight:800}
.unit-card-title{font-family:var(--display);font-weight:700;font-size:18px}
.unit-card-desc{color:var(--muted);font-size:14.5px;line-height:1.5}
.unit-card-link{margin-top:auto;font-weight:600;font-size:14px;color:var(--violet)}
.unit-card.c-exam{background:var(--ink);color:#fff}
.unit-card.c-exam .unit-card-title,.unit-card.c-exam .unit-card-desc{color:#fff}
.unit-card.c-exam .unit-card-desc{color:rgba(255,255,255,.7)}
.unit-card.c-exam .unit-card-num{background:var(--coral);color:#fff}
.unit-card.c-exam .unit-card-link{color:var(--yellow)}

/* ===== TOPIC SELECTOR ===== */
.topic-selector{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topic-selector label{font-weight:700;color:var(--ink);font-family:var(--display)}
.topic-selector select{flex:1;min-width:220px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--paper);font:inherit;color:var(--ink);cursor:pointer}
.topic-section{display:none}
.topic-section.active{display:block}

/* ===== BLOQUES DIDÁCTICOS (MÉTODOS MATEMÁTICOS, restyled) ===== */
.def-box,.prop-box,.example-box,.algo-box,.warn-box{
  border-left:4px solid;padding:16px 18px;margin:14px 0;
  border-radius:0 var(--r-card) var(--r-card) 0;
  font-size:15px;background:var(--paper)
}
.def-box  {border-color:var(--violet); background:#F4EDFF}
.prop-box {border-color:var(--mint);   background:#E4FFF5}
.example-box{border-color:var(--yellow);background:#FFF8D6}
.algo-box {border-color:var(--ink);    background:#EEEDF6}
.warn-box {border-color:var(--coral);  background:#FFE9E9}
.def-box strong,.prop-box strong,.example-box strong,.algo-box strong,.warn-box strong{display:block;margin-bottom:6px;font-family:var(--display);font-size:15px}

/* ===== CALCULADORAS Y FORMULARIOS ===== */
.interactive-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;margin:18px 0}
.interactive-box h4{color:var(--ink);margin-bottom:12px;font-family:var(--display);font-size:16px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.calc-grid label{font-size:13px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:4px}
.calc-grid input,.calc-grid select{width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:var(--paper)}
.calc-grid input:focus{border-color:var(--violet);outline:none}
.result-box{background:#F4EDFF;border:1px solid rgba(110,58,255,.25);border-radius:10px;padding:12px 14px;margin-top:10px;min-height:42px;font-size:14.5px}
.result-box .val{color:var(--violet-deep);font-weight:700;font-family:var(--mono)}
.plot-container{margin:14px 0;min-height:320px}

/* ===== TABLAS DE ITERACIÓN ===== */
table.dt{width:100%;border-collapse:collapse;margin:12px 0;font-size:13.5px;background:var(--paper)}
table.dt th,table.dt td{padding:8px 12px;border:1px solid var(--line);text-align:center}
table.dt th{background:var(--ink);color:var(--paper);font-weight:600;font-family:var(--display)}
table.dt tr:nth-child(even){background:rgba(11,10,31,.025)}
.iter-table{max-height:420px;overflow-y:auto;border-radius:10px;border:1px solid var(--line)}

/* ===== PROBLEMA PASO A PASO (tipo nuevo PEVAU) ===== */
.problem-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;margin-bottom:16px}
.problem-step__enunciado{font-size:15.5px;line-height:1.55;margin-bottom:14px;padding:14px;background:var(--cream);border-radius:10px}
.problem-step__paso{display:flex;gap:12px;padding:12px;border-radius:10px;margin-bottom:8px;background:var(--cream)}
.problem-step__paso .n{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--display);font-size:13px}
.problem-step__paso .pista{flex:1;font-size:14.5px;color:var(--ink-2)}
.problem-step__input{display:flex;gap:8px;margin-top:8px}
.problem-step__input input{flex:1;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit}
.problem-step__paso.ok  {background:#E4FFF5;border:1px solid var(--mint)}
.problem-step__paso.fail{background:#FFE9E9;border:1px solid var(--coral)}
.problem-step__hint{font-size:13px;color:var(--muted);margin-top:6px;font-style:italic}

/* ===== TEST DE AUTOEVALUACIÓN ===== */
.question-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;margin-bottom:14px}
.question-card h3{font-size:15.5px;margin-bottom:10px;color:var(--ink)}
.question-card .options label{display:block;padding:10px 14px;margin:6px 0;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;transition:.18s;font-size:14.5px}
.question-card .options label:hover{background:rgba(110,58,255,.06);border-color:var(--violet)}
.question-card .options input{margin-right:8px}
.question-card .feedback{margin-top:10px;padding:10px 14px;border-radius:10px;font-size:14px;display:none}
.question-card .feedback.correct{display:block;background:#E4FFF5;color:#0A7A5A}
.question-card .feedback.incorrect{display:block;background:#FFE9E9;color:#B22D2D}

/* ===== SIMULADOR (Pevau.simulator) ===== */
.pv-sim{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;margin:14px 0}
.pv-sim__ctrls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
.pv-sim__ctrl label{display:block;font-size:13.5px;color:var(--ink);margin-bottom:6px;font-weight:500}
.pv-sim__ctrl .pv-sim__val{color:var(--violet);font-weight:700}
.pv-sim__ctrl input[type=range]{width:100%;accent-color:var(--violet)}
.pv-sim__outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.pv-sim__out{background:rgba(110,58,255,.07);padding:10px 14px;border-radius:8px;border-left:3px solid var(--violet);font-size:14.5px}

/* ===== GENERADOR (Pevau.examGenerator) ===== */
.pv-gen{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;margin:14px 0}
.pv-gen__feedback{padding:10px 14px;border-radius:8px;font-size:14.5px}
.pv-gen__feedback.ok{background:#E4FFF5;color:#0A7A5A}
.pv-gen__feedback.fail{background:#FFE9E9;color:#B22D2D}
.pv-gen__sol-paso{margin:8px 0;padding:8px 12px;background:rgba(255,255,255,.7);border-radius:6px;line-height:1.5}

/* ===== BADGES ===== */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600}
.badge-easy{background:#E4FFF5;color:#0A7A5A}
.badge-med {background:#FFF8D6;color:#7A5A0A}
.badge-hard{background:#FFE9E9;color:#B22D2D}
.badge-pevau{background:var(--ink);color:var(--yellow)}
.badge-año {background:var(--violet);color:#fff}
.badge-conv-ord{background:var(--mint);color:var(--ink)}
.badge-conv-ext{background:var(--coral);color:#fff}

/* ===== SCORE BAR ===== */
.score-bar{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:18px;margin-bottom:18px;text-align:center}
.score-bar .score{font-family:var(--display);font-size:36px;font-weight:800;color:var(--coral)}

/* ===== KaTeX ajustes ===== */
.katex{font-size:1em!important}
.katex-display{margin:.6em 0!important}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .calc-grid{grid-template-columns:1fr}
  .pevau-header h1{font-size:36px}
  .tab-btn{flex-basis:100%}
}