/* ==========================================================================
   responsive_taller.css — Responsividad MOBILE para Taller público
   (agendar, mi_reserva) + Campañas (campanas_list, campana_form) + Login.

   REGLAS DE ESTE ARCHIVO:
   - TODO va dentro de @media (max-width: …px) → cero impacto en desktop.
   - CSS plano, NO Tailwind: no requiere recompilar el bundle.
   - Se sirve por WhiteNoise vía {% static %}. Cargado DESPUÉS del bundle
     Tailwind (en base_public.html para login y vía {% block extra_head %}
     en las páginas que extienden base_app), por lo que gana por orden.
   - Los ganchos en los templates usan prefijo `rsp-` (clases semánticas
     propias, NO utilities Tailwind).
   - Dentro del @media se puede usar !important para ganarle a la
     especificidad de las utilities Tailwind: es seguro porque sólo
     aplica por debajo del breakpoint (mobile).
   ========================================================================== */


/* ==========================================================================
   AGENDAR (taller público) — templates/taller/agendar.html
   ========================================================================== */

/* [MEDIA] El carrito "Tu cotización" es sticky (top-[80px]) y en pantallas
   chicas se queda flotando tapando el contenido del formulario. En mobile lo
   pasamos a flujo estático para que quede al final, sin tapar nada.
   El layout pf-agendar-layout ya colapsa a 1 columna en <=980px, así que el
   aside cae naturalmente debajo del formulario; sólo hay que sacarle el sticky. */
@media (max-width: 700px) {
  #cart {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
  }
}

/* [BAJA] El texto "Disponible" de cada día del calendario está oculto en
   <640px (hidden sm:block). Para conservar la affordance de "este día tiene
   horas", mostramos un punto (dot) verde en mobile vía pseudo-elemento sobre
   el botón de día seleccionable. El badge numérico de slots ya comunica el
   dato; el dot es un refuerzo visual barato y sin reflow. */
@media (max-width: 639px) {
  .cal-day[data-fecha]::after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 7px;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--color-primary, #1e7d32);
    opacity: .85;
  }
}


/* ==========================================================================
   MI RESERVA (taller público) — templates/taller/mi_reserva.html
   ========================================================================== */

/* [MEDIA] Las filas de detalle son `flex` con un label de ancho fijo
   (w-36 = 144px / w-28 = 112px) + valor. En pantallas angostas el valor largo
   (email, vehículo, contexto) queda aplastado a la derecha y se corta.
   Fix: en mobile apilamos label arriba / valor abajo (flex column) y
   neutralizamos el ancho fijo del label. Gancho: clase `rsp-kv-row` en la fila
   y `rsp-kv-key` en el <span> del label. */
@media (max-width: 639px) {
  .rsp-kv-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .rsp-kv-row .rsp-kv-key {
    width: auto !important;
    font-size: 12px;
  }
  /* La fila de un item de servicio/repuesto (nombre · categoría · precio)
     puede envolver para que el precio no empuje fuera de pantalla. */
  .rsp-item-row {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
}

/* [BAJA] Botones de acción (cancelar / confirmar llegada): en mobile que
   ocupen el ancho completo para ser táctiles y no quedar pegados. */
@media (max-width: 480px) {
  .rsp-reserva-acciones {
    flex-direction: column !important;
  }
  .rsp-reserva-acciones > form {
    width: 100%;
  }
  .rsp-reserva-acciones > form > button {
    width: 100%;
  }
}


/* ==========================================================================
   CAMPAÑAS (interno) — templates/correos/campanas_list.html
   ========================================================================== */

/* [ALTA] La tabla de campañas tiene 7 columnas dentro de un contenedor con
   overflow-hidden → en mobile recorta la columna de Acciones/Editar sin dejar
   scrollear. Fix: el wrapper permite scroll horizontal y la tabla mantiene un
   ancho mínimo legible. Ganchos: `rsp-tabla-scroll` (wrapper) + `rsp-tabla-min`
   (la <table>). */
@media (max-width: 768px) {
  .rsp-tabla-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .rsp-tabla-min {
    min-width: 720px;
  }
}

/* [MEDIA] Header de campañas: título a la izquierda + 3 botones a la derecha
   en una sola fila `justify-between` → en mobile no entran. Fix: apilar el
   header y permitir que los botones envuelvan. Ganchos: `rsp-camp-header`
   (contenedor) y `rsp-camp-actions` (grupo de botones). */
@media (max-width: 768px) {
  .rsp-camp-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .rsp-camp-actions {
    flex-wrap: wrap !important;
  }
  .rsp-camp-actions > a {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* ==========================================================================
   CAMPAÑA FORM (interno) — templates/correos/campana_form.html
   ========================================================================== */

/* [MEDIA] El "Historial de envíos" contiene una <table> que en mobile puede
   desbordar (fecha + email truncado + estado). Fix: scroll horizontal en su
   contenedor. Gancho: `rsp-envios-scroll` en el contenedor #envios-log. */
@media (max-width: 768px) {
  .rsp-envios-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* [BAJA] El botón "+ Variable ▾" está posicionado en absolute dentro del input
   de asunto (right-1.5, vertical-center) con padding-right del input (pr-32).
   En pantallas muy angostas el botón puede solaparse con el texto tipeado.
   Fix: en <=400px lo sacamos del input y lo ponemos como botón estático debajo.
   Ganchos: `rsp-asunto-wrap` (el div relative) y `rsp-asunto-varbtn` (el botón). */
@media (max-width: 400px) {
  .rsp-asunto-wrap > input {
    padding-right: 12px !important;
  }
  .rsp-asunto-varbtn {
    position: static !important;
    transform: none !important;
    display: inline-flex;
    margin-top: 6px;
  }
}

/* [BAJA] El modal de "Enviar prueba" tiene padding interno cómodo en desktop;
   en mobile asegurar que la caja no se pegue a los bordes. (Gancho opcional.) */
@media (max-width: 480px) {
  .rsp-test-modal-box {
    padding: 18px !important;
  }
}


/* ==========================================================================
   LOGIN (público) — usa base_public.html
   ========================================================================== */

/* [BAJA] El toggle de mostrar/ocultar contraseña es chico para touch.
   Subimos su área táctil a 44px en mobile. (Gancho: la clase existente
   .pass-toggle de login.css; sólo extendemos su tamaño en mobile.) */
@media (max-width: 640px) {
  .pass-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}