/* ============================================================================
   SIG_V1 — Rediseño (Claude Design) · Capa MÓVIL  (<=768px)
   ----------------------------------------------------------------------------
   Carga DESPUÉS de: estilos.css → rediseno.css (+parciales) → css/movil.css
   Gana la cascada sobre las tres. Complementa —no repite— el LAYOUT que ya
   resuelve css/movil.css (una columna, zona táctil 48px, tipografía 16px).
   Aquí sólo se pone "piel": color, borde, radio, sombra, tipografía y foco,
   siempre con los tokens de css/rediseno.css (:root --c-* --sp-* --r-* --sh-*
   --font-* --ease --dur).

   NO se tocan: display / flex-direction / grid-template / order / width:100%
   (los fija movil.css para el layout y están bien).
   prefers-reduced-motion ya está cubierto globalmente en rediseno.css.
   ============================================================================ */

@media (max-width:768px){

  /* ─────────────────────────────────────────────────────────────────────
     1. PWA — retematizado de los colores hardcodeados de css/movil.css
     Mismos selectores; aquí sólo se cambian color/borde/radio/sombra/fuente.
     ───────────────────────────────────────────────────────────────────── */

  /* Indicador de estado (contenedor) */
  #pwa-status-indicator{
    border-radius:var(--r-sm);
    font-family:var(--font-ui);
  }

  /* Online */
  .pwa-status-online{background-color:var(--c-success-bg);}
  .pwa-status-online .pwa-status-dot{background-color:var(--c-success);}

  /* Offline */
  .pwa-status-offline{background-color:var(--c-danger-bg);}
  .pwa-status-offline .pwa-status-dot{background-color:var(--c-danger);}

  /* Toast — superficie y elevación del sistema de tokens */
  .pwa-toast{
    border-radius:var(--r-md);
    box-shadow:var(--sh-md);
  }
  .pwa-toast-success{background-color:var(--c-success);color:#fff;}
  .pwa-toast-error{background-color:var(--c-danger);color:#fff;}
  .pwa-toast-info{background-color:var(--c-info);color:#fff;}
  /* --c-warning (#b9770e) NO alcanza contraste AA con texto blanco (~3.3:1);
     se usa texto --c-ink sobre el ámbar (~6:1, AA OK). */
  .pwa-toast-warning{background-color:var(--c-warning);color:var(--c-ink);}

  /* ─────────────────────────────────────────────────────────────────────
     2. Zona táctil / campos y botones (movil.css ya los lleva a 48px)
     Sólo piel: radio, borde, foco sin doble outline.
     ───────────────────────────────────────────────────────────────────── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea{
    border-radius:var(--r-sm);
    border:1px solid var(--c-line);
  }
  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus{
    outline:none;
    border-color:var(--c-brand-400);
    box-shadow:var(--sh-focus);
  }

  /* Botones full-width (movil.css los pone a width:100%) */
  .btn,
  .modal-btn,
  .screen form button:not(.eye-btn),
  .inv-toolbar button,.seg-toolbar button,.calib-toolbar button,
  .um-toolbar button,.pg-toolbar button{
    border-radius:var(--r-md);
    box-shadow:var(--sh-sm);
    background:var(--c-brand-600);
    color:#fff;
    border:1px solid var(--c-brand-700);
  }
  .btn:active,
  .modal-btn:active,
  .screen form button:not(.eye-btn):active,
  .inv-toolbar button:active,.seg-toolbar button:active,.calib-toolbar button:active,
  .um-toolbar button:active,.pg-toolbar button:active{
    background:var(--c-brand-500);
  }
  .btn:focus-visible,
  .modal-btn:focus-visible{
    outline:none;
    box-shadow:var(--sh-focus);
  }

  /* ─────────────────────────────────────────────────────────────────────
     3. Cabecera móvil (.app-header con flex-wrap en movil.css)
     Fondo sólido, sin degradado duro. Área táctil 48px la conserva movil.css.
     ───────────────────────────────────────────────────────────────────── */
  .app-header{
    background:var(--c-brand-800);
    border-bottom:1px solid var(--c-brand-600);
    box-shadow:var(--sh-sm);
  }
  .header-back-btn{
    background:var(--c-brand-600);
    color:#fff;
    border-right:none;
  }
  .header-back-btn:active{background:var(--c-brand-500);}
  .exit-btn-header{
    background:var(--c-danger);
    color:#fff;
    border-left:1px solid var(--c-brand-600);
  }
  .save-btn-header{
    background:var(--c-success);
    color:#fff;
    border-left:1px solid var(--c-brand-600);
  }
  .header-back-btn:focus-visible,
  .exit-btn-header:focus-visible,
  .save-btn-header:focus-visible{
    outline:none;
    box-shadow:var(--sh-focus);
  }

  /* ─────────────────────────────────────────────────────────────────────
     4. Barra de estado inferior
     ───────────────────────────────────────────────────────────────────── */
  .status-bar{
    background:var(--c-brand-800);
    border-top:1px solid var(--c-brand-600);
  }
  .status-item{color:var(--c-brand-100);}
  .status-version{color:var(--c-brand-200);}

  /* ─────────────────────────────────────────────────────────────────────
     5. Menú una columna — .mod-tile / .mod-btn a lo ancho
     movil.css ya anula la elevación en hover (transform:none). Sólo piel.
     ───────────────────────────────────────────────────────────────────── */
  .mod-tile{
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--r-md);
    box-shadow:var(--sh-sm);
  }
  .mod-btn{
    background:var(--c-brand-600);
    color:#fff;
    border-radius:var(--r-md);
    box-shadow:var(--sh-sm);
  }
  .mod-btn:active{background:var(--c-brand-500);}
  /* Sin elevación al tocar (refuerza el transform:none de movil.css) */
  .menu-grid .mod-tile:hover,
  .mod-tile:hover,
  .mod-btn:hover{box-shadow:var(--sh-sm);}

  /* ─────────────────────────────────────────────────────────────────────
     6. Tablas con scroll horizontal — borde/radio del sistema + thead fijo
     ───────────────────────────────────────────────────────────────────── */
  [class*="table-wrap"],
  .dm-table-wrap,
  .um-insp-table-wrap{
    border:1px solid var(--c-line);
    border-radius:var(--r-md);
  }
  [class*="table-wrap"] thead th,
  .dm-table-wrap thead th,
  .um-insp-table-wrap thead th{
    position:sticky;
    top:0;
    background:var(--c-brand-700);
    color:#fff;
  }
  [class*="table-wrap"] td,
  .dm-table-wrap td,
  .um-insp-table-wrap td{
    font-size:14px;
    color:var(--c-ink);
  }

  /* ─────────────────────────────────────────────────────────────────────
     7. Modales casi a pantalla completa
     Esquinas menos redondeadas que en desktop (ocupa casi todo el viewport).
     ───────────────────────────────────────────────────────────────────── */
  .modal-box,
  [class*="modal"] [class*="-box"],
  [class*="modal"] [class*="-panel"],
  [class*="modal"] [class*="-content"],
  .cfg-box{
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-lg);
  }
  .modal-overlay,
  .cfg-overlay{
    background:rgba(15,27,51,.5);
  }

  /* ─────────────────────────────────────────────────────────────────────
     8. Login apilado (movil.css pone #screen-login en columna)
     ───────────────────────────────────────────────────────────────────── */
  #screen-login{
    border:1px solid var(--c-brand-700);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-md);
  }
  .login-left{
    background:linear-gradient(160deg,var(--c-brand-800),var(--c-brand-900));
  }
  .login-right{
    background:var(--c-surface);
  }
  .login-btn{
    border-radius:var(--r-pill);
    box-shadow:var(--sh-sm);
  }
  .login-btn:focus-visible{
    outline:none;
    box-shadow:var(--sh-focus);
  }

  /* ─────────────────────────────────────────────────────────────────────
     9. Ajuste fino de espaciado con la escala --sp-* donde movil.css usa
     números sueltos y queda apretado. Sin bajar de 48px táctil ni 16px fuente.
     ───────────────────────────────────────────────────────────────────── */
  .menu-grid-wrap{padding:var(--sp-4) var(--sp-3);}
  .status-bar{padding:var(--sp-3) var(--sp-4);}
  .salida-form{padding:var(--sp-4);}
  .modal-overlay,.cfg-overlay{padding:var(--sp-3);}
  .pwa-toast{padding:var(--sp-3) var(--sp-4);}
}

/* ============================================================================
   Afinado en pantallas muy chicas
   ============================================================================ */
@media (max-width:480px){
  /* Modal ocupa prácticamente todo: esquina aún más discreta */
  .modal-box,
  [class*="modal"] [class*="-box"],
  .cfg-box{border-radius:var(--r-md);}
  /* Toast a lo ancho real de pantalla */
  .pwa-toast-container{left:var(--sp-3);right:var(--sp-3);max-width:none;}
}