:root{
    --bg:#F4F7FD;
    --surface:#FFFFFF;
    --surface-2:#EEF3FB;
    --surface-3:#E1EAF7;
    --gold:#2E5EEA;
    --gold-light:#6DA4FF;
    --gold-dark:#0F2B7A;
    --accent-gradient: linear-gradient(135deg, #6DA4FF 0%, #3A6BEE 48%, #1B3FC4 100%);
    --accent-glow: rgba(46,94,234,0.38);
    --accent-glow-soft: rgba(46,94,234,0.18);
    --text:#0F172A;
    --text-muted:#5B6B85;
    --text-faint:#94A3B8;
    --danger:#C6423A;
    --warning:#C97A3E;
    --success:#3FA873;
    --border:rgba(46,94,234,0.22);
    --border-soft:rgba(15,23,42,0.08);
    --radius:12px;
    --shadow-gold: 0 0 0 1px rgba(46,94,234,0.14), 0 8px 24px rgba(15,23,42,0.10);
    --shadow-premium: 0 1px 2px rgba(16,24,60,0.05), 0 16px 40px -12px var(--accent-glow);
    --ease-premium: cubic-bezier(.22,1,.36,1);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight:500;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight:700;
    letter-spacing:0.01em;
  }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  a{ color:inherit; }
  button{ font-family:inherit; cursor:pointer; }
  input, select, textarea{ font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

  /* ============ LOGIN ============ */
  #login-screen{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(ellipse 900px 500px at 50% -10%, rgba(46,94,234,0.16), transparent 60%),
      linear-gradient(160deg, #0A1330 0%, #0E1C45 42%, #10245C 68%, #0A1330 100%);
    padding:20px;
  }
  #login-screen::before, #login-screen::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:0.55;
    z-index:0;
    animation:loginOrbFloat 16s ease-in-out infinite;
  }
  #login-screen::before{
    width:420px;height:420px;
    background:radial-gradient(circle, rgba(109,164,255,0.55), transparent 70%);
    top:-120px; left:-100px;
  }
  #login-screen::after{
    width:480px;height:480px;
    background:radial-gradient(circle, rgba(59,130,246,0.4), transparent 70%);
    bottom:-160px; right:-120px;
    animation-delay:-8s;
    animation-direction:reverse;
  }
  @keyframes loginOrbFloat{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(40px,-30px) scale(1.12); }
  }
  .login-card{
    width:100%;
    max-width:380px;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:16px;
    padding:40px 32px 32px;
    box-shadow:0 0 0 1px rgba(109,164,255,0.08), 0 25px 70px -15px rgba(3,8,24,0.65), 0 0 60px -10px rgba(59,130,246,0.35);
    text-align:center;
    position:relative;
    z-index:2;
    animation:loginCardIn .6s var(--ease-premium) both;
  }
  @keyframes loginCardIn{
    from{ opacity:0; transform:translateY(14px) scale(0.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .brand-mark{
    width:56px;height:56px;margin:0 auto 18px;
    display:flex;align-items:center;justify-content:center;
    filter:drop-shadow(0 0 14px rgba(109,164,255,0.55));
    animation:brandGlowPulse 3.2s ease-in-out infinite;
  }
  @keyframes brandGlowPulse{
    0%,100%{ filter:drop-shadow(0 0 10px rgba(109,164,255,0.4)); }
    50%{ filter:drop-shadow(0 0 20px rgba(109,164,255,0.75)); }
  }
  .login-card h1{
    font-size:28px;
    margin:0 0 4px;
    background:linear-gradient(135deg, #FFFFFF 0%, var(--gold-light) 55%, #A9C6FB 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .login-sub{
    color:var(--text-muted);
    font-size:13px;
    margin:0 0 28px;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  .field{ text-align:left; margin-bottom:16px; }
  .field label{
    display:block;
    font-size:12px;
    color:var(--text-muted);
    margin-bottom:6px;
    letter-spacing:0.02em;
  }
  .field input, .field select, .field textarea{
    width:100%;
    background:var(--surface-2);
    border:1px solid var(--border-soft);
    color:var(--text);
    padding:11px 12px;
    border-radius:8px;
    font-size:14px;
    outline:none;
    transition:border-color .15s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--gold);
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:none;
    border-radius:9px;
    padding:11px 18px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    transition:transform .28s var(--ease-premium), box-shadow .28s var(--ease-premium), opacity .15s ease, background .2s ease, border-color .2s ease;
  }
  .btn:active{ transform:scale(0.96); }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; pointer-events:none; }
  .btn::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) 42%, rgba(255,255,255,0.35) 46%, transparent 66%);
    transform:translateX(-120%);
    transition:transform .65s var(--ease-premium);
    z-index:1;
    pointer-events:none;
  }
  .btn:hover::before{ transform:translateX(120%); }
  .btn-gold{
    background:var(--accent-gradient);
    color:#ffffff;
    width:100%;
    box-shadow:0 2px 8px rgba(20,40,110,0.18), 0 10px 26px -8px var(--accent-glow);
  }
  .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 4px 14px rgba(20,40,110,0.22), 0 18px 36px -10px var(--accent-glow); }
  .btn-gold:active{ transform:translateY(0) scale(0.97); }
  .btn-ghost{
    background:var(--surface);
    border:1px solid var(--border-soft);
    color:var(--text);
  }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-dark); box-shadow:0 4px 14px -6px var(--accent-glow-soft); transform:translateY(-1px); }
  .btn-danger{
    background:rgba(198,66,58,0.12);
    color:#B42318;
    border:1px solid rgba(198,66,58,0.3);
  }
  .btn-danger:hover{ transform:translateY(-1px); box-shadow:0 4px 14px -6px rgba(198,66,58,0.35); }
  .btn-stock-available{
    background:rgba(63,168,115,0.15);
    color:#15803D;
    border:1px solid rgba(63,168,115,0.4);
  }
  .btn-stock-available:hover{ background:rgba(63,168,115,0.25); }
  .btn-stock-out{
    background:rgba(198,66,58,0.15);
    color:#B42318;
    border:1px solid rgba(198,66,58,0.4);
    cursor:not-allowed;
    opacity:0.9;
  }
  .btn-sm{ padding:7px 12px; font-size:12.5px; }
  .login-hint{
    margin-top:18px;
    font-size:11.5px;
    color:var(--text-faint);
  }
  .login-error{
    color:#B42318;
    font-size:12.5px;
    margin-top:10px;
    min-height:16px;
  }

  .login-card .login-sub{ color:rgba(255,255,255,0.68); }
  .login-card .field label{ color:rgba(255,255,255,0.78); }
  .login-card .field input{
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.2);
    color:#ffffff;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .login-card .field input::placeholder{ color:rgba(255,255,255,0.38); }
  .login-card .field input:focus{
    border-color:var(--gold-light);
    background:rgba(255,255,255,0.12);
    box-shadow:0 0 0 3px rgba(109,164,255,0.18);
  }
  .login-card .login-hint{ color:rgba(255,255,255,0.5); }
  .login-card .login-hint strong{ color:rgba(255,255,255,0.8); }
  .login-card .login-error{ color:#FF9B94; }

  /* ============ APP LAYOUT ============ */
  #main-app{ display:flex; min-height:100vh; }
  .mobile-topbar{ display:none; }
  .sidebar-backdrop{ display:none; }

  .store-banner{
    position:relative; width:100%; border-radius:var(--radius); overflow:hidden;
    aspect-ratio: 21/7; margin-bottom:20px; background:#0A1730;
  }
  .store-banner-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; }
  .store-banner-slide.active{ opacity:1; pointer-events:auto; }
  .store-banner-slide img, .store-banner-slide video{ width:100%; height:100%; object-fit:cover; display:block; }
  .store-banner-dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:5; }
  .store-banner-dot{ width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,0.45); cursor:pointer; transition:all .2s ease; border:none; padding:0; }
  .store-banner-dot.active{ background:#fff; width:22px; border-radius:5px; }
  .store-banner-arrow{
    position:absolute; top:50%; transform:translateY(-50%); background:rgba(6,10,22,0.45); color:#fff; border:none;
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
    z-index:5; font-size:18px; line-height:1;
  }
  .store-banner-arrow:hover{ background:rgba(6,10,22,0.7); }
  .store-banner-arrow.prev{ left:10px; }
  .store-banner-arrow.next{ right:10px; }

  .sidebar{
    width:230px;
    flex-shrink:0;
    background:linear-gradient(180deg, #0E1C45 0%, #0A1330 100%);
    border-right:1px solid rgba(255,255,255,0.06);
    display:flex;
    flex-direction:column;
    padding:22px 14px;
    position:sticky;
    top:0;
    height:100vh;
  }
  .sidebar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 8px 20px;
    margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .hamburger-btn{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); border-radius:9px;
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    color:#E9EEFB; flex-shrink:0;
  }
  .mobile-topbar-name{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight:700; font-size:17px;
    background:linear-gradient(135deg, #A9C6FB, #5B9DF9);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .sidebar-brand .mark{ width:30px;height:30px;flex-shrink:0; }
  .sidebar-brand .name{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight:700;
    font-size:18px;
    line-height:1.1;
    background:linear-gradient(135deg, #A9C6FB, #5B9DF9);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .nav-item{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 12px;
    border-radius:8px;
    color:#9FB3D9;
    font-size:13.5px;
    font-weight:500;
    cursor:pointer;
    margin-bottom:2px;
    border:1px solid transparent;
    transition:all .22s var(--ease-premium);
  }
  .nav-item svg{ width:17px;height:17px;flex-shrink:0; opacity:0.8; transition:opacity .2s ease; }
  .nav-item:hover{ color:#FFFFFF; background:rgba(255,255,255,0.06); transform:translateX(2px); }
  .nav-item.active{
    color:#FFFFFF;
    background:linear-gradient(135deg, rgba(109,164,255,0.4), rgba(46,94,234,0.28));
    border-color:rgba(109,164,255,0.55);
    box-shadow:0 0 0 1px rgba(109,164,255,0.12), 0 4px 16px -2px rgba(46,94,234,0.5);
  }
  .nav-item.active svg{ opacity:1; }
  .sidebar-footer{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,0.1); }
  .sidebar-footer .btn-ghost{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); color:#C9D6EF; }
  .sidebar-footer .btn-ghost:hover{ border-color:#5B9DF9; color:#ffffff; }

  .content{ flex:1; padding:28px 34px 60px; max-width:1180px; }
  .page-header{ margin-bottom:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .page-header h2{ font-size:26px; margin:0 0 4px; }
  .page-header .sub{ color:var(--text-muted); font-size:13px; margin:0; }

  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; animation:fadeIn .25s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

  /* ============ CARDS / KPIS ============ */
  .kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }
  .kpi-card{
    background:var(--surface);
    border:1px solid var(--border-soft);
    border-radius:var(--radius);
    padding:18px;
    transition:transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium), border-color .25s ease;
  }
  .kpi-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-premium); border-color:var(--border); }
  .kpi-card .label{ font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
  .kpi-card .value{ font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; }
  .kpi-card.accent .value{ color:var(--gold-light); }
  .kpi-card.danger .value{ color:#B42318; }
  .kpi-card.success .value{ color:#15803D; }

  .panel-box{
    background:var(--surface);
    border:1px solid var(--border-soft);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:20px;
    transition:box-shadow .3s var(--ease-premium), border-color .3s ease;
  }
  .panel-box:hover{ box-shadow:0 4px 20px -8px rgba(15,23,42,0.08); }
  .panel-box h3{ font-size:18px; margin:0 0 14px; }

  /* Ticket-stub styled expiring list */
  .ticket{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--surface-2);
    border:1px dashed var(--border);
    border-radius:8px;
    padding:12px 14px;
    margin-bottom:10px;
    position:relative;
  }
  .ticket:last-child{ margin-bottom:0; }
  .ticket .stub-dot{
    width:8px;height:8px;border-radius:50%;flex-shrink:0;
  }
  .ticket.danger .stub-dot{ background:var(--danger); box-shadow:0 0 8px rgba(198,66,58,0.6); }
  .ticket.warning .stub-dot{ background:var(--warning); box-shadow:0 0 8px rgba(201,122,62,0.5); }
  .ticket .t-info{ flex:1; min-width:0; }
  .ticket .t-name{ font-weight:600; font-size:14px; }
  .ticket .t-meta{ color:var(--text-muted); font-size:12px; margin-top:2px; }
  .ticket .t-days{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    padding:4px 10px;
    border-radius:20px;
    white-space:nowrap;
  }
  .ticket.danger .t-days{ background:rgba(198,66,58,0.15); color:#B42318; }
  .ticket.warning .t-days{ background:rgba(201,122,62,0.15); color:#A15C1F; }
  .empty-state{ color:var(--text-faint); font-size:13px; padding:20px; text-align:center; }

  /* Bar chart (finanzas) */
  .bar-chart{ display:flex; align-items:flex-end; gap:10px; height:140px; padding-top:10px; }
  .bar-chart .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; }
  .bar-chart .bar{ width:100%; max-width:34px; border-radius:5px 5px 0 0; background:linear-gradient(180deg, var(--gold-light), var(--gold-dark)); min-height:3px; }
  .bar-chart .bar-label{ font-size:10.5px; color:var(--text-faint); }

  /* ============ TABLE ============ */
  table{ width:100%; border-collapse:collapse; font-size:13.5px; }
  th{ text-align:left; color:var(--text-muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; padding:10px 12px; border-bottom:1px solid var(--border-soft); }
  td{ padding:12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
  tr:last-child td{ border-bottom:none; }
  .status-pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
  .status-pill.activo{ background:rgba(63,168,115,0.15); color:#15803D; }
  .status-pill.por_vencer{ background:rgba(201,122,62,0.15); color:#A15C1F; }
  .status-pill.vencido{ background:rgba(198,66,58,0.15); color:#B42318; }
  .status-pill.sin_servicio{ background:rgba(168,162,155,0.15); color:var(--text-faint); }
  .row-actions{ display:flex; gap:6px; }
  .icon-btn{
    background:var(--surface-2);
    border:1px solid var(--border-soft);
    color:var(--text-muted);
    width:28px;height:28px;
    border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;
  }
  .icon-btn:hover{ color:var(--gold-light); border-color:var(--gold); }

  .toolbar{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
  .toolbar-left{ display:flex; gap:10px; flex-wrap:wrap; }
  .search-input{ min-width:200px; }

  /* ============ MODAL ============ */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.6);
    display:flex; align-items:center; justify-content:center;
    z-index:100; padding:20px; backdrop-filter:blur(2px);
  }
  .modal-box{
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:26px; width:100%; max-width:440px;
    max-height:88vh; overflow-y:auto;
    box-shadow:var(--shadow-gold);
  }
  .modal-box h3{ margin:0 0 18px; font-size:20px; }
  .modal-actions{ display:flex; gap:10px; margin-top:20px; }
  .modal-actions .btn{ flex:1; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* ============ TIENDA ============ */
  .store-hero{
    text-align:center; padding:36px 20px 28px;
    background:radial-gradient(ellipse 700px 300px at 50% 0%, rgba(37,99,235,0.10), transparent 70%);
    border-radius:var(--radius); margin-bottom:26px; border:1px solid var(--border-soft);
  }
  .store-hero h2{ font-size:32px; margin:0 0 8px; }
  .store-hero p{ color:var(--text-muted); font-size:14px; }
  .store-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
  .store-card{
    background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
    padding:22px 18px; text-align:center; transition:border-color .15s ease, transform .15s ease;
  }
  .store-card:hover{ border-color:var(--gold); transform:translateY(-2px); }
  .store-card .plat-icon{ font-size:30px; margin-bottom:10px; }
  .store-card h4{ margin:0 0 6px; font-size:17px; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
  .store-card .price{ font-family:'IBM Plex Mono',monospace; color:var(--gold-light); font-size:20px; font-weight:600; margin-bottom:14px; }
  .store-card .price span{ font-size:11px; color:var(--text-faint); display:block; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

  .offer-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
  .offer-card{
    background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
    position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:22px 16px 18px; transition:border-color .3s var(--ease-premium), transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
  }
  .offer-card:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-premium); }
  .offer-badge{
    position:absolute; top:12px; right:12px; font-size:10px; font-weight:700;
    padding:4px 10px; border-radius:20px; white-space:nowrap; letter-spacing:0.02em;
  }
  .offer-badge.disponible{ background:#3FA873; color:#ffffff; }
  .offer-badge.poco_stock{ background:#D9922B; color:#ffffff; }
  .offer-badge.agotado{ background:#C6423A; color:#ffffff; }
  .offer-card-circle{
    width:88px; height:88px; border-radius:50%; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent-gradient);
    border:3px solid var(--gold); margin-bottom:14px;
    transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
  }
  .offer-card:hover .offer-card-circle{ transform:scale(1.06); box-shadow:0 6px 20px -4px var(--accent-glow); }
  .offer-card-circle img{ width:100%; height:100%; object-fit:cover; }
  .offer-card-circle .fallback-text{ color:rgba(255,255,255,0.92); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight:700; font-size:15px; padding:0 6px; line-height:1.1; }
  .offer-card-name{ font-weight:700; font-size:13px; letter-spacing:0.02em; text-transform:uppercase; margin-bottom:8px; min-height:32px; display:flex; align-items:center; }
  .offer-card-footer{ width:100%; display:flex; flex-direction:column; gap:8px; margin-top:auto; }
  .offer-card-footer .stock-line{ font-size:11.5px; color:var(--text-muted); font-weight:600; }
  .btn-ver-ofertas{
    width:100%; padding:10px; border:none; border-radius:8px; font-weight:600; font-size:13px; cursor:pointer;
    background:var(--accent-gradient); color:#ffffff; letter-spacing:0.02em;
    position:relative; overflow:hidden; isolation:isolate;
    transition:transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium);
    box-shadow:0 2px 8px -2px var(--accent-glow-soft);
  }
  .btn-ver-ofertas::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) 42%, rgba(255,255,255,0.35) 46%, transparent 66%);
    transform:translateX(-120%); transition:transform .65s var(--ease-premium); z-index:1;
  }
  .btn-ver-ofertas:hover::before{ transform:translateX(120%); }
  .btn-ver-ofertas:hover{ transform:translateY(-1px); box-shadow:0 6px 18px -4px var(--accent-glow); }
  .btn-ver-ofertas:active{ transform:translateY(0) scale(0.97); }

  .offer-detail-back{
    display:inline-flex; align-items:center; gap:6px; background:none; border:none;
    color:var(--text-muted); font-size:13px; cursor:pointer; padding:0; margin-bottom:16px;
  }
  .offer-detail-back:hover{ color:var(--gold-light); }
  .offer-detail-header{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
  .offer-section-title{ font-size:15px; font-weight:700; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
  .offer-row{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    background:var(--surface-2); border-radius:8px; padding:14px 16px; margin-bottom:10px;
  }

  .sub-tabs{ display:flex; gap:8px; margin-bottom:20px; }
  .sub-tab-btn{
    padding:9px 18px; border-radius:8px; border:1px solid var(--border-soft);
    background:var(--surface-2); color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer;
  }
  .sub-tab-btn.active{ background:rgba(37,99,235,0.10); border-color:var(--gold); color:var(--gold-light); }

  .offer-account-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
  .offer-account-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
  .offer-account-banner{ height:110px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--gold), var(--gold-dark)); overflow:hidden; }
  .offer-account-banner img{ width:100%; height:100%; object-fit:cover; }
  .offer-account-banner .fallback-text{ color:rgba(255,255,255,0.92); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight:700; font-size:20px; }
  .offer-account-body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
  .oa-email{ font-size:12.5px; }
  .oa-email strong{ color:var(--text-muted); font-weight:600; }
  .oa-profiles-table{ width:100%; font-size:12.5px; border-collapse:collapse; }
  .oa-profiles-table th, .oa-profiles-table td{ padding:6px 4px; border-bottom:1px solid var(--border-soft); text-align:left; }
  .oa-profiles-table thead th{ color:var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; }
  .oa-profiles-table tfoot td{ font-weight:700; border-bottom:none; padding-top:8px; }
  .oa-profiles-table input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--gold); }

  /* ============ MISC ============ */
  .empty-cta{
    text-align:center; padding:50px 20px; color:var(--text-muted);
  }
  .empty-cta .big-icon{ font-size:36px; margin-bottom:12px; opacity:0.6; }
  .toast{
    position:fixed; bottom:22px; right:22px; background:var(--surface-2);
    border:1px solid var(--gold); color:var(--text); padding:12px 18px;
    border-radius:8px; font-size:13px; box-shadow:var(--shadow-gold);
    z-index:200; opacity:0; transform:translateY(10px); transition:all .25s ease;
    pointer-events:none;
  }
  .toast.show{ opacity:1; transform:none; }

  @media (max-width: 860px){
    .kpi-grid{ grid-template-columns:repeat(2,1fr); }
    .field-row{ grid-template-columns:1fr; }
  }

  @media (max-width: 760px){
    #main-app{ display:block; }

    .store-banner{ aspect-ratio: 4/3; }

    .mobile-topbar{
      display:flex; align-items:center; gap:12px;
      position:sticky; top:0; z-index:70;
      background:linear-gradient(180deg, #0E1C45 0%, #0A1330 100%);
      padding:14px 16px;
      border-bottom:1px solid rgba(255,255,255,0.1);
    }

    .sidebar{
      position:fixed; top:0; left:0; height:100vh; width:80vw; max-width:300px;
      transform:translateX(-100%);
      transition:transform .28s ease;
      z-index:100;
      box-shadow:6px 0 30px rgba(0,0,0,0.45);
    }
    .sidebar.open{ transform:translateX(0); }
    .sidebar-brand{ display:none; }

    .sidebar-backdrop{
      display:block; position:fixed; inset:0; background:rgba(6,10,22,0.6);
      z-index:90; opacity:0; pointer-events:none; transition:opacity .25s ease;
    }
    .sidebar-backdrop.show{ opacity:1; pointer-events:auto; }

    .content{ padding:18px 14px 70px; max-width:100%; }

    .nav-item{ padding:13px 12px; font-size:14.5px; }

    /* Tablas: scroll horizontal en vez de esconder columnas */
    table{ min-width:640px; font-size:12.5px; }
    th, td{ white-space:nowrap; }
    .panel-box{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

    /* Objetivos táctiles más grandes */
    .btn{ min-height:44px; padding:0 16px; }
    .btn-sm{ min-height:40px; padding:0 12px; }
    .icon-btn{ min-width:40px; min-height:40px; }
    input, select, textarea{ min-height:44px; font-size:16px; }
    .field label{ font-size:12.5px; }

    .modal-box{ max-width:92vw !important; max-height:88vh; overflow-y:auto; }

    .kpi-grid{ grid-template-columns:1fr 1fr; gap:10px; }
    .store-grid, .offer-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  }

  @media (max-width: 420px){
    .kpi-grid{ grid-template-columns:1fr; }
    .mobile-topbar-name{ font-size:15px; }
  }