:root{
  /* Paleta base (según imagen adjunta) */
  --p-900:#084868; /* azul oscuro */
  --p-700:#088090; /* teal */
  --p-500:#00b8d8; /* cyan */
  --p-300:#00f8c8; /* mint */

  /* Tema (más oscuro) */
  --bg:#031a26;
  --card:#062f45;
  --card-2:#05293b;
  --text:#eaf8ff;
  --muted:rgba(234,248,255,.72);
  --border:rgba(0,184,216,.22);
  --shadow:0 14px 34px rgba(0,0,0,.38);
  --radius:16px;
  --radius-sm:12px;
}

*{box-sizing:border-box}

/*
  Importante:
  - El fondo se aplica en <html> para evitar “cortes”/líneas cuando el contenido crece.
  - body queda transparente y con min-height para que el fondo sea continuo.
*/
html,body{min-height:100%}

html{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,248,200,.16), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(0,184,216,.14), transparent 55%),
    linear-gradient(180deg, #031a26 0%, #02131c 100%);
  background-color:#02131c;
  color:var(--text);
}

body{
  margin:0;
  min-height:100vh;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:transparent;
  color:var(--text);
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:12px; justify-content:space-between; align-items:center;
  padding:12px 14px;
  background:linear-gradient(90deg, var(--p-900), #062f45 55%, var(--p-700));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.brand{display:flex; gap:12px; align-items:center;}
.brand__copy{text-align:center;}
.brand__logo{
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  object-fit:contain;
}
.brand__title{font-weight:900; letter-spacing:.6px; text-transform:uppercase;}
.brand__subtitle{font-size:12px; opacity:.8; margin-top:2px;}

.topbar__actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}

/* ---------- Tabs / Pages ---------- */
.topbar{flex-wrap:wrap;}
.topbar__tabs{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  flex:1 1 320px;
}
.tabBtn{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(234,248,255,.9);
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.tabBtn:hover{background:rgba(255,255,255,.09);}
.tabBtn.is-active{
  background:rgba(0,248,200,.16);
  border-color:rgba(0,248,200,.35);
  color:#eaffff;
}
.page{display:none;}
.page.is-active{display:grid; gap:14px;}

@media (max-width: 860px){
  .topbar{align-items:flex-start;}
  .topbar__tabs{
    order:3;
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }
}

/* ---------- Layout ---------- */
.container{max-width:1200px; margin:0 auto; padding:14px;}
.appShell{min-height:100vh; display:flex; flex-direction:column;}
.appShell > .container{flex:1 0 auto; width:100%;}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:rgba(255,255,255,.06);
  --btn-fg:var(--text);
  --btn-border:rgba(255,255,255,.14);
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-border);
  padding:10px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:14px;
  font-weight:900;
  letter-spacing:.1px;
  backdrop-filter: blur(8px);
}
.btn:hover{filter:brightness(1.08)}
.btn--primary{
  --btn-bg:linear-gradient(180deg, var(--p-300), #11eac5);
  --btn-fg:#062333;
  --btn-border:transparent;
  box-shadow:0 12px 26px rgba(0,248,200,.18);
}
.btn--primary:hover{filter:brightness(.98)}
.btn--file{position:relative; overflow:hidden;}
.btn--mini{padding:8px 10px; font-size:13px; white-space:nowrap;}

/* Botones en barra superior */
.topbar .btn{
  --btn-bg:rgba(255,255,255,.10);
  --btn-fg:#fff;
  --btn-border:rgba(255,255,255,.18);
}
.topbar .btn:hover{filter:brightness(1.08)}
.topbar .btn--primary{
  --btn-bg:var(--p-300);
  --btn-fg:#062333;
  --btn-border:transparent;
}

/* ---------- Inputs ---------- */
.input{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.input::placeholder{color:rgba(234,248,255,.55)}
.input:focus{border-color:var(--p-500); box-shadow:0 0 0 4px rgba(0,184,216,.22)}
.input--small{width:92px;}
.input--tiny{width:120px;}


/* ---------- Select dropdown readability ---------- */
select.input{color:var(--text);}
select.input option, select.input optgroup{color:#0b1b24; background:#ffffff;}
/* ---------- Utility ---------- */
.muted{color:var(--muted); font-size:13px; margin-top:10px;}

.row{display:flex; align-items:center; flex-wrap:wrap; gap:10px;}
.row--nowrap{flex-wrap:nowrap;}

@media (max-width: 420px){
  .row--nowrap{flex-wrap:wrap;}
}


/* Recargas mini-filtros (derecha) */
#recSearch{flex:1 1 240px; max-width:360px; width:auto;}
#recFilter{flex:0 1 170px; width:170px;}
/* ---------- Cards ---------- */
.card{
  /* Fondo sólido (evita bandas/líneas cuando la tarjeta crece en altura) */
  background:rgba(6,47,69,.78);
  border:1px solid rgba(0,184,216,.20);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  backdrop-filter: blur(10px);
}
.card__header{display:flex; gap:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;}
.card__title{margin:0; font-size:16px;}

.filters{display:flex; gap:10px; align-items:center; flex-wrap:wrap; width:100%;}

/* Filtros en una sola línea (si hay espacio) */
.filters .input{width:auto; min-width:0;}
#searchPlans{flex:1 1 260px; max-width:420px;}
#filterStatus{flex:0 1 160px; width:160px;}
#filterService{flex:0 1 220px; width:220px;}


/* Plan list tools */
.plansTools{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.tableWrap--limited{max-height:680px; overflow:auto;}
.plansCards--limited{max-height:70vh; overflow:auto;}
/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px;}
.kpi{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  cursor:pointer;
  transition:transform .08s ease, filter .08s ease;
}
.kpi:hover{transform:translateY(-1px); filter:brightness(1.06)}
.kpi__label{font-size:12px; color:var(--muted); font-weight:800;}
.kpi__value{font-size:24px; font-weight:1000; margin-top:4px; letter-spacing:.3px;}
.kpi__meta{margin-top:6px; font-size:12px; color:rgba(234,248,255,.62)}
.kpi--static{cursor:default;}
.kpi--static:hover{transform:none; filter:none}

/* ---------- Charts ---------- */
.charts{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;}
.chartCard{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
}
.chartCard__header{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;}
.chartCard__title{margin:0; font-size:14px; font-weight:1000;}
.chartCard__sub{font-size:12px; color:rgba(234,248,255,.62); margin-top:4px;}
.chartCard__body{display:grid; grid-template-columns:160px minmax(0, 1fr); gap:12px; align-items:center; margin-top:10px;}

.donut{width:160px; height:160px; display:grid; place-items:center;}
.donut svg{width:160px; height:160px; overflow:visible;}
.donut .centerText{font-weight:700; fill:var(--text);}
.donut .centerSub{fill:rgba(234,248,255,.70); font-size:3.1px; font-weight:600;}

.legend{display:grid; gap:8px;}
.legendItem{display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(234,248,255,.82)}
.legendSwatch{width:12px; height:12px; border-radius:4px;}
.legendVal{margin-left:auto; font-weight:900; color:var(--text)}

/* ---------- Tables ---------- */
.tableWrap{overflow:auto; margin-top:12px;}
.table{width:100%; border-collapse:collapse; min-width:980px;}
.table th,.table td{padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.10); text-align:left; font-size:14px;}
.table th{font-size:12px; color:rgba(234,248,255,.65); text-transform:uppercase; letter-spacing:.04em;}

/* Badges */
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); font-size:12px;}
.badge--active{border-color:rgba(0,248,200,.55); background:rgba(0,248,200,.10);}
.badge--expiring{border-color:rgba(0,184,216,.55); background:rgba(0,184,216,.10);}
.badge--expired{border-color:rgba(255,77,77,.55); background:rgba(255,77,77,.10);}

/* Service icon next to client */
.clientCell{display:flex; align-items:center; gap:10px;}
.svcIcon{width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); flex:0 0 auto;}

.actionRow{display:flex; gap:8px; flex-wrap:wrap;}
.actionBtn{padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--text); cursor:pointer; font-size:13px; font-weight:900;}
.actionBtn:hover{filter:brightness(1.08)}
.actionBtn--danger{border-color:rgba(255,77,77,.55); color:#ffb3b3;}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; align-items:center; justify-content:center; padding:12px; z-index:50;}
.modal.is-open{display:flex;}
.modal__dialog{
  width:min(760px, 100%);
  background:var(--card-2);
  border:1px solid rgba(0,184,216,.22);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  overflow:hidden;
  max-height:92vh;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.modal__dialog--wide{width:min(1100px, 100%); max-height:86vh;}
.modal__header{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px 14px 10px; border-bottom:1px solid rgba(255,255,255,.12); background:var(--card);}
.modal__title{font-weight:1000;}
.modal__subtitle{font-size:13px; color:rgba(234,248,255,.70); margin-top:4px;}
.modal__body{padding:14px; overflow:auto; flex:1 1 auto; min-height:0;}
.modal__footer{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid rgba(255,255,255,.12); flex-wrap:wrap; background:var(--card);}

.iconBtn{border:none; background:rgba(255,255,255,.10); color:var(--text); width:40px; height:40px; border-radius:12px; cursor:pointer; font-size:18px;}
.iconBtn:hover{filter:brightness(1.12)}

/* Form */
.grid2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;}
.field{display:grid; gap:6px;}
.field__label{font-size:12px; color:rgba(234,248,255,.92); font-weight:900;}
.field__hint{font-size:12px; color:rgba(234,248,255,.65);}
.field--full{grid-column:1 / -1;}

.chip{border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--text); padding:8px 10px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:900;}
.chip:hover{filter:brightness(1.12)}

/* ---------- Factura / Ticket ---------- */
.invoiceGrid{
  display:grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap:14px;
  align-items:start;
}
.invoiceTicket{
  background:#ffffff;
  color:#0b1b24;
  border-radius:16px;
  padding:14px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 16px 44px rgba(0,0,0,.35);
  font-size:13px;
}
.invBrand{ text-align:center; margin-bottom:10px; }
.invLogo{ width:76px; height:auto; border-radius:16px; display:block; margin:0 auto 6px; }
.invTitle{ font-weight:900; letter-spacing:.6px; font-size:18px; }
.invSub{ text-align:center; font-size:12px; opacity:.85; margin-top:2px; }
.invDivider{ height:1px; background:rgba(0,0,0,.12); margin:10px 0; }
.invSection{ text-align:center; font-weight:900; font-size:12px; letter-spacing:.04em; }
.invLine{ text-align:center; margin:4px 0; }
.invAmount{ font-weight:900; font-size:18px; text-align:center; margin:10px 0; }
.invLegal{ font-size:11px; text-align:center; line-height:1.35; font-style:italic; font-weight:600; opacity:.9; }
.invSign{ text-align:center; font-size:12px; margin-top:10px; color:#0b1b24; }
.invQr{ display:flex; justify-content:center; align-items:center; margin-top:10px; min-height:120px; }

.invoiceForm{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:12px;
}

@media (max-width: 980px){
  .invoiceGrid{ grid-template-columns: 1fr; }
  .invoiceTicket{ max-width: 420px; justify-self:center; }
}

/* Recargas layout */
.recargasGrid{display:grid; grid-template-columns:420px minmax(0, 1fr); gap:14px;}
.recForm,.recResumen{background:var(--card); border:1px solid rgba(0,184,216,.20); border-radius:16px; padding:12px;}
.sectionTitle{margin:0 0 8px; font-size:14px; font-weight:1000;}
.stack{display:grid; gap:10px;}
.divider{height:1px; background:rgba(255,255,255,.12); margin:12px 0;}

/* Vista móvil: tarjetas de planes */
.plansCards{display:none;}
.planCard{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
}
.planCard__header{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.planCard__client{font-weight:1000;}
.planCard__sub{font-size:12px; color:rgba(234,248,255,.65); margin-top:2px;}
.planCard__grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:10px;}
.kv{display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(0,184,216,.08);}
.kv span{font-size:11px; color:rgba(234,248,255,.65); text-transform:uppercase; letter-spacing:.04em;}
.kv b{font-size:14px; color:var(--text);}
.emptyCard{padding:12px; border:1px dashed rgba(255,255,255,.18); border-radius:var(--radius); color:rgba(234,248,255,.70);}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .charts{grid-template-columns:1fr;}
  .chartCard__body{grid-template-columns:160px 1fr;}
}

@media (max-width: 980px){
  .kpis{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .recargasGrid{grid-template-columns:1fr;}
}

@media (max-width: 860px){
  .topbar{flex-direction:column; align-items:stretch;}
  .topbar__actions{justify-content:flex-start}
}

@media (max-width: 780px){
  .tableWrap{display:none}
  .plansCards{display:grid; gap:12px; margin-top:12px;}
}

@media (max-width: 720px){
  .grid2{grid-template-columns:1fr;}
  .chartCard__body{grid-template-columns:1fr;}
  .donut{justify-self:center;}
  .recForm .btn--primary{width:100%;}
}

@media (max-width: 560px){
  .topbar__actions{justify-content:flex-start}
  .planCard__grid{grid-template-columns:1fr;}
}
/* ==============================
BOTONES CIRCULARES PROFESIONALES
============================== */

.iconBtn{
width:32px;
height:32px;
border-radius:50%;
border:none;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:white;
transition:all .2s;
}

.iconBtn svg{
width:16px;
height:16px;
}

.iconBtn:hover{
transform:scale(1.08);
}

.iconBtn.edit{
background:#3498db;
}

.iconBtn.renew{
background:#2ecc71;
}

.iconBtn.invoice{
background:#9b59b6;
}

.iconBtn.delete{
background:#e74c3c;
}


/* ==============================
ESTADOS SOLO CIRCULO
============================== */

.statusDot{
width:12px;
height:12px;
border-radius:50%;
display:inline-block;
}

.status-active{
background:#2ecc71;
}

.status-expiring{
background:#f1c40f;
}

.status-expired{
background:#e74c3c;
}
/* ---------- Mejoras responsive para Cloudflare Pages ---------- */
img, svg, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; }
.tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { min-width: 860px; }
.modal__dialog { width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
@media (max-width: 720px){
  .container { padding: 10px; }
  .topbar { position: static; padding: 10px; }
  .brand__logo { width: 38px; height: 38px; border-radius: 12px; }
  .brand__title { font-size: 14px; }
  .brand__subtitle { font-size: 11px; }
  .topbar__actions { width: 100%; }
  .topbar__actions .btn { flex: 1 1 150px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charts { grid-template-columns: 1fr; }
  .card__header, .filters, .plansTools { align-items: stretch; }
  .filters .input, #searchPlans, #filterStatus, #filterService, #recSearch, #recFilter { width: 100%; max-width: none; flex-basis: 100%; }
  .row { align-items: stretch; }
  .row > .btn, .row > label.btn { flex: 1 1 140px; text-align: center; }
  .modal__dialog { border-radius: 14px; }
  .formGrid, .formGrid--two, .formGrid--three { grid-template-columns: 1fr !important; }
}
@media (max-width: 420px){
  .kpis { grid-template-columns: 1fr; }
  .tabBtn { padding: 8px 10px; font-size: 12px; }
  .btn { width: 100%; }
  .actionRow { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .actionRow .actionBtn, .actionRow .iconBtn { width: 100%; justify-content: center; }
}


/* ---------- Auth ---------- */
.appShell[hidden], .authGate[hidden]{display:none !important;}
.authGate{
  min-height:100vh;
  display:grid;
  grid-template-rows:1fr auto;
  place-items:center;
  padding:24px;
}
.authCard{
  width:min(440px, 100%);
  background:rgba(6,47,69,.86);
  border:1px solid rgba(0,184,216,.25);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:22px;
  backdrop-filter:blur(10px);
  text-align:center;
}
.authHeader{text-align:center;}
.authLogo{
  width:70px;
  height:70px;
  object-fit:contain;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  display:block;
  margin:0 auto;
}
.authTitle{margin:14px 0 6px; font-size:24px; line-height:1.15; text-align:center; letter-spacing:.7px; text-transform:uppercase;}
.authText{margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.45; text-align:center;}
.authForm{display:grid; gap:12px; text-align:left;}
.authActions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.authMsg{min-height:22px; color:var(--muted); font-size:13px; line-height:1.35; text-align:center;}
.authMsg[data-type="error"]{color:#ffb4b4;}
.authMsg[data-type="ok"]{color:#9fffe6;}
.authWelcome{display:flex; align-items:center; gap:5px; font-size:12px; color:rgba(234,248,255,.78); white-space:nowrap;}
.authUser{display:inline-block; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.siteFooter{
  width:100%;
  padding:14px 16px;
  text-align:center;
  color:rgba(234,248,255,.78);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
}
.appFooter{
  flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(3,26,38,.72);
}
.authFooter{
  align-self:center;
}
@media (max-width: 540px){
  .authCard{padding:18px;}
  .authActions{justify-content:stretch;}
  .authActions .btn{width:100%;}
  .authUser{max-width:100%;}
  .authWelcome{width:100%; justify-content:center;}
}

/* =========================================================
   AJUSTE RESPONSIVE MOVIL - ENCABEZADO COMPACTO
   Solo cambia visual: logo + titulo + icono salir,
   bienvenido, tabs y boton principal sin espacios vacios.
========================================================= */

.logoutIcon{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:50%;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.logoutIcon svg{
  width:22px;
  height:22px;
  display:block;
  fill:currentColor;
}

.topbar .logoutIcon{
  --btn-bg:rgba(255,255,255,.12);
  --btn-fg:#ffffff;
  --btn-border:rgba(255,255,255,.22);
}

.topbar .logoutIcon:hover{
  --btn-bg:rgba(255,255,255,.18);
}

@media (max-width: 720px){
  .topbar{
    position:static;
    display:grid;
    grid-template-columns:54px minmax(0, 1fr) 44px;
    grid-template-areas:
      "brand brand logout"
      "welcome welcome welcome"
      "tabs tabs tabs"
      "primary primary primary";
    align-items:center;
    gap:8px;
    padding:10px 12px 12px;
    justify-content:initial;
  }

  .topbar__left{
    grid-area:brand;
    min-width:0;
  }

  .brand{
    display:grid;
    grid-template-columns:52px minmax(0, 1fr);
    gap:8px;
    align-items:center;
    width:100%;
  }

  .brand__logo{
    width:48px;
    height:48px;
    border-radius:14px;
    justify-self:start;
  }

  .brand__copy{
    min-width:0;
    text-align:center;
  }

  .brand__title{
    font-size:18px;
    line-height:1.12;
    letter-spacing:.7px;
  }

  .brand__subtitle{
    max-width:270px;
    margin:2px auto 0;
    font-size:11px;
    line-height:1.2;
  }

  .topbar__actions{
    display:contents;
  }

  .logoutIcon,
  .topbar .logoutIcon{
    grid-area:logout;
    justify-self:end;
    align-self:center;
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:50%;
    padding:0;
  }

  .authWelcome{
    grid-area:welcome;
    width:100%;
    justify-content:center;
    text-align:center;
    margin:0;
    font-size:13px;
    color:rgba(234,248,255,.82);
  }

  .authUser{
    max-width:230px;
  }

  .topbar__tabs{
    grid-area:tabs;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    justify-content:stretch;
    overflow:visible;
    padding:0;
  }

  .tabBtn{
    width:100%;
    min-width:0;
    padding:9px 7px;
    font-size:13px;
    line-height:1.1;
    text-align:center;
  }

  #btnOpenPlan,
  #btnOpenRecargas{
    grid-area:primary;
    width:100%;
    justify-self:stretch;
    padding:13px 14px;
    border-radius:18px;
    font-size:18px;
    text-align:center;
  }

  .container{
    padding-top:10px;
  }

  .page.is-active{
    gap:10px;
  }

  .card{
    border-radius:18px;
  }
}

@media (max-width: 420px){
  .brand{
    grid-template-columns:46px minmax(0, 1fr);
    gap:7px;
  }

  .brand__logo{
    width:42px;
    height:42px;
  }

  .brand__title{
    font-size:16px;
  }

  .brand__subtitle{
    font-size:10.5px;
  }

  .logoutIcon,
  .topbar .logoutIcon{
    width:38px;
    height:38px;
    min-width:38px;
  }

  .logoutIcon svg{
    width:21px;
    height:21px;
  }

  .tabBtn{
    font-size:12px;
    padding:8px 6px;
  }

  #btnOpenPlan,
  #btnOpenRecargas{
    font-size:17px;
    padding:12px;
  }
}

/* =========================================================
   AJUSTE MOVIL - COLORES DE INDICADORES Y FILTROS
   Solo visual: no cambia logica, Supabase ni configuracion.
========================================================= */
@media (max-width: 780px){
  .plansCards .badge{
    font-weight:1000;
    color:#062333;
    border-width:2px;
    box-shadow:0 6px 14px rgba(0,0,0,.18);
  }

  .plansCards .badge--active{
    color:#062333;
    background:#2ecc71;
    border-color:#22b765;
  }

  .plansCards .badge--expiring{
    color:#062333;
    background:#f1c40f;
    border-color:#d8b000;
  }

  .plansCards .badge--expired{
    color:#ffffff;
    background:#e74c3c;
    border-color:#c93628;
  }
}