/* ============================================================
   quieroMiHipoteca.com · Overrides RESPONSIVE para móvil
   ============================================================
   Este archivo SOLO contiene reglas dentro de @media (max-width:…).
   En desktop (>=768 px) NO afecta a nada: el aspecto actual se preserva.
   ============================================================ */

/* ============================================================
   ≤768 px · Móviles + tablets pequeñas
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 1. Forzar ancho 100 % en TODOS los elementos con
                   ancho fijo en línea (style="width:Xpx") ----------
     Hay varios sitios donde un <div> de filtro tiene width fijo
     (220, 440, 450, 550, 600 px) para que el desktop quede alineado.
     En móvil cualquiera de esos anchos rompe el layout. Esta regla
     los neutraliza de raíz. */
  [style*="width:220px"],
  [style*="width:175px"],
  [style*="width:190px"],
  [style*="width: 190px"],
  [style*="width:440px"],
  [style*="width:450px"],
  [style*="width: 450px"],
  [style*="width:600px"],
  [style*="width: 600px"],
  [style*="width:550px"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* También limitamos cualquier hijo de un .rsf-filtros que tenga
     un ancho fijo no contemplado arriba. */
  form.rsf-filtros > div[style*="width"] {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* ---------- 2. Cards de filtros: padding más ajustado en móvil ---------- */
  form.rsf-filtros,
  form.flex.items-end {
    gap: 0.5rem !important;
  }

  /* Botones "Filtrar / Limpiar" que se quedan colgando: que ocupen
     toda la fila propia para ser fáciles de pulsar con el dedo. */
  form.rsf-filtros > .flex.items-end,
  form.flex.items-end > .flex.items-end {
    width: 100% !important;
    flex: 1 1 100% !important;
    justify-content: flex-end;
  }

  /* ---------- 3. Tablas: scroll horizontal automático ----------
     Cualquier <table> que esté DIRECTAMENTE dentro de una card
     blanca/redondeada hereda overflow. Aquí forzamos que su contenedor
     directo permita scroll horizontal para que no rompa el layout. */
  .bg-white > table,
  .bg-white > div > table {
    min-width: 600px;
  }
  /* Si el contenedor inmediato es un wrapper sin overflow, se lo añadimos. */
  .bg-white > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- 4. Grids con grid-cols-3 / 4 / 5 que ahogan en móvil ----------
     Tailwind no las define con prefijo mobile cuando se usa grid-cols-N
     "a secas". Aquí las degradamos a 1 / 2 columnas en móvil sin tocar
     el desktop (donde aún hay md: / lg:). */
  .grid.grid-cols-3:not(.sm\:grid-cols-3):not(.md\:grid-cols-3):not(.lg\:grid-cols-3) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid.grid-cols-4:not(.sm\:grid-cols-4):not(.md\:grid-cols-4):not(.lg\:grid-cols-4) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid.grid-cols-5:not(.sm\:grid-cols-5):not(.md\:grid-cols-5):not(.lg\:grid-cols-5) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ---------- 5. KPI cards (admin/agente dashboards) ----------
     En grids de 4 columnas tipo `grid-cols-2 lg:grid-cols-4`, ya hay
     2 columnas en móvil. Aquí ajustamos padding/tamaño para que las
     cifras grandes no rompan la card. */
  .grid > .bg-white.rounded-2xl,
  .grid > .bg-gradient-to-br.rounded-2xl {
    padding: 0.75rem !important;
  }
  .grid .font-display.text-2xl,
  .grid .font-display.text-3xl {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
  }
  .grid .font-display.text-2xl.sm\:text-3xl {
    font-size: 1.4rem !important;
  }

  /* ---------- 6. Pills/segmented controls (filtros tipo Todos clientes) ----------
     Las cintas de 3-4 pills (`rsf-segmented`) son demasiado anchas para
     mobile. Las dejamos a 100 % de ancho con scroll horizontal interno. */
  .rsf-segmented {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  .rsf-segmented .rsf-seg-btn {
    flex: 0 0 auto !important;
  }

  /* ---------- 7. Bloque sticky de filtros admin/leads ----------
     El sticky con backdrop-filter puede pisar contenido en móvil.
     Le bajamos la opacidad y le añadimos un poco más de aire. */
  .sticky {
    z-index: 20;
  }

  /* ---------- 8. Botones full-width en filtros ---------- */
  form .btn.btn-primary.whitespace-nowrap,
  form .btn.btn-outline.whitespace-nowrap,
  form .btn.btn-ghost.whitespace-nowrap {
    flex: 1 1 auto;
  }

  /* ---------- 9. Tarjetas de informe / lead detail ----------
     Hero sections con grid lg:grid-cols-2 ya están bien. Aquí
     ajustamos paddings internos para mobile. */
  .bg-white.rounded-2xl.p-5,
  .bg-white.rounded-2xl.p-4 {
    padding: 0.85rem !important;
  }

  /* ---------- 10. Modales (factura, kanban antiguo) ----------
     Que ocupen todo el ancho menos un margen pequeño. */
  .fixed.inset-0 > .max-w-md,
  .fixed.inset-0 > .max-w-lg,
  .fixed.inset-0 > .max-w-xl {
    max-width: calc(100vw - 2rem) !important;
    margin: 1rem !important;
  }

  /* ---------- 11. Headers de página largos ----------
     Títulos h1 muy grandes saltan a varias líneas. Bajamos el size. */
  h1.font-display.text-xl.md\:text-2xl,
  h1.font-display.text-2xl {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
  }

  /* ---------- 12. Padding lateral del main ----------
     Para móviles muy estrechos (<375 px) reducimos el padding lateral. */
}

/* ============================================================
   ≤480 px · Móviles pequeños (iPhone SE, etc.)
   ============================================================ */
@media (max-width: 480px) {
  /* Grids de 2 columnas pasan a 1 cuando el contenido es denso. */
  .grid.grid-cols-2:not(.sm\:grid-cols-2):not(.md\:grid-cols-2) .font-display.text-2xl,
  .grid.grid-cols-2:not(.sm\:grid-cols-2):not(.md\:grid-cols-2) .font-display.text-3xl {
    font-size: 1.25rem !important;
  }

  /* Padding más comprimido en cards. */
  .bg-white.rounded-2xl.p-5,
  .bg-white.rounded-2xl.p-4 {
    padding: 0.7rem !important;
  }

  /* Margen del wrap principal del panel */
  main.flex-1.p-4 {
    padding: 0.75rem !important;
  }
}

/* ============================================================
   Defensive: que ningún elemento overflowee horizontalmente.
   ============================================================ */
@media (max-width: 768px) {
  body, html {
    overflow-x: hidden;
  }
}

/* ============================================================
   Sidebar móvil del panel: items con más respiración entre ellos.
   ============================================================ */
@media (max-width: 768px) {
  .rsf-mobile-sidebar > a {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    font-size: 0.95rem !important;
  }
  .rsf-mobile-sidebar > div[class*="uppercase"] {
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ============================================================
   Dashboard admin · Pipeline: la mitad de separación entre sus
   cards en móvil (gap-3 → gap-1.5 ≈ 6px).
   ============================================================ */
@media (max-width: 768px) {
  body main .rsf-pipeline-grid {
    gap: 0.375rem !important; /* mitad de gap-3 (0.75rem) */
  }
}

/* ============================================================
   Dashboard agente: más espacio entre secciones (Económica,
   Operaciones, Clientes…) en mobile. Casi el doble que antes.
   La PRIMERA sección (Económica) tiene menos margen superior para
   que no quede colgada lejos del saludo.
   ============================================================ */
@media (max-width: 768px) {
  main section.mt-6 { margin-top: 6rem !important; }
  main section.mt-5 { margin-top: 5.5rem !important; }
  main section.mt-4 { margin-top: 5rem !important; }
  /* PRIMERA sección de la página: margen pequeño respecto a la cabecera */
  main > section.mt-6:first-of-type,
  main > section.mt-5:first-of-type,
  main > section.mt-4:first-of-type {
    margin-top: 2rem !important;
  }
  /* Cabecera de cada sección con un poco más de aire por debajo */
  main section > h2,
  main section > .flex.items-center.justify-between {
    margin-bottom: 1.5rem !important;
  }
  /* ============================================================
     Dashboard admin · secciones "major" (Leads, Operativa,
     Facturación) tienen MÁS margen entre ellas; "minor" (Pipeline,
     Gráficas, Distribución, Rankings…) tienen un 25% MENOS.
     Override prioritario sobre las reglas genéricas de arriba.
     ============================================================ */
  main > section[data-rsf-section="major"] {
    margin-top: 6.5rem !important;
  }
  main > section[data-rsf-section="major"]:first-of-type {
    margin-top: 2rem !important;
  }
  main > section[data-rsf-section="minor"] {
    margin-top: 3.5rem !important; /* ≈ 25% menos que los 4.5rem que tendrían */
  }
}

/* ============================================================
   Facturas agente: filtros simétricos 2 cols + espacio entre secciones.
   ============================================================ */
@media (max-width: 768px) {
  /* Filtros: cada select ocupa 50% del ancho, sin anchos fijos forzados */
  #rsf-agente-facturas-filtros > div.sm\:w-44,
  #rsf-agente-facturas-filtros > div.sm\:w-32,
  #rsf-agente-facturas-filtros > div.sm\:w-40 {
    width: calc(50% - 0.375rem) !important;
    flex: 0 0 calc(50% - 0.375rem) !important;
    margin: 0 !important;
  }
  /* Botón "Exportar .zip" y "Limpiar" full-width */
  #rsf-agente-facturas-filtros > div.flex.items-end {
    width: 100% !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
  }
  /* Más espacio entre KPIs y filtros y entre tabla */
  body main > div.mt-5.grid,
  body main > div.mt-5 > div.grid { gap: 0.75rem !important; }
  body main > div[x-data]:has(form#rsf-agente-facturas-filtros) { margin-top: 2rem !important; }
  body main #rsf-agente-facturas-table { margin-top: 1.5rem !important; }
  /* Leyenda con padding más respirado */
  body main > div.mt-4.flex.flex-wrap.items-center { margin-top: 1.25rem !important; }
}

/* ============================================================
   Match inmobiliario: filtros en grid simétrico 2 cols en mobile.
   ============================================================ */
@media (max-width: 768px) {
  /* Quitamos los ml-8 que crean huecos asimétricos en escritorio */
  .rsf-match-filters form .flex.flex-wrap.gap-2 { gap: 0.75rem !important; }
  .rsf-match-filters form .flex.flex-wrap.gap-2 > div {
    margin-left: 0 !important;
    width: calc(50% - 0.375rem) !important;
  }
  /* Inputs/selects ocupan el ancho disponible */
  .rsf-match-filters form .rsf-filter-field { width: 100% !important; }
  /* Buscar a ancho completo */
  .rsf-match-filters form .flex.flex-wrap.gap-2 > div.w-\[310px\] {
    width: 100% !important;
  }
}

/* ============================================================
   Formularios del panel del agente (perfil, edición ficha, etc.):
   inputs con altura cómoda, labels y separación entre campos.
   ============================================================ */
@media (max-width: 640px) {
  /* Inputs/selects/textareas dentro de un <form> del panel */
  body main form .input,
  body main form input.input,
  body main form select.input,
  body main form textarea.input {
    padding: 0.7rem 0.85rem !important;
    font-size: 0.95rem !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
  }
  body main form textarea.input {
    min-height: 90px !important;
  }
  /* Labels: un poco más legibles */
  body main form .label {
    font-size: 0.82rem !important;
    margin-bottom: 0.3rem !important;
  }
  /* Botones submit · altura cómoda */
  body main form .btn.btn-primary,
  body main form button.btn,
  body main form .btn-accent,
  body main form .btn-outline {
    min-height: 44px;
    font-size: 0.92rem;
  }
  /* Espaciado entre grids de campos */
  body main form > .grid,
  body main form > div > .grid {
    gap: 0.85rem !important;
  }
  /* Reducir el space-y-4 / space-y-5 entre filas para que el form no
     resulte demasiado largo en mobile sin perder respiración */
  body main form.space-y-4 > * + *,
  body main form.space-y-5 > * + * {
    margin-top: 0.9rem !important;
  }
}

/* ============================================================
   Formulario de captación (lead_form.php) — SOLO scope al form
   (usa .rsf-form-wrap como contenedor exclusivo, así no afecta a
   las demás páginas que usan max-w-5xl con px-4).
   ============================================================ */
@media (max-width: 768px) {
  /* Barra de progreso · mb más compacto */
  main #formLead {
    margin-top: 0.25rem !important;
  }
  /* Reducir main solo cuando contiene el wizard del lead */
  main.flex-1.p-4:has(#formLead),
  main.flex-1.p-4:has(form#formLead) {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ============================================================
   Ficha del lead: cabecera y secciones con más respiración.
   ============================================================ */
@media (max-width: 768px) {
  /* Cabecera grande y aireada */
  body main > div.flex.items-start:first-child h1.font-display {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
  }
  /* Badges RSF/Inmo/Score en wrap propio debajo del título */
  body main > div.flex.items-start:first-child .mt-1\.5,
  body main > div.flex.items-start:first-child .mt-1 {
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }
  /* Separación entre titulares y secciones blancas del lead detalle */
  .lg\:col-span-2.space-y-5 > div.bg-white.rounded-2xl,
  .lg\:col-span-2.space-y-5 > div.bg-white {
    margin-top: 2.5rem !important;
  }
  .lg\:col-span-2.space-y-5 > div.bg-white:first-child {
    margin-top: 0 !important;
  }
  /* Columna lateral (aside) — MISMA separación que la columna principal
     (Compraventa → Titular 1 → …) para uniformidad visual en móvil.
     Soporta tanto `space-y-5` (modo agente) como `space-y-4` (modo admin). */
  body main .grid.lg\:grid-cols-3 > div.space-y-5 > div + div,
  body main .grid.lg\:grid-cols-3 > div.space-y-4 > div + div,
  body main aside.space-y-5 > div + div,
  body main aside.space-y-4 > div + div,
  body main .grid.lg\:grid-cols-3 > div.space-y-5 > details + details,
  body main .grid.lg\:grid-cols-3 > div.space-y-5 > details + div,
  body main .grid.lg\:grid-cols-3 > div.space-y-5 > div + details,
  body main .grid.lg\:grid-cols-3 > div.space-y-4 > details + details,
  body main .grid.lg\:grid-cols-3 > div.space-y-4 > details + div,
  body main .grid.lg\:grid-cols-3 > div.space-y-4 > div + details {
    margin-top: 3rem !important;
  }
  /* Aside admin: separación EXTRA entre los bloques clave de gestión
     (Evaluación hipotecaria, Honorarios, Fechas firma, Documentos generables).
     Los hijos directos del aside reciben 3rem; aquí solo refinamos. */
  body main .grid.lg\:grid-cols-3 > div.space-y-4 > div.bg-gradient-to-br + div,
  body main .grid.lg\:grid-cols-3 > div.space-y-4 > div + div.bg-gradient-to-br {
    margin-top: 3.5rem !important;
  }
  /* En mobile las 2 columnas colapsan a 1: aumentamos el gap entre la
     columna principal (acaba en Documentación) y el aside (empieza en
     Evaluación hipotecaria). RESTRINGIDO a la ficha del lead detalle
     (que es `gap-5`) para no afectar a otros grids con lg:grid-cols-3
     como el Pipeline del dashboard (que usa `gap-3`). */
  body main .grid.lg\:grid-cols-3.gap-5 {
    gap: 3rem !important;
  }
  /* Tarjetas un poco más holgadas internamente */
  body main .bg-white.border.border-gray-200.rounded-2xl.p-5 {
    padding: 1.1rem !important;
  }
  /* Separar cabecera (acciones) del bloque hero del lead */
  body main > div.flex.items-start:first-child {
    margin-bottom: 1.25rem !important;
  }
}