:root{
  color-scheme: dark;
  --bg:#0d0610;
  --bg-haze:#2b1733;
  --leather:#211c19;
  --card-top:#3a2e28;
  --card-bot:#1a1410;
  --line:#403833;
  --iron:#3d3d3d;
  --iron-dark:#222;
  --text:#e0e0e0;
  --muted:#c4b3a3;
  --gold:#fca311;
  --gold-dark:#b37300;
  --avalon:#00e5ff;
  --avalon-dark:#008899;
  --fresh-green:#4ade80;
  --fresh-yellow:#facc15;
  --fresh-red:#f87171;
  --f-display:'Cinzel',serif;
  --f-body:'Lato',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  background-color:var(--bg);
  background-image:radial-gradient(ellipse at 50% -10%,var(--bg-haze) 0%,var(--bg) 62%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--f-body);
  font-size:15px;line-height:1.65;min-height:100vh;
}
a{color:var(--avalon);text-decoration:none}
a:hover{color:#fff}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--avalon);outline-offset:2px;border-radius:4px}
.wrap{max-width:1000px;margin:0 auto;padding:24px 20px 90px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.brand{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--gold)}
.brand:hover{color:#fff}
.pills{display:flex;gap:6px}
.pill{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em;padding:6px 11px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.pill:hover{color:var(--text);border-color:var(--iron)}
.pill[aria-pressed="true"]{color:var(--bg);background:var(--gold);border-color:var(--gold)}
.tool-head{margin-bottom:24px}
.tool-head .eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:6px}
.tool-head h1{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,4.5vw,33px);line-height:1.15;color:#fff}
.tool-head .sub{color:var(--muted);margin-top:7px;max-width:62ch}
.card{background:linear-gradient(160deg,var(--card-top),var(--card-bot));border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.field{position:relative}
.field .label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.input,.combo{width:100%;padding:11px 13px;background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:8px}
.input:focus,.combo:focus{border-color:var(--avalon-dark);outline:none}
.input::placeholder{color:#5f5348}
.combo{cursor:pointer}
/* Un control desactivado tiene que verse desactivado: si la logica lo
   bloquea pero se ve igual, el usuario cree que la herramienta falla. */
.input:disabled,.combo:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.combo option{background:var(--leather);color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:8px;font-weight:700;font-size:14px;border:1px solid var(--line);color:var(--muted)}
.btn:hover{color:var(--text);border-color:var(--iron)}
.btn-primary{background:var(--gold);color:#231400;border-color:var(--gold)}
.btn-primary:hover{filter:brightness(1.1);color:#231400}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn-sm{padding:6px 12px;font-size:12px;font-weight:600}
.options{position:absolute;z-index:40;left:0;right:0;top:100%;margin-top:5px;background:var(--leather);border:1px solid var(--line);border-radius:8px;overflow:hidden;max-height:290px;overflow-y:auto;box-shadow:0 14px 34px rgba(0,0,0,.6)}
.options[hidden]{display:none}
.options button{display:flex;width:100%;align-items:baseline;gap:9px;padding:9px 13px;text-align:left;border-bottom:1px solid rgba(64,56,51,.5)}
.options button:last-child{border-bottom:none}
.options button:hover,.options button.active{background:rgba(252,163,17,.12)}
.opt-name{flex:1}
.opt-ico{width:24px;height:24px;flex:0 0 24px;align-self:center;object-fit:contain}
/* El chip es bajo: 18 px tambien en escritorio, 36 lo rompe. */
.chip-ico{width:18px;height:18px;max-width:18px;max-height:18px;flex:0 0 18px;align-self:center;object-fit:contain;display:block}
/* Acotado a proposito: solo el chip que YA tiene foto. Los chips
   de tarifa (data-tax) usan la misma clase y no se deben mover. */
.chip:has(> .chip-ico){display:inline-flex;align-items:center;gap:6px}
/* En escritorio el PNG de Render trae margen vacio y con
   object-fit:contain la figura queda chica dentro de su caja. */
@media (min-width:800px){
  .opt-ico:not(.chip-ico){width:36px;height:36px;max-width:36px;max-height:36px;flex:0 0 36px}
}
/* Dentro de una TABLA el mismo icono crece. En un chip 18 px es lo
   correcto -- la pastilla es baja y 36 la rompe -- pero en una fila de
   tabla, al lado de un nombre largo, a 18 px no se distingue que item
   es. El selector acota por contexto para no tocar los chips ni el
   HTML de las herramientas. max-* tambien: si no, frenan al width. */
@media (min-width:600px){
  td .chip-ico{width:24px;height:24px;max-width:24px;max-height:24px;flex:0 0 24px}
}
@media (min-width:800px){
  td .chip-ico{width:28px;height:28px;max-width:28px;max-height:28px;flex:0 0 28px}
}
.opt-id{font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap}
.table-wrap{overflow-x:auto;max-width:100%}
/* Icono grande a la izquierda y el nombre a su lado, en dos lineas si
   hace falta. A 18 px no se distingue el item, y un nombre largo en una
   sola linea estira la columna hasta sacar la tabla de la pantalla. El
   max-width es lo que fuerza el salto.
   .icell va en un DIV dentro de la celda, nunca en el td: un td con
   display distinto de table-cell deja de ser celda, el navegador lo
   envuelve en una celda anonima y su borde inferior y su altura dejan
   de casar con los de la fila. */
.icell{display:flex;align-items:center;gap:10px;max-width:250px}
.ico40{width:40px;height:40px;flex:0 0 40px;object-fit:contain}
.icell .iname,.icell .pname{line-height:1.35;min-width:0}
@media (max-width:600px){
  .icell{max-width:170px;gap:8px}
  .ico40{width:32px;height:32px;flex:0 0 32px}
}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
td.num{font-family:var(--f-mono);text-align:right;white-space:nowrap}
tbody tr:hover{background:rgba(255,255,255,.025)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
.dot.green{background:var(--fresh-green)}
.dot.yellow{background:var(--fresh-yellow)}
.dot.red{background:var(--fresh-red)}
.age{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.note{padding:15px 17px;border-radius:8px;font-size:14px;background:rgba(0,229,255,.07);border:1px solid var(--avalon-dark);color:#b9f2fb}
.note[hidden]{display:none}
.sub{font-size:13px;color:var(--muted)}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:20px;z-index:80}
.modal-back[hidden]{display:none}
.modal{background:linear-gradient(160deg,var(--card-top),var(--card-bot));border:1px solid var(--line);border-radius:var(--r);padding:22px;max-width:420px;width:100%}
.modal h2{font-family:var(--f-display);font-size:19px;color:#fff;margin-bottom:4px}
.modal-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.modal-actions{display:flex;gap:10px;margin-top:16px}
.modal-actions .btn{flex:1}
.foot{margin-top:52px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:600px){.wrap{padding:20px 15px 70px}th,td{padding:9px 9px}}

/* ---------------------------------------------------------------
   ORO EN LA CABECERA
   Estaba solo en el <style> de la portada. Vive aqui para que las
   nueve paginas usen las mismas reglas y no se separen con el
   tiempo. OJO: .gold-trend.down usa var(--red), que NO esta
   definida en este archivo, con un rojo de respaldo distinto al
   --fresh-red del sitio. Se copia tal cual para no cambiar como se
   ve la portada; unificarlo es otro cambio.
   --------------------------------------------------------------- */
.gold-box{display:flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--line);border-radius:8px;
  font-family:var(--f-mono);font-size:12px;color:var(--gold);
  white-space:nowrap;cursor:default}
.gold-box[hidden]{display:none}
/* .topbar reparte a los extremos con space-between. Con el oro son
   tres hijos y el bloque se quedaba en el CENTRO, que no se parece a
   la portada. Con margin-right:auto el oro se pega al logo y los
   idiomas se van a la derecha, igual que alli. */
.topbar .gold-box{margin-right:auto}
.gold-box svg{width:13px;height:13px;fill:var(--gold);opacity:.8}
.gold-trend{font-size:9px}
.gold-trend.up{color:var(--fresh-green)}
.gold-trend.down{color:var(--red,#e74c3c)}
@media (max-width:640px){.gold-box{padding:4px 7px;font-size:11px}}

/* ---------------------------------------------------------------
   PRESETS DE LA TARIFA DE ESTACION
   Isla 0 / Ciudad 400 / Tope 1000. Mismo aspecto que la .chip de
   Rentabilidad, pero con nombre propio: el Arbol ya tiene una
   .chip suya para los ejemplos de la primera visita (pastilla
   redonda) y las dos cosas no pueden compartir nombre.
   Rentabilidad sigue con su .chip local a proposito: alli esa
   clase vale para ejemplos Y para fee, y separarlo hoy seria un
   rename en cuatro archivos. Queda para otro dia.
   --------------------------------------------------------------- */
.chip-fee{
  font-family:var(--f-mono);font-size:11px;padding:5px 10px;
  border:1px solid var(--line);border-radius:6px;color:var(--muted);
  background:none;cursor:pointer;
}
.chip-fee:hover{color:var(--text);border-color:var(--iron)}

/* ---------------------------------------------------------------
   AVISO DE PRECIO LEJOS DE LO USUAL
   Lo usan Craft, el Comparador y Rutas BM, con el mismo texto y el
   mismo criterio: los cortes los manda el backend (priceHigh /
   priceLow), aqui no vive ningun multiplicador.

   Estaba duplicada en los tres, identica, y con un fallo: el
   max-width:210px dejaba el aviso pegado a la IZQUIERDA de una celda
   ancha mientras el numero se alineaba a la derecha, asi que las dos
   cosas se leian como si no tuvieran relacion.

   width:100% + text-align:inherit lo pone bajo su numero, heredando
   el right de la celda. En una celda alineada a la izquierda tambien
   hereda, que es lo correcto.
   --------------------------------------------------------------- */
.price-warn{
  display:block;width:100%;text-align:inherit;
  font-family:var(--f-mono);font-size:10px;
  color:var(--gold);margin-top:3px;line-height:1.4;
  white-space:normal;
}

/* ---------------------------------------------------------------
   CAJA DE "COMO FUNCIONA ESTO"
   Estaba duplicada en el <style> de nueve herramientas, identica en
   siete de ellas. Vive aqui para que no se separen con el tiempo,
   igual que se hizo con el oro y con los presets de tarifa.

   DOS EXCEPCIONES, a proposito: Optimizador de Foco y Guia de Bonos
   la usan con margen ABAJO tambien (margin:18px 0), porque ahi la
   caja va seguida de mas contenido. Cada una conserva UNA linea en
   su propio <style> que solo corrige el margen. No se unificaron a
   la fuerza: eso les cambiaria como se ven.

   La portada NO carga base.css y no usa esta clase.
   --------------------------------------------------------------- */
.thinbox{
  border-left:3px solid var(--muted);background:rgba(140,123,109,.08);
  padding:12px 15px;border-radius:0 6px 6px 0;font-size:13px;margin:18px 0 0;
  line-height:1.6;
}

/* Idioma: un boton y su lista (account.js convierte #langs) */
#langs.pills:not(.lang-menu){max-width:0;overflow:hidden;visibility:hidden;animation:aeh-langs-respaldo 0s linear 3s forwards}
@keyframes aeh-langs-respaldo{to{max-width:400px;overflow:visible;visibility:visible}}
.lang-pick{position:relative;display:inline-flex}
.lang-pick .lang-cur{cursor:pointer;white-space:nowrap}
.lang-pick #langs.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:160px;z-index:950;
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  border:1px solid var(--line);border-radius:var(--r,10px);
  box-shadow:0 14px 34px rgba(0,0,0,.9);
  padding:6px;display:none;flex-direction:column;gap:0;
}
.lang-pick #langs.lang-menu.is-open{display:flex;animation:aeh-pop .16s ease-out}
@keyframes aeh-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lang-pick #langs.lang-menu button{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:6px;border:0;background:none;
  font-family:inherit;font-size:.85rem;font-weight:400;letter-spacing:normal;text-align:left;color:var(--text);
}
.lang-pick #langs.lang-menu button:hover{background:rgba(252,163,17,.12);color:var(--gold)}
.lang-pick #langs.lang-menu button[aria-checked="true"],
.lang-pick #langs.lang-menu button[aria-pressed="true"]{background:none;color:var(--gold)}
.lang-pick #langs.lang-menu .tick{opacity:0;font-size:.8rem}
.lang-pick #langs.lang-menu button[aria-checked="true"] .tick{opacity:1}

/* Boton de cuenta: no se ve mientras account.js no le ha puesto texto */
#acctBtn:has(> #acctLabel:empty){visibility:hidden}
/* El boton de cuenta va siempre a la derecha, haya oro o no: sin salto al aparecer el oro */
.topbar #acctBtn{margin-left:auto}
/* Hueco de la barra de desplazamiento reservado: la pagina no se mueve de lado al crecer */
html{scrollbar-gutter:stable}

/* Tablas en pantallas estrechas: mas compactas; lo que siga sin caber se desliza en su caja */
@media (max-width:480px){
  table{font-size:13px}
  th,td{padding:8px 4px}
  th{white-space:normal;font-size:9.5px;letter-spacing:.04em;line-height:1.3}
  td.num{font-size:12px}
  .table-wrap td:first-child{min-width:76px}
  .table-wrap td .age,.table-wrap td span[class*="small"]{font-size:10.5px;white-space:normal!important}
  .table-wrap td button{padding:4px 7px;font-size:10px}
}