/* =========================================================================
   responsive_escritorio.css — Responsividad MOBILE (Escritorio + Almacén)
   -------------------------------------------------------------------------
   AREA: Escritorio/dashboard + Almacén (Archivos / Contratos / Papelera).

   REGLAS DURAS:
   - TODO va dentro de @media (max-width: ...) → DESKTOP INTACTO.
   - CSS plano (no Tailwind). Las clases hook propias empiezan con `rsp-`
     (NO son utilities de Tailwind, no requieren recompilar el bundle).
   - !important es seguro acá: solo aplica <= breakpoint y, en el escritorio,
     es NECESARIO para neutralizar el style inline que escribe escritorio_v2.js
     (left/top/width) sobre los tiles.

   Se carga vía {% static 'css/responsive_escritorio.css' %} en el extra_head
   de escritorio.html, archivos_list.html y papelera_list.html — DESPUÉS del
   bundle Tailwind, para ganar por orden + especificidad en mobile.
   ========================================================================= */


/* =========================================================================
   1) ESCRITORIO / DASHBOARD  (escritorio.html — clases .ev2-*)
   Breakpoint principal: 768px (tablet/móvil).
   ========================================================================= */
@media (max-width: 768px) {

  /* --- [ALTA] Tiles de 405px fijos en grilla absolute ------------------
     En desktop los tiles se posicionan absolute (left/top/width inline
     escritos por escritorio_v2.js). En mobile la 2ª columna queda fuera de
     pantalla y .ev2-tiles tiene overflow:hidden → inaccesible.
     Fix: tiles en flujo estático, ancho fluido, contenedor scrolleable. */
  .ev2-tiles {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .ev2-tile {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    margin: 0 16px 12px !important;
  }

  /* --- [BAJA] Tile body: que no recorte el contenido en mobile -------- */
  .ev2-tile-body {
    max-height: none !important;
  }

  /* --- [MEDIA] Drag mouse-only: el tip promete algo que no aplica en
     touch (en mobile las tiles ya van en flujo estático, sin drag). ----- */
  .ev2-dock-tip {
    display: none !important;
  }
  .ev2-tile-head {
    cursor: default !important;
  }

  /* --- [MEDIA] Header desbordado: 3 grupos en una fila no entran ------- */
  .ev2-header {
    flex-wrap: wrap;
    padding: 18px 16px 0;
    gap: 10px;
  }
  .ev2-greeting {
    flex: 1 1 100%;
    min-width: 0;
  }
  .ev2-greeting h1 {
    font-size: 22px;
  }
  .ev2-action-btn {
    padding: 6px 12px;
  }
  .ev2-clock {
    font-size: 15px;
    padding: 6px 12px;
  }

  /* --- [ALTA] Dock de ~8 iconos de 48px se desborda: los últimos
     (Taller, Ajustes) quedan cortados e inaccesibles.
     Fix: dock scrolleable horizontalmente, iconos un poco más chicos. --- */
  .ev2-dock-area {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }
  .ev2-dock {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 8px 12px;
    /* el flex no debe encoger los items: que scrolleen, no que se aplasten */
    justify-content: flex-start;
  }
  .ev2-dock-item {
    flex: 0 0 auto;
  }
  .ev2-dock-icon {
    width: 42px;
    height: 42px;
  }
  .ev2-dock-icon svg {
    width: 22px;
    height: 22px;
  }
}


/* =========================================================================
   2) ALMACÉN — Archivos / Contratos  (archivos_list.html)
   ========================================================================= */

/* --- [MEDIA] Panel "⋯" (más acciones) de 280px desborda <360px ---------
   .arc-more-panel está posicionado absolute right-0 con w-[280px] (utility
   Tailwind inline). En pantallas chicas se sale del viewport por la derecha.
   Fix: ancho fluido acotado al viewport, anclado a los bordes. */
@media (max-width: 420px) {
  .arc-more-panel {
    width: calc(100vw - 32px) !important;
    right: -8px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* --- [BAJA] Touch targets de los iconos de fila (preview, enviar,
   más, borrar) ~26px → subir a >=40px en mobile (touch no tiene hover).
   Hooks: .arc-btn-preview (existente) + .rsp-arc-action (agregado). ------ */
@media (max-width: 900px) {
  .arc-btn-preview,
  .rsp-arc-action {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* =========================================================================
   3) ALMACÉN — Papelera  (papelera_list.html)
   ========================================================================= */

/* --- [ALTA] El grid `1fr auto` no colapsa (le falta el colapso a 1 col
   que SÍ tiene archivos_list). En mobile la columna de acciones empuja el
   nombre y desborda. Fix: colapsar a 1 columna y alinear acciones. ------- */
@media (max-width: 900px) {
  .rsp-papelera-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .rsp-papelera-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* botones de papelera (Restaurar / Borrar permanente) como touch targets */
  .rsp-papelera-actions button {
    min-height: 40px;
  }
}