/* Sidebar */
    .sidebar{
      position: sticky;
      top: 14px;
      align-self: start;
      height: calc(100vh - 28px);
      background: linear-gradient(180deg, #05070d 0%, #000000 100%);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px;
      overflow:auto;

      animation: pop .35s ease-out both;
    }
    @keyframes pop{
      from{ transform: translateY(8px); opacity:0; }
      to{ transform: translateY(0); opacity:1; }
    }

    .brand{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      padding: 14px 10px 16px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      margin-bottom: 12px;
      position:relative;
    }
    .brand img{ max-width:100%; height:auto; }
    .brand small{display:block;color:rgba(255,255,255,.55); font-weight:700; margin-top:2px; text-align:center; font-size:12px;}

    .hamburger{
      position:absolute;
      right:10px;
      top:14px;
      width:38px;height:38px;border-radius:10px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.04);
      cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition: transform .15s ease, background .15s ease;
    }
    .hamburger:hover{ background:rgba(255,255,255,.08); }
    .hamburger:active{ transform: translateY(0); }
    .burger{ width:18px;height:12px; position:relative; }
    .burger span{
      position:absolute; left:0; right:0;
      height:2px; border-radius:999px;
      background: var(--pink);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:5px}
    .burger span:nth-child(3){bottom:0}

    .nav{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-top:12px;
    }
    .nav button{
      width:100%;
      padding:12px 12px;
      border-radius: var(--radius2);
      border:1px solid transparent;
      border-left:3px solid transparent;
      background:rgba(255,255,255,.03);
      cursor:pointer;
      font-weight:700;
      color:#e8ebf3;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      transition: background .15s ease, border-color .15s ease;
    }
    .nav button .navRow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      text-align:left;
    }
    .navIconBadge{
      width:28px; height:28px;
      border-radius:50%;
      background:var(--pink);
      display:inline-flex; align-items:center; justify-content:center;
      flex:0 0 auto;
    }
    .navIconBadge svg{ width:16px; height:16px; display:block; }
    .nav button:hover{
      background:rgba(255,255,255,.07);
    }
    .nav button .tag{
      font-weight:800;
      font-size:11px;
      padding: 4px 10px;
      border-radius:999px;
      background: rgba(47,95,224,.20);
      color: #8fb0ff;
      border:1px solid rgba(47,95,224,.35);
      white-space:nowrap;
    }
    .nav button.active{
      border-left-color: var(--pink);
      background: rgba(47,95,224,.16);
      color:#fff;
    }
    .nav button.active .tag{
      background: var(--pink);
      color:#fff;
      border-color: var(--pink);
    }

    .sidecard{
      margin-top:14px;
      padding:12px;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:800;
      color:#8fb0ff;
      background: rgba(47,95,224,.16);
      border:1px solid rgba(47,95,224,.30);
      padding: 6px 10px;
      border-radius:999px;
      font-size:12px;
    }
    .sidecard .row{
      display:flex; justify-content:space-between; gap:10px; margin:8px 0;
      color:rgba(255,255,255,.55); font-weight:700;
    }
    .sidecard .row b{color:#fff}

    /* Main */
  .main{
  min-height:100vh;
  width:100%;
  /* --bg-panel nunca estaba definida en ningún lado (bug ya existente) — el
     panel principal quedaba transparente, dejando ver el fondo oscuro de la
     página en los huecos entre tarjetas. --panel sí existe y nunca se usaba. */
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:20px;

  overflow:visible;

  animation: pop .35s ease-out both;
}

    .topbar{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 6px 6px 12px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 14px;
    }
    .title{ display:flex; flex-direction:column; gap:2px; }
    .title h2{margin:0;font-size:18px; color:var(--text);}
    .title p{margin:0;color:var(--muted);font-weight:700;font-size:13px}

    .actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

    .btn{
      border:none;
      cursor:pointer;
      font-weight:700;
      padding: 11px 14px;
      border-radius: var(--radius2);
      background:#fff;
      border:1px solid var(--border);
      color:var(--text);
      transition: background .15s ease, border-color .15s ease;
    }
    .btn:hover{ background:#f4f6fb; }
    .btn:active{ transform: translateY(0); }
    .btn.small{ padding:8px 12px; border-radius:8px; font-weight:700; font-size:13px; }

    .btn.primary{
      background: linear-gradient(90deg, var(--pink), var(--purple));
      color:white;
      border:none;
    }
    .btn.ok{
      background: #16a34a;
      color:white;border:none;
    }
    .btn.danger{
      background: #dc2626;
      color:white;border:none;
    }

    /* Key: minmax(0,...) prevents horizontal overflow from inputs/selects */
    .grid{
      display:grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: 14px;
      margin-top: 14px;
    }

    .card, .field, .rowflex, .table{ min-width:0; }

    .card{
      background: rgba(255,255,255,.96);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      padding: 14px;
      overflow:hidden;
      position:relative;
    }

    /* h1-h4 son blancos por defecto (base.css) — pensado para fondos oscuros.
       Dentro de .card (siempre blanca) eso los deja invisibles. */
    .card h3{margin:0 0 10px 0; font-size:15px; font-weight:800; color:var(--text);}
    .muted{color:var(--muted); font-weight:600; font-size:13px}

    .form{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .form.stack{ grid-template-columns: 1fr; }
    .field{ display:flex; flex-direction:column; gap:6px; }
    .field label{
      font-size:12px;
      color:var(--muted);
      font-weight:700;
      letter-spacing:.2px;
    }
    .field input, .field select, .field textarea{
      padding: 12px 12px;
      border-radius: var(--radius2);
      /* Antes el borde era casi invisible (12% opacidad) y el fondo blanco
         puro se confundía con el blanco casi puro de la tarjeta — se nota
         más con un borde bien marcado y un fondo ligeramente gris. */
      border:1.5px solid rgba(20,24,36,.22);
      background:#f5f6fa;
      outline:none;
      font-weight:600;
      color:var(--text);
      min-width:0;
      transition: box-shadow .15s ease, border-color .15s ease;
    }
    .field input:focus, .field select:focus, .field textarea:focus{
      border-color: var(--pink);
      box-shadow: var(--focus);
    }

    .field.full{grid-column:1 / -1}

    .rowflex{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .rowflex .grow{ flex:1; }

    .table{
      width:100%;
      border-collapse: collapse;
      overflow:hidden;
      border-radius: var(--radius2);
      border:1px solid var(--border);
      background:#fff;
    }
    .table th, .table td{
      padding:10px 10px;
      border-bottom:1px solid var(--border);
      text-align:left;
      font-weight:600;
      font-size:13px;
      vertical-align:top;
    }
    .table th{
      background: rgba(219, 226, 247, 0.818);
      color:var(--purple);
      font-weight:700;
    }
    .table td small{color:var(--muted); font-weight:600}
    .table tr:last-child td{border-bottom:none}

    .totals{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:10px;
    }
    .kpi{
      padding:12px;
      border-radius: var(--radius2);
      border:1px solid var(--border);
      background: #fff;
    }
    .kpi .label{ color:var(--muted); font-weight:700; font-size:12px }
    .kpi .value{ font-size:18px; font-weight:800; margin-top:4px }
    .kpi .value span{ font-size:12px; color:var(--muted); font-weight:700 }

    .hide{ display:none !important; }
.hidden{ display:none !important; }


/* Kardex ya usa las mismas clases compartidas (.card/.form/.table) que el
   resto de la app — este bloque quedó vacío a propósito: antes tenía estilos
   pensados para un fondo oscuro que ya no existe (texto blanco invisible
   sobre las tarjetas blancas). Ver conversación: "mira que mal se ve el kardex". */