/* AutoFrenos - Estilos responsivos globales (mobile-first)
   Enfocado en compatibilidad sin romper layouts existentes. */

/* Caja y tipografía base */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }

/* Evitar scroll horizontal por desbordes accidentales */
html, body { max-width: 100%; overflow-x: hidden; }

/* Imágenes y medios fluidos */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* Contenedor común (si existe en una página) */
.container, .content, .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Tablas: scroll horizontal en móviles */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { width: 100%; border-collapse: collapse; }

/* Utilidades de grid/flex genéricas */
.row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
.col { padding-left: 8px; padding-right: 8px; }

/* Por defecto columnas a ancho completo en móviles */
@media (max-width: 768px) {
  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 100% !important; }
}

/* Helpers de visibilidad */
.hide-sm { display: none !important; }
@media (min-width: 768px) { .hide-sm { display: initial !important; } }
@media (max-width: 767.98px) { .show-sm { display: initial !important; } }
@media (min-width: 768px) { .show-sm { display: none !important; } }

/* Tipografías y tamaños por breakpoints (complementa lo ya definido en header) */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }
}

/* Formularios responsivos */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { width: 100%; max-width: 100%; }

/* Botones: ajusta padding en móviles para evitar overflow */
.button, .btn { white-space: normal; }
@media (max-width: 520px) {
  .button, .btn { padding: 10px 14px; font-size: 0.95rem; }
}

/* Cabecera/topbar: mejorar envoltura en móviles sin romper estilos existentes */
.topbar { width: 100%; }
.topbar .container, .topbar .content { padding-left: 12px; padding-right: 12px; }
@media (max-width: 640px) {
  .topbar { position: sticky; top: 0; }
  .topbar .menu, .topbar nav { flex-wrap: wrap; }
}

/* Cards y rejillas comunes */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 768px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(2, 1fr); } }

/* Asegurar que modales/popups no excedan el ancho de pantalla */
.modal, .popup { max-width: 100vw; width: 100%; }

/* Tablas largas: permitir corte de palabras en celdas pequeñas */
.table-responsive td, .table-responsive th { word-break: break-word; }

/* Imagenes en tarjetas/productos: evitar recortes no deseados */
.product-card img, .card img { object-fit: contain; }

/* Espaciado en secciones largas para móviles */
@media (max-width: 768px) {
  section, .section { padding: 16px 0; }
}