/* Estilos compartidos del panel web owner/staff (morosos, cuentas, hogar,
   modificar plan, mover cuenta, quitar acceso, dar de baja, ganancias,
   suscripciones de plataforma, editar cliente, launcher /panel).
   Extraido de revendedores.html para no repetir ~170 lineas de CSS en
   cada pagina nueva. Mismo look que el resto del sitio (cuentas.html,
   hogar.html, index.html). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#040d1a;--surface:#071525;--border:#0d2540;
  --cyan:#00b4d8;--cyan2:#0096c7;--orange:#f77f00;--orange2:#fcbf49;
  --text:#e0f4ff;--muted:#3a6080;--success:#4ade80;--error:#ff4d6d;--gold:#ffd60a;
  --purple:#a855f7;
  /* Tipografía estilo Netflix (pedido del owner, 2026-09-27) -- Netflix
     Sans (la fuente real de Netflix) no es de uso libre para la web, así
     que se usa Inter, la alternativa gratuita más parecida (mismo
     espíritu geométrico/limpio, ampliamente citada como sustituto de
     Netflix Sans). Al principio esto era solo para el tema claro; al
     owner le gustó y pidió el mismo cambio para el oscuro, así que ahora
     los dos temas comparten esta misma tipografía -- reemplaza la
     combinación original (Nunito para títulos + DM Mono "de terminal"
     para el resto). */
  --font-heading:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* TEMA CLARO ("modo día", pedido del owner 2026-09-27) -- <html
   data-theme="light">, ver _aplicarTema()/_toggleTema() en
   panel_common.js.

   3er intento (2026-09-27): 1ro blanco puro ("muy blanco"), 2do navy
   aclarado, 3ro Netflix con --surface blanco puro -- el owner lo probó
   y le resultó "chocante" igual (el blanco de las tarjetas/topbar/menú
   contra el gris del fondo saltaba mucho). 4to: mismo espíritu Netflix
   (rojo #e50914 como color principal, negro casi puro para texto) pero
   con --bg y --surface los dos en gris, más cerca uno del otro -- se
   nota la separación entre tarjeta y fondo sin que ninguno de los dos
   sea blanco puro. --error ya NO puede ser rojo (ahí es donde vive el
   rojo de marca ahora) -- pasa a un naranja quemado, todavía se lee
   como "alerta" sin competir con los botones/links principales. */
:root[data-theme="light"]{
  --bg:#e3e3df;--surface:#eeeeea;--border:#cfcfc9;
  --cyan:#e50914;--cyan2:#b20710;--orange:#f0a20a;--orange2:#c98708;
  --text:#141414;--muted:#6d6d6d;--success:#1e8e3e;--error:#d84315;--gold:#8a6600;
  --purple:#7c3aed;
}
body{background:var(--bg);color:var(--text);font-family:var(--font-mono);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 40% at 50% -5%,rgba(0,180,216,0.12) 0%,transparent 60%);pointer-events:none;z-index:0}
:root[data-theme="light"] body::before{background:radial-gradient(ellipse 80% 40% at 50% -5%,rgba(229,9,20,0.05) 0%,transparent 60%)}

/* LOGIN */
.login-overlay{position:fixed;inset:0;background:rgba(4,13,26,0.98);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:36px;width:100%;max-width:380px;position:relative}
.login-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);border-radius:20px 20px 0 0}
.login-logo{text-align:center;margin-bottom:20px}
.login-logo-icon{font-size:40px;display:block;margin-bottom:8px}
.login-title{font-family:var(--font-heading);font-size:22px;font-weight:900;color:var(--text);margin-bottom:4px;text-align:center}
.login-sub{font-size:11px;color:var(--muted);margin-bottom:24px;text-align:center;letter-spacing:1px}
.login-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;font-family:var(--font-mono);font-size:14px;color:var(--text);outline:none;margin-bottom:12px;letter-spacing:2px}
.login-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,180,216,0.1)}
.login-btn{width:100%;background:linear-gradient(135deg,var(--cyan2),var(--cyan));color:#040d1a;border:none;border-radius:10px;padding:14px;font-family:var(--font-heading);font-size:15px;font-weight:900;cursor:pointer;letter-spacing:1px}
.login-btn:hover{opacity:0.9}
.login-error{color:var(--error);font-size:12px;margin-top:10px;display:none;text-align:center}

/* MODAL GENERICO (ver mostrarModal/cerrarModal en panel_common.js) */
.modal-overlay{position:fixed;inset:0;background:rgba(4,13,26,0.85);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto}
.modal-box.modal-box-video{max-width:720px}
.moneda-selector{display:flex;gap:8px;margin:10px 0}
.moneda-opcion{flex:1;text-align:center;border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;font-size:13px}
.moneda-opcion.selected{border-color:var(--cyan);background:rgba(0,180,216,0.1);color:var(--cyan)}

/* MAIN */
.main{display:none;position:relative;z-index:1}
.main.show{display:block}

/* TOPBAR */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:10}
.topbar-brand{font-family:var(--font-heading);font-size:16px;font-weight:900;color:var(--cyan);white-space:nowrap}
.topbar-user{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);position:relative}
.topbar-badge{background:rgba(0,180,216,0.1);border:1px solid rgba(0,180,216,0.3);color:var(--cyan);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:bold}
.topbar-badge.admin{background:rgba(255,214,10,0.1);border-color:rgba(255,214,10,0.3);color:var(--gold)}
.btn-logout{background:none;border:1px solid var(--border);color:var(--muted);padding:5px 12px;border-radius:6px;cursor:pointer;font-family:var(--font-mono);font-size:11px}
.btn-logout:hover{border-color:var(--error);color:var(--error)}

/* Cinta de estado colapsable en celular (pedido del owner, 2026-09-27)
   -- ver _inicializarTopbarInfoStrip() en panel_common.js. En PC
   "display:contents" hace que #topbarInfoStrip sea invisible como caja
   -- sus hijos (bot, tema, horas, ADMIN/STAFF) siguen en la misma fila
   de .topbar-user de siempre, como si el envoltorio no existiera; el
   botón ⓘ queda oculto porque ahí no hace falta. En mobile se invierte:
   la cinta arranca escondida y el botón ⓘ la abre/cierra como un
   desplegable flotante debajo del topbar. */
.topbar-info-toggle{display:none;background:none;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:4px 9px;cursor:pointer;font-size:13px;line-height:1}
.topbar-info-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.topbar-info-strip{display:contents}
@media (max-width:700px){
  .topbar-info-toggle{display:inline-flex;align-items:center}
  /* position:fixed contra el viewport (no absolute contra .topbar-user)
     a propósito -- en mobile .topbar-user suele saltar a su propia fila
     (flex-wrap del .topbar) y termina pegado a la izquierda, así que
     "right:0" relativo a ESE contenedor angosto quedaba recortado
     contra el borde. Mismo patrón ya probado que usa #alertasUrgentesPanel. */
  .topbar-info-strip{display:none;position:fixed;top:56px;right:12px;flex-direction:column;align-items:flex-start;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,0.35);z-index:250;min-width:180px;max-width:calc(100vw - 24px)}
  .topbar-info-strip.open{display:flex}
}

/* NAV entre paginas del panel */
.panel-nav{display:flex;flex-wrap:wrap;gap:4px;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--border)}
.panel-nav a{color:var(--muted);text-decoration:none;font-size:11px;padding:6px 10px;border-radius:6px;white-space:nowrap}
.panel-nav a:hover{color:var(--text);background:rgba(0,180,216,0.06)}
.panel-nav a.active{color:var(--cyan);background:rgba(0,180,216,0.12);font-weight:bold}

/* CONTENT */
.content{padding:24px;max-width:1100px;margin:0 auto}

/* TABS */
.tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px;flex-wrap:wrap}
.tab{flex:1;min-width:120px;padding:10px 16px;font-family:var(--font-mono);font-size:11px;color:var(--muted);background:none;border:none;border-radius:8px;cursor:pointer;transition:all 0.2s;text-align:center}
.tab.active{background:rgba(0,180,216,0.15);color:var(--cyan);font-weight:bold}
.tab:hover:not(.active){color:var(--text)}
.tab-panel{display:none}
.tab-panel.show{display:block}

/* CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.stat-card.cyan::before{background:var(--cyan)}
.stat-card.green::before{background:var(--success)}
.stat-card.orange::before{background:var(--orange2)}
.stat-card.purple::before{background:var(--purple)}
.stat-num{font-family:var(--font-heading);font-size:30px;font-weight:900}
.stat-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:4px}

/* SECTION */
.section{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:20px;overflow:hidden}
.section-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.section-title{font-family:var(--font-heading);font-size:14px;font-weight:800;color:var(--text)}
.section-body{padding:20px}

/* TABLE */
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;color:var(--muted);font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--border)}
td{padding:12px 14px;border-bottom:1px solid rgba(13,37,64,0.4);color:#a0c0d8;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(0,180,216,0.03)}

/* BADGES */
.badge{display:inline-block;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:bold;letter-spacing:1px;text-transform:uppercase}
.badge-pend{background:rgba(252,191,73,0.15);color:var(--orange2);border:1px solid rgba(252,191,73,0.3)}
.badge-ok{background:rgba(74,222,128,0.15);color:var(--success);border:1px solid rgba(74,222,128,0.3)}
.badge-err{background:rgba(255,77,109,0.15);color:var(--error);border:1px solid rgba(255,77,109,0.3)}
.badge-full{background:rgba(168,85,247,0.15);color:var(--purple);border:1px solid rgba(168,85,247,0.3)}
.badge-auto{background:rgba(0,180,216,0.15);color:var(--cyan);border:1px solid rgba(0,180,216,0.3)}

/* BUTTONS */
.btn{padding:8px 16px;border-radius:8px;font-family:var(--font-mono);font-size:11px;cursor:pointer;border:none;transition:all 0.2s;font-weight:bold}
.btn-primary{background:linear-gradient(135deg,var(--cyan2),var(--cyan));color:#040d1a}
.btn-success{background:rgba(74,222,128,0.15);border:1px solid var(--success);color:var(--success)}
.btn-danger{background:rgba(255,77,109,0.15);border:1px solid var(--error);color:var(--error)}
.btn-muted{background:rgba(58,96,128,0.2);border:1px solid var(--border);color:var(--muted)}
.btn:hover{opacity:0.85}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.copy-btn{background:none;border:1px solid var(--border);color:var(--muted);padding:2px 7px;border-radius:4px;cursor:pointer;font-family:var(--font-mono);font-size:10px;margin-left:4px}
.copy-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.copy-btn.ok{border-color:var(--success);color:var(--success)}

/* FORM */
.form-group{margin-bottom:16px}
.form-label{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;display:block}
.form-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px 14px;font-family:var(--font-mono);font-size:13px;color:var(--text);outline:none}
.form-input:focus{border-color:var(--cyan)}
.form-input::placeholder{color:var(--muted)}
.form-input:disabled{opacity:0.5}
.form-select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px 14px;font-family:var(--font-mono);font-size:13px;color:var(--text);outline:none;cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-hint{font-size:10px;color:var(--muted);margin-top:4px}

/* ALERT */
.alert{padding:12px 16px;border-radius:8px;font-size:12px;margin-bottom:16px;display:none}
.alert.show{display:block}
.alert-success{background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.3);color:var(--success)}
.alert-error{background:rgba(255,77,109,0.1);border:1px solid rgba(255,77,109,0.3);color:var(--error)}
.alert-info{background:rgba(0,180,216,0.1);border:1px solid rgba(0,180,216,0.3);color:var(--cyan)}

/* EMPTY */
.empty{text-align:center;padding:40px;color:var(--muted);font-size:13px}

/* LAUNCHER */
.launcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.launcher-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;text-decoration:none;color:var(--text);display:block;transition:all 0.2s}
.launcher-card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.launcher-icon{font-size:26px;margin-bottom:8px}
.launcher-title{font-family:var(--font-heading);font-size:14px;font-weight:800}
.launcher-desc{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}

/* RESPONSIVE */
@media(max-width:600px){
  .content{padding:16px}
  .form-row{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  table thead{display:none}
  table tr{display:block;border-bottom:1px solid var(--border);padding:10px 14px}
  table td{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border:none;font-size:12px;flex-wrap:wrap;gap:4px}
  table td::before{content:attr(data-label);color:var(--muted);font-size:10px;text-transform:uppercase;min-width:80px}
}

.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--cyan);border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* MENÚ LATERAL DESLIZABLE (drawer) -- inyectado en TODAS las páginas del
   panel por panel_common.js (ver _inicializarDrawer), no solo en
   Inicio rápido, para poder volver/navegar desde cualquier pantalla. */
.hamburger-btn{background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:4px 8px;line-height:1;margin-right:6px}
.hamburger-btn:hover{color:var(--cyan)}
.drawer-overlay{position:fixed;inset:0;background:rgba(4,13,26,0.6);z-index:400;opacity:0;pointer-events:none;transition:opacity 0.2s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
/* height (no bottom:0) a propósito -- pedido del owner (2026-09-26):
   en mobile, la barra de direcciones del navegador se esconde/aparece
   al hacer scroll, y con "top:0;bottom:0" el panel terminaba con su
   parte de abajo (ej. "Configuraciones generales", al final de la
   categoría Plataforma) tapada detrás de esa barra -- inalcanzable con
   el dedo aunque el scroll interno llegara ahí.

   Primer intento con 100dvh (altura DINÁMICA) no alcanzó -- el owner
   probó en su celular real y seguía pasando. dvh se recalcula en vivo
   mientras la barra aparece/desaparece, y esa sincronización en
   position:fixed es justo donde más falla entre navegadores/versiones.
   100svh (altura CHICA garantizada -- asume siempre que la barra está
   visible, el peor caso) es más chico a propósito: nunca depende de que
   el navegador recalcule nada a tiempo, así que nunca puede quedar más
   grande que lo que realmente se ve. 100vh queda de último fallback
   para el puñado de navegadores viejos sin soporte de ninguna de las
   dos unidades nuevas. */
.drawer-panel{position:fixed;top:0;left:0;height:100vh;height:100svh;width:300px;max-width:85vw;background:var(--surface);border-right:1px solid var(--border);z-index:401;transform:translateX(-100%);transition:transform 0.25s;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:4px 0 24px rgba(0,0,0,0.3)}
.drawer-panel.open{transform:translateX(0)}
.drawer-header{padding:18px 20px;border-bottom:1px solid var(--border);font-weight:900;font-family:var(--font-heading);color:var(--cyan);font-size:15px}
.drawer-categoria{border-bottom:1px solid var(--border)}
.drawer-cat-titulo{padding:14px 20px;cursor:pointer;font-weight:bold;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.drawer-cat-titulo:hover{background:rgba(0,180,216,0.06)}
.drawer-cat-items{max-height:0;overflow:hidden;transition:max-height 0.2s}
.drawer-cat-items.open{max-height:2000px}
.drawer-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 20px 10px 32px;color:var(--muted);text-decoration:none;font-size:12px;cursor:pointer}
.drawer-item:hover{color:var(--cyan);background:rgba(0,180,216,0.06)}
.drawer-hint-video{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:bold;color:var(--gold);border:1px solid rgba(255,214,10,0.4);border-radius:8px;padding:2px 7px;white-space:nowrap;flex-shrink:0}
.drawer-hint-video:hover{background:rgba(255,214,10,0.1)}
.drawer-hint-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 rgba(255,214,10,0.6);animation:drawerHintPulse 1.6s infinite}
@keyframes drawerHintPulse{
  0%{box-shadow:0 0 0 0 rgba(255,214,10,0.55)}
  70%{box-shadow:0 0 0 6px rgba(255,214,10,0)}
  100%{box-shadow:0 0 0 0 rgba(255,214,10,0)}
}
.drawer-hint-count{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#ff4d4f;color:#fff;font-size:9px;font-weight:bold}
.drawer-hint-lista-item{padding:10px 4px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px}
.drawer-hint-lista-item:last-child{border-bottom:none}
.drawer-hint-lista-item:hover{color:var(--cyan)}
.drawer-item-seccion{padding:8px 20px 4px 32px;font-size:10px;font-weight:bold;color:var(--cyan);text-transform:uppercase;letter-spacing:0.4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.drawer-item-seccion:hover{background:rgba(0,180,216,0.06)}
.drawer-item.locked{color:var(--gold);display:flex;justify-content:space-between;align-items:center;gap:8px}
.drawer-item.locked:hover{color:var(--gold);background:rgba(255,214,10,0.08)}

/* ===== Tour de bienvenida animado (pedido owner 2026-09-24) ===== */
.tour-bienvenida-overlay{position:fixed;inset:0;z-index:9999;background:rgba(4,13,26,0.92);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tour-bienvenida-caja{position:relative;z-index:2;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:40px 32px;max-width:420px;width:92%;box-sizing:border-box;text-align:center}
.tour-bienvenida-caja::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,transparent,var(--cyan),var(--orange),transparent)}
.tour-bienvenida-emoji{font-size:48px;margin-bottom:14px}
.tour-bienvenida-titulo{font-family:var(--font-heading);font-weight:900;font-size:26px;color:var(--text);margin-bottom:10px}
.tour-bienvenida-sub{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:24px}
/* width:100% + box-sizing (2026-09-27): el botón no tenía ancho fijo --
   con texto más largo (ej. "Ingresá acá para tu configuración inicial",
   pedido del owner) se podía desbordar del cuadro en pantallas chicas.
   Ahora ocupa todo el ancho disponible del cuadro y nunca se sale. */
.tour-btn-empezar{width:100%;box-sizing:border-box;padding:14px 20px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--cyan2),var(--cyan));color:#040d1a;font-family:var(--font-heading);font-weight:900;font-size:14px;cursor:pointer;letter-spacing:0.3px}
.tour-btn-empezar:hover{filter:brightness(1.08)}
.tour-confetti{position:absolute;inset:0;z-index:1;pointer-events:none}
.tour-confetti-pieza{position:absolute;top:-12px;width:9px;height:14px;opacity:0.9;animation:tourConfettiCaer linear infinite;border-radius:2px}
@keyframes tourConfettiCaer{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(540deg);opacity:0.7}
}
.tour-spotlight{position:fixed;z-index:9998;border-radius:10px;box-shadow:0 0 0 9999px rgba(4,13,26,0.78),0 0 0 3px var(--cyan),0 0 24px 4px rgba(0,180,216,0.55);pointer-events:none;transition:top 0.35s ease,left 0.35s ease,width 0.35s ease,height 0.35s ease}
.tour-hint{position:fixed;z-index:9999;background:var(--cyan);color:#00212b;font-family:var(--font-heading);font-weight:800;font-size:12px;padding:8px 14px;border-radius:8px;max-width:240px;pointer-events:none;animation:tourHintSalta 1s ease-in-out infinite}
@keyframes tourHintSalta{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.drawer-item.locked .drawer-lock-badge{font-size:9px;font-weight:bold;border:1px solid rgba(255,214,10,0.4);border-radius:8px;padding:1px 6px;white-space:nowrap}