/*
 * responsivo.css
 * ---------------------------------------------------------------
 * Reglas de pantalla chica compartidas por todas las páginas.
 *
 * Va en un archivo aparte a propósito. Las siete pantallas repiten los mismos
 * nombres de clase (.main, .card, .kpis, .filtros, .tblWrap, table...), así que
 * tenerlo una sola vez evita que una pantalla quede bien en el teléfono y otra
 * no, según a cuál le tocó la corrección. Se carga DESPUÉS del <style> de cada
 * página para poder ganarle sin recurrir a !important en todo.
 *
 * El menú lateral no se toca acá: de eso se encarga menu-movil.js, que lo
 * convierte en un panel deslizable bajo los mismos 860 px.
 */

/* ============================================================
   TABLETA Y ABAJO (hasta 1024 px)
   ============================================================ */
@media (max-width: 1024px) {
  .main {
    padding: 22px 20px 44px;
    /* Sin esto, una tabla ancha estira el contenedor y toda la página se va
       de lado en vez de que la tabla scrollee sola. */
    min-width: 0;
    max-width: 100%;
  }

  .kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; }
  .kpi { padding: 13px 15px; }

  /* Dos columnas es demasiado apretado en tableta. */
  .grid2 { grid-template-columns: 1fr; }
}

/* ============================================================
   TELÉFONO Y TABLETA CHICA (hasta 860 px)
   Mismo corte que usa menu-movil.js.
   ============================================================ */
@media (max-width: 860px) {

  /* ---------- Estructura ---------- */
  /* Solo en las páginas con menú lateral: el menú pasa a estar fuera del flujo
     (menu-movil.js lo vuelve fixed), así que el flex del escritorio ya no hace
     falta. Se usa :has() para no tocar login.html, que también usa flex en el
     body pero para su propio diseño de dos columnas. */
  body:has(> .sidebar) { display: block; }

  .main {
    padding: 16px 14px 40px;
    /* Deja aire para el botón flotante del menú. */
    padding-top: 62px;
    width: 100%;
    max-width: 100%;
  }

  /* ---------- Encabezados de sección ---------- */
  .hd {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 13px 14px;
  }
  .hd h3 { font-size: 14px; }
  .bd { padding: 14px; }
  .card { margin-bottom: 13px; border-radius: 12px; }

  /* ---------- Tarjetas de indicadores ---------- */
  /* Dos por fila: una sola desperdicia pantalla y cuatro no se leen. */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
  .kpi { padding: 12px 13px; border-radius: 12px; }
  .kpi .t { font-size: 10.5px; }
  .kpi .v { font-size: 21px; }
  .kpi .s { font-size: 10.5px; }

  /* ---------- Filtros y formularios ---------- */
  /* En el teléfono los filtros van uno debajo de otro y a todo el ancho:
     apretujarlos en fila deja campos de 80 px imposibles de tocar. */
  .filtros { flex-direction: column; align-items: stretch; gap: 9px; }
  .filtros > * { width: 100%; min-width: 0; }
  .filtros .campo { min-width: 0; width: 100%; }

  .campo { min-width: 0; width: 100%; }
  .input, select.input, input.input, textarea.input, select, textarea {
    width: 100%;
    min-width: 0;
    /* 16 px evita que Safari en iPhone haga zoom al enfocar el campo. */
    font-size: 16px;
  }
  .input.num { width: 100%; }

  /* ---------- Botones ---------- */
  .btn {
    /* Área de toque cómoda; por debajo de 40 px se falla mucho. */
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
  }
  .btn.sm { min-height: 34px; padding: 6px 10px; font-size: 12px; }

  /* ---------- Tablas ---------- */
  /* Las tablas no se reordenan: se deslizan. Convertirlas en tarjetas rompería
     la comparación entre filas, que es justamente para lo que se usan acá. */
  .tblWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none;
    /* Pista visual de que hay más contenido hacia la derecha. */
    background:
      linear-gradient(to right, var(--card, #fff) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to right, rgba(255, 255, 255, 0), var(--card, #fff) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .10), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .10), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  table { font-size: 12px; }
  th, td { padding: 8px 9px !important; white-space: nowrap; }

  /* ---------- Desglose de cobros ---------- */
  .desglose .fila { flex-direction: column; align-items: flex-start; gap: 2px; }
  .desglose .fila .et { font-size: 12px; }
  .desglose .fila .va { font-size: 14px; }
  .desglose .total .va { font-size: 19px; }

  /* ---------- Modales ---------- */
  /* A pantalla casi completa, con el contenido desplazable: un modal de ancho
     fijo se sale de un teléfono de 360 px. */
  .modal > div,
  .modalCaja,
  .modalBox,
  .modalCard,
  .modalInner,
  .modalContenido {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    border-radius: 14px;
  }

  /* ---------- Caja del valor del dólar ---------- */
  .cajaDolar { flex-direction: column; align-items: stretch; }
  .cajaDolar .entrada { width: 100%; }
  .cajaDolar input { flex: 1; width: auto; }

  /* ---------- Varios ---------- */
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .crudo { font-size: 10.5px; max-height: 200px; }
  .grafico { height: 80px; }

  /* Que nada se desborde en horizontal por un texto largo sin espacios. */
  .card, .bd, .hd { min-width: 0; }
  .mono { word-break: break-all; }
}

/* ============================================================
   TELÉFONO CHICO (hasta 480 px)
   ============================================================ */
@media (max-width: 480px) {
  .main { padding: 14px 11px 36px; padding-top: 60px; }

  /* Acá sí una tarjeta por fila: dos quedarían con números cortados. */
  .kpis { grid-template-columns: 1fr; }
  .kpi .v { font-size: 24px; }

  .hd h3 { font-size: 13.5px; }
  .bd { padding: 12px; }

  /* Los grupos de botones pasan a ocupar el ancho completo. */
  .acciones, .botonera { flex-direction: column; align-items: stretch; }
  .acciones .btn, .botonera .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Respeta la preferencia de menos animación del sistema.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}