:root{
    --navy-950:#010f2a;
    --navy-900:#011A44;
    --navy-800:#052259;
    --navy-700:#0c2e6e;
    --gold-500:#cda45e;
    --gold-400:#e3c584;
    --gold-300:#f0dcae;
    --ivory:#f6f2e9;
    --paper:#faf8f3;
    --emerald:#3f7d5c;
    --emerald-soft:#294a3c;
    --ruby:#a4453f;
    --ruby-soft:#4a2b2a;
    --ink:#0b1220;
    --line: rgba(230,215,180,0.14);
    --line-strong: rgba(230,215,180,0.28);
    --shadow: 0 20px 60px rgba(1,10,30,0.45);
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Manrope', sans-serif;
    background: radial-gradient(120% 140% at 15% -10%, #0a2456 0%, var(--navy-900) 45%, var(--navy-950) 100%);
    color: var(--ivory);
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background: var(--gold-500); color: var(--navy-950); }

  h1,h2,h3,.display{
    font-family:'Cormorant Garamond', serif;
    letter-spacing:0.01em;
  }

  .num{
    font-family:'Space Grotesk', sans-serif;
    font-variant-numeric: tabular-nums;
  }

  a{ color:inherit; }

  /* faceted diamond backdrop */
  .facet-field{
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.55;
  }
  .facet-field svg{ width:100%; height:100%; }
  .facet-line{
    stroke: rgba(226,201,140,0.16);
    stroke-width:1;
    fill:none;
  }
  .facet-glow{
    fill: rgba(226,201,140,0.05);
    animation: facetPulse 7s ease-in-out infinite;
  }
  @keyframes facetPulse{
    0%,100%{ opacity:0.25; }
    50%{ opacity:0.65; }
  }

  /* ---------- LOGIN ---------- */
  #login-screen{
    position:relative; z-index:2;
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
  }
  .login-card{
    position:relative;
    width:100%; max-width:420px;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    border:1px solid var(--line-strong);
    padding:48px 36px 40px;
    text-align:center;
    backdrop-filter: blur(6px);
    clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
    animation: cardRise 0.9s var(--ease) both;
    box-shadow: var(--shadow);
  }
  @keyframes cardRise{
    from{ opacity:0; transform: translateY(28px) scale(0.98); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }
  .login-card::before{
    content:"";
    position:absolute; inset:0;
    padding:1px;
    clip-path: inherit;
    background: linear-gradient(135deg, rgba(226,201,140,0.55), rgba(226,201,140,0) 40%, rgba(226,201,140,0) 60%, rgba(226,201,140,0.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
  }
  .brand-logo{
    width:180px; height:auto; margin:0 auto 22px;
    display:block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
    animation: logoFloat 5s ease-in-out infinite;
  }
  @keyframes logoFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-6px); }
  }
  .login-eyebrow{
    font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
    color: var(--gold-400); font-weight:700; margin-bottom:10px;
  }
  .login-title{
    font-size:28px; font-weight:600; margin:0 0 8px; color:var(--paper);
  }
  .login-sub{
    font-size:14px; color: rgba(246,242,233,0.6); margin:0 0 34px; line-height:1.5;
  }

  .google-btn{
    width:100%;
    display:flex; align-items:center; justify-content:center; gap:12px;
    background: var(--paper); color: var(--ink);
    border:none; padding:14px 20px;
    font-family:'Manrope', sans-serif; font-weight:700; font-size:15px;
    cursor:pointer;
    clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }
  .google-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
  .google-btn:active{ transform: translateY(0); }
  .google-btn svg{ width:20px; height:20px; }

  .login-foot{
    margin-top:22px; font-size:12px; color: rgba(246,242,233,0.4);
  }

  .spinner{
    width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(255,255,255,0.25); border-top-color: var(--gold-500);
    animation: spin 0.8s linear infinite; display:inline-block;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  .google-btn.loading{ opacity:0.7; pointer-events:none; }

  /* ---------- ESTADOS DE ACCESO (denegado / bloqueado) ---------- */
  #status-screen{
    position:relative; z-index:2; min-height:100vh;
    display:none; align-items:center; justify-content:center; padding:24px;
  }
  #status-screen.visible{ display:flex; }
  .status-card{
    width:100%; max-width:440px; text-align:center;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    border:1px solid var(--line-strong); padding:44px 36px;
    clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
    animation: cardRise 0.6s var(--ease) both;
    box-shadow: var(--shadow);
  }
  .status-icon{
    width:56px; height:56px; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-strong);
  }
  .status-icon.deny{ color:#d98a83; border-color: rgba(164,69,63,0.5); background: rgba(164,69,63,0.12); }
  .status-icon.block{ color:var(--gold-400); border-color: rgba(205,164,94,0.5); background: rgba(205,164,94,0.12); }
  .status-icon svg{ width:26px; height:26px; }
  .status-card h1{ font-size:24px; font-weight:600; color:var(--paper); margin:0 0 10px; }
  .status-card p{ font-size:14px; color: rgba(246,242,233,0.6); line-height:1.6; margin:0 0 6px; }
  .status-email{ font-size:13px; color: var(--gold-400); font-weight:600; margin-bottom:22px; }
  .status-signout{
    background:none; border:1px solid var(--line-strong); color:var(--ivory);
    font-family:'Manrope',sans-serif; font-weight:600; font-size:13px;
    padding:10px 20px; cursor:pointer; transition: all 0.2s; margin-top:10px;
  }
  .status-signout:hover{ border-color: var(--gold-500); background: rgba(255,255,255,0.06); }

  /* ---------- NAV TABS ---------- */
  .nav-tabs{ display:flex; gap:6px; }
  .nav-tab{
    background:none; border:1px solid transparent; color: rgba(246,242,233,0.55);
    font-family:'Manrope',sans-serif; font-weight:600; font-size:13px;
    padding:8px 16px; cursor:pointer; transition: all 0.2s; display:flex; align-items:center; gap:7px;
  }
  .nav-tab svg{ width:15px; height:15px; }
  .nav-tab:hover{ color: var(--paper); }
  .nav-tab.active{ color: var(--navy-950); background: var(--gold-500); border-color: var(--gold-500); font-weight:700; }
  .role-badge{
    font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em;
    padding:2px 7px; margin-left:2px; line-height:1.6;
  }
  .role-badge.admin{ color:var(--gold-300); background: rgba(205,164,94,0.2); border:1px solid rgba(205,164,94,0.5); }
  .role-badge.supervisor{ color:#a9c7e8; background: rgba(70,110,160,0.25); border:1px solid rgba(120,160,210,0.5); }
  .role-badge.usuario{ color: rgba(246,242,233,0.7); background: rgba(255,255,255,0.06); border:1px solid var(--line-strong); }

  .view{ display:none; }
  .view.active{ display:block; animation: fadeIn 0.5s var(--ease) both; }

  /* ---------- SEGURIDAD / USUARIOS ---------- */
  .sec-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
  .add-user-form{
    display:flex; gap:10px; flex-wrap:wrap; padding:22px; margin-bottom:28px;
  }
  .field-group{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:200px; }
  .field-group label{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: rgba(246,242,233,0.45); font-weight:700; }
  .field-group input, .field-group select{
    background: rgba(255,255,255,0.04); border:1px solid var(--line-strong); color: var(--paper);
    padding:10px 12px; font-family:'Manrope',sans-serif; font-size:13.5px;
  }
  .field-group input:focus, .field-group select:focus{ outline:none; border-color: var(--gold-500); }
  .field-group select option{ background: var(--navy-900); }
  .btn-add-user{
    align-self:flex-end;
    background: var(--gold-500); color: var(--navy-950); border:none;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px;
    padding:11px 22px; cursor:pointer; transition: all 0.2s; white-space:nowrap;
  }
  .btn-add-user:hover{ background: var(--gold-400); transform: translateY(-1px); }
  .btn-add-user:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

  .users-table{ width:100%; border-collapse:collapse; }
  .users-table thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
    color: rgba(246,242,233,0.45); font-weight:700; padding:14px 18px; border-bottom:1px solid var(--line-strong);
  }
  .users-table tbody td{ padding:12px 18px; font-size:13.5px; color: rgba(246,242,233,0.85); border-bottom:1px solid var(--line); vertical-align:middle; }
  .users-table tbody tr{ opacity:0; animation: rowIn 0.4s var(--ease) forwards; }
  .u-person{ display:flex; align-items:center; gap:10px; }
  .u-avatar{
    width:32px; height:32px; border-radius:50%; flex-shrink:0; object-fit:cover;
    background: linear-gradient(135deg, var(--navy-800), var(--gold-500));
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px;
  }
  .u-email{ font-size:13px; color: var(--paper); font-weight:600; }
  .u-name{ font-size:11.5px; color: rgba(246,242,233,0.45); }
  .role-select{
    background: rgba(255,255,255,0.04); border:1px solid var(--line-strong); color:var(--paper);
    padding:6px 10px; font-family:'Manrope',sans-serif; font-size:12.5px; cursor:pointer;
  }
  .role-select option{ background: var(--navy-900); }
  .switch{ position:relative; display:inline-block; width:38px; height:21px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .slider{
    position:absolute; cursor:pointer; inset:0; background: rgba(255,255,255,0.12);
    border:1px solid var(--line-strong); transition: 0.25s;
  }
  .slider::before{
    content:""; position:absolute; height:15px; width:15px; left:2px; top:2px;
    background: var(--ivory); transition: 0.25s;
  }
  .switch input:checked + .slider{ background: rgba(164,69,63,0.55); border-color: var(--ruby); }
  .switch input:checked + .slider::before{ transform: translateX(17px); background:#fff; }
  .switch input:disabled + .slider{ opacity:0.4; cursor:not-allowed; }
  .status-pill{ font-size:11px; font-weight:700; padding:4px 10px; display:inline-block; }
  .status-pill.activo{ color:#8fd1ac; background: rgba(63,125,92,0.16); border:1px solid rgba(63,125,92,0.45); }
  .status-pill.bloqueado{ color:#e2a29c; background: rgba(164,69,63,0.16); border:1px solid rgba(164,69,63,0.45); }
  .row-actions{ display:flex; align-items:center; gap:14px; }
  .btn-remove{
    background:none; border:none; color: rgba(246,242,233,0.4); cursor:pointer;
    font-family:'Manrope',sans-serif; font-size:12px; text-decoration:underline; padding:0;
  }
  .btn-remove:hover{ color:#e2a29c; }
  .btn-remove:disabled{ opacity:0.3; cursor:not-allowed; text-decoration:none; }
  .self-tag{ font-size:10.5px; color: rgba(246,242,233,0.35); font-style:italic; }
  .empty-state{ padding:40px 20px; text-align:center; color: rgba(246,242,233,0.4); font-size:13.5px; }

  /* ---------- DASHBOARD ---------- */
  #dashboard{
    position:relative; z-index:2;
    display:none;
    min-height:100vh;
  }
  #dashboard.visible{ display:block; animation: fadeIn 0.6s var(--ease) both; }
  @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

  .topbar{
    position:sticky; top:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px;
    background: rgba(1,26,68,0.72);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbar-brand{ display:flex; align-items:center; gap:12px; }
  .topbar-brand img{ height:34px; width:auto; }
  .topbar-right{ display:flex; align-items:center; gap:16px; }
  .user-chip{
    display:flex; align-items:center; gap:10px;
    padding:6px 14px 6px 6px;
    border:1px solid var(--line-strong);
    background: rgba(255,255,255,0.03);
  }
  .user-chip .avatar{
    width:28px; height:28px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
    color: var(--navy-950); font-weight:800; font-size:12px;
    display:flex; align-items:center; justify-content:center;
  }
  .user-chip span{ font-size:13px; color: rgba(246,242,233,0.85); }
  .logout-btn{
    background:none; border:1px solid var(--line-strong); color: var(--ivory);
    font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:600;
    padding:8px 14px; cursor:pointer; transition: all 0.2s;
  }
  .logout-btn:hover{ background: rgba(255,255,255,0.06); border-color: var(--gold-500); }

  .container{
    max-width:1240px; margin:0 auto; padding:32px 28px 80px;
  }

  .section-heading{
    display:flex; align-items:baseline; gap:12px; margin-bottom:18px;
  }
  .section-heading .eyebrow{
    font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--gold-400); font-weight:700;
  }
  .section-heading h2{ margin:0; font-size:22px; font-weight:600; color: var(--paper); }
  .section-rule{ flex:1; height:1px; background: var(--line); }

  /* hero action */
  .action-hero{
    margin-bottom:44px;
    animation: riseIn 0.7s var(--ease) both;
  }
  @keyframes riseIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
  .action-hero-inner{
    text-align:center; padding:38px 24px 10px;
  }
  .action-hero h1{
    font-size:34px; font-weight:600; margin:0 0 6px; color:var(--paper);
  }
  .action-hero p{
    margin:0 0 28px; color: rgba(246,242,233,0.55); font-size:14.5px;
  }
  .action-grid{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;
  }
  .action-btn{
    position:relative; overflow:hidden;
    border:1px solid var(--line-strong);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    padding:30px 20px 26px;
    cursor:pointer; text-align:left;
    clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
    color:inherit; font-family:inherit;
  }
  .action-btn:hover{ transform: translateY(-5px); border-color: var(--accent); background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015)); }
  .action-btn:active{ transform: translateY(-1px); }
  .action-btn .icon-wrap{
    width:44px; height:44px; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .action-btn .icon-wrap svg{ width:22px; height:22px; stroke: var(--accent); }
  .action-btn .label{ font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:600; color:var(--paper); display:block; margin-bottom:4px;}
  .action-btn .desc{ font-size:13px; color: rgba(246,242,233,0.5); }
  .action-btn .arrow{
    position:absolute; right:22px; top:26px; font-size:20px; color: var(--accent);
    opacity:0; transform: translateX(-6px); transition: all 0.3s var(--ease);
  }
  .action-btn:hover .arrow{ opacity:1; transform: translateX(0); }
  #btn-comprar{ --accent: var(--emerald-btn, #4f9c76); }
  #btn-vender{ --accent: #c0645d; }
  #btn-cambiar{ --accent: var(--gold-500); }

  /* generic panel */
  .panel{
    border:1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
    -webkit-overflow-scrolling: touch;
  }

  /* rates grid */
  .rates-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:48px;
  }
  .rate-card{
    padding:20px 20px 18px;
    position:relative;
    animation: riseIn 0.6s var(--ease) both;
  }
  .rate-card .rate-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .rate-card .rate-name{ font-size:13px; font-weight:700; letter-spacing:0.04em; color: var(--gold-400); text-transform:uppercase; }
  .rate-card .rate-tag{ font-size:10.5px; padding:3px 8px; border:1px solid var(--line-strong); color: rgba(246,242,233,0.55); }
  .rate-card .unit-select{
    font-family:'Space Grotesk',sans-serif; font-size:10.5px; font-weight:600;
    padding:3px 6px; border:1px solid var(--line-strong); background: rgba(255,255,255,0.03);
    color: var(--gold-400); cursor:pointer; letter-spacing:0.02em;
  }
  .rate-card .unit-select:hover{ border-color: var(--gold-500); }
  .rate-card .unit-select option{ background: var(--navy-900); color: var(--paper); }
  .rate-row{ display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; }
  .rate-row + .rate-row{ border-top: 1px dashed var(--line); }
  .rate-row .rl{ font-size:12px; color: rgba(246,242,233,0.5); }
  .rate-row .rv{ font-size:18px; font-weight:600; color: var(--paper); }
  .rate-row .rv.up{ color:#7fbf9c; }
  .rate-row .rv.down{ color:#d98a83; }
  .pulse-dot{
    width:7px; height:7px; border-radius:50%; background:#7fbf9c; display:inline-block; margin-right:6px;
    animation: dotPulse 1.6s ease-in-out infinite;
  }
  @keyframes dotPulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(127,191,156,0.5);} 50%{opacity:0.6; box-shadow:0 0 0 5px rgba(127,191,156,0);} }

  /* two-column: movements + summary */
  .grid-2col{
    display:grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap:20px; margin-bottom:48px; align-items:start;
  }
  .grid-2col > div{ min-width:0; }
  .cat-label{ min-width:0; flex:1; }
  .cat-value{ flex-shrink:0; margin-left:10px; }

  .movs-table{ width:100%; border-collapse:collapse; }
  .movs-table thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
    color: rgba(246,242,233,0.45); font-weight:700; padding:14px 18px; border-bottom:1px solid var(--line-strong);
  }
  .movs-table tbody td{
    padding:13px 18px; font-size:13.5px; color: rgba(246,242,233,0.85); border-bottom:1px solid var(--line);
  }
  .movs-table tbody tr{ transition: background 0.2s; opacity:0; animation: rowIn 0.5s var(--ease) forwards; }
  .movs-table tbody tr:hover{ background: rgba(255,255,255,0.03); }
  @keyframes rowIn{ from{opacity:0; transform:translateX(-8px);} to{opacity:1; transform:translateX(0);} }
  .op-chip{
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    padding:4px 9px; display:inline-block;
  }
  .op-chip.compra{ color:#8fd1ac; background: rgba(63,125,92,0.18); border:1px solid rgba(63,125,92,0.5); }
  .op-chip.venta{ color:#e2a29c; background: rgba(164,69,63,0.18); border:1px solid rgba(164,69,63,0.5); }
  .op-chip.cambio{ color:var(--gold-300); background: rgba(205,164,94,0.16); border:1px solid rgba(205,164,94,0.5); }
  .op-chip.retiro{ color:#e0b8b0; background: rgba(139,58,58,0.22); border:1px solid rgba(139,58,58,0.55); }
  .op-chip.ingreso{ color:#a9cdea; background: rgba(70,110,150,0.22); border:1px solid rgba(91,155,213,0.5); }

  .summary-card{ padding:20px 20px 22px; margin-bottom:16px; }
  .summary-card h3{ font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color: rgba(246,242,233,0.5); margin:0 0 16px; font-weight:700; font-family:'Manrope',sans-serif; }
  .cat-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; }
  .cat-row + .cat-row{ border-top:1px solid var(--line); }
  .cat-label{ font-size:13px; color: rgba(246,242,233,0.75); display:flex; align-items:center; gap:8px; }
  .cat-swatch{ width:8px; height:8px; }
  .cat-value{ font-size:14px; font-weight:600; color: var(--paper); }
  .cat-value.pos{ color:#8fd1ac; }
  .cat-value.neg{ color:#e2a29c; }
  td.pos, span.pos{ color:#8fd1ac; }
  td.neg, span.neg{ color:#e2a29c; }

  .bar-track{ height:5px; background: rgba(255,255,255,0.06); margin-top:6px; overflow:hidden; }
  .bar-fill{ height:100%; background: var(--gold-500); width:0%; transition: width 1.2s var(--ease); }

  .footer-note{
    text-align:center; font-size:12px; color: rgba(246,242,233,0.35); margin-top:20px;
  }

  /* responsive */
  @media (max-width: 980px){
    .rates-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .grid-2col{ grid-template-columns:minmax(0,1fr); }
    .action-grid{ grid-template-columns:minmax(0,1fr); }
  }
  @media (max-width: 620px){
    .rates-grid{ grid-template-columns:minmax(0,1fr); }
    .container{ padding:24px 16px 60px; }
    .topbar{ padding:14px 16px; }
    .action-hero h1{ font-size:26px; }
    .movs-table:not(.precios-table) thead th:nth-child(5), .movs-table:not(.precios-table) tbody td:nth-child(5){ display:none; }
    .user-chip span{ display:none; }
    .nav-tab{ font-size:0; gap:0; padding:9px 11px; }
    .nav-tab svg{ width:17px; height:17px; }
    .topbar{ flex-wrap:wrap; row-gap:10px; }
    .users-table thead th:nth-child(4), .users-table tbody td:nth-child(4){ display:none; }
    .add-user-form{ flex-direction:column; }
    .btn-add-user{ align-self:stretch; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    background: var(--paper); color: var(--navy-950); font-weight:700; font-size:13.5px;
    padding:13px 22px; box-shadow: var(--shadow); z-index:30;
    opacity:0; pointer-events:none; transition: all 0.35s var(--ease);
    border-left:4px solid var(--gold-500);
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------------- MODAL: Comprar / Vender / Cambiar ---------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:40;
  background: rgba(1,10,30,0.72);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition: opacity 0.3s var(--ease);
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
  position:relative;
  width:100%; max-width:460px; max-height:88vh; overflow-y:auto;
  background: linear-gradient(180deg, #0a2456, var(--navy-950));
  border:1px solid var(--line-strong);
  padding:36px 30px 30px;
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
  transform: translateY(18px) scale(0.98); opacity:0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  box-shadow: var(--shadow);
}
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); opacity:1; }
.modal-close{
  position:absolute; top:16px; right:16px;
  background:none; border:none; color: rgba(246,242,233,0.5);
  font-size:22px; line-height:1; cursor:pointer; transition: color 0.2s;
  width:32px; height:32px;
}
.modal-close:hover{ color: var(--paper); }
.modal-icon{
  width:44px; height:44px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong);
}
.modal-icon svg{ width:22px; height:22px; }
.modal-box h2{ font-size:26px; font-weight:600; color: var(--paper); margin:0 0 6px; }
.modal-sub{ font-size:13px; color: rgba(246,242,233,0.55); margin:0 0 24px; line-height:1.5; }

.op-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.op-field label{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: rgba(246,242,233,0.45); font-weight:700; }
.op-field input, .op-field select{
  background: rgba(255,255,255,0.04); border:1px solid var(--line-strong); color: var(--paper);
  padding:11px 13px; font-family:'Manrope',sans-serif; font-size:14px; width:100%;
}
.op-field input:focus, .op-field select:focus{ outline:none; border-color: var(--gold-500); }
.op-field select option{ background: var(--navy-900); }
.op-row{ display:flex; gap:12px; }
.op-row .op-field{ flex:1; }
.op-swap{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin: 0 auto 16px; cursor:pointer;
  border:1px solid var(--line-strong); background: rgba(255,255,255,0.03); color: var(--gold-400);
  transition: transform 0.25s var(--ease), border-color 0.2s;
}
.op-swap:hover{ border-color: var(--gold-500); transform: rotate(180deg); }
.op-swap svg{ width:16px; height:16px; }
.op-hint-row{ display:flex; justify-content:space-between; align-items:center; margin: -8px 0 16px; }
.op-hint{ font-size:11.5px; color: rgba(246,242,233,0.4); }
.op-calc-btn{
  background:none; border:none; color: var(--gold-400); font-family:'Manrope',sans-serif;
  font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline; padding:0;
}
.op-calc-btn:hover{ color: var(--gold-300); }
.op-submit{
  width:100%; margin-top:8px;
  background: var(--gold-500); color: var(--navy-950); border:none;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px;
  padding:13px 20px; cursor:pointer; transition: all 0.2s;
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
}
.op-submit:hover{ background: var(--gold-400); transform: translateY(-1px); }
.op-submit:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }
.op-error{ color:#e2a29c; font-size:12.5px; margin: -8px 0 14px; display:none; }
.op-error.show{ display:block; }

@media (max-width: 480px){
  .op-row{ flex-direction:column; gap:0; }
}

/* ---------------- Reportes ---------------- */
.report-subtabs{
  display:flex; gap:6px; margin-bottom:24px;
  border-bottom:1px solid var(--line-strong);
}
.report-subtab{
  background:none; border:none; cursor:pointer;
  padding:10px 4px 12px; margin-right:22px;
  font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:700;
  color: rgba(246,242,233,0.45); position:relative;
  transition: color 0.2s;
}
.report-subtab::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: var(--gold-500); transform: scaleX(0); transition: transform 0.25s var(--ease);
}
.report-subtab:hover{ color: rgba(246,242,233,0.75); }
.report-subtab.active{ color: var(--paper); }
.report-subtab.active::after{ transform: scaleX(1); }

.report-view{ display:none; }
.report-view.active{ display:block; }

.filter-bar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  margin-bottom:22px; padding:20px;
}
.filter-bar .op-field{ margin-bottom:0; min-width:140px; flex:1; }
.filter-btn{ width:auto; padding:11px 26px; flex:0 0 auto; margin-top:0; align-self:flex-end; }

.chart-panel{
  padding:24px; min-height:340px; position:relative;
}
.chart-panel canvas{ max-height:360px; }
.chart-panel .empty-state{ padding:80px 0; }

@media (max-width: 720px){
  .filter-bar{ flex-direction:column; align-items:stretch; }
  .filter-bar .op-field{ min-width:0; }
  .filter-btn{ width:100%; }
}

.precios-table{ min-width:640px; }
.precios-table .precio-input{
  width:100px; background: rgba(255,255,255,0.04); border:1px solid var(--line-strong);
  color: var(--paper); padding:7px 9px; font-family:'Space Grotesk',sans-serif; font-size:13px;
}
.precios-table .precio-input:focus{ outline:none; border-color: var(--gold-500); }
.precios-table .btn-remove.precio-guardar{ color: var(--gold-400); border-color: var(--gold-500); }
.precios-table .btn-remove.precio-guardar:hover{ background: var(--gold-500); color: var(--navy-950); }

/* ---------------- Pizarra ---------------- */
.pizarra-form{
  display:flex; gap:14px; align-items:flex-end; padding:20px; margin-bottom:28px; flex-wrap:wrap;
}
.pizarra-form textarea{
  flex:1; min-width:220px; resize:vertical; min-height:52px;
  background: rgba(255,255,255,0.04); border:1px solid var(--line-strong); color: var(--paper);
  padding:11px 13px; font-family:'Manrope',sans-serif; font-size:14px; line-height:1.5;
}
.pizarra-form textarea:focus{ outline:none; border-color: var(--gold-500); }
.pizarra-publicar{ width:auto; padding:12px 28px; flex:0 0 auto; margin-top:0; }

.pizarra-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px;
}
.pizarra-card{
  padding:20px; display:flex; flex-direction:column; gap:12px;
  opacity:0; animation: rowIn 0.4s var(--ease) forwards;
}
.pizarra-card.finalizada{ opacity:0.55; }
.pizarra-mensaje{
  font-size:14.5px; line-height:1.6; color: var(--paper); white-space:pre-wrap; word-break:break-word; margin:0;
}
.pizarra-meta{
  display:flex; align-items:center; gap:8px; font-size:11.5px; color: rgba(246,242,233,0.45);
}
.pizarra-avatar{
  width:22px; height:22px; border-radius:50%; background: var(--navy-700); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; color: var(--gold-300);
  flex-shrink:0;
}
.pizarra-acciones{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.pizarra-toggle-btn{
  background:none; border:1px solid var(--line-strong); color: rgba(246,242,233,0.7);
  font-family:'Manrope',sans-serif; font-size:11.5px; font-weight:700; padding:7px 14px; cursor:pointer;
  transition: all 0.2s;
}
.pizarra-toggle-btn:hover{ border-color: var(--gold-500); color: var(--gold-300); }
.pizarra-borrar-btn{
  background:none; border:none; color: rgba(246,242,233,0.35); font-size:18px; line-height:1; cursor:pointer;
  padding:4px 8px; transition: color 0.2s;
}
.pizarra-borrar-btn:hover{ color:#d98a83; }

@media (max-width: 620px){
  .pizarra-form{ flex-direction:column; align-items:stretch; }
  .pizarra-publicar{ width:100%; }
  .pizarra-grid{ grid-template-columns:1fr; }
}

/* ---------------- Badge de notificación (globo) ---------------- */
.nav-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px; margin-left:2px;
  background:#a4453f; color:#fff; border-radius:999px;
  font-size:10px; font-weight:800; line-height:1;
  font-family:'Space Grotesk',sans-serif;
}
.nav-tab .nav-badge{ background: var(--gold-500); color: var(--navy-950); }
.nav-tab.active .nav-badge{ background: var(--navy-950); color: var(--gold-400); }

/* ---------------- Preview de Pizarra en el Panel ---------------- */
.pizarra-preview-card{ cursor:pointer; transition: border-color 0.2s; }
.pizarra-preview-card:hover{ border-color: var(--gold-500); }
.pizarra-preview-card h3{ display:flex; align-items:center; gap:6px; }
.pizarra-preview-item{
  display:flex; align-items:flex-start; gap:9px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.05); font-size:13px; color: rgba(246,242,233,0.8); line-height:1.4;
}
.pizarra-preview-item:last-child{ border-bottom:none; }
.pizarra-preview-dot{
  width:6px; height:6px; border-radius:50%; background: var(--gold-500); flex-shrink:0; margin-top:6px;
}
.pizarra-preview-mas{ font-size:11.5px; color: rgba(246,242,233,0.4); padding-top:8px; }
.pizarra-preview-link{
  font-size:11.5px; font-weight:700; color: var(--gold-400); margin-top:12px; text-align:right;
}