/* ============================================================
   RESPONSIVE — Centro de Operaciones
   Tablets, celulares y touch + menú de hamburguesa
   ============================================================ */

/* ---------- HAMBURGUESA (oculta en desktop) ---------- */
.hamburger-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  width:38px;
  height:38px;
  border-radius:8px;
  border:1px solid var(--edge);
  background:var(--ink-4);
  cursor:pointer;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.hamburger-btn span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--text, #dfe4ee);
  transition:transform .2s ease, opacity .2s ease;
}
body.rail-open .hamburger-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.rail-open .hamburger-btn span:nth-child(2){ opacity:0; }
body.rail-open .hamburger-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Backdrop detrás del menú lateral en móvil/tablet */
#rail-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:998;
  opacity:0;
  transition:opacity .2s ease;
}
body.rail-open #rail-backdrop{
  display:block;
  opacity:1;
}

/* ---------- TABLETS GRANDES / LAPTOPS PEQUEÑOS (≤1024px) ---------- */
@media (max-width: 1024px) {
  .hamburger-btn{ display:flex; }

  #app{ grid-template-columns: 0 1fr; }

  /* FIX del ALTO — la causa real NO era la unidad de viewport (vh vs
     dvh vs svh): era que #main (la fila 1fr dentro de #app) no tenía
     min-height:0, así que crecía con su contenido en vez de scrollear
     internamente, y empujaba a toda la página a hacerse más alta que
     la pantalla. Ese fix ya se aplicó en styles.css (#main). Con eso
     resuelto, #app puede quedarse en el flujo normal del documento
     (sin position:fixed) — por eso el ancho ya no se ve afectado.
     100svh se deja como el alto "chico" fijo, que no salta mientras
     haces scroll dentro de #main. */
  #app{ height: 100svh; }

  #rail{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:280px;
    max-width:82vw;
    z-index:999;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.35);
  }
  body.rail-open #rail{ transform:translateX(0); }

  .dash-hero { grid-template-columns: 1fr; }
  .dash-row { grid-template-columns: 1fr !important; }
  .cal-layout,
  .agenda-layout { grid-template-columns: 1fr !important; }
  .cal-layout { min-height: auto !important; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .sistemas-cards-grid,
  .photo-grid { grid-template-columns: repeat(3, 1fr); }

  /* FIX puntual — "Julio de 2026" (.cal-month-label) tenía un ancho
     mínimo fijo de 160px pensado para escritorio. Sumado a los
     botones ‹ › HOY y las pestañas Mes/Semana/Día, no cabía en
     celular y se cortaba "Mes/Semana/Día" a la derecha. */
  .cal-layout > div:first-child { min-width: 0 !important; }
  .cal-controls { min-width: 0; flex-wrap: wrap !important; }
  .cal-month-label { min-width: 0 !important; font-size: .85rem; }
  .view-tabs { margin-left: 0; }
  .view-tab { padding: 5px 10px; font-size: .68rem; }
}

/* ---------- TABLETS (≤900px) ---------- */
@media (max-width: 900px) {
  #app { grid-template-columns: 0 1fr; }
  .page { padding: 16px; }

  .dash-hero { grid-template-columns: 1fr; }
  .dash-row,
  .cal-layout,
  .agenda-layout { grid-template-columns: 1fr; }

  .agenda-secondary-row { grid-template-columns: 1fr; }
  .agenda-secondary-col {
    border-left: none;
    border-top: 1px solid var(--edge);
    padding: 16px 0 0;
  }
  .agenda-secondary-col:first-child { border-top: none; padding-top: 0; }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-header-icon { display: none; }
  .page-header > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-header .btn { flex: 1 1 auto; text-align: center; }

  .form-row { flex-direction: column; }
  .form-col { width: 100%; }

  .rep-scope-row { flex-direction: column; }
  .rep-sections-list { grid-template-columns: 1fr; }

  .tools-grid,
  .sistemas-cards-grid,
  .photo-grid { grid-template-columns: repeat(2, 1fr); }

  /* La fila de botones (Estatus / Historial / Ver-Imprimir / Editar /
     Eliminar) debe caber completa en una sola línea en celular, sin
     deslizar. Como el texto de cada botón viene de app.js (no del
     CSS), la única forma de que quepan todos juntos es achicarlos:
     menos relleno, letra más chica, y permitir que cada uno se
     comprima si hace falta. Se necesita !important porque el
     tamaño/relleno de cada botón viene en su atributo style="" en
     app.js, que pesa más que una regla normal de este archivo. */
  .reporte-card-head { padding: 12px 14px; }
  .reporte-card-head > div:last-child {
    width: 100%;
    gap: 6px !important;
  }
  .reporte-card-head > div:last-child > div:first-child {
    gap: 6px !important;
  }
  .reporte-card-head > div:last-child > div:last-child {
    width: 100%;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin-top: 2px;
  }
  .reporte-card-head > div:last-child > div:last-child > *:not(div) {
    flex: 1 1 auto !important;
    min-width: 0;
    font-size: .65rem !important;
    padding: 6px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    justify-content: center;
  }
  /* El botón "Estatus" no es hijo directo de la fila — vive dentro de
     un div contenedor (para el menú desplegable), así que hay que
     achicar el botón de ADENTRO, no el div que lo envuelve. */
  .reporte-card-head > div:last-child > div:last-child > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0;
  }
  .reporte-card-head > div:last-child > div:last-child > div:first-child button {
    width: 100%;
    font-size: .65rem !important;
    padding: 6px 8px !important;
    white-space: nowrap;
    justify-content: center;
  }
  /* La píldora de estatus ("Realizado"/"Pendiente"/etc.) es la más
     ancha de la fila y no se toca tan seguido como los demás — se
     achica más para dejarle espacio a los botones que sí se usan
     seguido (Ver/Imprimir, Editar, Eliminar). */
  .reporte-card-head > div:last-child > div:last-child > span:first-child {
    font-size: .62rem !important;
    padding: 5px 8px !important;
    flex: 0.6 1 auto !important;
  }
}

/* ---------- MÓVILES GRANDES / TABLETS CHICAS (≤768px) ---------- */
@media (max-width: 768px) {
  #modal-visita-detail .modal,
  #modal-new-reporte .modal,
  #modal-new-presupuesto .modal,
  .modal-overlay .modal { max-width: 100% !important; width: 100%; }

  .modal {
    margin: 0 4px;
    max-height: 92vh;
    border-radius: 12px;
  }

  .header-clock { display: none; }
  .global-search { flex: 1 1 auto; max-width: none; }

  .header-user-name,
  .header-user-role { display: none; }

  .rdp-sheet { padding: 18px; margin: 0 4px 16px; border-radius: 10px; }
  .rdp-toolbar { padding: 12px 14px; }

  .kdoc-page { width: 100%; min-height: 0; padding: 16px; margin: 0 4px 16px; border-radius: 10px; }
  .kdoc-row { grid-template-columns: 1fr; }

  .tools-grid { grid-template-columns: 1fr; }
  .tool-row { flex-wrap: wrap; }
  .tool-row-actions { width: 100%; justify-content: flex-end; margin-top: 6px; }

  .agenda-panel-body { grid-template-columns: 1fr; }
  .agenda-secondary-body { grid-template-columns: 1fr; }

  .agenda-unified-head { flex-direction: column; align-items: stretch; }
  .agenda-print-btn { width: 100%; justify-content: center; }

  .rep-period-tabs,
  .tab-bar,
  .tab-toggle,
  .view-toggle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .rep-period-tabs::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar,
  .tab-toggle::-webkit-scrollbar,
  .view-toggle::-webkit-scrollbar { display: none; }
  .rep-period-tab,
  .tab-btn,
  .tab-toggle-btn { white-space: nowrap; flex-shrink: 0; }

  .print-toolbar { flex-wrap: wrap; }
  .print-toolbar .print-toolbar-actions { width: 100%; flex-wrap: wrap; }

  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  .sistemas-cards-grid,
  .photo-grid { grid-template-columns: repeat(2, 1fr); }

  .rep-scope-row { flex-direction: column; }

  .login-card { width: 92%; padding: 28px 22px; }
}

/* ---------- MÓVILES ESTÁNDAR (≤600px) ---------- */
@media (max-width: 600px) {
  #app { grid-template-columns: 0 1fr; }
  .page { padding: 16px; }

  .page-header-icon { display: none; }
  .page-title,
  .modal-title { font-size: 1.05rem; }

  .panel { padding: 14px; border-radius: 10px; }
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .panel-action { font-size: .75rem; }

  .cal-weekdays,
  .cal-days { font-size: .75rem; }
  .cal-nav-btn { width: 32px; height: 32px; }

  .rep-gen-bar { flex-direction: column; align-items: stretch; }
  .rep-scope-row { flex-direction: column; }
  .rep-sections-list { grid-template-columns: 1fr; }

  .hist-filter-bar { flex-direction: column; align-items: stretch; }
  .hist-mes-nav { justify-content: center; }

  .mat-select-banner,
  .mat-select-fab {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .sistemas-cards-grid,
  .photo-grid { grid-template-columns: 1fr 1fr; }

  .btn, .btn-primary, .btn-ghost, .btn-secondary { font-size: .82rem; padding: .55rem .9rem; }

  .login-card { width: 94%; padding: 24px 18px; }
  .login-logo { width: 64px; }
}

/* ---------- MÓVILES CHICOS (≤480px) ---------- */
@media (max-width: 480px) {
  .agenda-secondary-body { grid-template-columns: 1fr; }

  .page { padding: 12px; }
  .panel { padding: 12px; }

  .page-header > div:last-child .btn { width: 100%; }

  .rep-period-tab,
  .tab-btn,
  .tab-toggle-btn { font-size: .72rem; padding: 6px 10px; }

  .day-tag { font-size: .65rem; padding: 2px 6px; }

  .sistemas-cards-grid,
  .photo-grid { grid-template-columns: 1fr; }

  .form-label { font-size: .78rem; }
  input, select, textarea { font-size: .85rem; }

  .modal-body { padding: 14px; }
  .modal-head { padding: 12px 14px; }

  .kdoc-page { padding: 12px; }
  .rdp-sheet { padding: 12px; }

  .global-search { display: none; }
}

/* ---------- MÓVILES MUY CHICOS (≤380px) ---------- */
@media (max-width: 380px) {
  .header-user-avatar { width: 30px; height: 30px; font-size: .7rem; }
  .btn, .btn-primary, .btn-ghost, .btn-secondary { font-size: .76rem; padding: .5rem .75rem; }
  .rep-period-tab, .tab-btn, .tab-toggle-btn { font-size: .68rem; padding: 5px 8px; }
  .panel-title { font-size: .85rem; }
  .login-card { padding: 20px 14px; }
}

/* ---------- TOUCH GENÉRICO (cualquier pantalla con dedo, incluye tablets grandes en landscape) ---------- */
@media (pointer: coarse) {
  button, .btn, .btn-primary, .btn-ghost, .btn-secondary,
  .cal-nav-btn, .view-toggle-btn, .tab-toggle-btn,
  select, input[type="checkbox"], input[type="radio"]{
    min-height:40px;
  }
  .rail-nav [onclick], #rail-nav a, #rail-nav button{
    min-height:44px;
  }
  input, select, textarea{ font-size:16px; } /* evita zoom automático en iOS */
}

/* ---------- Accesibilidad / movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .login-bg-grid, .login-shape, .login-orb { animation: none; }
  #rail, #rail-backdrop, .hamburger-btn span { transition: none; }
}