/* Consola del cliente de Rimasun: complementos de /consola/estilos.css */
.saltar { position: absolute; left: -999px; top: 8px; background: #fff; color: #2A3C58; padding: 8px 12px; border-radius: 8px; z-index: 60; }
.saltar:focus { left: 8px; }
a:focus-visible, button:focus-visible, .campo:focus-visible { outline: 3px solid var(--turq); outline-offset: 2px; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; background: linear-gradient(120deg, #2A3C58, #1E6F80); color: #fff;
  border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.plan h3 { color: #fff; margin: 0 0 4px; font-size: 18px; }
.plan .ayuda { color: rgba(255, 255, 255, .8); }
.medidor { height: 10px; background: rgba(255, 255, 255, .22); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.medidor i { display: block; height: 100%; background: #51BFD1; border-radius: 10px; }
.medidor.alto i { background: #E5631A; }
.medidor.lleno i { background: #C0392B; }
.medidor.claro { background: var(--borde); }
.pasos { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.pasos li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.pasos li:last-child { border-bottom: 0; }
.pasos li::before { counter-increment: p; content: counter(p); flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(81, 191, 209, .18); color: var(--marino); font-weight: 800; font-size: 13px; }
.pasos li.hecho::before { content: "✓"; background: var(--verde); color: #fff; }
.pasos li div { flex: 1; } .pasos b { display: block; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.tplan { background: var(--caja); border: 1.5px solid var(--borde); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.tplan.dest { border-color: var(--turq); box-shadow: 0 6px 24px rgba(81, 191, 209, .18); }
.tplan.actual { border-color: var(--verde); }
.tplan .precio { font-size: 28px; font-weight: 800; color: var(--marino); }
.tplan .precio small { font-size: 13px; font-weight: 600; color: var(--suave); }
.tplan ul { margin: 0; padding-left: 18px; color: var(--suave); font-size: 13px; flex: 1; }
.selector { display: inline-flex; border: 1.5px solid var(--borde); border-radius: 10px; overflow: hidden; }
.selector button { border: 0; background: none; padding: 6px 14px; font-weight: 700; color: var(--suave); cursor: pointer; }
.selector button[aria-pressed="true"] { background: var(--marino); color: #fff; }
.cotiza { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.cotiza .total { background: var(--fondo); border-radius: 14px; padding: 16px; }
.cotiza .total b { font-size: 30px; color: var(--marino); display: block; }
input[type="range"] { width: 100%; accent-color: #51BFD1; }
.descarga { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.descarga div { flex: 1; min-width: 220px; }
.hash { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--suave); word-break: break-all; }
.login .campo + .campo { margin-top: 0; }
@media (max-width: 760px) { .cotiza { grid-template-columns: 1fr; } .plan { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }