/* Herramientas del cliente (/e/herramientas): la barra y el hub.

   Las vistas de adentro (identificar/immo/elv/frm/airbag) son las del panel y
   se visten con app.css, que esta pagina sigue cargando. Esta hoja viste solo
   lo que las rodea: barra, cabecera, tarjetas, miga y chip de saldo, con la
   identidad de la vitrina (grafito, naranja de testigo, dato en mono).

   Los tokens llevan prefijo hc- a proposito: app.css ya usa --panel, --borde
   y --texto para otra cosa (alla --texto es un color), y pisarlos rompia las
   vistas de adentro. */
@import url("/css/fuentes.css");

body.hc-cuerpo{
  --hc-carbon:#0A0C0F;
  --hc-grafito:#12161C;
  --hc-panel:#171C24;
  --hc-panel-alto:#1E242E;
  --hc-borde:#252C38;
  --hc-borde-suave:#1B212A;

  --hc-redline:#FF5A1F;
  --hc-redline-h:#FF7442;
  --hc-redline-tenue:rgba(255,90,31,.13);
  --hc-signal:#4ADE80;
  --hc-dato:#7DD3FC;

  --hc-hueso:#ECEEF2;
  --hc-ceniza:#8B94A3;
  --hc-ceniza-2:#5C6673;

  --hc-display:'Archivo','Arial Black',system-ui,sans-serif;
  --hc-texto:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hc-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --hc-radio:12px;
  --hc-radio-chico:8px;
  --hc-ancho:1140px;
}

/* app.css deja el body sin scroll porque el panel scrollea adentro de su
   shell. Aca la pagina es un documento comun. */
body.hc-cuerpo{ overflow:auto; height:auto; min-height:100%; background:var(--hc-carbon) }

/* #app hereda de app.css el shell del panel (flex, 100vh, sin overflow).
   Para el cliente es un contenedor comun, centrado. */
#app.cliente-herr{
  display:block; height:auto; overflow:visible;
  max-width:var(--hc-ancho); margin:0 auto; padding:22px;
}

/* ----------------------------------------------------------------- barra -- */
.hc-barra{
  position:sticky; top:0; z-index:30;
  background:rgba(10,12,15,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hc-borde-suave);
  font-family:var(--hc-texto);
}
.hc-env{
  max-width:var(--hc-ancho); margin:0 auto; padding:0 22px;
  display:flex; align-items:center; gap:16px; height:56px;
}
.hc-logo{
  font-family:var(--hc-display); font-weight:800; font-size:16px;
  letter-spacing:.14em; color:var(--hc-hueso); text-decoration:none;
  display:flex; align-items:center; gap:9px;
}
.hc-logo:hover{ text-decoration:none; color:var(--hc-hueso) }
.hc-logo i{
  width:9px; height:9px; border-radius:50%; background:var(--hc-redline);
  box-shadow:0 0 12px var(--hc-redline); font-style:normal;
}
.hc-barra nav{
  margin-left:auto; display:flex; align-items:center; gap:20px;
  font-family:var(--hc-mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hc-ceniza); white-space:nowrap;
}
.hc-barra nav a{ color:inherit; text-decoration:none; padding:4px 0 }
.hc-barra nav a:hover{ color:var(--hc-redline); text-decoration:none }
.hc-barra nav a.hc-activo{ color:var(--hc-hueso); box-shadow:inset 0 -2px 0 var(--hc-redline) }
/* El selector ES/EN lo inserta el servidor despues del </nav>. */
.hc-barra .idiomas{
  display:flex; gap:8px; font-family:var(--hc-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
}
.hc-barra .idioma{ color:var(--hc-ceniza-2); text-decoration:none }
.hc-barra .idioma:hover{ color:var(--hc-redline); text-decoration:none }
.hc-barra .idioma-activo{ color:var(--hc-hueso) }

/* ------------------------------------------------------------------- hub -- */
.hc-hub{ font-family:var(--hc-texto); color:var(--hc-hueso); font-size:14.5px; line-height:1.55 }
.hc-cab{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:18px; flex-wrap:wrap; margin:6px 0 10px;
}
.hc-cab h1{
  margin:0; font-family:var(--hc-display); font-weight:700; font-size:28px;
  letter-spacing:-.01em; line-height:1.1; color:var(--hc-hueso);
}
.hc-cab p{ margin:8px 0 0; color:var(--hc-ceniza); max-width:60ch }

/* el chip del saldo */
.hc-saldo{
  display:flex; flex-direction:column; gap:2px; min-width:170px;
  background:var(--hc-panel); border:1px solid var(--hc-borde);
  border-radius:var(--hc-radio); padding:10px 14px;
}
.hc-saldo-lbl{
  font-family:var(--hc-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hc-ceniza-2);
}
.hc-saldo-cifra{
  font-family:var(--hc-mono); font-size:22px; font-weight:600; line-height:1.1;
  color:var(--hc-hueso); font-variant-numeric:tabular-nums;
}
.hc-saldo-un{ font-size:11px; font-weight:400; color:var(--hc-ceniza); letter-spacing:.04em }
.hc-saldo-links{ display:flex; gap:12px; margin-top:6px; font-size:12.5px }
.hc-saldo-links a{ color:var(--hc-ceniza); text-decoration:none }
.hc-saldo-links a:hover{ color:var(--hc-redline); text-decoration:none }
.hc-saldo-links a.hc-recargar{ color:var(--hc-redline); font-weight:600 }
.hc-saldo-mini{ flex-direction:row; align-items:baseline; gap:10px; padding:6px 12px; min-width:0 }
.hc-saldo-mini .hc-saldo-cifra{ font-size:15px }
.hc-saldo-mini .hc-saldo-links{ margin-top:0 }

/* grupos y tarjetas */
.hc-grupo{
  font-family:var(--hc-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--hc-redline); margin:22px 0 10px;
}
.hc-grilla{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)) }
.hc-tarjeta{
  position:relative; overflow:hidden; text-align:left;
  display:flex; flex-direction:column; gap:8px; padding:16px 17px 14px;
  background:var(--hc-panel); border:1px solid var(--hc-borde);
  border-radius:var(--hc-radio); color:var(--hc-hueso);
  font:inherit; cursor:pointer;
  transition:transform .16s ease, border-color .16s ease;
}
.hc-tarjeta::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--hc-redline); opacity:0; transition:opacity .16s ease;
}
.hc-tarjeta:hover, .hc-tarjeta:focus-visible{
  transform:translateY(-2px); border-color:var(--hc-ceniza-2); outline:none;
}
.hc-tarjeta:hover::before, .hc-tarjeta:focus-visible::before{ opacity:1 }
.hc-tarjeta:focus-visible{ box-shadow:0 0 0 3px var(--hc-redline-tenue) }
.hc-ico{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--hc-radio-chico); background:var(--hc-redline-tenue);
  color:var(--hc-redline); font-family:var(--hc-mono); font-size:13px;
  font-weight:600; letter-spacing:.08em;
}
.hc-titulo{ font-weight:600; font-size:15.5px; margin-top:2px }
.hc-fam{ font-family:var(--hc-mono); font-size:11.5px; color:var(--hc-dato); letter-spacing:.02em }
.hc-desc{ font-size:13px; color:var(--hc-ceniza); line-height:1.45 }
/* que procesa: lista que sale de los motores registrados */
.hc-caps{ display:flex; flex-direction:column; gap:3px; margin-top:4px; text-align:left }
.hc-caps-t{ font-family:var(--hc-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--hc-ceniza); margin-bottom:2px }
.hc-cap{ position:relative; padding-left:12px; font-size:12px; line-height:1.35; color:var(--hc-dato) }
.hc-cap::before{ content:''; position:absolute; left:0; top:.6em; width:6px; height:2px; background:#ff4d1c }
.hc-cap-pend{ opacity:.55 }
.hc-cap-est{ margin-left:6px; font-family:var(--hc-mono); font-size:10px; color:var(--hc-ceniza) }
.hc-badges{ display:flex; gap:6px; flex-wrap:wrap }
.hc-badge{
  font-family:var(--hc-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hc-signal);
  border:1px solid rgba(74,222,128,.35); border-radius:999px; padding:2px 8px;
}
.hc-pie{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:auto; padding-top:10px; border-top:1px solid var(--hc-borde-suave);
}
.hc-precio{ font-family:var(--hc-mono); font-size:11.5px; color:var(--hc-ceniza) }
.hc-gratis{ color:var(--hc-signal) }
.hc-sin-precio{ color:var(--hc-ceniza-2) }
.hc-abrir{
  border:1px solid var(--hc-borde); border-radius:var(--hc-radio-chico);
  padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--hc-hueso);
  white-space:nowrap;
}
.hc-tarjeta:hover .hc-abrir{ border-color:var(--hc-redline); color:var(--hc-redline) }

.hc-aviso{
  margin:16px 0; padding:12px 14px; font-size:13.5px; color:var(--hc-ceniza);
  border:1px solid var(--hc-borde); border-left:3px solid var(--hc-redline);
  border-radius:var(--hc-radio-chico);
}

/* ------------------------------------------------- adentro de una herramienta */
.hc-cab-herr{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; margin:0 0 16px;
}
.hc-miga{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--hc-mono); font-size:12px; color:var(--hc-ceniza);
}
.hc-miga-volver{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--hc-redline);
}
.hc-miga-volver:hover{ color:var(--hc-redline-h); text-decoration:underline }
.hc-miga-sep{ color:var(--hc-ceniza-2) }

/* ----------------------------------------------------------- sin sesion -- */
.hc-vacio{
  max-width:520px; margin:40px auto; padding:32px 28px; text-align:center;
  background:var(--hc-panel); border:1px solid var(--hc-borde); border-radius:var(--hc-radio);
}
.hc-vacio h1{ margin:0 0 8px; font-family:var(--hc-display); font-size:26px; color:var(--hc-hueso) }
.hc-vacio p{ margin:0 0 18px; color:var(--hc-ceniza) }
.hc-boton{
  display:inline-block; background:var(--hc-redline); color:#0A0C0F; font-weight:700;
  padding:10px 18px; border-radius:var(--hc-radio-chico); text-decoration:none;
}
.hc-boton:hover{ background:var(--hc-redline-h); color:#0A0C0F; text-decoration:none }

@media (max-width:640px){
  #app.cliente-herr{ padding:16px }
  .hc-env{ padding:0 16px }
  .hc-barra nav{ gap:12px; font-size:10.5px }
  .hc-cab h1{ font-size:24px }
  .hc-saldo{ width:100% }
}
/* En un telefono angosto la barra lleva logo, tres enlaces y el selector
   ES/EN que agrega el servidor: la nav se achica y, si aun no entra,
   scrollea de costado en vez de empujar la pagina. */
@media (max-width:480px){
  .hc-env{ gap:10px }
  .hc-logo{ font-size:14px; letter-spacing:.1em }
  .hc-barra nav{ gap:10px; font-size:10px; letter-spacing:.04em; min-width:0;
    overflow-x:auto; scrollbar-width:none }
  .hc-barra nav::-webkit-scrollbar{ display:none }
}
@media (prefers-reduced-motion: reduce){
  .hc-tarjeta, .hc-tarjeta::before{ transition:none }
  .hc-tarjeta:hover, .hc-tarjeta:focus-visible{ transform:none }
}