/* ============================================================
   Fuentes incrustadas localmente (funciona 100% sin internet)
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/fraunces-500.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fraunces-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jetbrains-mono-700.woff2') format('woff2')}

/* ============================================================
   Calculadora de Arquitectura — tema "Limpio premium"
   ============================================================ */
:root{
  --bg:#f6f4ef;
  --panel:#fffdfa;
  --panel2:#faf7f2;
  --ink:#1c1a17;
  --dim:#8a857c;
  --accent:#c2410c;
  --accent2:#ea580c;
  --soft:#fbe9dd;
  --line:#ece7df;
  --ok:#0f766e;
  --error:#b42318;
  --warn:#b45309;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --sombra:0 1px 2px rgba(60,40,20,.04), 0 22px 50px -28px rgba(120,70,30,.25);
}
[data-tema="oscuro"]{
  --bg:#14110d;
  --panel:#1d1813;
  --panel2:#241d16;
  --ink:#f1ebe2;
  --dim:#a8a094;
  --accent:#fb923c;
  --accent2:#f97316;
  --soft:#33271c;
  --line:#352c22;
  --ok:#2dd4bf;
  --error:#fca5a5;
  --warn:#fbbf24;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 24px 54px -30px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 88% -8%, var(--soft), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;align-self:start;height:100vh;
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:26px 18px;
  display:flex;flex-direction:column;gap:6px;
}
.logo{
  font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.4px;margin:0 6px 8px;
}
.logo span{display:block;font-family:var(--body);font-size:11px;color:var(--dim);
  letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-top:4px}
.contenido{padding:38px 40px}

/* ---------- Menú lateral ---------- */
#menu{margin-top:16px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.menu-seccion{margin-bottom:4px}
.menu-titulo{
  display:flex;justify-content:space-between;align-items:center;
  font-weight:700;font-size:13px;letter-spacing:.4px;color:var(--ink);
  padding:10px 12px;border-radius:11px;cursor:pointer;user-select:none;
  text-transform:uppercase;
}
.menu-titulo:hover{background:var(--panel2)}
.menu-titulo span:last-child{color:var(--dim);font-size:11px;transition:transform .25s}
.menu-seccion.abierta .menu-titulo span:last-child{transform:rotate(180deg)}
.menu-sub{display:none;flex-direction:column;gap:1px;padding:2px 0 6px 4px}
.menu-seccion.abierta .menu-sub{display:flex;animation:fade .3s ease}
.menu-sub button{
  text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:13.5px;font-weight:500;color:#6b655c;
  padding:9px 12px;border-radius:10px;transition:.15s;
}
[data-tema="oscuro"] .menu-sub button{color:#b8b1a6}
.menu-sub button:hover{background:var(--panel2);color:var(--ink)}
.menu-sub button.activa{color:var(--accent);background:var(--soft);font-weight:700}
.toggle-tema{
  margin-top:auto;font-family:var(--body);font-weight:600;font-size:13px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  padding:11px;border-radius:12px;cursor:pointer;transition:.2s;
}
.toggle-tema:hover{border-color:var(--accent2);color:var(--accent)}

/* ---------- Tarjetas y formularios ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:30px;max-width:760px;margin:0 auto 22px;box-shadow:var(--sombra);
  animation:rise .4s ease;
}
.card h2{font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-.4px;margin:0 0 20px}
.campo{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}
.campo label{font-size:12px;color:var(--dim);font-weight:600}
.campo input,.campo select{
  font-family:var(--mono);font-size:15px;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  transition:.18s;
}
.campo input:focus,.campo select:focus{
  outline:none;border-color:var(--accent2);box-shadow:0 0 0 4px var(--soft);
}
.rango-info{font-size:13px;color:var(--dim);margin:-6px 0 16px;font-weight:500}

/* ---------- Botones ---------- */
.btn{
  font-family:var(--body);font-weight:700;font-size:14px;cursor:pointer;
  background:linear-gradient(120deg,var(--accent2),var(--accent));color:#fff;border:none;
  padding:12px 20px;border-radius:12px;transition:.2s;
  box-shadow:0 12px 26px -12px rgba(194,65,12,.55);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(194,65,12,.6)}
.btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.btn.secundario{
  background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:none;font-weight:600;
}
.btn.secundario:hover{border-color:var(--accent2);color:var(--accent);transform:none}

/* ---------- Resultado ---------- */
.resultado{
  margin-top:22px;padding:18px 20px;border-radius:14px;
  background:var(--soft);border:1px solid var(--line);
  font-family:var(--mono);font-size:18px;font-weight:700;color:var(--ink);
  word-break:break-all;line-height:1.5;
}
.error{
  margin-top:14px;padding:12px 16px;border-radius:12px;
  background:rgba(180,35,24,.08);border-left:3px solid var(--error);
  color:var(--error);font-size:14px;font-weight:600;
}

/* ---------- Tabla de pasos (estática) ---------- */
.pasos{margin-top:16px;border-collapse:separate;border-spacing:0;width:100%;
  font-family:var(--mono);font-size:13.5px;overflow:hidden;border-radius:12px;border:1px solid var(--line)}
.pasos th,.pasos td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
.pasos th{background:var(--panel2);color:var(--dim);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.5px}
.pasos tr:last-child td{border-bottom:none}
.pasos tbody tr:hover{background:var(--panel2)}

.oculto{display:none}

/* ============================================================
   Reproductor paso a paso (registros)
   ============================================================ */
.reproductor{
  margin-top:16px;padding:22px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
}
.rep-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px;flex-wrap:wrap}
.rep-ciclo{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--accent)}
.rep-prog{display:flex;gap:8px;align-items:center}
.rep-dot{width:9px;height:9px;border-radius:50%;background:var(--line);transition:.3s}
.rep-dot.hecho{background:var(--accent2)}
.rep-dot.ahora{background:var(--accent);transform:scale(1.4);box-shadow:0 0 0 4px var(--soft)}

.rep-reg{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:14px;margin:11px 0}
.rep-name{font-family:var(--mono);font-weight:700;color:var(--dim);font-size:15px}
.rep-bits{display:flex;gap:8px;flex-wrap:wrap}
.rep-bit{
  width:42px;height:48px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:19px;color:#b8b0a4;
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,box-shadow .3s,border-color .3s;
}
[data-tema="oscuro"] .rep-bit{color:#6b6355}
.rep-bit.uno{color:var(--ink);background:var(--panel)}
.rep-bit.cambio{
  background:linear-gradient(160deg,var(--accent2),var(--accent));color:#fff;border-color:transparent;
  box-shadow:0 10px 22px -8px rgba(194,65,12,.5);
}
.rep-bit.desliza{animation:slide .42s ease}

.rep-op{
  margin-top:18px;font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:13px 16px;min-height:20px;
}
.rep-controls{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.rep-spacer{flex:1}
.rep-play{min-width:130px}

/* ---------- Animaciones ---------- */
@keyframes slide{0%{transform:translateY(-10px) scale(.92);opacity:.2}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fade{0%{opacity:0}100%{opacity:1}}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:column}
  .contenido{padding:24px 16px}
}