/* ===================================================================
   La Cachapera . Logistica de Despacho y Recepcion
   Sistema de diseno heredado del prototipo, conforme a BRANDING-PROMPT.md
   Amarillo #fac914 . Gris de marca #2c2f31 . Bebas Neue + Cabin
   =================================================================== */

  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cabin:wght@400;500;600;700&display=swap');

  /* -------------------------------------------------------------------
     PALETA
     Conforme a BRANDING-PROMPT.md: amarillo #fac914, gris de marca
     #2c2f31, Bebas Neue + Cabin. Ningun azul institucional, ningun
     negro puro.

     Dos familias de tokens, y es importante no mezclarlas:

       1. Superficie NORMAL  -> --ground / --surface / --ink / --ink-soft
          Fondo claro en tema claro y oscuro en tema oscuro; el texto
          hace lo contrario. Para casi todo.

       2. Superficie INVERTIDA -> --inverse / --on-inverse
          Siempre oscura, con texto siempre claro encima, en los DOS
          temas. Es la barra lateral, el boton principal y el recuadro
          del logo. Antes esto se pintaba con --ink de fondo, y ahi
          estaba el fallo: en tema oscuro --ink se vuelve casi blanco,
          asi que la barra lateral salia clara con texto claro encima
          y no se leia nada.

     REGLA: --ink es SIEMPRE color de texto, nunca un fondo.
     ------------------------------------------------------------------- */
  :root{
    /* Marca */
    --brand:#fac914;
    --brand-dark:#e2b30b;
    --brand-soft:#fff5cc;
    --accent:#fac914;
    --accent-ink:#2c2f31;   /* texto ENCIMA del amarillo: siempre oscuro */
    --accent-soft:#fff5cc;

    /* Superficie normal */
    --ground:#f6f6f7;
    --surface:#FFFFFF;
    --surface-2:#f1f1ee;
    --border:#e5e5e7;
    --ink:#2c2f31;
    --ink-soft:#6b6f74;

    /* Superficie invertida */
    --inverse:#2c2f31;
    --inverse-2:#3a3d40;
    --inverse-hover:rgba(255,255,255,.07);
    --inverse-border:rgba(255,255,255,.14);
    --on-inverse:#f4f5f5;
    --on-inverse-soft:#c7cacb;

    /* Boton principal: uno por pantalla (branding, apartado 6) */
    --btn-primary-bg:#2c2f31;
    --btn-primary-bg-hover:#3a3d40;
    --btn-primary-ink:#fac914;

    /* Estados semaforicos */
    /* Ambar de aviso. El manual de marca trae #b9770e, pero sobre su
       propio fondo suave da 3,35:1 y no llega al minimo legible (4,5).
       Este es el mismo tono oscurecido un 20%: 4,91:1. Si prefieres el
       valor original exacto, cambialo aqui y asumimos el contraste. */
    --warn:#945f0b;   --warn-soft:#fff3e0;
    --ok:#1d6a3a;     --ok-soft:#e7f7ec;
    --info:#2363b8;   --info-soft:#eef3ff;
    --danger:#a23029; --danger-soft:#fdecea;

    /* Forma y profundidad */
    --on-strong:#ffffff;    /* texto encima de ok/warn/danger macizos */

    /* Forma y profundidad */
    --shadow:rgba(44,47,49,0.10);
    --focus:#2363b8;
    --radius:14px;
    --radius-sm:10px;
    --radius-lg:18px;
    --radius-pill:999px;
  }

  /* Tema oscuro. OJO: los valores van DUPLICADOS a proposito en los dos
     bloques de abajo — uno responde a la preferencia del sistema y el
     otro al interruptor manual de la app. Si tocas uno, toca el otro. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --brand:#fac914; --brand-dark:#e2b30b; --brand-soft:#3a3419;
      --accent:#fac914; --accent-ink:#2c2f31; --accent-soft:#3a3419;

      --ground:#1b1d1e; --surface:#242628; --surface-2:#2c2f31;
      --border:#3a3d40; --ink:#f2f2f0; --ink-soft:#b0b5b9;

      /* Mas oscura que --ground, para que la barra conserve jerarquia */
      --inverse:#121416; --inverse-2:#24282c;
      --inverse-hover:rgba(255,255,255,.08); --inverse-border:rgba(255,255,255,.12);
      --on-inverse:#f2f2f0; --on-inverse-soft:#b7bcc0;

      /* En oscuro el boton principal se invierte: amarillo con tinta oscura */
      --btn-primary-bg:#fac914; --btn-primary-bg-hover:var(--brand-dark); --btn-primary-ink:#2c2f31;

      --warn:#e8b25c;   --warn-soft:#3a2c12;
      --ok:#5fc489;     --ok-soft:#123321;
      --info:#7aa8e6;   --info-soft:#152943;
      --danger:#ef8a83; --danger-soft:#3a1815;

      --on-strong:#14181a;
      --shadow:rgba(0,0,0,0.45); --focus:#7aa8e6;
    }
  }
  :root[data-theme="dark"]{
    --brand:#fac914; --brand-dark:#e2b30b; --brand-soft:#3a3419;
    --accent:#fac914; --accent-ink:#2c2f31; --accent-soft:#3a3419;

    --ground:#1b1d1e; --surface:#242628; --surface-2:#2c2f31;
    --border:#3a3d40; --ink:#f2f2f0; --ink-soft:#b0b5b9;

    --inverse:#121416; --inverse-2:#24282c;
    --inverse-hover:rgba(255,255,255,.08); --inverse-border:rgba(255,255,255,.12);
    --on-inverse:#f2f2f0; --on-inverse-soft:#b7bcc0;

    --btn-primary-bg:#fac914; --btn-primary-bg-hover:var(--brand-dark); --btn-primary-ink:#2c2f31;

    --warn:#e8b25c;   --warn-soft:#3a2c12;
    --ok:#5fc489;     --ok-soft:#123321;
    --info:#7aa8e6;   --info-soft:#152943;
    --danger:#ef8a83; --danger-soft:#3a1815;

    --on-strong:#14181a;
    --shadow:rgba(0,0,0,0.45); --focus:#7aa8e6;
  }

  *{box-sizing:border-box;}
  body{margin:0; background:var(--ground); color:var(--ink); font-family:'Cabin', ui-sans-serif, system-ui, sans-serif; font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Bebas Neue', ui-sans-serif, system-ui, sans-serif; text-transform:uppercase; letter-spacing:.03em; text-wrap:balance; margin:0;}
  .mono{font-family:'Cabin', ui-sans-serif, system-ui, sans-serif; font-weight:600; font-variant-numeric:tabular-nums;}
  button{font-family:inherit;}
  input, select{font-family:'Cabin', ui-sans-serif, system-ui, sans-serif; font-weight:600; font-variant-numeric:tabular-nums;}
  input[type="text"], input[type="date"], input[type="number"], input[type="search"], select{
    background:var(--surface); border:1px solid var(--border); color:var(--ink); border-radius:6px; padding:8px 10px; font-size:14px; width:100%;
  }
  input:focus-visible, select:focus-visible, button:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
  ::placeholder{color:var(--ink-soft); opacity:.7;}

  .shell{display:flex; align-items:flex-start; min-height:100vh;}
  .sidebar{width:230px; flex:none; box-sizing:border-box; background:var(--inverse); min-height:100vh; position:sticky; top:0; display:flex; flex-direction:column; gap:26px; padding:24px 18px;}
  .main-col{flex:1; min-width:0;}
  /* La version desplegada: discreta, pero siempre a la vista. Esta para que
     una foto de la pantalla diga que codigo esta corriendo. */
  .pie-version{margin:28px 0 10px; text-align:right; font-size:11px;
    color:var(--ink-soft); opacity:.6; font-variant-numeric:tabular-nums;}
  @media print{ .pie-version{display:none;} }
  #app{max-width:1020px; margin:0 auto; padding:28px 20px 64px;}

  .brand-text{display:flex; flex-direction:column; gap:1px;}
  .brand-mark{font-family:'Bebas Neue'; font-weight:400; font-size:22px; letter-spacing:.03em; color:var(--brand); cursor:pointer; line-height:1;}
  .brand-sub{font-family:'Cabin'; font-weight:600; font-size:11px; letter-spacing:.03em; color:var(--on-inverse-soft); display:block;}
  .app-version{font-weight:400; opacity:.7; margin-left:0; display:block; margin-top:2px;}

  .sidebar-nav{display:flex; flex-direction:column; gap:3px;}
  .sidebar-nav a{font-family:'Cabin'; font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--on-inverse-soft); text-decoration:none; cursor:pointer; padding:9px 12px; border-radius:8px;}
  .sidebar-nav a:hover{color:var(--brand); background:var(--inverse-hover);}
  .sidebar-nav a.activa{color:var(--brand); background:var(--inverse-hover);}

  .sidebar-foot{margin-top:auto; display:flex; flex-direction:column; gap:14px; padding-top:16px; border-top:1px solid var(--inverse-border);}
  .conn{display:flex; align-items:center; gap:7px; font-family:'Cabin'; font-weight:600; font-size:11.5px; color:var(--on-inverse-soft);}
  .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none;}
  .dot.off{background:var(--danger);}

  .fmt-etiqueta{display:flex; flex-direction:column; align-items:flex-start; gap:6px; font-family:'Cabin'; font-weight:600; font-size:11.5px; color:var(--on-inverse-soft);}
  .fmt-etiqueta select{font-family:'Cabin'; font-weight:600; font-size:11.5px; background:var(--inverse-2); color:var(--on-inverse); border:1px solid var(--inverse-border); border-radius:6px; padding:5px 6px; cursor:pointer; width:100%;}



  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Cabin'; font-weight:600; font-size:14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); color:var(--ink); padding:10px 16px; cursor:pointer; white-space:nowrap;}
  .btn:hover{border-color:var(--ink-soft);}
  .btn.primary{background:var(--btn-primary-bg); border-color:var(--btn-primary-bg); color:var(--btn-primary-ink); border-radius:var(--radius-pill);}
  .btn.primary:hover{background:var(--btn-primary-bg-hover); border-color:var(--btn-primary-bg-hover);}
  .btn.primary:disabled{background:var(--surface-2); border-color:var(--border); color:var(--ink-soft); cursor:not-allowed;}
  .btn.ghost{background:transparent; border-color:transparent; color:var(--ink-soft); padding:8px 10px;}
  .btn.danger-ghost{background:transparent; border-color:transparent; color:var(--danger); padding:6px 9px;}
  .btn.big{padding:16px 18px; font-size:15.5px; border-radius:var(--radius-pill);}
  .btn.small{padding:6px 11px; font-size:12.5px; border-radius:8px;}
  .btn:disabled{opacity:.5; cursor:not-allowed;}

  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 1px 3px var(--shadow);}

  .banner{display:flex; gap:12px; align-items:flex-start; border-radius:10px; padding:14px 16px; margin-bottom:22px; background:var(--accent-soft); border:1px solid var(--accent); font-size:13.5px; color:var(--ink);}
  .banner b{color:var(--ink);}
  .banner.info{background:var(--info-soft); border-color:var(--info);}
  .banner.danger{background:var(--danger-soft); border-color:var(--danger);}
  .banner.ok{background:var(--ok-soft); border-color:var(--ok);}

  .section-title{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); font-family:'Cabin'; margin:0 0 12px;}
  .empty{padding:30px 20px; text-align:center; color:var(--ink-soft); font-size:13.5px; border:1px dashed var(--border); border-radius:10px;}

  .pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-family:'Cabin'; font-weight:600; letter-spacing:.03em;}
  .pill.info{background:var(--info-soft); color:var(--info);}
  .pill.ok{background:var(--ok-soft); color:var(--ok);}
  .pill.neutral{background:var(--surface-2); color:var(--ink-soft);}
  .pill.warn{background:var(--warn-soft); color:var(--warn);}

  /* ---- Dashboard ---- */
  .albaran-list{display:flex; flex-direction:column; gap:10px; margin-bottom:32px;}
  .albaran-row{display:flex; align-items:center; gap:14px; padding:14px 16px; flex-wrap:wrap;}
  .albaran-row .num{font-family:'Cabin'; font-weight:700; font-size:15.5px; min-width:110px;}
  .albaran-row .meta{color:var(--ink-soft); font-size:12.5px; font-family:'Cabin'; flex:1;}
  .progress-track{width:96px; height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; flex:none;}
  .progress-fill{height:100%; background:var(--ok); border-radius:4px;}

  /* ---- Nuevo pedido ---- */
  .form-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:22px;}
  .field label{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-family:'Cabin'; margin-bottom:6px;}

  .buscador-wrap{position:relative; margin-bottom:10px;}
  .buscador-resultados{border:1px solid var(--border); border-radius:10px; background:var(--surface); max-height:260px; overflow-y:auto; margin-top:8px;}
  .buscador-item{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); cursor:pointer; font-size:13.5px;}
  .buscador-item:last-child{border-bottom:none;}
  .buscador-item:hover{background:var(--surface-2);}
  .buscador-item .u{font-family:'Cabin'; font-size:11.5px; color:var(--ink-soft);}

  .seleccion-card{padding:14px 16px; margin-bottom:10px;}
  .seleccion-card.alerta{border-color:var(--accent);}
  .seleccion-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px;}
  .seleccion-nombre{font-family:'Cabin'; font-weight:700; font-size:14.5px;}
  .seleccion-grid{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px;}
  @media (max-width:820px){ .seleccion-grid{grid-template-columns:1fr 1fr;} .form-grid{grid-template-columns:1fr 1fr;} }
  .mini-label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-family:'Cabin'; margin-bottom:4px;}

  .pdf-dropzone{padding:0;}
  .pdf-dropzone-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:30px 20px; cursor:pointer; text-align:center;}
  .pdf-dropzone-empty:hover{background:var(--surface-2);}
  .pdf-dropzone-row{display:flex; align-items:center; gap:12px; padding:14px 16px;}
  .pdf-icon{font-size:20px; flex:none;}
  .pdf-icon.big{font-size:30px;}
  .pdf-change{cursor:pointer; font-size:12px; color:var(--info); text-decoration:underline;}

  .lote-warning{background:var(--warn-soft); border:1px solid var(--warn); color:var(--ink); border-radius:var(--radius-sm); padding:9px 11px; font-size:12.5px; margin-bottom:10px;}
  .lote-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px;}
  .lote-chip{font-family:'Cabin'; font-weight:600; font-size:11.5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 9px; cursor:pointer;}
  .lote-chip:hover{border-color:var(--warn);}
  .lote-chip.activo{background:var(--warn); border-color:var(--warn); color:var(--on-strong);}

  .verify-box{display:flex; gap:12px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin:20px 0;}
  .verify-box input[type=checkbox]{width:18px; height:18px; margin-top:1px; accent-color:var(--accent); flex:none;}
  .verify-box label{font-size:13.5px; color:var(--ink);}
  .actions-row{display:flex; justify-content:flex-end; gap:10px; margin-top:8px;}

  /* ---- Checklist de recepción ---- */
  textarea{background:var(--surface); border:1px solid var(--border); color:var(--ink); border-radius:var(--radius-sm); padding:10px 12px; font-family:'Cabin'; font-weight:500; font-size:14px; width:100%; resize:vertical;}
  .recep-item{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--border); flex-wrap:wrap;}
  .recep-item:last-child{border-bottom:none;}
  .recep-label{flex:1; min-width:220px; font-size:14px;}
  .recep-toggle{display:flex; gap:8px; flex:none;}
  .recep-resultado{display:flex; gap:8px; flex-wrap:wrap;}
  .btn.danger-solid{background:var(--danger); border-color:var(--danger); color:var(--on-strong);}
  .recep-summary{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .recep-summary a{color:inherit; text-decoration:underline; cursor:pointer;}
  .recep-detail dt{font-family:'Cabin'; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:12px 0 4px;}
  .recep-detail dd{margin:0; font-size:13.5px;}
  .recep-detail .rd-item{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
  .recep-detail .rd-item:last-child{border-bottom:none;}
  .foto-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
  .foto-thumb{position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--border); cursor:pointer;}
  .foto-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .foto-thumb .rm{position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; border:none; font-size:12px; line-height:18px; text-align:center; cursor:pointer; padding:0;}
  .foto-lightbox{position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; padding:24px; z-index:120;}
  .foto-lightbox img{max-width:100%; max-height:85vh; border-radius:8px;}

  /* ---- Tabla de faltantes (Recepción) ---- */
  .faltantes-tabla{margin:10px 0 14px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface);}
  .faltantes-tabla .fl-head{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:6px 10px; padding:8px 12px; background:var(--surface-2); font-family:'Cabin'; font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
  .faltantes-tabla .fl-row{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:6px 10px; padding:10px 12px; border-top:1px solid var(--border); font-size:13.5px; align-items:center;}
  .faltantes-tabla .fl-row.fl-total{background:var(--danger-soft);}
  .faltantes-tabla .fl-nombre{font-weight:600;}
  .faltantes-tabla .fl-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
  .faltantes-tabla .fl-falta{color:var(--danger); font-weight:700;}
  .faltantes-tabla .fl-head .fl-num{text-align:right;}
  @media (max-width:560px){
    .faltantes-tabla .fl-head{display:none;}
    .faltantes-tabla .fl-row{grid-template-columns:1fr 1fr; row-gap:2px;}
    .faltantes-tabla .fl-nombre{grid-column:1 / -1;}
    .faltantes-tabla .fl-num{text-align:left;}
    .faltantes-tabla .fl-num::before{content:attr(data-label) ": "; color:var(--ink-soft); font-weight:400;}
    .faltantes-tabla .fl-falta::before{color:var(--danger);}
  }

  /* ---- Catálogo ---- */
  .cat-row{display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:13.5px;}
  .cat-row:last-child{border-bottom:none;}
  .cat-row .nombre{flex:1; font-weight:500;}
  .cat-row .unidad{font-family:'Cabin'; font-size:12px; color:var(--ink-soft); min-width:120px;}

  /* ---- Armar caja (sesión) ---- */
  .sesion-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
  .sesion-head h2{font-size:22px;}
  .chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
  .chip{background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:5px 10px; font-family:'Cabin'; font-size:12px; color:var(--ink-soft);}
  .chip b{color:var(--ink); font-weight:600;}


  .add-box-row{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
  input.cant-caja-input{width:64px; flex:none; text-align:center;}
  .add-box-row .mini-label{flex:1; white-space:nowrap;}
  input.caja-detalle-input{flex:1; min-width:110px; width:auto;}

  .modal-backdrop{position:fixed; inset:0; background:rgba(44,47,49,0.55); display:flex; align-items:center; justify-content:center; padding:24px; z-index:80;}
  .modal-label{background:var(--surface); border-radius:var(--radius-lg); padding:16px; max-height:92vh; overflow:auto; box-shadow:0 8px 30px rgba(44,47,49,0.35);}

  .prod-card.completo{opacity:.55;}
  .prod-nombre{font-family:'Cabin'; font-weight:700; font-size:14.5px;}
  .prod-datos{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px;}
  .dato{font-size:11.5px;}
  .dato .k{color:var(--ink-soft); font-family:'Cabin'; font-size:10px; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:2px;}
  .dato .v{font-family:'Cabin'; font-size:12.5px; font-weight:600;}
  .dato.caducidad .v{color:var(--danger);}
  .prod-restante{font-family:'Cabin'; font-size:12px; color:var(--ink-soft); margin-top:6px;}

  .tray-item{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; padding:7px 0; border-bottom:1px solid var(--border);}
  .tray-item:last-child{border-bottom:none;}
  .tray-item .nombre{flex:1;}
  .tray-item .cant{font-family:'Cabin'; font-weight:600; white-space:nowrap;}
  .tray-empty{font-size:12px; color:var(--ink-soft); padding:10px 0;}

  .cajas-generadas{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px;}
  .caja-tag{display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-family:'Cabin'; font-size:11.5px; color:var(--ink-soft);}
  .caja-tag:hover{border-color:var(--ink-soft); color:var(--ink);}
  .caja-tag.verificada{background:var(--ok-soft); border-color:var(--ok);}
  .caja-ok{display:inline-flex; align-items:center; gap:3px; color:var(--ok); font-weight:600; white-space:nowrap;}
  .caja-ok-btn{font-family:'Cabin'; font-weight:700; font-size:11px; letter-spacing:.02em; border:1px solid var(--ok); background:var(--ok); color:var(--on-strong); border-radius:999px; padding:3px 9px; cursor:pointer; white-space:nowrap;}
  .caja-ok-btn:hover{filter:brightness(1.1);}
  .sesion-footer{display:flex; justify-content:space-between; align-items:center; margin-top:26px; padding-top:18px; border-top:1px solid var(--border);}

  /* ---- Etiqueta (impresora DYMO, rollo 89mm x 36mm) ---- */
  .label-preview-wrap{display:flex; justify-content:center; margin:18px 0;}
  .label-pages{display:flex; flex-direction:column; align-items:center; gap:10px;}
  .label{width:89mm; height:36mm; box-sizing:border-box; padding:2mm 3mm; background:#fff; color:#2c2f31; border:1px solid #2c2f31; border-radius:1.5mm; overflow:hidden; display:flex; flex-direction:column; font-family:'Cabin', sans-serif; flex:none;}
  .label .l-head-row{display:flex; align-items:center; justify-content:space-between; gap:2mm; flex:none;}
  .label .l-brand-mini{display:flex; align-items:center; gap:1.3mm; min-width:0;}
  .label .l-brand-mini img{width:5mm; height:5mm; object-fit:contain; flex:none;}
  .label .l-brand-mini span{font-family:'Bebas Neue'; font-weight:400; text-transform:uppercase; font-size:9.5pt; letter-spacing:.02em; line-height:1; color:#2c2f31; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .label .l-meta-mini{font-family:'Cabin'; font-weight:700; font-size:6.7pt; text-align:right; line-height:1.25; white-space:nowrap; flex:none;}
  .label hr{border:none; border-top:1pt solid #2c2f31; margin:1mm 0;}
  .label .l-items{display:flex; flex-direction:column; gap:.6mm; flex:1; min-height:0; overflow:hidden;}
  .label .l-item{display:flex; justify-content:space-between; align-items:baseline; gap:2mm;}
  .label .l-item .nom{font-family:'Cabin'; font-weight:700; font-size:7.3pt; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;}
  .label .l-item .cant{font-family:'Cabin'; font-weight:600; font-size:7.3pt; flex:none; white-space:nowrap;}

  /* ---- Etiqueta en "página completa" (impresora normal / PDF, no la DYMO) ----
     Mismo contenido que la etiqueta chica, solo que a escala de una hoja A4,
     para cuando se imprime en una impresora de oficina o se guarda como PDF
     para archivar/enviar por email en vez de pegar en la caja. */
  /* A partir de 2026-09-08.3: 3 etiquetas "página completa" por hoja física
     (antes era 1 etiqueta = 1 hoja A4 entera, gastando mucho papel para poco
     contenido). Cada etiqueta ahora ocupa ~1/3 de la altura de la hoja y se
     agrupan de 3 en 3 dentro de un ".hoja-completa" — el salto de página va
     en cada hoja-completa, no en cada etiqueta individual. */
  .label.completa{width:180mm; height:85mm; min-height:0; padding:6mm 9mm; border-radius:2mm; overflow:hidden;}
  .label.completa .l-head-row{gap:4mm;}
  .label.completa .l-brand-mini{gap:2.5mm; flex:1;}
  .label.completa .l-brand-mini img{width:9mm; height:9mm;}
  .label.completa .l-brand-mini span{font-size:14pt;}
  .label.completa .l-meta-mini{font-size:9pt; line-height:1.3;}
  .label.completa hr{border-top-width:1pt; margin:3mm 0;}
  .label.completa .l-items{gap:1.8mm; overflow:hidden;}
  .label.completa .l-item{gap:4mm; padding-bottom:1.5mm; border-bottom:.5pt solid #d8d8d8;}
  .label.completa .l-item .nom{font-size:10.5pt; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
  .label.completa .l-item .cant{font-size:10.5pt;}
  .hoja-completa{display:flex; flex-direction:column; gap:6mm;}

  .print-label-root{display:none;}
  @media print{
    body > *:not(#printLabelRoot){display:none !important;}
    #printLabelRoot{display:flex !important; align-items:flex-start; justify-content:flex-start;}
    #printLabelRoot .label{border:none;}
    .label-pages > .label{page-break-after:always; break-after:page;}
    .label-pages > .label:last-child{page-break-after:auto; break-after:auto;}
    .label-pages > .hoja-completa{page-break-after:always; break-after:page;}
    .label-pages > .hoja-completa:last-child{page-break-after:auto; break-after:auto;}
    @page{size:89mm 36mm; margin:0;}
  }

  /* ---- Aviso de impresión fuera del chat ---- */
  #frameNotice:empty{display:none;}
  .frame-notice{border:1px solid var(--warn); background:var(--warn-soft); border-radius:var(--radius); padding:14px 16px; margin-bottom:22px; display:flex; flex-direction:column; gap:10px;}
  .frame-notice.urgent{border-color:var(--danger); background:var(--danger-soft);}
  .frame-notice-inner{display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;}
  .frame-notice-inner svg{flex:none; margin-top:2px; color:var(--ink);}
  .fn-text{flex:1; min-width:200px; font-size:13.5px; color:var(--ink);}
  .frame-notice .btn{flex:none;}
  .fn-url{display:flex;}
  .fn-url input{font-family:'Cabin'; font-weight:600; font-size:12.5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; width:100%; color:var(--ink-soft); cursor:text;}

  /* =================================================================
     Acceso (login, PIN) y panel de admin — anadido en la sub-tanda 1
     ================================================================= */

  /* ---- Pantalla de acceso ---- */
  .auth-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px 20px; background:var(--ground);}
  .auth-card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 8px 24px var(--shadow); padding:34px 28px 28px;}
  .auth-head{display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:26px; text-align:center;}
  .auth-logo{width:60px; height:60px; background:var(--inverse); border-radius:16px; display:flex; align-items:center; justify-content:center; color:var(--brand);}
  .auth-card h1{font-size:26px; color:var(--ink);}
  .auth-sub{font-size:13px; color:var(--ink-soft); line-height:1.5;}
  .auth-actions{display:flex; flex-direction:column; gap:12px;}
  .btn.google{background:var(--inverse); border-color:var(--inverse); color:var(--on-inverse); border-radius:var(--radius-pill); padding:14px 18px; font-size:15px;}
  .btn.google:hover{background:var(--inverse-2); border-color:var(--inverse-2);}
  .auth-sep{display:flex; align-items:center; gap:12px; margin:6px 0; color:var(--ink-soft); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;}
  .auth-sep::before, .auth-sep::after{content:''; flex:1; height:1px; background:var(--border);}
  .auth-foot{margin-top:24px; padding-top:18px; border-top:1px solid var(--border); font-size:11.5px; color:var(--ink-soft); text-align:center; line-height:1.6;}

  /* ---- Selector de operario y teclado del PIN (tablet del obrador) ---- */
  .operarios{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px;}
  .operario{display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; text-decoration:none; color:var(--ink); font-weight:600; font-size:14px; text-align:center;}
  .operario:hover{border-color:var(--brand); box-shadow:0 6px 18px rgba(250,201,20,.35);}
  .operario-inicial{width:52px; height:52px; border-radius:999px; background:var(--brand-soft); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue'; font-size:24px;}

  .pin-puntos{display:flex; justify-content:center; gap:14px; margin:24px 0 28px;}
  .pin-punto{width:16px; height:16px; border-radius:999px; border:2px solid var(--border); background:transparent;}
  .pin-punto.lleno{background:var(--ink); border-color:var(--ink);}
  .teclado{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
  .tecla{height:66px; font-family:'Cabin'; font-weight:600; font-size:24px; font-variant-numeric:tabular-nums; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--ink); cursor:pointer;}
  .tecla:hover{border-color:var(--ink-soft);}
  .tecla:active{background:var(--surface-2);}
  .tecla.accion{font-size:14px; color:var(--ink-soft);}

  /* ---- Cabecera de usuario en la barra lateral ---- */
  .usuario-box{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--inverse-hover); border-radius:10px;}
  .usuario-inicial{width:32px; height:32px; flex:none; border-radius:999px; background:var(--brand); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue'; font-size:15px;}
  .usuario-datos{display:flex; flex-direction:column; min-width:0;}
  .usuario-nombre{font-size:12.5px; font-weight:600; color:var(--on-inverse); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .usuario-rol{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand);}

  /* ---- Tablas del panel de admin ---- */
  .tabla-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
  table.datos{width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px;}
  table.datos th{text-align:left; font-family:'Cabin'; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap;}
  table.datos td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
  table.datos tr:last-child td{border-bottom:none;}
  table.datos tr:hover td{background:var(--surface-2);}
  table.datos .num{font-variant-numeric:tabular-nums;}

  .rol-tag{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.03em;}
  .rol-tag.obrador{background:var(--brand-soft); color:var(--warn);}
  .rol-tag.sede{background:var(--info-soft); color:var(--info);}
  .rol-tag.supervisor{background:var(--ok-soft); color:var(--ok);}
  .rol-tag.admin{background:var(--inverse); color:var(--brand);}

  .permiso-si{color:var(--ok); font-weight:700;}
  .permiso-no{color:var(--border);}

  .admin-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
  .admin-tabs a{padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; color:var(--ink-soft); border:1px solid var(--border); background:var(--surface);}
  .admin-tabs a.activa{background:var(--inverse); border-color:var(--inverse); color:var(--brand);}

  .sedes-check{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px;}
  .sede-check{display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:13px; cursor:pointer;}
  .sede-check input{width:auto; margin:0;}
  .sede-check.marcada{border-color:var(--brand); background:var(--brand-soft);}
  .ciudad-grupo{margin-bottom:14px;}
  .ciudad-titulo{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:7px;}
  .ciudad-titulo button{background:none; border:none; color:var(--info); font-size:11.5px; font-weight:600; cursor:pointer; text-decoration:underline; padding:0;}

  @media (max-width:640px){
    .form-grid{grid-template-columns:1fr;}
    .auth-card{padding:26px 20px 22px;}
  }

  /* Los .btn tambien se usan como enlaces: sin subrayado. */
  a.btn{text-decoration:none;}

  /* Las casillas de sede son <label> dentro de .field: no deben heredar
     el uppercase de las etiquetas de formulario. */
  .sede-check{text-transform:none; letter-spacing:normal; color:var(--ink); font-weight:500; margin-bottom:0;}

  /* En movil la barra pasa arriba y .shell se vuelve columna. Como .shell
     tiene align-items:flex-start, la columna de contenido se encogia al ancho
     de su contenido: con una tabla ancha dentro, eso empujaba la pagina entera
     a scroll horizontal. Fijandole el 100% el desbordamiento se queda donde
     debe, dentro de .tabla-wrap, que ya scrollea solo. */
  @media (max-width:880px){
    .main-col{width:100%; align-self:stretch;}
  }

  /* ---- Armado de cajas (sub-tanda 2) ---- */
  .prod-card.completa{opacity:.55;}
  .prod-card.completa .prod-nombre{text-decoration:line-through; text-decoration-thickness:1px;}
  .albaran-row:hover{border-color:var(--ink-soft);}
  .tray-panel .btn.small{padding:2px 8px; line-height:1.2;}
  #bandeja .tray-item:last-child{border-bottom:none;}

  /* ---- Interruptor de tema (auto / claro / oscuro) ----
     Vive en la barra lateral, que es superficie invertida, asi que usa
     los tokens --on-inverse, nunca --ink. */
  .tema{display:flex; gap:3px; padding:3px; background:var(--inverse-hover); border-radius:999px;}
  .tema button{flex:1; display:flex; align-items:center; justify-content:center;
    color:var(--on-inverse-soft); background:transparent; border:none;
    border-radius:999px; padding:6px; cursor:pointer;}
  .tema button:hover{color:var(--on-inverse);}
  .tema button.activo{background:var(--brand); color:var(--accent-ink);}

  /* ---------------------------------------------------------------------
     Importar el albaran de Tspoonlab (pantalla de envio nuevo)
     Todo con los mismos tokens semanticos: nada de colores a pelo, para que
     el tema oscuro siga funcionando sin una segunda pasada.
     --------------------------------------------------------------------- */
  .soltar-zona{border:1.5px dashed var(--border); border-radius:12px; padding:22px 18px;
    display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
    background:var(--surface-2); color:var(--ink-soft); transition:border-color .12s, background .12s;}
  .soltar-zona.encima{border-color:var(--accent); background:var(--accent-soft);}
  .lista-ficheros{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
  .chip-fichero{display:inline-flex; align-items:center; gap:6px; background:var(--surface);
    border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:12.5px; color:var(--ink);}
  .chip-fichero button{border:none; background:transparent; color:var(--ink-soft);
    cursor:pointer; font-size:15px; line-height:1; padding:0 2px;}
  .chip-fichero button:hover{color:var(--danger);}

  /* El modal de revision. Es una pantalla de trabajo, no un aviso: ocupa
     casi todo el alto para que quepan las veintidos lineas de un albaran
     sin obligar a hacer scroll dentro del scroll. */
  .modal-fondo{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60;
    display:flex; align-items:center; justify-content:center; padding:20px;}
  /* El display:flex de arriba le gana al [hidden] del navegador, que es una
     regla sin clase: sin esto el modal sale abierto nada mas cargar. */
  .modal-fondo[hidden]{display:none;}
  .modal-caja{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    width:min(1080px, 100%); max-height:92vh; display:flex; flex-direction:column;
    box-shadow:0 12px 40px rgba(0,0,0,.28); color:var(--ink);}
  .modal-cabecera{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
    padding:20px 22px 14px; border-bottom:1px solid var(--border);}
  .modal-cuerpo{padding:18px 22px; overflow:auto; flex:1;}
  .modal-pie{display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:14px 22px; border-top:1px solid var(--border); background:var(--surface-2);
    border-radius:0 0 var(--radius) var(--radius);}

  .docs-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:10px; margin-bottom:16px;}
  .doc-card{border:1px solid var(--border); border-radius:10px; padding:11px 13px; background:var(--surface-2);}
  .doc-card.doc-ojo{border-color:var(--warn); background:var(--warn-soft);}
  .doc-num{font-weight:700; font-size:14px;}
  .doc-meta{font-size:12px; color:var(--ink-soft); margin-top:2px;}
  .doc-alerta{margin-top:6px; font-size:11.5px; font-weight:700; color:var(--warn); text-transform:uppercase; letter-spacing:.04em;}

  .tabla-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:10px;}
  .tabla-import{width:100%; border-collapse:collapse; font-size:13.5px; min-width:840px;}
  .tabla-import th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-soft); font-weight:600; padding:9px 10px; background:var(--surface-2);
    border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1;}
  .tabla-import td{padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
  .tabla-import tr:last-child td{border-bottom:none;}
  .tabla-import .cel{width:100%; font-size:13px; padding:6px 8px;}
  .cel-fijo{color:var(--ink-soft); font-size:12.5px;}
  .cel-pie{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:5px;}
  .cel-origen{font-size:11px; color:var(--ink-soft);}
  .etq{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    border-radius:999px; padding:2px 7px;}
  .etq-nuevo{background:var(--warn-soft); color:var(--warn);}
  .etq-ok{background:var(--ok-soft); color:var(--ok);}
  .etq-unif{background:var(--info-soft); color:var(--info);}

  @media (max-width: 880px){
    .modal-fondo{padding:0;}
    .modal-caja{max-height:100vh; height:100vh; border-radius:0; width:100%;}
    .modal-pie{flex-direction:column; align-items:stretch; gap:10px;}
    .modal-pie > div{justify-content:flex-end;}
  }

  /* Interruptores de funcionamiento (Roles y permisos) */
  .ajuste-fila{display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--border); cursor:pointer;}
  .ajuste-fila:last-of-type{border-bottom:none;}
  .ajuste-fila input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--brand);}
  .ajuste-fila b{display:block; font-size:14px;}
  .ajuste-detalle{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin-top:3px;}

  /* ===================================================================
     ARMADO DE CAJAS · pensado para la tableta del muelle

     El problema que resuelve (queja del 2026-09-29): la caja en curso
     quedaba arriba del todo y la lista de lo que falta por meter debajo.
     Segun se llenaba la caja, la lista se iba abajo y habia que hacer un
     scroll enorme para ver que tocaba ahora.

     Solucion: barra fija arriba con lo SIGUIENTE, y la caja plegada en una
     barra abajo con color de carton para distinguirla de un vistazo.
     =================================================================== */

  /* Carton: el color de la caja en curso. Va en los dos temas. */
  :root{ --caja:#e8d9c3; --caja-borde:#c9ae8a; --caja-ink:#4a3b28; }
  :root[data-theme="dark"]{ --caja:#3a2f22; --caja-borde:#5b4a35; --caja-ink:#e8d9c3; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --caja:#3a2f22; --caja-borde:#5b4a35; --caja-ink:#e8d9c3; }
  }

  .sesion-layout{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start;}

  /* --- Barra de "lo siguiente" ------------------------------------- */
  .siguiente-barra{position:sticky; top:8px; z-index:20; display:flex; align-items:center; gap:12px;
    background:var(--surface); border:1.5px solid var(--brand); border-radius:var(--radius);
    padding:12px 14px; margin-bottom:16px; box-shadow:0 2px 10px var(--shadow);}
  .siguiente-barra .sig-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
  .siguiente-barra .sig-rotulo{font-size:10.5px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink-soft);}
  .siguiente-barra .sig-nombre{font-weight:700; font-size:16px; line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .siguiente-barra .sig-queda{font-size:12.5px; color:var(--ink-soft);}
  .siguiente-barra .sig-mas{flex:none; font-size:16px; padding:12px 18px; gap:6px;}
  .siguiente-barra .sig-bajar{flex:none; padding:12px; color:var(--ink-soft);}

  /* --- Tarjeta de producto ----------------------------------------- */
  .prod-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:14px 16px; margin-bottom:10px;}
  .prod-datos{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
  .prod-nombre{font-weight:700; flex:1; min-width:140px; font-size:15px;}
  .prod-restante{font-size:12.5px; color:var(--ink-soft);}

  /* Cantidad + acciones en UNA fila: antes lote y caducidad ocupaban media
     tarjeta para algo que casi nunca se rellena aqui. */
  .prod-fila{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;}
  .prod-fila .field{margin:0;}
  .prod-cant{width:110px;}
  .prod-cant input{font-size:17px; padding:10px;}
  .prod-todo{padding:10px 12px;}
  .prod-anadir{padding:10px 16px;}
  .prod-mas{padding:10px 12px; font-size:12.5px; color:var(--ink-soft); margin-left:auto;}
  .prod-mas.abierto{color:var(--ink); background:var(--surface-2);}
  .prod-extra{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:10px;
    border-top:1px dashed var(--border);}
  /* El display:flex de arriba le gana al [hidden] del navegador, que es una
     regla sin clase: sin esto los dos campos salen abiertos de serie, que es
     justo lo que se queria plegar. */
  .prod-extra[hidden]{display:none;}
  .prod-extra .field{margin:0; flex:1; min-width:150px;}

  /* --- La caja en curso -------------------------------------------- */
  .tray-panel{position:sticky; top:8px; background:var(--caja); border:1.5px solid var(--caja-borde);
    border-radius:var(--radius); color:var(--caja-ink); overflow:hidden;}
  .tray-cabecera{width:100%; display:flex; align-items:center; gap:9px; background:none; border:none;
    cursor:pointer; padding:14px 16px; color:inherit; font-family:'Cabin'; font-size:14px; font-weight:700;}
  .tray-title{flex:1; text-align:left; letter-spacing:.02em;}
  .tray-cuenta{background:var(--caja-ink); color:var(--caja); border-radius:999px; min-width:24px;
    padding:1px 7px; font-size:12.5px; font-variant-numeric:tabular-nums;}
  .tray-chevron{display:flex; transition:transform .15s;}
  .tray-panel.plegado .tray-chevron{transform:rotate(-90deg);}
  .tray-panel.plegado .tray-cuerpo{display:none;}
  .tray-cuerpo{padding:0 16px 16px;}
  .tray-panel .tray-item{border-bottom-color:var(--caja-borde) !important;}
  .tray-panel .empty{border-color:var(--caja-borde); color:var(--caja-ink); opacity:.75; padding:16px 12px;}

  /* --- Paneles plegables de la pantalla de armado -------------------
     Lo usan "añadir un producto suelto" y "datos de la etiqueta del pale":
     cosas que se tocan de vez en cuando y que plegadas no estorban. */
  .anadir-suelto, .panel-plegable{margin:18px 0 0; padding:0;}
  .anadir-suelto summary, .panel-plegable summary{cursor:pointer; padding:16px 20px;
    font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; list-style:none;}
  .anadir-suelto summary::-webkit-details-marker,
  .panel-plegable summary::-webkit-details-marker{display:none;}
  .anadir-suelto[open] summary, .panel-plegable[open] summary{border-bottom:1px solid var(--border);}
  .anadir-suelto-cuerpo, .panel-plegable-cuerpo{padding:18px 20px 20px;}
  .anadir-suelto-form{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;}

  /* --- Corregir una caja ya cerrada --------------------------------
     Va dentro de la tarjeta de la caja, plegado hasta que hace falta. */
  .caja-corregir{display:block; margin-top:14px; padding-top:14px;
    border-top:1px dashed var(--border);}
  /* Sin esto, el atributo `hidden` NO funciona: una regla con clase gana a
     la del navegador y el panel sale desplegado solo. Ya nos paso dos veces
     con otros paneles; esta es la tercera y ultima. */
  .caja-corregir[hidden]{display:none;}
  .caja-corregir-intro{margin:0 0 12px; font-size:12.5px; color:var(--ink-soft); line-height:1.5;}
  .caja-corregir-anadir{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:12px;}
  .caja-corregir-pie{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}

  /* --- Tableta y movil ---------------------------------------------- */
  @media (max-width:1100px){
    .sesion-layout{grid-template-columns:1fr;}
    /* La caja se va ABAJO, fija: siempre a mano y sin tapar la lista. */
    .tray-panel{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:30;
      border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-bottom:none;
      box-shadow:0 -4px 20px var(--shadow); max-height:70vh; display:flex; flex-direction:column;}
    .tray-cuerpo{overflow-y:auto;}
    /* Hueco al final para que la barra de la caja no tape el ultimo boton. */
    .sesion-layout::after{content:''; display:block; height:76px;}
    .siguiente-barra{top:4px;}
    .siguiente-barra .sig-nombre{font-size:17px;}
    .prod-cant{width:96px;}
    .prod-mas{margin-left:0; width:100%; justify-content:center;}
  }

  @media (max-width:560px){
    .siguiente-barra{flex-wrap:wrap;}
    .siguiente-barra .sig-txt{flex-basis:100%;}
    .siguiente-barra .sig-mas{flex:1;}
  }

  /* ===================================================================
     NAVEGACION (rehecha el 2026-09-29)

     Antes: ocho enlaces sueltos que en tableta salian en una barra enorme
     desde arriba, sin centrar y con el tema en tres botones de texto.

     Ahora: lo de admin plegado en un boton, el tema en tres iconos, el
     usuario al lado del nombre de la app, y en tableta una hamburguesa.
     =================================================================== */

  .brand{display:flex; flex-direction:row; align-items:center; gap:11px; flex-wrap:wrap;}
  .brand-logo{width:42px; height:42px; flex:none; background:#fff; border-radius:11px;
    padding:4px; display:flex; align-items:center; justify-content:center;}
  .brand-logo img{width:100%; height:100%; object-fit:contain; display:block;}
  .brand-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .brand-mark{text-decoration:none;}
  .brand-user{display:none;}   /* solo en tableta, ver abajo */

  .nav-hamburguesa{display:none; margin-left:auto; background:var(--inverse-hover); border:none;
    color:var(--on-inverse); border-radius:10px; padding:9px 11px; cursor:pointer;}

  .sidebar-nav a{display:flex; align-items:center; gap:9px;}

  /* --- Desplegable de admin ---------------------------------------- */
  .nav-grupo{position:relative;}
  .nav-grupo-btn{width:100%; display:flex; align-items:center; gap:9px; font-family:'Cabin';
    font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--on-inverse-soft);
    background:none; border:none; cursor:pointer; padding:9px 12px; border-radius:8px; text-align:left;}
  .nav-grupo-btn:hover{color:var(--brand); background:var(--inverse-hover);}
  .nav-grupo.activa > .nav-grupo-btn{color:var(--brand);}
  .nav-grupo-chevron{margin-left:auto; display:flex; transition:transform .15s;}
  .nav-grupo.abierto .nav-grupo-chevron{transform:rotate(180deg);}
  .nav-grupo-menu{display:none; flex-direction:column; gap:2px; padding:4px 0 4px 14px;
    margin-left:8px; border-left:1px solid var(--inverse-border);}
  .nav-grupo.abierto .nav-grupo-menu{display:flex;}
  .nav-grupo-menu a{font-size:13px; padding:7px 10px;}

  .nav-salir{display:flex; align-items:center; gap:9px; font-family:'Cabin'; font-weight:600;
    font-size:13.5px; color:var(--on-inverse-soft); text-decoration:none; padding:9px 12px;
    border-radius:8px;}
  .nav-salir:hover{color:var(--brand); background:var(--inverse-hover);}

  .usuario-box{text-decoration:none;}
  .usuario-box:hover{background:var(--inverse-border);}

  /* --- Tableta y movil ---------------------------------------------- */
  @media (max-width:980px){
    .shell{flex-direction:column;}
    /* width:100% y no auto: .shell es flex en columna y con flex:none la barra
       se encogia al ancho de su contenido, que es justo lo que se veia mal. */
    /* Todo en UNA fila: marca, usuario, tema, salir y hamburguesa. El nav se
       despliega debajo ocupando el ancho entero. Asi la barra cerrada mide
       unos 60 px en vez de los 122 que ocupaba en dos filas. */
    .sidebar{width:100%; min-height:0; position:sticky; top:0; z-index:40;
      flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding:8px 14px;
      border-radius:0; box-shadow:0 2px 12px rgba(0,0,0,.25);}

    /* Una sola fila: logo + nombre + usuario + hamburguesa. */
    .brand{flex:1; min-width:0; flex-wrap:nowrap; gap:10px; order:1;}
    .brand-logo{width:36px; height:36px;}
    .brand-mark{font-size:19px;}
    .brand-sub{display:none;}
    .brand-user{display:block; margin-left:auto; flex:none;}
    .brand-user .usuario-box{padding:5px 9px 5px 5px; gap:8px;}
    .brand-user .usuario-inicial{width:28px; height:28px; font-size:13px;}
    .brand-user .usuario-nombre{max-width:120px;}
    .nav-hamburguesa{display:block; margin-left:0;}

    /* El nav se despliega debajo, no ocupa sitio cuando esta cerrado. */
    .sidebar-nav{display:none; order:3; flex-basis:100%; flex-direction:column; gap:2px;
      padding:10px 0 4px; margin-top:2px; border-top:1px solid var(--inverse-border);}
    .sidebar-nav.abierto{display:flex;}
    .sidebar-nav a, .nav-grupo-btn{padding:12px; font-size:15px;}

    .sidebar-foot{order:2; margin-top:0; padding-top:0; border-top:none;
      flex-direction:row; align-items:center; gap:8px; flex:none;}
    .nav-salir span{display:none;}   /* solo el icono: el texto no hace falta */
    .tema{flex:none;}
    #app{padding-top:20px;}
  }

  @media (max-width:560px){
    .brand-user .usuario-datos{display:none;}
    .brand-sub{display:none;}
  }

  /* --- Inicio: resumen del dia -------------------------------------- */
  .resumen-tarjetas{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:12px; margin-bottom:28px;}
  .resumen-tarjeta{display:flex; flex-direction:column; gap:2px; padding:16px 18px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    text-decoration:none; color:var(--ink);}
  .resumen-tarjeta:hover{border-color:var(--ink-soft);}
  .resumen-tarjeta .rt-icono{color:var(--ink-soft); margin-bottom:4px;}
  .resumen-tarjeta .rt-num{font-family:'Bebas Neue'; font-size:34px; line-height:1;}
  .resumen-tarjeta .rt-txt{font-size:12.5px; color:var(--ink-soft); line-height:1.3;}
  /* Solo se colorea lo que tiene dato: un tablero lleno de ceros de colores
     no dice nada, y el que si tiene numero se pierde entre ellos. */
  .resumen-tarjeta.con-dato .rt-icono{color:var(--ink);}
  .resumen-tarjeta.con-dato.acento{border-color:var(--brand);}
  .resumen-tarjeta.con-dato.acento .rt-icono{color:var(--brand-ink, var(--ink));}
  .resumen-tarjeta.con-dato.alerta{border-color:var(--warn);}
  .resumen-tarjeta.con-dato.alerta .rt-icono,
  .resumen-tarjeta.con-dato.alerta .rt-num{color:var(--warn);}

  .home-titulo{display:flex; align-items:center; gap:9px; font-size:19px; margin:30px 0 12px;}
  .home-titulo svg{color:var(--ink-soft);}