/*
 * responsivo.css
 * ---------------------------------------------------------------
 * Reglas de pantalla chica, compartidas por todas las pantallas.
 *
 * Va en un archivo aparte a propósito: las siete pantallas repiten los mismos
 * nombres de clase (.main, .card, .kpis, .tableWrap, .provRow...), así que
 * tenerlo una sola vez evita que una 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 llenar todo de !important.
 *
 * 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 se va de lado la página
       entera, en vez de que la tabla se deslice 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 quedan demasiado apretadas en tableta. */
  .grid2, .filtros { grid-template-columns: 1fr 1fr; }
  .subAlta { grid-template-columns: 1fr 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 fijo), así que el flex de 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. */
  body:has(> .sidebar) { display: block; }

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

  /* ---------- Encabezados ---------- */
  .pagehead { flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .pagehead h1 { font-size: 20px; }
  .pagehead p { font-size: 12.5px; }
  .h1 { font-size: 20px; }

  .hd { flex-wrap: wrap; gap: 6px 10px; padding: 13px 14px; }
  .hd .t, .hd h3 { font-size: 14px; }
  .bd { padding: 14px; }
  .card { margin-bottom: 13px; border-radius: 12px; }

  /* ---------- Indicadores ---------- */
  /* Dos por fila: uno solo 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, .kpi .lbl { font-size: 10.5px; }
  .kpi .v, .kpi .num { font-size: 21px; }

  /* ---------- Filtros y formularios ---------- */
  /* Uno debajo de otro y a todo el ancho: apretujarlos en fila deja campos de
     80 px imposibles de tocar con el dedo. */
  .filtros, .grid2, .subAlta { grid-template-columns: 1fr; gap: 9px; }
  .filtros > *, .grid2 > *, .subAlta > * { width: 100%; min-width: 0; }
  .field { 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;
  }

  /* ---------- 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, .btn.mini, .idxBtn { min-height: 34px; padding: 6px 10px; font-size: 12px; }
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .btn { width: 100%; justify-content: center; }
  .acciones .conteo { margin-left: 0; text-align: center; }

  /* ---------- 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á. */
  .tableWrap {
    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;
  }
  /* Las tablas que no viven dentro de un contenedor con desplazamiento
     (actividad, usuarios de la cuenta) necesitan el suyo. */
  .tabla, .subTabla { display: block; overflow-x: auto; white-space: nowrap; }

  table { font-size: 12px; }
  th, td { padding: 8px 9px !important; white-space: nowrap; }

  /* ---------- Proveedores y cuentas ---------- */
  /* La fila de un proveedor tiene nombre, interruptor y tres botones: en 360 px
     no entran en una línea, así que las acciones bajan y ocupan el ancho. */
  .provRow { flex-wrap: wrap; gap: 10px; }
  .pInfo { flex: 1 1 60%; min-width: 0; }
  .pName { font-size: 13px; }
  .pActions { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .pruebasCaja { padding-left: 14px; padding-right: 14px; }

  /* ---------- Índice de SIM ---------- */
  .idxTop { flex-wrap: wrap; gap: 8px; }
  .idxNom { flex: 1 1 100%; }

  /* ---------- Progreso del escaneo ---------- */
  .scanProgTop { flex-direction: column; align-items: flex-start; gap: 2px; }
  .scanPct { font-size: 16px; }

  /* ---------- Acciones por fila (usuarios) ---------- */
  .rowActions, .subAcc { justify-content: flex-start; }

  /* ---------- Modales ---------- */
  /* A pantalla casi completa y con el contenido desplazable: un modal de ancho
     fijo se sale de un teléfono de 360 px. */
  .modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    border-radius: 14px;
  }
  .modal .mHd { padding: 15px 16px; }
  .modal .mBd { padding: 16px; }
  .modal .mFt { padding: 0 16px 16px; flex-wrap: wrap; }
  .modal .mFt .btn { flex: 1 1 100%; }

  /* ---------- Varios ---------- */
  .cruceChips { gap: 6px; }
  .viaChip { font-size: 10.5px; }
  /* 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í uno por fila: dos dejarían los números cortados. */
  .kpis { grid-template-columns: 1fr; }
  .kpi .v, .kpi .num { font-size: 24px; }

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

  /* Los grupos de botones pasan a ocupar el ancho completo. */
  .pActions .btn, .rowActions .btn, .subAcc .btn { flex: 1 1 calc(50% - 3px); 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; }
}