/* ═══════════════════════════════════════════════════════════════════════
   ALMACÉN MÓVIL — almacen-movil.css
   Capa de adaptación táctil para mozos y transportistas.
   ─────────────────────────────────────────────────────────────────────────
   • Se activa SOLO en pantallas ≤768px Y dentro del módulo almacén
     (el body recibe la clase 'alm-movil' vía JS).
   • NO afecta a escritorio ni a otros módulos.
   • Para DESACTIVAR: eliminar <link href="almacen-movil.css"> del HTML.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px){
  body.alm-movil{
    /* Variables de la capa táctil */
    --alm-touch:56px;          /* altura mínima táctil cómoda con guantes */
    --alm-row-h:76px;          /* alto de fila de expedición */
    --alm-fs-ref:17px;         /* referencia de expedición */
    --alm-fs-sub:14px;         /* subtítulo */
    --alm-gap:12px;
  }

  /* ── FILAS DE EXPEDICIÓN: altas y legibles ────────────────────────── */
  body.alm-movil .ll-row{
    min-height:var(--alm-row-h) !important;
    padding:14px 16px !important;
    gap:14px !important;
    border-bottom:1px solid var(--g200) !important;
    align-items:center !important;
  }
  body.alm-movil .ll-row > span:first-child{
    font-size:26px !important;       /* icono grande de estado */
    flex-shrink:0 !important;
  }
  body.alm-movil .ll-ref{
    font-size:var(--alm-fs-ref) !important;
    font-weight:700 !important;
    line-height:1.25 !important;
  }
  body.alm-movil .ll-sub{
    font-size:var(--alm-fs-sub) !important;
    margin-top:3px !important;
    line-height:1.35 !important;
  }
  body.alm-movil .ll-info{ min-width:0 !important; flex:1 !important; }

  /* ── BOTONES DE ACCIÓN: grandes, con etiqueta, apilados si caben ──── */
  body.alm-movil .ll-acts{
    gap:8px !important;
    flex-shrink:0 !important;
  }
  body.alm-movil .ll-acts .ib{
    width:var(--alm-touch) !important;
    height:var(--alm-touch) !important;
    min-width:var(--alm-touch) !important;
    border-radius:14px !important;
    border:1.5px solid var(--g300) !important;
    font-size:24px !important;        /* emoji grande dentro del botón */
    background:var(--w) !important;
    box-shadow:0 1px 3px rgba(20,30,55,.10) !important;
    position:relative !important;
  }
  body.alm-movil .ll-acts .ib:active{
    transform:scale(.92) !important;
    background:var(--g50) !important;
  }
  /* Botones críticos coloreados para distinguirlos del resto */
  body.alm-movil .ll-acts .ib[title*="Confirmar"],
  body.alm-movil .ll-acts .ib[title*="cargado"]{
    border-color:var(--gr500) !important;
    background:var(--gr50) !important;
  }
  body.alm-movil .ll-acts .ib[title*="foto"],
  body.alm-movil .ll-acts .ib[title*="Con fotos"]{
    border-color:var(--b500) !important;
    background:var(--b50) !important;
  }

  /* ── TARJETAS DE ACCIÓN (registrar entrada, carga camión…) ────────── */
  body.alm-movil .ac-grid{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  body.alm-movil .ac-card{
    min-height:120px !important;
    border-radius:18px !important;
    padding:18px 12px !important;
    border:1.5px solid var(--g200) !important;
    box-shadow:0 2px 8px rgba(20,30,55,.08) !important;
  }
  body.alm-movil .ac-card:active{ transform:scale(.96) !important; }
  body.alm-movil .ac-icon{ font-size:38px !important; margin-bottom:8px !important; }
  body.alm-movil .ac-lbl{ font-size:15px !important; font-weight:700 !important; }
  body.alm-movil .ac-desc{ font-size:12px !important; }

  /* ── CABECERAS DE SECCIÓN más visibles ────────────────────────────── */
  body.alm-movil .ph .pt{
    font-size:15px !important;
    font-weight:700 !important;
  }
  body.alm-movil .ph{ padding:14px 4px 8px !important; }

  /* ── TABS de fotos: más altos y táctiles ──────────────────────────── */
  body.alm-movil .fotos-tab{
    padding:14px 16px !important;
    font-size:14px !important;
    min-height:var(--alm-touch) !important;
  }

  /* ── KPIs del dashboard: 2 columnas grandes ───────────────────────── */
  body.alm-movil .kpi-grid{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  body.alm-movil .kpi{ padding:16px 14px !important; border-radius:16px !important; }
  body.alm-movil .kpi-val{ font-size:30px !important; }
  body.alm-movil .kpi-lbl{ font-size:12px !important; }

  /* ── Botones de área de foto (subir/fotografiar) ──────────────────── */
  body.alm-movil .foto-area{
    min-height:130px !important;
    border-width:2.5px !important;
    border-radius:16px !important;
  }

  /* ── MODO ALTO CONTRASTE (sol directo) — toggle .alm-hc ───────────── */
  body.alm-movil.alm-hc{
    --g500:#1a1a1a; --g600:#0d0d0d; --g700:#000; --g900:#000;
  }
  body.alm-movil.alm-hc .ll-row{ border-bottom:2px solid #000 !important; }
  body.alm-movil.alm-hc .ll-ref{ color:#000 !important; font-weight:800 !important; }
  body.alm-movil.alm-hc .ll-sub{ color:#1a1a1a !important; }
  body.alm-movil.alm-hc .ll-acts .ib{
    border-width:2.5px !important;
    border-color:#000 !important;
  }
  body.alm-movil.alm-hc .ac-card{ border-color:#000 !important; border-width:2px !important; }
  body.alm-movil.alm-hc .pt{ color:#000 !important; }

  /* Botón flotante de alto contraste (lo inyecta el JS) */
  #alm-hc-toggle{
    position:fixed;
    right:14px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 84px);
    width:52px; height:52px;
    border-radius:50%;
    border:none;
    background:#1d2d50;
    color:#fff;
    font-size:22px;
    box-shadow:0 4px 16px rgba(0,0,0,.3);
    z-index:9500;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  body.alm-movil.alm-hc #alm-hc-toggle{
    background:#fbbf24; color:#000;
  }
}

/* ═══ CONFIRMACIÓN A PANTALLA COMPLETA (todas las resoluciones, pero
       solo se invoca desde móvil vía JS) ═══════════════════════════════ */
.alm-confirm-overlay{
  position:fixed; inset:0;
  background:rgba(15,22,40,.72);
  z-index:40000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:alm-cf-in .18s ease;
}
@keyframes alm-cf-in{ from{opacity:0} to{opacity:1} }
.alm-confirm-card{
  background:#fff;
  border-radius:24px;
  width:100%; max-width:420px;
  padding:32px 24px 24px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  animation:alm-cf-card .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes alm-cf-card{ from{transform:translateY(30px) scale(.95);opacity:0} to{transform:none;opacity:1} }
.alm-confirm-icon{ font-size:64px; margin-bottom:12px; line-height:1; }
.alm-confirm-title{ font-size:22px; font-weight:800; color:#1d2d50; margin-bottom:6px; }
.alm-confirm-sub{ font-size:15px; color:#64748b; margin-bottom:26px; line-height:1.4; }
.alm-confirm-btns{ display:flex; flex-direction:column; gap:12px; }
.alm-confirm-btns button{
  min-height:60px;
  border-radius:16px;
  font-size:17px;
  font-weight:700;
  font-family:inherit;
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.alm-cf-ok{ background:#0aa37e; color:#fff; }
.alm-cf-ok:active{ background:#078a69; transform:scale(.97); }
.alm-cf-cancel{ background:#f1f5f9; color:#475569; }
.alm-cf-cancel:active{ background:#e2e8f0; }

/* Toast grande de éxito (tras confirmar) */
.alm-success-flash{
  position:fixed; inset:0;
  background:rgba(10,163,126,.96);
  z-index:41000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff;
  animation:alm-flash-in .2s ease;
}
@keyframes alm-flash-in{ from{opacity:0;transform:scale(1.05)} to{opacity:1;transform:none} }
.alm-success-flash .icon{ font-size:88px; margin-bottom:16px; animation:alm-flash-pop .4s cubic-bezier(.2,.9,.3,1.4); }
@keyframes alm-flash-pop{ from{transform:scale(0)} to{transform:scale(1)} }
.alm-success-flash .txt{ font-size:26px; font-weight:800; }
.alm-success-flash .sub{ font-size:16px; opacity:.9; margin-top:6px; }