/* ===========================================================================
   Calculadoras · vgatelayer
   Paleta de marca. Tipografias auto-hospedadas: la CSP del sitio es
   default-src 'self', asi que cualquier fuente externa queda bloqueada
   (por eso la Manrope de Google nunca llego a cargar).
   =========================================================================== */
@import url("fuentes.css");

:root {
  --profundo: #2B2477;
  --marca: #4F46C9;
  --claro: #A9A4EC;
  --ambar: #F6D06F;
  --ambar-txt: #5A4A12;
  --panel: #E8EAF4;

  --ok: #0F7C42;
  --ok-fondo: #E7F3EC;
  --aviso: #D18C00;
  --aviso-fondo: #FBF3E0;
  --mal: #BE2A1E;
  --mal-fondo: #FBEDEC;

  --lienzo: #F5F5FA;
  --tarjeta: #FFFFFF;
  --borde: #DEDFEE;
  --campo: #FAFAFE;
  --tinta: #2B2477;
  --texto: #55588A;
  --apoyo: #7B7EA6;

  --sombra: 0 1px 3px rgba(43, 36, 119, .07);
  --r: 12px;
  --sans: Sora, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--lienzo);
  color: var(--tinta);
  font: 300 14px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ───────────────────────────────── cabecera */
.barra {
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
.barra-int {
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 11px;
}
.marca-nom { font: 200 18px/1 var(--sans); letter-spacing: -.03em; color: var(--profundo); }
.marca-nom b { font-weight: 700; color: var(--marca); }
.marca-sub {
  margin-top: 3px; font: 400 7.5px/1 var(--mono);
  letter-spacing: .3em; text-transform: uppercase; color: var(--apoyo);
}
.barra-der { margin-left: auto; font: 400 11px var(--mono); color: var(--apoyo); }

/* ───────────────────────────────── estructura */
.marco {
  max-width: 1180px; margin: 0 auto; padding: 24px;
  display: grid; grid-template-columns: 236px 1fr; gap: 22px; align-items: start;
}
@media (max-width: 900px) { .marco { grid-template-columns: 1fr; padding: 16px; } }

.lateral {
  background: var(--panel);
  border-radius: var(--r);
  padding: 14px;
  position: sticky; top: 78px;
}
@media (max-width: 900px) { .lateral { position: static; } }

.lateral h2 {
  font: 400 9.5px var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--apoyo); margin: 4px 6px 10px;
}
.menu { display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 900px) { .menu { flex-direction: row; overflow-x: auto; } }

.menu button {
  text-align: left; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--texto);
  font: 400 13px var(--sans); cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  white-space: nowrap;
}
.menu button:hover { background: rgba(255, 255, 255, .65); color: var(--profundo); }
.menu button[aria-current="true"] {
  background: var(--tarjeta); color: var(--profundo); font-weight: 600;
  box-shadow: var(--sombra);
}
.menu .num {
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  background: var(--claro); color: #fff;
  display: grid; place-items: center;
  font: 600 10px var(--mono);
}
.menu button[aria-current="true"] .num { background: var(--marca); }

/* ───────────────────────────────── tarjetas */
.hoja > h1 {
  font: 200 27px/1.2 var(--sans); letter-spacing: -.03em;
  color: var(--profundo); margin-bottom: 5px;
}
.hoja > .sub { color: var(--texto); font-size: 13.5px; margin-bottom: 20px; }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.tarjeta h3 {
  font: 400 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--apoyo); margin-bottom: 14px;
}

/* ───────────────────────────────── campos */
.fila { display: grid; grid-template-columns: 1fr 118px; gap: 10px; margin-bottom: 14px; }
.fila.sola { grid-template-columns: 1fr; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .par { grid-template-columns: 1fr; } }

label.rot { display: block; font: 400 12px var(--sans); color: var(--texto); margin-bottom: 6px; }

input[type=text], input[type=number], select {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--campo); color: var(--tinta);
  font: 500 15px var(--mono); outline: none;
}
select { font-family: var(--sans); font-weight: 400; font-size: 13.5px; }
input:focus, select:focus { border-color: var(--marca); background: #fff; }
input.calculado { background: var(--panel); color: var(--marca); font-weight: 600; }
.pista { font: 300 11.5px var(--sans); color: var(--apoyo); margin: -8px 0 14px; }

/* ───────────────────────────────── resultado */
.resultado {
  background: linear-gradient(135deg, var(--profundo), var(--marca));
  border-radius: var(--r); padding: 22px 24px; margin-bottom: 16px; color: #fff;
}
.resultado .rot {
  font: 400 9.5px var(--mono); letter-spacing: .16em;
  text-transform: uppercase; opacity: .75;
}
.resultado .val {
  font: 200 34px/1.15 var(--sans); letter-spacing: -.03em; margin-top: 8px;
  word-break: break-all;
}
.resultado .val b { font-weight: 600; }
.resultado .nota { font: 300 12.5px var(--sans); opacity: .85; margin-top: 8px; }

.formula {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 15px; border-radius: 9px;
  background: var(--panel); margin-bottom: 16px;
}
.formula .et {
  font: 400 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apoyo);
}
.formula .tx { font: 500 13px var(--mono); color: var(--profundo); }

/* ───────────────────────────────── avisos */
.aviso {
  padding: 13px 16px; border-radius: 10px; margin-bottom: 14px;
  font: 300 12.5px/1.6 var(--sans); border: 1px solid transparent;
}
.aviso b { font-weight: 600; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok); border-color: #CBE6D7; }
.aviso-mal { background: var(--mal-fondo); color: var(--mal); border-color: #F2D5D2; }
.aviso-avisa { background: var(--aviso-fondo); color: var(--aviso); border-color: #F0E2C2; }
.aviso code { font-family: var(--mono); font-size: 12px; }

/* ───────────────────────────────── boton (uno por pantalla) */
.boton {
  padding: 13px 22px; border: 0; border-radius: 11px;
  background: var(--ambar); color: var(--ambar-txt);
  font: 600 13px var(--sans); letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 8px 18px -12px rgba(198, 164, 54, .9);
}
.boton:hover { filter: brightness(.97); }
.boton:active { transform: translateY(1px); }

/* ───────────────────────────────── tablas y equivalencias */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); }
.tabla th {
  font: 400 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--apoyo);
}
.tabla td { font: 400 12.5px var(--sans); }
.tabla td.n { font-family: var(--mono); font-weight: 500; text-align: right; color: var(--profundo); }
.tabla tr:last-child td { border-bottom: none; }

.fichas { display: flex; flex-wrap: wrap; gap: 7px; }
.ficha {
  padding: 7px 12px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--campo); cursor: pointer;
  font: 400 12px var(--sans); color: var(--texto);
}
.ficha:hover { border-color: var(--marca); color: var(--marca); background: #fff; }
.ficha .v { font-family: var(--mono); font-weight: 500; color: var(--profundo); }
.grupo-rot {
  font: 400 9px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--apoyo); margin: 14px 0 7px;
}
.grupo-rot:first-child { margin-top: 0; }

.oculto { display: none; }
.pie { text-align: center; color: var(--apoyo); font-size: 11.5px; padding: 8px 0 28px; }

.explica { font-size: 13px; color: var(--texto); line-height: 1.75; }
.explica b { font-weight: 600; color: var(--profundo); }
.rojo { color: var(--mal); font-weight: 500; }