:root{
    --marca:#133A9B; --marca-2:#2B5FD9;
    --acento:#F59B1C; --acento-fuerte:#8A5200; --acento-suave:#FDEFD8;
    --fondo:#F1F5FD; --superficie:#FFFFFF; --superficie-2:#E9EFFB;
    --borde:#D3DDF3; --borde-fuerte:#B2C2E6;
    --texto:#101A38; --texto-2:#56628A; --texto-3:#828EB4;
    --ok:#0E7C58; --ok-bg:#E2F5EC; --alerta:#8A5200; --alerta-bg:#FDEFD8;
    --error:#B62626; --error-bg:#FBE6E6; --info-bg:#E4EBFC;
    --lateral-bg:#0E2A72; --lateral-texto:#FFFFFF;
    --btn-texto:#FFFFFF; --btn-acento-texto:#2E1A00;
    --sombra:0 1px 2px rgba(16,37,107,.06), 0 8px 24px rgba(16,37,107,.07);
    --radio:12px;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --marca:#7FA0F2; --marca-2:#5F86EE;
      --acento:#FFB43F; --acento-fuerte:#FFC978; --acento-suave:#3A2A0C;
      --fondo:#0A0F1E; --superficie:#141B31; --superficie-2:#1B233F;
      --borde:#293257; --borde-fuerte:#3A4674;
      --texto:#EDF1FF; --texto-2:#A6B2D6; --texto-3:#7C88AE;
      --ok:#48D79A; --ok-bg:#103326; --alerta:#FFC978; --alerta-bg:#3A2A0C;
      --error:#FF8C8C; --error-bg:#391616; --info-bg:#1A2446;
      --lateral-bg:#0D1428; --lateral-texto:#EDF1FF;
      --btn-texto:#0A0F1E; --btn-acento-texto:#241400;
      --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --marca:#7FA0F2; --marca-2:#5F86EE;
    --acento:#FFB43F; --acento-fuerte:#FFC978; --acento-suave:#3A2A0C;
    --fondo:#0A0F1E; --superficie:#141B31; --superficie-2:#1B233F;
    --borde:#293257; --borde-fuerte:#3A4674;
    --texto:#EDF1FF; --texto-2:#A6B2D6; --texto-3:#7C88AE;
    --ok:#48D79A; --ok-bg:#103326; --alerta:#FFC978; --alerta-bg:#3A2A0C;
    --error:#FF8C8C; --error-bg:#391616; --info-bg:#1A2446;
    --lateral-bg:#0D1428; --lateral-texto:#EDF1FF;
    --btn-texto:#0A0F1E; --btn-acento-texto:#241400;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--fondo); color:var(--texto);
    font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:Poppins, Inter, sans-serif; margin:0; text-wrap:balance; letter-spacing:-.01em}
  button,input,select,textarea{font:inherit; color:inherit}
  :focus-visible{outline:2px solid var(--acento); outline-offset:2px}
  .num{font-variant-numeric:tabular-nums}

  /* ---------- Login ---------- */
  #login{min-height:100%; display:grid; place-items:center; padding:24px 16px; padding-block:48px}
  .login-caja{width:100%; max-width:380px; display:flex; flex-direction:column; gap:20px}
  .marca{display:flex; align-items:baseline; gap:8px}
  .marca .logo{font-family:Poppins; font-weight:700; font-size:26px; color:var(--marca); letter-spacing:-.02em}
  .marca .sub{font-size:13px; color:var(--texto-2); font-weight:500}
  .tarjeta{background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra)}
  .login-caja form{padding:24px; display:flex; flex-direction:column; gap:14px}
  label.campo{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--texto-2)}
  input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
    width:100%; padding:9px 11px; border:1px solid var(--borde-fuerte); border-radius:8px;
    background:var(--superficie); font-weight:500;
  }
  textarea{min-height:64px; resize:vertical}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:9px 16px; border-radius:8px; border:1px solid transparent; cursor:pointer;
    font-weight:600; font-size:13.5px; background:var(--marca); color:var(--btn-texto); transition:filter .15s;
  }
  .btn:hover{filter:brightness(1.08)}
  .btn:disabled{opacity:.45; cursor:not-allowed}
  .btn.acento{background:var(--acento); color:var(--btn-acento-texto)}
  .btn.fantasma{background:var(--superficie); color:var(--texto); border-color:var(--borde-fuerte)}
  .btn.fantasma:hover{background:var(--superficie-2); filter:none}
  .btn.peligro{background:var(--superficie); color:var(--error); border-color:var(--error)}
  .btn.sm{padding:6px 11px; font-size:12.5px}
  .aviso{padding:10px 12px; border-radius:8px; font-size:12.5px; font-weight:500}
  .aviso.error{background:var(--error-bg); color:var(--error)}
  .aviso.info{background:var(--info-bg); color:var(--marca)}
  .aviso.ok{background:var(--ok-bg); color:var(--ok)}
  .aviso.alerta{background:var(--alerta-bg); color:var(--alerta)}
  .pie-login{font-size:12px; color:var(--texto-3); text-align:center}

  /* ---------- Shell ---------- */
  #app{display:none; min-height:100%; grid-template-columns:232px 1fr}
  #app.activo{display:grid}
  .lateral{
    background:var(--lateral-bg); color:var(--lateral-texto); padding:20px 14px; display:flex; flex-direction:column; gap:22px;
    position:sticky; top:env(safe-area-inset-top,0px); height:100vh; overflow-y:auto;
  }
  .lateral .logo{font-family:Poppins; font-weight:700; font-size:20px; color:var(--lateral-texto); letter-spacing:-.02em}
  .lateral .logo em{font-style:normal; color:var(--acento)}
  .lateral .etiqueta{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; opacity:.62; font-weight:600; margin-bottom:6px}
  .nav{display:flex; flex-direction:column; gap:2px}
  .nav button{
    text-align:left; background:transparent; border:0; color:inherit; opacity:.82;
    padding:8px 11px; border-radius:8px; cursor:pointer; font-weight:500; font-size:13.5px;
  }
  .nav button:hover{background:rgba(255,255,255,.12); opacity:1}
  .nav button.sel{background:var(--acento); color:#2E1A00; opacity:1; font-weight:600}
  .lateral .usuario{margin-top:auto; border-top:1px solid rgba(255,255,255,.16); padding-top:14px; font-size:12.5px}
  .lateral .usuario .n{font-weight:600}
  .lateral .usuario .r{opacity:.66; margin-bottom:8px}

  main{padding:24px; padding-block:24px; min-width:0}
  .encabezado{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:18px}
  .encabezado h2{font-size:22px; font-weight:600}
  .encabezado p{margin:3px 0 0; color:var(--texto-2); font-size:13px}
  .acciones{display:flex; gap:8px; flex-wrap:wrap}

  .rejilla{display:grid; gap:14px}
  .rejilla.k4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .rejilla.k3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .rejilla.k2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
  .kpi{background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio); padding:16px}
  .kpi .t{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-2); font-weight:600}
  .kpi .v{font-family:Poppins; font-size:29px; font-weight:600; margin-top:4px; line-height:1.1}
  .kpi .d{font-size:12px; color:var(--texto-3); margin-top:2px}

  .panel{background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra)}
  .panel > header{padding:13px 16px; border-bottom:1px solid var(--borde); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
  .panel > header h3{font-size:14.5px; font-weight:600}
  .panel .cuerpo{padding:16px}
  .tabla-env{overflow-x:auto}
  table{width:100%; border-collapse:collapse; font-size:13px}
  th{text-align:left; padding:9px 14px; background:var(--superficie-2); color:var(--texto-2); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap}
  td{padding:10px 14px; border-top:1px solid var(--borde); vertical-align:middle}
  tr.click{cursor:pointer}
  tr.click:hover td{background:var(--superficie-2)}
  .vacio{padding:34px 16px; text-align:center; color:var(--texto-3); font-size:13px}

  .chip{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap}
  .chip.gris{background:var(--superficie-2); color:var(--texto-2)}
  .chip.azul{background:var(--info-bg); color:var(--marca-2)}
  .chip.verde{background:var(--ok-bg); color:var(--ok)}
  .chip.amarillo{background:var(--alerta-bg); color:var(--alerta)}
  .chip.rojo{background:var(--error-bg); color:var(--error)}
  .chip.naranja{background:var(--acento-suave); color:var(--acento-fuerte)}

  .filtros{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
  .filtros select,.filtros input{width:auto; min-width:150px}

  /* ---------- Modal ---------- */
  .velo{position:fixed; inset:0; background:rgba(11,16,32,.55); display:grid; place-items:center; padding:16px; z-index:50; overflow-y:auto}
  .modal{background:var(--superficie); border-radius:var(--radio); width:100%; max-width:640px; box-shadow:0 20px 60px rgba(0,0,0,.3); margin:auto; border:1px solid var(--borde)}
  .modal.ancho{max-width:860px}
  .modal > header{padding:16px 20px; border-bottom:1px solid var(--borde); display:flex; justify-content:space-between; align-items:center; gap:10px}
  .modal > header h3{font-size:16px; font-weight:600}
  .modal .cuerpo{padding:20px; display:flex; flex-direction:column; gap:14px}
  .modal > footer{padding:14px 20px; border-top:1px solid var(--borde); display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap}
  .cerrar{background:transparent; border:0; cursor:pointer; color:var(--texto-2); font-size:22px; line-height:1; padding:0 4px}
  .dos{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  @media (max-width:520px){.dos{grid-template-columns:1fr}}

  /* ---------- Pistoleo ---------- */
  .escaner{display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start}
  @media (max-width:900px){.escaner{grid-template-columns:1fr}}
  .lector{background:var(--lateral-bg); color:var(--lateral-texto); border-radius:var(--radio); padding:20px; display:flex; flex-direction:column; gap:12px}
  .lector h4{font-size:14px; font-weight:600; color:inherit}
  .lector input{font-size:18px; font-weight:600; padding:12px 14px; letter-spacing:.04em; border-color:transparent}
  .lector .pista{font-size:12px; opacity:.72}
  .linea-item{display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:1px solid var(--borde)}
  .linea-item:first-child{border-top:0}
  .linea-item .nom{flex:1; min-width:0}
  .linea-item .nom b{display:block; font-weight:600}
  .linea-item .nom span{font-size:12px; color:var(--texto-2)}
  .cuenta{font-family:Poppins; font-weight:600; font-size:17px}
  .barra{height:6px; background:var(--superficie-2); border-radius:99px; overflow:hidden; margin-top:5px}
  .barra i{display:block; height:100%; background:var(--acento); border-radius:99px}
  .linea-item.listo .barra i{background:var(--ok)}
  .registro{max-height:240px; overflow-y:auto; font-size:12.5px; display:flex; flex-direction:column-reverse; gap:6px}
  .registro div{padding:6px 10px; border-radius:7px; background:var(--superficie-2)}
  .registro div.mal{background:var(--error-bg); color:var(--error); font-weight:600}
  .registro div.bien{background:var(--ok-bg); color:var(--ok); font-weight:500}

  .permisos-grupo{border:1px solid var(--borde); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px}
  .permisos-grupo h5{margin:0; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-2); font-family:Inter, system-ui, sans-serif; font-weight:700}
  .permiso{display:flex; gap:9px; align-items:flex-start; font-size:13px; cursor:pointer}
  .permiso input{margin-top:3px; accent-color:var(--acento)}
  .permiso span small{display:block; color:var(--texto-3); font-size:11.5px}

  .linea-doble{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--borde); font-size:13px}
  .linea-doble:first-child{border-top:0}
  .linea-doble b{font-weight:600}

  .hist{display:flex; flex-direction:column; gap:8px; font-size:12.5px}
  .hist div{display:flex; gap:10px}
  .hist time{color:var(--texto-3); white-space:nowrap; font-variant-numeric:tabular-nums}

  @media (max-width:860px){
    #app.activo{grid-template-columns:1fr}
    .lateral{position:static; height:auto; flex-direction:column; gap:14px; padding:14px 16px}
    .nav{flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px}
    .nav button{white-space:nowrap}
    .lateral .usuario{margin-top:0}
    .lateral .etiqueta{display:none}
    main{padding:16px}
  }

  /* ---------- Añadidos del sistema definitivo ---------- */
  .toast{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:80;
    max-width:min(420px, calc(100vw - 32px)); padding:12px 16px; border-radius:10px; font-weight:600; font-size:13px;
    box-shadow:0 10px 30px rgba(0,0,0,.2); background:var(--superficie); color:var(--texto); border:1px solid var(--borde)}
  .toast.error{background:var(--error-bg); color:var(--error); border-color:var(--error)}
  .toast.ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok)}
  .cargando{opacity:.55; pointer-events:none}
  .enlace{background:none; border:0; padding:0; color:inherit; opacity:.8; cursor:pointer; font-size:12.5px; text-decoration:underline}
  .enlace:hover{opacity:1}

  [hidden]{display:none!important}

  /* ---------- Cuenta en el menú lateral ---------- */
  .acciones-cuenta{display:flex; flex-direction:column; gap:8px}
  .acciones-cuenta .enlace{text-align:left}
  .acciones-cuenta #btn-salir{width:100%}
  .corto{display:none}

  /* ---------- Cantidades con botones (pedidos desde el celular) ---------- */
  .cantidad{display:flex; align-items:center; gap:6px; flex-shrink:0}
  .cantidad button{width:38px; height:38px; border-radius:10px; border:1px solid var(--borde-fuerte);
    background:var(--superficie-2); color:var(--texto); font-size:20px; font-weight:600; line-height:1; cursor:pointer;
    touch-action:manipulation}
  .cantidad button:active{background:var(--borde)}
  .cantidad input{width:62px; text-align:center; padding:8px 4px}

  /* El pie de los formularios queda siempre a la vista, aunque el formulario sea largo */
  .modal > footer{position:sticky; bottom:0; background:var(--superficie); border-radius:0 0 var(--radio) var(--radio)}

  /* ---------- Celular ---------- */
  @media (max-width:860px){
    #app.activo{grid-template-rows:auto 1fr}
    .lateral{display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 12px; padding:12px 16px}
    .lateral > .marca{grid-column:1; grid-row:1}
    .lateral > .usuario{grid-column:2; grid-row:1; border-top:0; padding-top:0; text-align:right}
    .lateral > div:nth-child(2){grid-column:1 / -1; grid-row:2}
    .lateral .usuario .n{font-size:12.5px; max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .lateral .usuario .r{display:none}
    .acciones-cuenta{flex-direction:row; align-items:center; justify-content:flex-end; gap:12px; margin-top:2px}
    .acciones-cuenta #btn-salir{width:auto; padding:5px 10px}
    .largo{display:none}
    .corto{display:inline}
    .nav button{padding:9px 14px; min-height:40px}
    .encabezado h2{font-size:20px}
  }

  /* Tablas como tarjetas en pantallas angostas: cada fila es una tarjeta con sus datos etiquetados */
  @media (max-width:640px){
    .tabla-env{overflow-x:visible}
    .tabla-env table, .tabla-env tbody, .tabla-env tr, .tabla-env td{display:block; width:100%}
    .tabla-env thead{display:none}
    .tabla-env tr{padding:12px 16px; border-top:1px solid var(--borde)}
    .tabla-env tr:first-child{border-top:0}
    .tabla-env td{border:0; padding:3px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:right}
    .tabla-env td::before{content:attr(data-label); color:var(--texto-2); font-size:12px; font-weight:600; text-align:left; flex-shrink:0}
    .tabla-env td:first-child{font-size:15px; justify-content:flex-start; text-align:left; padding-bottom:6px}
    .tabla-env td:first-child::before, .tabla-env td[data-label=""]::before{content:none}
    .tabla-env td[data-label=""]{justify-content:flex-end; padding-top:8px}
    .tabla-env td[data-label=""]:empty{display:none}
    .modal{border-radius:14px}
    .cantidad button{width:42px; height:42px}
  }
  .total-pie{margin-right:auto; font-weight:700; font-size:14px; align-self:center}
  button{-webkit-tap-highlight-color:transparent}
  @media (max-width:640px){ .total-pie{width:100%; margin-bottom:2px} }