/* ============================================================
   Ramaty — Capa responsive (teléfono / tablet) + ajustes PWA
   La app usa estilos en línea, así que estas reglas necesitan
   !important para poder sobreescribirlos en pantallas chicas.
   ============================================================ */

:root { --rm-safe-b: env(safe-area-inset-bottom, 0px); }

a { color: #1d4ed8; }
a:hover { color: #15379b; }

.rm-hamburguesa { display: none; }
.rm-backdrop { display: none; }
.rm-solo-movil { display: none !important; }

/* ── Tablas anchas: deslizables en cuanto no caben ─────── */
/* Las filas son cuadrículas de columnas fijas (~940px). Debajo de eso la
   columna 1fr se colapsa a 0 y el texto se encima, así que a partir del
   rango tablet la tabla se desliza en horizontal en lugar de comprimirse. */
@media (max-width: 1180px) {
  .rm-tabla-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* fit-content = el ancho mínimo real de la cuadrícula: nunca colapsa una
     columna ni fija un ancho arbitrario por tabla. */
  .rm-tabla-fila { min-width: fit-content !important; }
  div:has(> .rm-tabla-fila) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ── Tablet ────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .rm-kpis { grid-template-columns: repeat(3, 1fr) !important; }
  .rm-2col { grid-template-columns: 1fr !important; }
  .rm-config-layout { grid-template-columns: 200px 1fr !important; gap: 20px !important; }
}

/* ── Teléfono ──────────────────────────────────────────── */
@media (max-width: 820px) {
  /* Sin 'overflow-x: hidden' en html/body: al aplicarlo a los dos, ambos
     computan 'overflow-y: auto' y el arrastre táctil deja de mover la página.
     No hace falta — el contenido ya no desborda en horizontal. */
  img { max-width: 100%; }

  /* Shell: la sidebar se convierte en cajón deslizable */
  .rm-shell { display: block !important; }

  .rm-sidebar {
    position: fixed !important;
    top: 0;
    width: 82vw !important; max-width: 300px !important; flex-basis: auto !important;
    height: 100% !important;
    z-index: 60;
    /* Sin transición sobre 'left': la interpolación se quedaba congelada en su
       valor inicial y el cajón nunca llegaba a entrar en pantalla. */
    box-shadow: 0 0 40px rgba(0,0,0,.45);
    overflow-y: auto;
    padding-bottom: var(--rm-safe-b) !important;
  }
  /* 'left' lo fija React en app.jsx (ver comentario allí). */

  .rm-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(12,12,11,.5);
    z-index: 55;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }

  .rm-hamburguesa {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    margin-left: -8px;
    border: none; background: transparent; color: #1a1a18;
    border-radius: 8px; cursor: pointer;
  }
  .rm-hamburguesa:active { background: #ececea; }

  .rm-solo-movil { display: block !important; }
  .rm-oculto-movil { display: none !important; }

  /* Barra superior: dos filas, pegada arriba */
  .rm-topbar {
    position: sticky !important; top: 0; z-index: 40;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  }
  .rm-topbar h1 { font-size: 17px !important; }
  .rm-topbar .rm-topbar-crece { flex: 1 1 auto !important; }

  .rm-contenido { padding: 14px 14px 28px !important; }

  /* KPIs: dos columnas compactas.
     Se apunta a clases propias (.rm-kpi*) y NO a :first-child, porque el
     selector de descendiente alcanzaba también los textos internos de la
     tarjeta de tiempo promedio y los inflaba. */
  .rm-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; align-items: start !important; }
  .rm-kpi { min-height: 0 !important; padding: 12px 13px !important; gap: 4px !important; }
  .rm-kpi-lbl { font-size: 9.5px !important; letter-spacing: 0.4px !important; line-height: 1.25 !important; }
  .rm-kpi-num { font-size: 24px !important; }
  .rm-kpi-num2 { font-size: 15px !important; }
  .rm-kpi-sub { font-size: 10.5px !important; line-height: 1.3 !important; }
  .rm-kpi-tiempo { grid-column: 1 / -1 !important; }
  .rm-kpi-tiempo > div { margin-top: 2px !important; padding-top: 6px !important; }

  .rm-2col { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Embudo de reportes: la barra pasa a su propio renglón */
  .rm-embudo-fila { grid-template-columns: 1fr auto !important; gap: 6px 10px !important; }
  .rm-embudo-fila > div:nth-child(2) { grid-column: 1 / -1 !important; order: 3; }
  .rm-embudo-fila > div:nth-child(4) { grid-column: 1 / -1 !important; order: 4; text-align: left !important; }

  /* Filtros: apilados y a todo el ancho */
  .rm-filtros { gap: 8px !important; }
  .rm-filtros > div:first-child { width: 100% !important; }
  .rm-filtros > div[style*="flex: 1"] { display: none !important; }

  /* Tablero kanban: columnas más angostas, scroll horizontal */
  .rm-kanban-col { min-width: 250px !important; }

  /* Configuración: pestañas arriba, contenido abajo */
  .rm-config-layout { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Modales: hoja a pantalla completa */
  /* El fondo no scrollea: el recorrido vive dentro del modal, si no el
     desplazamiento del fondo excedía la caja y el botón de envío se salía
     por arriba dejando la pantalla en blanco. */
  .rm-modal-fondo {
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  .rm-modal {
    max-width: 100% !important; width: 100% !important;
    max-height: 100% !important; height: 100% !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--rm-safe-b) !important;
  }
  .rm-form-2col { grid-template-columns: 1fr !important; }

  /* El modal es flex column con altura fija. Sus hijos se encogían por debajo
     de su contenido —.rm-form-2col trae un min-height en línea que anula el
     mínimo automático del flex item— y el pie, hermano posterior, terminaba
     pintado encima del formulario. Se les prohíbe encoger y se neutraliza el
     min-height de escritorio: el modal scrollea, el contenido nunca se solapa. */
  .rm-modal > * { flex: 0 0 auto !important; }
  .rm-form-2col { min-height: 0 !important; height: auto !important; }

  /* El pie queda siempre alcanzable, sin recorrer todo el formulario. */
  .rm-modal-pie {
    position: sticky !important; bottom: 0; z-index: 5;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    box-shadow: 0 -6px 18px rgba(20,20,18,.08);
  }

  /* Objetivos de toque nunca menores a 44px */
  .rm-sidebar nav button { min-height: 46px; font-size: 14px !important; }

  /* Escala tipográfica del teléfono: títulos y textos de apoyo más discretos.
     Se deja intacto todo lo que ya mide 11px o menos. */
  h1 { font-size: 17px !important; }
  h2 { font-size: 15px !important; }
  h3 { font-size: 13px !important; }

  /* Tipografía mínima legible en formularios (evita el zoom de iOS) */
  input, select, textarea { font-size: 16px !important; }
}

/* ── Teléfono chico ────────────────────────────────────── */
@media (max-width: 400px) {
  .rm-kpis { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .rm-contenido { padding: 12px 11px 24px !important; }
  .rm-topbar { padding-left: 11px !important; padding-right: 11px !important; }
}

/* ── Instalada como app (sin barra del navegador) ──────── */
@media all and (display-mode: standalone) {
  .rm-solo-navegador { display: none !important; }
}