/* hub.css — Hub de niveles con candados + pantallas de herramientas (retiro, emergencia). */

.hub{padding:2px 14px 0;}
.hub-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh);padding:14px;margin-bottom:11px;transition:transform .1s;}
.hub-card.locked{background:linear-gradient(180deg,#fff,#F5F8FC);}
.hub-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px;}
.hub-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-family:'DM Mono',monospace;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.hub-ic{font-size:24px;line-height:1;}
.hub-t{flex:1;min-width:0;}
.hub-ti{font-size:14px;font-weight:700;color:var(--navy);}
.hub-de{font-size:11px;color:var(--stone);line-height:1.4;margin-top:2px;}
.hub-free{font-size:9px;font-weight:700;color:#fff;background:var(--green);border-radius:20px;padding:3px 8px;flex-shrink:0;}
.hub-ok{font-size:9px;font-weight:700;color:var(--green);background:#E8F8EF;border-radius:20px;padding:3px 8px;flex-shrink:0;white-space:nowrap;}
.hub-lock{font-size:16px;flex-shrink:0;}
.hub-card .btn-p{padding:11px;}
.hub-unlock{background:linear-gradient(135deg,var(--gold),var(--gold-lt))!important;color:#1B2A4A!important;}
.hub-unlock.destacado{background:linear-gradient(135deg,var(--navy),var(--blue))!important;color:#fff!important;font-size:14px;}
.hub-card.destacado{border:1.5px solid var(--gold);box-shadow:0 6px 20px rgba(184,149,58,.18);position:relative;}
.hub-card.destacado::before{content:"★ HABILITA TODO";position:absolute;top:-9px;left:14px;background:var(--gold);color:#1B2A4A;font-size:8px;font-weight:700;letter-spacing:.5px;padding:2px 8px;border-radius:20px;}
.hub-note{text-align:center;font-size:10px;color:var(--stone);padding:4px 24px 0;line-height:1.5;}

/* Botón volver en herramientas */
.tool-back{background:none;border:none;color:var(--blue);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:12px 14px 0;}
.tool-back:active{opacity:.6;}

/* Héroe de resultado de las calculadoras */
.tool-hero{margin:8px 14px 12px;background:linear-gradient(135deg,var(--navy),var(--blue));border-radius:var(--r);padding:16px;color:#fff;text-align:center;}
.th-k{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;opacity:.75;}
.th-v{font-family:'DM Mono',monospace;font-size:34px;font-weight:700;line-height:1.1;margin-top:4px;}
.th-v small{font-size:14px;opacity:.8;font-weight:500;}
.tool-bar{height:8px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden;margin-top:10px;}
.tool-bar > i{display:block;height:100%;border-radius:99px;transition:width .5s;}

/* Mitigación / listas */
.mitig-p{font-size:12.5px;color:var(--slate);line-height:1.5;}
.mitig-l{margin:10px 0 0 18px;}
.mitig-l li{font-size:12px;color:var(--slate);line-height:1.45;margin-bottom:6px;}

/* Escenarios (conservador/base/optimista) */
.esc{display:flex;gap:8px;}
.esc-col{flex:1;text-align:center;background:var(--smoke);border:1px solid var(--border);border-radius:10px;padding:10px 5px;}
.esc-col:nth-child(2){background:#FBF6EA;border-color:var(--gold);}
.esc-n{font-size:9px;font-weight:700;color:var(--stone);text-transform:uppercase;letter-spacing:.4px;}
.esc-v{font-family:'DM Mono',monospace;font-size:13px;font-weight:700;margin:3px 0 1px;line-height:1.1;}
.esc-t{font-size:9px;color:var(--stone);}

/* Tablas pensionales (con scroll horizontal) */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:4px;}
.pen-tbl{width:100%;border-collapse:collapse;font-size:11px;min-width:340px;}
.pen-tbl th{background:var(--navy);color:#fff;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:6px 8px;text-align:left;white-space:nowrap;position:sticky;top:0;}
.pen-tbl td{padding:6px 8px;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--slate);}
.pen-tbl td.num{text-align:right;font-family:'DM Mono',monospace;}
.pen-tbl tbody tr:nth-child(even){background:#F7FAFD;}

/* Portafolios */
.port{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.port-i{background:var(--smoke);border-radius:10px;padding:11px 13px;border:1px solid var(--border);}
.port-k{font-size:10px;font-weight:700;color:var(--stone);text-transform:uppercase;letter-spacing:.5px;}
.port-v{font-family:'DM Mono',monospace;font-size:18px;font-weight:700;color:var(--navy);margin:2px 0;}
.port-v small{font-size:11px;color:var(--stone);font-weight:500;}
.port-d{font-size:11px;color:var(--stone);}

/* El candado ahora es un SVG: hereda tamaño y color del contenedor. */
.hub-lock{color:var(--gold);font-size:17px;display:inline-flex;}

/* ── Activación por código ──
   Dos salidas para una tarjeta bloqueada: escribir el código que ya se tiene, o pedirlo.
   El formulario aparece dentro de la misma tarjeta para no sacar a nadie de la pantalla. */
.hub-cta{display:flex;flex-direction:column;gap:8px;}
.hub-unlock .ico{font-size:16px;margin-right:7px;vertical-align:-.18em;}
.hub-pedir{font-size:12.5px;padding:10px;}
.hub-cod{display:flex;gap:8px;margin-top:9px;}
.hub-cod[hidden]{display:none;}
.hub-cod input{
  flex:1;min-width:0;border:1px solid var(--border);border-radius:9px;padding:11px 12px;
  font-family:'DM Mono',monospace;font-size:13px;letter-spacing:1px;text-transform:uppercase;
  outline:none;background:#fff;
}
.hub-cod input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,149,58,.14);}
.hub-cod button{flex:0 0 auto;width:auto;padding:11px 20px;}