/* Hocico Phone — Mi Hocico · Telco en vivo (Consumo + Mi tarifa)
   Hereda tokens de .mh. Raíz: dentro de .mh.mhf .mhf-section */

.tl-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
@media (max-width:880px){ .tl-grid{ grid-template-columns:1fr; } }

.tl-card{ background:rgba(var(--sg),.05); border:1px solid rgba(var(--sg),.16);
  border-radius:20px; padding:22px 22px 24px; }
.tl-card-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.tl-card-t{ font-size:17px; font-weight:700; color:var(--strong); letter-spacing:-.01em; }
.tl-card-s{ font-size:12.5px; color:rgba(var(--tx),.6); margin-top:3px; }

.tl-live{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--sage-t); white-space:nowrap;
  padding:5px 11px; border-radius:999px; background:rgba(55,230,164,.08); border:1px solid rgba(55,230,164,.2); }
.tl-livedot{ width:7px; height:7px; border-radius:50%; background:#37E6A4; box-shadow:0 0 0 0 rgba(55,230,164,.55);
  animation:tlpulse 1.8s infinite; }
@keyframes tlpulse{ 0%{ box-shadow:0 0 0 0 rgba(55,230,164,.5); } 70%{ box-shadow:0 0 0 7px rgba(55,230,164,0); } 100%{ box-shadow:0 0 0 0 rgba(55,230,164,0); } }

/* anillo de datos */
.tl-ring-wrap{ position:relative; width:200px; height:200px; margin:6px auto 4px; }
.tl-ring{ display:block; }
.tl-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.tl-ring-big{ font-size:40px; font-weight:800; color:var(--strong); letter-spacing:-.03em; line-height:1; }
.tl-ring-big span{ font-size:18px; font-weight:700; color:rgba(var(--tx),.55); margin-left:3px; }
.tl-ring-sub{ font-size:12.5px; color:rgba(var(--tx),.6); margin-top:7px; }
.tl-ring-foot{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:rgba(var(--tx),.62);
  padding:14px 2px 0; margin-top:8px; border-top:1px solid rgba(var(--sg),.14); }
.tl-ring-foot b{ color:var(--strong); font-weight:700; }
.tl-ring-foot b.low{ color:#FFB59F; }
.tl-bonustag{ color:#37E6A4; }

.tl-warn{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:11px 13px; border-radius:13px;
  background:rgba(255,181,159,.09); border:1px solid rgba(255,181,159,.24); color:#FFB59F; font-size:12.5px; line-height:1.4; }

/* barras / medidores */
.tl-track{ height:8px; border-radius:999px; background:rgba(var(--sg),.14); overflow:hidden; }
.tl-fill{ height:100%; border-radius:999px; transition:width .9s cubic-bezier(.4,0,.2,1); }

.tl-zones{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(var(--sg),.14); }
.tl-zones-t{ font-size:12.5px; font-weight:700; color:var(--strong); margin-bottom:13px; }
.tl-zones-t span{ font-weight:500; color:rgba(var(--tx),.5); }
.tl-zone{ margin-bottom:12px; }
.tl-zone-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:12.5px; }
.tl-zone-k{ display:inline-flex; align-items:center; gap:8px; color:rgba(var(--tx),.78); }
.tl-zone-v{ font-weight:700; color:var(--strong); }
.tl-dot{ width:9px; height:9px; border-radius:50%; flex:none; }

.tl-meter{ margin-bottom:18px; }
.tl-meter-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; }
.tl-meter-k{ display:inline-flex; align-items:center; gap:8px; color:rgba(var(--tx),.8); }
.tl-meter-v{ font-weight:700; color:var(--strong); }
.tl-meter-note{ font-size:11.5px; color:rgba(var(--tx),.5); margin-top:7px; }
.tl-by{ display:flex; gap:9px; align-items:flex-start; font-size:11.5px; line-height:1.5; color:rgba(var(--tx),.55);
  margin-top:4px; padding-top:14px; border-top:1px solid rgba(var(--sg),.14); }
.tl-by svg{ flex:none; margin-top:1px; }

/* botón ampliar */
.tl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit;
  font-size:14px; font-weight:700; border:none; border-radius:13px; cursor:pointer; transition:filter .16s, opacity .16s; }
.tl-btn.primary{ background:#37E6A4; color:#04130D; padding:13px 18px; }
.tl-btn.primary:hover{ filter:brightness(1.06); }
.tl-btn.primary:disabled{ opacity:.55; cursor:default; }
.tl-ampliar{ width:100%; margin-top:16px; }

/* plan / mi tarifa */
.tl-plan-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:680px){ .tl-plan-grid{ grid-template-columns:repeat(2,1fr); } }
.tl-plan-cell{ background:rgba(var(--sg),.05); border:1px solid rgba(var(--sg),.14); border-radius:15px; padding:15px 16px; }
.tl-plan-lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(var(--tx),.5); }
.tl-plan-big{ font-size:24px; font-weight:800; color:var(--strong); margin-top:7px; letter-spacing:-.02em; }
.tl-plan-plus{ font-size:15px; font-weight:700; color:#37E6A4; }
.tl-plan-sub{ font-size:12px; color:rgba(var(--tx),.55); margin-top:3px; }

/* permanencia / sin-permanencia / cambio programado */
.tl-nperm{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#37E6A4; white-space:nowrap; padding:5px 11px; border-radius:999px; background:rgba(55,230,164,.08); border:1px solid rgba(55,230,164,.22); }
.tl-perm{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:13px 15px; border-radius:14px;
  background:rgba(255,181,159,.09); border:1px solid rgba(255,181,159,.24); color:rgba(var(--tx),.78); font-size:12.5px; line-height:1.5; }
.tl-perm svg{ flex:none; margin-top:1px; }
.tl-perm b{ color:var(--strong); font-weight:700; }
.tl-ghost-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:11px 15px; border-radius:12px;
  border:1px solid rgba(var(--sg),.22); background:transparent; color:rgba(var(--tx),.78); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:all .14s; }
.tl-ghost-btn:hover{ border-color:rgba(var(--sg),.4); color:var(--strong); }
.tl-sched{ display:flex; gap:9px; align-items:flex-start; margin-top:16px; padding:12px 14px; border-radius:13px;
  background:rgba(55,230,164,.07); border:1px solid rgba(55,230,164,.2); color:rgba(var(--tx),.8); font-size:12.5px; line-height:1.5; }
.tl-sched svg{ flex:none; margin-top:1px; }
.tl-sched b{ color:var(--strong); }
.tl-sched-note{ font-size:11.5px; color:rgba(var(--tx),.5); margin-top:9px; }

/* bonos */
.tl-bundles{ display:flex; flex-direction:column; gap:9px; }
.tl-bundles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
@media (max-width:680px){ .tl-bundles-grid{ grid-template-columns:1fr; } }
.tl-xtra{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:15px;
  background:rgba(var(--sg),.05); border:1px solid rgba(var(--sg),.16); }
.tl-xtra-ic{ width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:12px;
  background:rgba(55,230,164,.1); border:1px solid rgba(55,230,164,.26); }
.tl-xtra-main{ flex:1; min-width:0; }
.tl-xtra-name{ font-size:14px; font-weight:700; color:var(--strong); }
.tl-xtra-sub{ font-size:11.5px; color:rgba(var(--tx),.55); margin-top:2px; }
.tl-xtra-btn{ flex:none; padding:9px 15px; border-radius:11px; border:1px solid #37E6A4; background:transparent;
  color:#37E6A4; font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer; transition:all .16s; }
.tl-xtra-btn:hover{ background:#37E6A4; color:#04130D; }

/* modal */
.tl-modal-back{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px;
  background:rgba(4,19,13,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:tlfade .18s ease; }
@keyframes tlfade{ from{ opacity:0; } to{ opacity:1; } }
.tl-modal{ width:min(420px,100%); background:var(--mh-bg,#0c1813); border:1px solid rgba(var(--sg),.2);
  border-radius:22px; padding:26px 24px 22px; box-shadow:0 40px 90px -40px rgba(0,0,0,.7); animation:tlpop .22s cubic-bezier(.4,0,.2,1); }
.mh.light .tl-modal{ background:#fff; }
@keyframes tlpop{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.tl-modal-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#37E6A4; margin-bottom:10px; }
.tl-modal-t{ font-size:21px; font-weight:800; color:var(--strong); letter-spacing:-.02em; }
.tl-modal-s{ font-size:13.5px; line-height:1.55; color:rgba(var(--tx),.65); margin:8px 0 18px; }
.tl-bundle{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:14px 16px; border-radius:14px; border:1.5px solid rgba(var(--sg),.18); background:rgba(var(--sg),.04);
  cursor:pointer; transition:all .14s; font-family:inherit; text-align:left; }
.tl-bundle:hover{ border-color:rgba(55,230,164,.4); }
.tl-bundle.on{ border-color:#37E6A4; background:rgba(55,230,164,.08); }
.tl-bundle-l{ display:flex; flex-direction:column; gap:2px; }
.tl-bundle-gb{ font-size:15px; font-weight:700; color:var(--strong); }
.tl-bundle-sub{ font-size:11.5px; color:rgba(var(--tx),.55); }
.tl-bundle-price{ font-size:17px; font-weight:800; color:#37E6A4; }
.tl-modal .tl-btn.primary{ width:100%; margin-top:18px; }
.tl-link{ display:block; width:100%; margin-top:10px; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; color:rgba(var(--tx),.5); padding:8px; }
.tl-link:hover{ color:var(--strong); }
.tl-spin{ width:15px; height:15px; border-radius:50%; border:2px solid rgba(4,19,13,.3); border-top-color:#04130D;
  display:inline-block; animation:tlspin .7s linear infinite; }
@keyframes tlspin{ to{ transform:rotate(360deg); } }
.tl-done{ text-align:center; }
.tl-done-ic{ width:54px; height:54px; margin:4px auto 14px; border-radius:50%; display:grid; place-items:center; background:#37E6A4; }
.tl-done-ic.err{ background:#E8654B; }
.tl-secure{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:11px;
  font-size:11.5px; color:rgba(var(--tx),.5); }
.tl-done .tl-modal-t{ text-align:center; }
.tl-done .tl-modal-s{ text-align:center; }