/* herramientas.css — base de las páginas públicas de cada herramienta
   (info_*.php, ver herramienta_base.php). Siempre en oscuro, como la portada.
   El layout de cada página va en línea en su archivo: son réplicas de pantalla
   distintas entre sí y no comparten estructura. Acá va solo lo común. */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.hp{margin:0;background:#08080F;color:#EDEBFF;font-family:'Satoshi',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
.hp a{color:#EDEBFF;text-decoration:none;}
.hp a:hover{color:#FFFFFF;}
.hp :focus-visible{outline:2px solid #3E8CFF;outline-offset:3px;}

/* Glifo a 1em: toma tamaño y color del texto que lo rodea (ver hi()). */
.hi{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* "Volver a Órbita" e "Ingresar": los dos botones de arriba, iguales en las
   siete páginas. Con el degradé de la marca y letra blanca, sin flecha —es el
   mismo botón "Ingresar" de la portada—. */
.hp a.hp-btn{display:inline-flex;align-items:center;white-space:nowrap;font-size:14px;font-weight:600;color:#fff;padding:10px 18px;border-radius:10px;background:linear-gradient(120deg,#7B5CFA,#F153C6);box-shadow:0 8px 24px -10px rgba(123,92,250,.7);transition:box-shadow .18s;}
.hp a.hp-btn:hover{color:#fff;box-shadow:0 12px 30px -8px rgba(123,92,250,.85);}

/* Nova POS: los enlaces van en su menta. */
.hp-pos a{color:#2FE0A6;}
.hp-pos a:hover{color:#7FF0CA;}
.hp-pos ::selection{background:#2FE0A633;}
/* Dos enlaces del POS traen el color puesto en línea: el hover necesita ganarle. */
.hp a.hp-h-txt:hover{color:#EDEBFF !important;}
.hp a.hp-h-brd:hover{border-color:#2FE0A6 !important;}

/* En celular el marco de cada página aprieta el aire de los costados. */
@media(max-width:600px){
  .hp > div > div{padding:28px 18px 56px !important;}
}