/* =============================================================================
 * FIELIO — Admin panel CSS (login.html)
 * Extraído del bloque <style> L141-418 de login.html (5-may-2026)
 *
 * Patrón Strangler Fig: este archivo es el primer paso de extracción del monolito.
 * Cualquier cambio futuro a estilos del panel admin debería editarse aquí, no en login.html.
 *
 * No incluye: estilos de @page (print poster), animaciones contextuales (cf-spin,
 * scanLine), CSS de Quill (carga on-demand), ni override Tawk. Esos siguen inline.
 * ============================================================================= */

:root{
  /* Fielio Brand System V1.0 */
  --g:#3DD9A8;          /* Mint Deep — acento principal */
  --gd:#0A0E0C;         /* Ink Black — texto oscuro */
  --gb:#D4F5E9;         /* Mint Soft — fondo suave */
  --gm:#7FE7C4;         /* Mint — acento secundario */
  --y:#7FE7C4;          /* Mint (legacy alias) */
  --bone:#FAFAF7;       /* Bone — lienzo */
  --r:#FF6B6B;          /* Error/rojo */
  --rb:#fff0f0;         /* Error bg */
  --p:#7C5CBF;          /* Purple accent */
  --pb:#f0ebfa;         /* Purple bg */
  --gr:#F5F5F2;         /* Surface / fondo cards */
  --b:#E0E0D8;          /* Border */
  --t:#0A0E0C;          /* Ink Black — texto primario */
  --t2:#4A4A44;         /* Texto secundario */
  --t3:#8A8A80;         /* Texto terciario */
  --w:#FAFAF7;          /* Bone — fondo pantalla */
  --sw:240px;
  --rad:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',sans-serif;background:var(--gr);color:var(--t);min-height:100vh;font-size:14px}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:999;padding:20px}
.dark-bg{background:#0A0E0C}
.card{background:var(--w);border-radius:20px;padding:38px;width:100%;max-width:420px;box-shadow:0 20px 70px rgba(0,0,0,.28)}
.logo{display:flex;justify-content:center;align-items:center}
.sub{font-size:12.5px;color:var(--t3);margin-bottom:26px}
.step{display:none}.step.active{display:block}
.title{font-family:'Fraunces', serif;font-weight:700;font-size:17px;margin-bottom:5px}
.desc{font-size:13px;color:var(--t2);margin-bottom:20px;line-height:1.6}
.err{background:#fff0f0;border:1.5px solid #ffc8c8;border-radius:9px;padding:9px 13px;font-size:13px;color:#b92b2b;margin-bottom:14px;display:none}
.err.show{display:block}
.lbl{display:block;font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.inp{width:100%;padding:10px 13px;border:1.5px solid var(--b);border-radius:9px;font-size:14px;font-family:'Manrope',sans-serif;background:var(--w);color:var(--t);outline:none;transition:border .14s;margin-bottom:13px}
.inp:focus{border-color:var(--g)}
.pw-w{position:relative}.pw-w .inp{padding-right:42px;margin-bottom:13px}
.eye{position:absolute;right:11px;top:10px;cursor:pointer;color:var(--t3);font-size:15px;user-select:none}
.btn-f{width:100%;padding:11px;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;border:none;font-family:'Manrope',sans-serif;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-g{background:var(--g);color:white}.btn-g:hover{background:var(--gd)}
.btn-b{background:var(--gr);color:var(--t);border:1px solid var(--b);margin-top:7px}.btn-b:hover{background:var(--b)}
.mfa-row{display:flex;gap:8px;justify-content:center;margin:18px 0}
.mfa-d{width:44px;height:52px;border:2px solid var(--b);border-radius:10px;font-size:21px;font-weight:700;text-align:center;font-family:'Fraunces', serif;outline:none;transition:border .14s}
.mfa-d:focus{border-color:var(--g)}
.qr-box{border:1.5px solid var(--b);border-radius:11px;padding:18px;text-align:center;margin:14px 0;background:var(--gr)}
.sec-box{background:var(--gr);border-radius:8px;padding:9px 13px;font-family:monospace;font-size:12.5px;letter-spacing:2px;color:var(--t);word-break:break-all;border:1px solid var(--b);margin-top:6px}
.cfg-card{background:var(--w);border-radius:20px;padding:36px 40px;border:1px solid var(--b);width:100%;max-width:480px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
/* APP */
#app{display:none;min-height:100vh}
.sb{width:var(--sw);background:var(--t);color:white;display:flex;flex-direction:column;position:fixed;height:100vh;z-index:100}
.sb-lg{padding:22px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-lm{font-family:'Fraunces', serif;font-weight:800;font-size:20px;color:var(--y)}
.sb-ls{font-size:9.5px;color:rgba(255,255,255,.28);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px}
.sb-nv{flex:1;padding:12px 9px;overflow-y:auto}
.nl{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.22);padding:9px 9px 4px}
.ni{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.52);font-size:12.5px;transition:all .13s;margin-bottom:1px}
.ni:hover{background:rgba(255,255,255,.06);color:white}
.ni.active{background:var(--g);color:white;font-weight:500}
.ni-ic{font-size:14px;width:17px;text-align:center;flex-shrink:0}
.sb-ft{padding:12px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:rgba(255,255,255,.22)}
.main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column}
.topbar{background:var(--w);border-bottom:1px solid var(--b);padding:13px 26px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.tb-t{font-family:'Fraunces', serif;font-weight:700;font-size:16px}
.content{padding:22px 26px;flex:1}
.panel{display:none}.panel.active{display:block}
.cv{background:var(--w);border-radius:var(--rad);padding:20px;box-shadow:0 1px 5px rgba(0,0,0,.05);border:1px solid var(--b)}
.cfg-tab.active, .seg-tab.active{background:var(--g);color:white;border-color:var(--g)}
.cfg-tab-panel, .seg-tab-panel{animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}
.sc{background:var(--w);border-radius:var(--rad);padding:17px 19px;border:1px solid var(--b)}
.sl{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px}
.sv{font-family:'Fraunces', serif;font-size:24px;font-weight:700;line-height:1}
/* Analytics */
.an-period.active{background:var(--g);color:white;border-color:var(--g)}
.an-bar{border-radius:4px 4px 0 0;background:var(--g);min-width:8px;flex:1;transition:height .4s cubic-bezier(.34,1.56,.64,1);cursor:pointer;position:relative}
.an-bar:hover{opacity:.8}
.an-bar-lbl{font-size:9px;color:var(--t3);text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-prod-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--gr)}
.an-prod-row:last-child{border-bottom:none}
.an-prod-bar{height:6px;border-radius:3px;background:var(--g);transition:width .5s ease}
.an-seg-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.an-seg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.an-metric{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--gr)}
.an-metric:last-child{border-bottom:none}
.an-metric-val{font-family:'Fraunces', serif;font-weight:700;font-size:18px;color:var(--g)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.st{font-family:'Fraunces', serif;font-weight:700;font-size:15px;margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
thead th{text-align:left;padding:8px 11px;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--b);font-weight:500}
tbody tr{border-bottom:1px solid var(--gr);cursor:pointer;transition:background .1s}
tbody tr:hover{background:var(--gr)}
tbody td{padding:10px 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bg{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500}
.bv{background:#fdf7dc;color:#8a6d00}.br{background:var(--gb);color:var(--gd)}.bd{background:#f5f5f5;color:var(--t3)}.bn{background:#e8f4ff;color:#1565c0}.bc{background:var(--pb);color:var(--p)}
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:500;cursor:pointer;border:none;transition:all .13s;font-family:'Manrope',sans-serif}
.bp{background:var(--g);color:white}.bp:hover{background:var(--gd)}
.bs{background:var(--gr);color:var(--t);border:1px solid var(--b)}.bs:hover{background:var(--b)}
.bdr{background:var(--rb);color:var(--r)}
.bsm{padding:5px 10px;font-size:12px}
.fg{margin-bottom:14px}
.fl{display:block;font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.fi{width:100%;padding:9px 12px;border:1.5px solid var(--b);border-radius:8px;font-size:13.5px;font-family:'Manrope',sans-serif;background:var(--w);color:var(--t);outline:none;transition:border .13s}
.fi:focus{border-color:var(--g)}
select.fi{cursor:pointer}
textarea.fi{resize:vertical;min-height:78px}
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:200;align-items:center;justify-content:center;padding:20px}
.mo.open{display:flex}
.mc{background:var(--w);border-radius:16px;width:100%;max-width:470px;max-height:90vh;overflow-y:auto;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.mh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.mt{font-family:'Fraunces', serif;font-size:18px;font-weight:700}
.mx{width:28px;height:28px;border-radius:50%;background:var(--gr);border:none;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--t2)}
.pr{display:flex;align-items:center;gap:9px;background:var(--gb);border-radius:9px;padding:12px 14px;margin-top:9px}
.pb2{font-family:'Fraunces', serif;font-size:28px;font-weight:800;color:var(--gd)}
.hi{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--gr)}
.hi:last-child{border-bottom:none}
.hd{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.hc{background:var(--g)}.hj{background:var(--y)}.hb{background:var(--p)}
.av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;color:white}
.avl{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:white;flex-shrink:0}
.tabs{display:flex;gap:3px;border-bottom:1.5px solid var(--b);margin-bottom:16px}
.tab{padding:8px 15px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:all .13s}
.tab.active{color:var(--g);border-bottom-color:var(--g)}
.drop-a{border:2px dashed var(--b);border-radius:11px;padding:34px;text-align:center;cursor:pointer;transition:all .13s}
.drop-a:hover,.drop-a.ov{border-color:var(--g);background:var(--gb)}
.sb-x{display:flex;align-items:center;gap:7px;background:var(--gr);border:1.5px solid var(--b);border-radius:8px;padding:7px 11px}
.sb-x input{border:none;background:transparent;font-family:'Manrope',sans-serif;font-size:13px;color:var(--t);outline:none;width:185px}
.toast{position:fixed;bottom:22px;right:22px;background:var(--t);color:white;padding:11px 16px;border-radius:10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:999;display:none;align-items:center;gap:8px}
.toast.show{display:flex}
.lo{display:none;position:fixed;inset:0;background:rgba(255,255,255,.72);z-index:500;align-items:center;justify-content:center;flex-direction:column;gap:9px}
.lo.show{display:flex}
.spin{width:32px;height:32px;border:3px solid var(--b);border-top-color:var(--g);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dv{border:none;border-top:1px solid var(--b);margin:16px 0}
.tm{color:var(--t3)}.tsm{font-size:12px}
.wa-bg{background:#e5ddd5;border-radius:11px;padding:16px}
.wa-b{background:#dcf8c6;border-radius:8px 8px 8px 2px;padding:10px 13px;font-size:13px;line-height:1.6;max-width:85%;white-space:pre-wrap;color:#1a1a1a}
.seg-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:16px}
.seg-c{border-radius:11px;padding:14px 13px;cursor:pointer;transition:transform .13s}
.seg-c:hover{transform:translateY(-2px)}
.sv-c{background:#fdf7dc}.sr-c{background:var(--gb)}.sd-c{background:#f5f5f5}.sk-c{background:var(--pb)}
.seg-n{font-family:'Fraunces', serif;font-weight:700;font-size:12.5px;margin-bottom:3px}
.seg-v{font-family:'Fraunces', serif;font-size:21px;font-weight:800}
.um{position:relative}
.ub{display:flex;align-items:center;gap:6px;cursor:pointer;padding:5px 10px;border-radius:8px;border:1px solid var(--b);font-size:12px;transition:background .13s}
.ub:hover{background:var(--gr)}
.ud{position:absolute;right:0;top:calc(100% + 5px);background:var(--w);border:1px solid var(--b);border-radius:10px;padding:5px;min-width:175px;box-shadow:0 8px 24px rgba(0,0,0,.11);display:none;z-index:200}
.ud.open{display:block}
.udi{padding:7px 11px;border-radius:6px;cursor:pointer;font-size:12.5px;transition:background .12s}
.udi:hover{background:var(--gr)}
.udi.dr{color:var(--r)}
.ms{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:2px 7px;border-radius:20px;font-weight:500}
.ms-on{background:#e8f7ef;color:#1a6b3c}.ms-off{background:#fff0f0;color:#b92b2b}

/* ── RESPONSIVE MÓVIL ── */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;backdrop-filter:blur(2px)}
.sb-overlay.open{display:block}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;color:var(--t);transition:background .15s}
.hamburger:hover{background:var(--gr)}
.hamburger svg{width:22px;height:22px;display:block}
.sb-close{display:none;position:absolute;top:14px;right:14px;background:rgba(255,255,255,.15);border:none;border-radius:8px;padding:6px;cursor:pointer;color:white;line-height:0}
.sb-close svg{width:18px;height:18px}

@media (max-width: 768px){
  :root{--sw:280px}

  /* Sidebar — usa id="sidebar" en el HTML */
  #sidebar{
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:200;
    box-shadow:none;
  }
  #sidebar.open{
    transform:translateX(0);
    box-shadow:8px 0 32px rgba(0,0,0,.3);
  }
  .sb,.sb.open{transform:none} /* reset legacy */
  .sb-close{display:flex !important;align-items:center;justify-content:center}

  /* Contenido ocupa todo el ancho */
  .main{margin-left:0 !important}

  /* Topbar */
  .topbar{padding:10px 14px;gap:8px}
  .tb-t{font-size:14px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hamburger{display:flex !important;align-items:center;justify-content:center}

  /* Buscador compacto */
  .sb-x{max-width:120px}
  .sb-x input{font-size:12px;min-width:80px !important}
  #s-g-drop{min-width:280px !important;right:-60px}

  /* Botón nuevo */
  .topbar .btn.bp.bsm{padding:7px 10px;font-size:12px}

  /* Dropdown usuario alineado a derecha en móvil */
  .ud{right:0;left:auto !important;min-width:200px}

  /* Badge superadmin oculto en móvil */
  .um .bg{display:none}

  /* Grids responsive */
  .g2{grid-template-columns:1fr !important}
  .sg{grid-template-columns:repeat(2,1fr) !important}
  .sg.sg-analytics{grid-template-columns:repeat(2,1fr) !important}

  /* Contenido padding */
  .content{padding:12px}

  /* Cards con menos padding */
  .cv{padding:14px}

  /* Tabla scroll horizontal */
  .cv table{min-width:480px}
  table{font-size:12px}
  th,td{padding:8px 6px !important}

  /* Botones de acción en tabla */
  .btn.bs.bsm{padding:5px 8px;font-size:11px}

  /* Modal full screen */
  .mc{margin:8px;max-height:calc(100vh - 16px);overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:12px}

  /* Scanner */
  #scanner-box{min-height:300px !important}

  /* Historial ventas — ocultar columnas menos importantes */
  #ht-tbody td:nth-child(6),
  #ht-tbody td:nth-child(7),
  thead th:nth-child(6),
  thead th:nth-child(7){display:none}

  /* Perfil cliente — stack vertical */
  #pf-cont > div:first-child{flex-direction:column !important;gap:10px}

  /* Campañas WA — una columna */
  #panel-campanas .g2{grid-template-columns:1fr !important}

  /* Config tabs scroll */
  #panel-config .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}

  /* Segmentos más pequeños */
  .seg-c{padding:10px 6px !important}
  .seg-n{font-size:11px !important}
  .seg-v{font-size:18px !important}

  /* KPI cards */
  .sc{padding:12px !important}
  .sv{font-size:22px !important}
  .sl{font-size:10px !important}

  /* Catálogo grid */
  #cat-grid{grid-template-columns:1fr !important}

  /* Recompensas grid */
  #rw-grid{grid-template-columns:1fr !important}
}

@media (max-width: 400px){
  .sg{grid-template-columns:repeat(2,1fr) !important}
  .sv{font-size:18px !important}
  .topbar{padding:8px}
  .tb-t{display:none}
  .sb-x{max-width:100px}
}
/* ===== CALIBRADOR REVERSO ===== */
.rv-drag{position:absolute;transform:translate(-50%,-50%);cursor:grab;touch-action:none;user-select:none;display:flex;flex-direction:column;align-items:center;z-index:20}
.rv-drag.dragging{cursor:grabbing;z-index:30}
.rv-handle{width:26px;height:5px;background:#3DD9A8;border-radius:3px;margin-bottom:3px}
.rv-inner{border:2px solid #3DD9A8;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.rv-qr-box{background:white;padding:5px;border-radius:8px;display:flex;flex-direction:column;align-items:center}
.rv-num-box{background:rgba(200,100,30,0.9);color:white;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;letter-spacing:.4px}
.rv-nom-box{background:rgba(245,200,66,0.92);color:#0A0E0C;font-size:13px;font-weight:900;padding:3px 10px;border-radius:6px;white-space:nowrap}
.rv-pts-box{background:rgba(255,255,255,.9);display:flex;gap:5px;padding:4px 6px;border-radius:8px}
.rv-badge{background:#7FE7C4;color:#0A0E0C;font-size:9px;font-weight:800;padding:2px 6px;border-radius:5px;white-space:nowrap}

/* =============================================================================
 * Bloques pequeños extraídos en sesión 5-may-2026 (paso 2 del refactor)
 * ============================================================================= */

/* Tawk widget — ocultar contenedores hasta init manual (de L109 login.html) */
#tawkchat-container,#tawk-bubble-container,.tawk-min-container{display:none!important}

/* Cloudflare modal spinner (de L176-179 login.html) */
@keyframes cf-spin { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
.cf-spinner { display:inline-block;width:12px;height:12px;border:2px solid #ffd591;border-top-color:#7a4f01;border-radius:50%;animation:cf-spin 0.8s linear infinite }

/* Animación scanLine para QR scan UX (de L1200-1202 login.html) */
@keyframes scanLine{0%{top:10%}50%{top:85%}100%{top:10%}}