/* Painel Web Pro — tema compartido (admin + reseller) */

:root{
  /* Estilo "tienda": azul noche + acento celeste */
  --bg:            #0a111d;
  --bg-soft:       rgba(9,15,27,.78);
  --surface:       rgba(24,33,52,.72);
  --surface-2:     #1b2436;
  --border:        rgba(148,163,184,.16);
  --text:          #e9eef6;
  --text-muted:    #8c99ae;
  --violet:        #22d3ee;   /* acento principal (celeste) */
  --pink:          #38bdf8;   /* acento secundario */
  --accent-ink:    #03202a;   /* texto sobre botones celestes */
  --accent-soft:   rgba(34,211,238,.12);
  --accent-line:   rgba(34,211,238,.32);
  --grad:          linear-gradient(90deg, #22d3ee, #22d3ee);
  --grad-banner:   linear-gradient(90deg, rgba(34,211,238,.16), rgba(56,189,248,.05));
  --ok:            #34d399;
  --warn:          #fbbf24;
  --danger:        #f87171;
  --radius:        16px;
  --page-bg:
    radial-gradient(1200px 600px at 0% 0%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(56,189,248,.08), transparent 60%),
    linear-gradient(135deg, #0c1b2b 0%, #0a111d 45%, #0b1626 100%);
}

html[data-theme="light"]{
  --bg:            #eef3f8;
  --bg-soft:       rgba(255,255,255,.85);
  --surface:       #ffffff;
  --surface-2:     #f1f5f9;
  --border:        #dde5ee;
  --text:          #0f1b2d;
  --text-muted:    #5d6b80;
  --violet:        #0891b2;
  --pink:          #0284c7;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(8,145,178,.10);
  --accent-line:   rgba(8,145,178,.30);
  --grad:          linear-gradient(90deg, #0891b2, #0891b2);
  --grad-banner:   linear-gradient(90deg, rgba(8,145,178,.12), rgba(2,132,199,.04));
  --ok:            #059669;
  --warn:          #d97706;
  --danger:        #dc2626;
  --page-bg:       linear-gradient(135deg, #f3f8fc 0%, #eef3f8 100%);
}

*{ box-sizing: border-box; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  transition: background .2s ease, color .2s ease;
}
.font-brand{ font-family:'Manrope', 'Inter', sans-serif; }

/* ---------- Login ---------- */
.login-bg{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(124,58,237,.35), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(219,39,119,.30), transparent 45%),
    var(--bg);
}
.login-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(30deg, transparent 48%, rgba(255,255,255,.035) 49%, rgba(255,255,255,.035) 51%, transparent 52%),
    linear-gradient(-30deg, transparent 48%, rgba(255,255,255,.035) 49%, rgba(255,255,255,.035) 51%, transparent 52%);
  background-size: 64px 110px;
  opacity:.5;
}
.login-card{
  position:relative;
  z-index:1;
  width:22rem;
  background: rgba(19,26,46,.85);
  backdrop-filter: blur(10px);
  border:1px solid var(--border);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
html[data-theme="light"] .login-card{ background: rgba(255,255,255,.9); }

.brand-mark{
  width:64px; height:64px; margin:0 auto;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background: var(--grad);
  box-shadow: 0 8px 24px rgba(124,58,237,.45);
}
.brand-mark svg{ width:32px; height:32px; }

.brand-word{
  font-weight:800; letter-spacing:.02em; text-align:center;
  font-size:1.05rem;
}
.brand-word .accent{
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.input-field{
  width:100%; background: var(--surface-2); border:1px solid var(--border);
  color:var(--text); border-radius:10px; padding:.6rem .8rem; outline:none;
  font-size:.9rem;
}
.input-field:focus{ border-color: var(--violet); }
.label-sm{ font-size:.7rem; letter-spacing:.04em; color:var(--text-muted); }

.btn-grad{
  width:100%; background: var(--grad); border:none; color:#fff; font-weight:600;
  border-radius:10px; padding:.65rem 1rem; cursor:pointer; transition:filter .15s ease;
}
.btn-grad:hover{ filter:brightness(1.08); }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:230px; flex-shrink:0;
  background: var(--bg-soft);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding: 1.1rem .9rem;
}
.sidebar-logo{
  display:flex; align-items:center; gap:.6rem;
  padding:.4rem .3rem 1.1rem;
  font-weight:800; font-size:1rem;
}
.sidebar-logo .mark{
  width:30px; height:30px; border-radius:9px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sidebar-logo .mark svg{ width:16px; height:16px; }

.nav-group-label{
  font-size:.65rem; letter-spacing:.08em; color:var(--text-muted);
  padding: .8rem .5rem .3rem;
}
.nav-item{
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .6rem; border-radius:10px; font-size:.86rem;
  color: var(--text-muted); cursor:pointer; margin-bottom:.15rem;
  border:1px solid transparent;
}
.nav-item svg{ width:17px; height:17px; flex-shrink:0; }
.nav-item:hover{ background: var(--surface-2); color:var(--text); }
.nav-item.active{
  background: var(--grad); color:#fff; box-shadow: 0 4px 14px rgba(124,58,237,.35);
}
.nav-item.logout{ margin-top:auto; color:var(--danger); }

.topbar{
  height:56px; flex-shrink:0;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 1.25rem;
  background: var(--bg-soft);
}
.icon-btn{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); cursor:pointer; border:1px solid transparent;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); }
.icon-btn svg{ width:17px; height:17px; }

.lang-select{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  font-size:.78rem; border-radius:8px; padding:.35rem .5rem; outline:none;
}

.content{ flex:1; padding:1.4rem; }

/* ---------- Cards / tables ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem;
}
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
}
.stat-card .stat-icon{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2);
}
.stat-card .stat-icon svg{ width:18px; height:18px; }
.stat-card .stat-value{ font-weight:800; font-size:1.15rem; }
.stat-card .stat-label{ font-size:.72rem; color:var(--text-muted); }
.stat-card.action{ cursor:pointer; transition:transform .12s ease, border-color .12s ease; }
.stat-card.action:hover{ transform:translateY(-2px); border-color:var(--violet); }

.banner{
  background: var(--grad-banner); border-radius: var(--radius);
  padding:.85rem 1.1rem; font-size:.85rem; font-weight:600; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

table.data{ width:100%; font-size:.82rem; border-collapse:collapse; }
table.data thead th{ text-align:left; color:var(--text-muted); font-weight:600; padding:.5rem .4rem; font-size:.72rem; letter-spacing:.03em; }
table.data tbody td{ padding:.55rem .4rem; border-top:1px solid var(--border); }
table.data tbody tr:hover{ background: var(--surface-2); }

.pill{ padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.pill-ok{ background:rgba(16,185,129,.15); color:var(--ok); }
.pill-warn{ background:rgba(245,158,11,.15); color:var(--warn); }
.pill-danger{ background:rgba(239,68,68,.15); color:var(--danger); }

.form-grid{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem; display:grid; grid-template-columns:1fr 1fr; gap:.75rem;
}
.form-grid input, .form-grid select, .form-grid textarea{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:9px; padding:.55rem .7rem; font-size:.85rem; outline:none;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{ border-color:var(--violet); }
.col-span-2{ grid-column: span 2; }

.btn-sm{ font-size:.75rem; padding:.3rem .6rem; border-radius:8px; border:none; cursor:pointer; font-weight:600; }
.btn-link{ background:none; border:none; cursor:pointer; font-size:.75rem; font-weight:600; }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.section-title{ font-weight:700; font-size:.95rem; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(5,7,15,.65); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem;
}
.modal-backdrop.hidden{ display:none; }
.modal{
  width:100%; max-width:24rem; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:1.4rem; box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.pill-off{ background:rgba(139,146,171,.15); color:var(--text-muted); }
.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:.35rem; background:currentColor; }
.pill-ok .dot{ box-shadow:0 0 0 3px rgba(16,185,129,.25); }

/* =====================================================================
   Estilo "tienda" (solo apariencia; mismas clases que antes)
   ===================================================================== */
html{ background:var(--bg); }
body{ background: var(--page-bg); background-attachment: fixed; min-height:100vh; }
h1, h2, h3, .section-title, .stat-value, .brand-word, .font-brand{ font-family:'Manrope','Inter',sans-serif; letter-spacing:-.01em; }

/* Login */
.login-bg{ background: var(--page-bg); }
.login-bg::before{ opacity:.18; }
.login-card{
  background: rgba(17,25,41,.82); border:1px solid var(--border); border-radius:22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="light"] .login-card{ background: rgba(255,255,255,.95); box-shadow: 0 20px 50px rgba(15,27,45,.10); }
.brand-mark{ background: #05090f; border:1px solid var(--border); box-shadow: 0 10px 30px rgba(34,211,238,.18); }
.brand-mark svg path{ stroke: var(--violet); }
.brand-word .accent{ background:none; color:var(--violet); -webkit-text-fill-color:currentColor; }

/* Botones */
.btn-grad{ border-radius:999px; color:var(--accent-ink); font-weight:700; }
.btn-sm{ border-radius:999px; padding:.42rem .95rem; font-weight:700; }
button[style*="var(--grad)"], .btn-grad{
  color: var(--accent-ink) !important; box-shadow: 0 6px 20px rgba(34,211,238,.22);
}
button[style*="background:var(--ok)"]{
  background: var(--violet) !important; color: var(--accent-ink) !important;
  box-shadow: 0 6px 20px rgba(34,211,238,.22);
}
button[style*="background:var(--surface-2)"]{
  background: transparent !important; border:1px solid var(--border) !important;
}
button[style*="background:var(--surface-2)"]:hover{ border-color: var(--accent-line) !important; }
.form-grid button, .modal button{ border-radius:999px !important; }
button:hover{ filter:brightness(1.06); }
button:disabled{ opacity:.55; cursor:not-allowed; }
.btn-link{ padding:.15rem .1rem; border-radius:6px; }
.btn-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Barra lateral y superior */
.sidebar{ background: var(--bg-soft); backdrop-filter: blur(14px); border-right:1px solid var(--border); }
.sidebar-logo .mark{ background:#05090f; border:1px solid var(--border); }
.sidebar-logo .mark svg path{ stroke: var(--violet); }
.sidebar-logo span[style]{ color: var(--violet) !important; }
.nav-item{ border-radius:12px; font-weight:500; }
.nav-item:hover{ background: var(--accent-soft); color: var(--text); }
.nav-item.active{
  background: var(--accent-soft); color: var(--violet); box-shadow: none;
  border:1px solid var(--accent-line); font-weight:700;
}
.nav-item.logout:hover{ background: rgba(248,113,113,.10); }
.topbar{ background: var(--bg-soft); backdrop-filter: blur(14px); height:60px; }
#page-title{ font-family:'Manrope','Inter',sans-serif; font-size:.98rem; font-weight:800; }
.lang-select{ border-radius:999px; padding:.35rem .7rem; background: var(--surface); }
.icon-btn{ border-radius:999px; border:1px solid var(--border); }

/* Tarjetas */
.card, .stat-card, .form-grid, table.data{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px rgba(0,0,0,.18);
}
html[data-theme="light"] .card, html[data-theme="light"] .stat-card,
html[data-theme="light"] .form-grid, html[data-theme="light"] table.data{ box-shadow: 0 6px 20px rgba(15,27,45,.06); }
.stat-card{ align-items:flex-start; text-align:left; padding:1.1rem 1.15rem; transition: border-color .15s ease, transform .15s ease; }
.stat-card .stat-icon{
  width:40px; height:40px; border-radius:12px; color: var(--violet) !important;
  background: var(--accent-soft); border:1px solid var(--accent-line);
}
.stat-card .stat-value{ font-size:1.3rem; }
.stat-card.action:hover{ border-color: var(--accent-line); }
#plans-grid .stat-card{ align-items:center; text-align:center; }
.banner{
  background: var(--grad-banner); border:1px solid var(--accent-line); color: var(--text);
  border-radius: var(--radius);
}

/* Formularios */
.form-grid{ padding:1.25rem; gap:.8rem; }
.form-grid input, .form-grid select, .form-grid textarea, .input-field{
  background: rgba(10,17,29,.55); border:1px solid var(--border); border-radius:12px; padding:.65rem .85rem;
}
html[data-theme="light"] .form-grid input, html[data-theme="light"] .form-grid select,
html[data-theme="light"] .form-grid textarea, html[data-theme="light"] .input-field{ background:#f8fafc; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .input-field:focus{
  border-color: var(--violet); box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="checkbox"]{ accent-color: var(--violet); }

/* Tablas */
table.data{ border-collapse:separate; border-spacing:0; overflow:hidden; }
table.data thead th{
  background: rgba(255,255,255,.02); text-transform:uppercase; font-size:.66rem; letter-spacing:.07em;
  padding:.75rem .8rem; border-bottom:1px solid var(--border);
}
table.data tbody td{ padding:.7rem .8rem; }
table.data tbody tr:first-child td{ border-top:none; }
table.data tbody tr:hover{ background: var(--accent-soft); }

/* Etiquetas */
.pill{ border:1px solid transparent; padding:.18rem .6rem; }
.pill-ok{ border-color: rgba(52,211,153,.25); }
.pill-warn{ border-color: rgba(251,191,36,.25); }
.pill-danger{ border-color: rgba(248,113,113,.25); }
.pill-off{ border-color: var(--border); }

/* Secciones y modales */
.section-title{ font-size:1.05rem; font-weight:800; }
.modal{ background: var(--surface-2); border-radius:20px; border:1px solid var(--border); }
.modal-backdrop{ background: rgba(3,8,16,.7); }

/* Celular: la barra lateral pasa arriba como menu horizontal */
@media (max-width: 768px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; align-items:center; overflow-x:auto; padding:.6rem; gap:.3rem; border-right:none; border-bottom:1px solid var(--border); }
  .sidebar-logo{ padding:0 .4rem 0 0; }
  .sidebar-logo span{ display:none; }
  .nav-group-label{ display:none; }
  .nav-item{ white-space:nowrap; margin:0; }
  .nav-item.logout{ margin-top:0; }
  .content{ padding:1rem; }
  table.data{ display:block; overflow-x:auto; }
}

/* "hidden" siempre gana (vistas, modales, formularios ocultos) */
.hidden{ display:none !important; }

/* ---------- Tienda de creditos (estilo de la tienda) ---------- */
.shop-hero{ text-align:center; padding:1.2rem 0 .4rem; }
.shop-badge{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:600;
  color:var(--violet); background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:.32rem .8rem; border-radius:999px;
}
.shop-badge svg{ width:14px; height:14px; }
.shop-title{ font-family:'Manrope','Inter',sans-serif; font-weight:800; font-size:2rem; margin:.8rem 0 .3rem; letter-spacing:-.02em; }
.shop-sub{ color:var(--text-muted); font-size:.92rem; }
.shop-features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.9rem; margin:1.4rem 0 1.6rem; }
.feature-tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.05rem 1.1rem; }
.ft-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--violet); margin-bottom:.7rem; }
.ft-icon svg{ width:18px; height:18px; }
.ft-title{ font-weight:700; font-size:.88rem; margin-bottom:.25rem; }
.ft-text{ color:var(--text-muted); font-size:.8rem; line-height:1.45; }

.shop-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.2rem; align-items:start;
  background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:1.4rem;
}
.plan-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--surface-2);
  border:1px solid var(--border); border-radius:18px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.22); transition:transform .15s ease, border-color .15s ease;
}
.plan-card:hover{ transform:translateY(-2px); border-color:var(--accent-line); }
.plan-card.featured{ border-color:var(--violet); box-shadow:0 18px 40px rgba(34,211,238,.14); }
.plan-ribbon{ background:var(--violet); color:var(--accent-ink); text-align:center; font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:.6rem; }
.plan-body{ padding:1.25rem 1.3rem 1.1rem; }
.plan-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.plan-name{ font-family:'Manrope','Inter',sans-serif; font-weight:800; font-size:1.02rem; }
.plan-tag{ font-size:.7rem; font-weight:600; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:.15rem .55rem; background:rgba(255,255,255,.03); }
.plan-sub{ color:var(--text-muted); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; margin-top:.3rem; }
.plan-sep{ height:1px; background:var(--border); margin:1rem 0 .9rem; }
.plan-price{ font-family:'Manrope','Inter',sans-serif; font-weight:800; font-size:2.3rem; line-height:1; letter-spacing:-.02em; }
.plan-price .cur{ font-size:1rem; color:var(--text-muted); font-weight:700; margin-right:.25rem; vertical-align:.15em; }
.plan-unit{ color:var(--text-muted); font-size:.74rem; margin-top:.45rem; }
.plan-chips{ display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; margin:1rem 0 1.2rem; }
.chip{ display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:600; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:999px; padding:.32rem .75rem; }
.chip svg{ width:14px; height:14px; color:var(--violet); }
.plan-btn{
  width:100%; border-radius:999px; padding:.7rem 1rem; font-weight:700; font-size:.88rem; cursor:pointer;
  background:transparent; color:var(--text); border:1px solid rgba(148,163,184,.35);
}
.plan-btn:hover{ border-color:var(--violet); color:var(--violet); }
.plan-card.featured .plan-btn{ background:var(--violet); color:var(--accent-ink); border-color:var(--violet); }
.plan-card.featured .plan-btn:hover{ color:var(--accent-ink); filter:brightness(1.08); }
.plan-foot{ display:flex; align-items:center; justify-content:center; gap:.35rem; color:var(--text-muted); font-size:.72rem; margin-top:.8rem; }
.plan-foot svg{ width:13px; height:13px; color:var(--violet); }
html[data-theme="light"] .plan-card{ background:#fff; box-shadow:0 8px 24px rgba(15,27,45,.07); }
html[data-theme="light"] .shop-grid{ background:#f8fafc; }

/* Pestanas de duracion al crear cuentas */
.seg-tabs{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.02); }
.form-grid .seg-tab, .seg-tab{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.75rem .4rem .65rem; background:transparent; border:none; border-right:1px solid var(--border); color:var(--text-muted); cursor:pointer; border-radius:0 !important; box-shadow:none; }
.seg-tab:last-child{ border-right:none; }
.seg-tab:hover{ background:var(--accent-soft); }
.seg-tab.active{ background:rgba(255,255,255,.07); color:var(--text); box-shadow:inset 0 -2px 0 var(--violet); }
.seg-top{ font-weight:700; font-size:.86rem; }
.seg-sub{ font-size:.68rem; }
.seg-best{ font-size:.55rem; font-weight:800; letter-spacing:.08em; color:var(--violet); text-transform:uppercase; }
@media (max-width:768px){
  .seg-tabs{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr); }
  .seg-tab{ border-bottom:1px solid var(--border); }
  .shop-title{ font-size:1.6rem; }
}