/*
 * rm-scale.css — Rally Manager Responsive Scale
 * Escala tipografía y espaciado entre 1080p (1920×1080) y 4K (3840×2160).
 * Sin alterar colores, fuentes, iconos ni layout.
 * Cargado por todos los templates excepto los de @media print.
 */

/* ── Variables de escala ─────────────────────────────────────────────────── */
:root {
  --font-xs:   clamp(8px,  0.42vw, 13px);   /* 8px en 1080p  → 13px en 4K  */
  --font-sm:   clamp(9px,  0.47vw, 15px);   /* 9px  → 15px  */
  --font-base: clamp(11px, 0.60vw, 17px);   /* 11px → 17px  */
  --font-md:   clamp(13px, 0.68vw, 20px);   /* 13px → 20px  */
  --font-lg:   clamp(15px, 0.80vw, 24px);   /* 15px → 24px  */
  --font-xl:   clamp(18px, 0.94vw, 28px);   /* 18px → 28px  */
  --font-2xl:  clamp(22px, 1.15vw, 34px);   /* 22px → 34px  */
  --font-3xl:  clamp(28px, 1.46vw, 44px);   /* 28px → 44px  */

  --sp-xs:  clamp(4px,  0.21vw, 8px);
  --sp-sm:  clamp(6px,  0.31vw, 12px);
  --sp-md:  clamp(10px, 0.52vw, 18px);
  --sp-lg:  clamp(16px, 0.83vw, 28px);
  --sp-xl:  clamp(24px, 1.25vw, 42px);
  --sp-2xl: clamp(32px, 1.67vw, 56px);

  --container-max: min(96vw, 2200px);
  --container-wide: min(98vw, 2600px);
}

/* ── Contenedores principales ────────────────────────────────────────────── */
.main,
.tab-pane,
.container,
.content-wrap,
.page-content {
  max-width: var(--container-max) !important;
  margin-inline: auto;
}

/* ── Cabeceras (.header, .hdr) ───────────────────────────────────────────── */
.header,
.hdr {
  padding-inline: clamp(16px, 1.25vw, 40px);
  padding-block: clamp(8px, 0.52vw, 18px);
}

/* ── Tipografía — clases que aparecen en ≥3 templates ───────────────────── */

/* Títulos de sección y tarjetas */
.section-title       { font-size: clamp(20px, 1.25vw, 36px) !important; }
.card-title          { font-size: clamp(14px, 0.83vw, 24px) !important; }
.card-header-title   { font-size: clamp(11px, 0.60vw, 17px) !important; }
.modal-title         { font-size: clamp(15px, 0.83vw, 24px) !important; }

/* Cabeceras de panel */
.header-title        { font-size: clamp(15px, 0.83vw, 24px) !important; }
.header-sub          { font-size: clamp(9px,  0.52vw, 15px) !important; }
.hdr-title           { font-size: clamp(13px, 0.68vw, 22px) !important; }
.hdr-sub             { font-size: clamp(9px,  0.47vw, 14px) !important; }

/* Botones */
.btn                 { font-size: clamp(8px, 0.47vw, 13px)  !important;
                       padding: clamp(4px,0.26vw,8px) clamp(8px,0.52vw,16px) !important; }
.btn-primary         { font-size: clamp(9px, 0.52vw, 15px)  !important; }
.btn-back            { font-size: clamp(9px, 0.47vw, 14px)  !important; }
.btn-link            { font-size: clamp(9px, 0.47vw, 14px)  !important; }
.btn-delete          { font-size: clamp(8px, 0.42vw, 12px)  !important; }
.btn-gold            { font-size: clamp(9px, 0.47vw, 14px)  !important; }

/* Formularios */
.field-label,
.form-label          { font-size: clamp(9px, 0.47vw, 14px)  !important; }
.field-input,
.field-select        { font-size: clamp(12px, 0.63vw, 18px) !important;
                       padding: clamp(5px,0.31vw,9px) clamp(8px,0.52vw,14px) !important; }

/* Tabs */
.tab-btn             { font-size: clamp(9px, 0.52vw, 15px)  !important;
                       padding: clamp(8px,0.42vw,14px) clamp(14px,0.73vw,24px) !important; }

/* Badges */
.badge               { font-size: clamp(8px, 0.42vw, 12px)  !important; }

/* Tarjetas */
.card-body           { padding: clamp(10px, 0.52vw, 20px)   !important; }
.card-header,
.card-hdr            { padding: clamp(7px,0.36vw,14px) clamp(12px,0.63vw,22px) !important; }

/* Modales */
.modal               { width: clamp(400px, 30vw, 640px)      !important; }
.modal-body,
.modal-footer        { padding: clamp(12px, 0.63vw, 22px)   !important; }

/* Tablas de clasificación y resultados */
.piloto-nombre       { font-size: clamp(12px, 0.63vw, 18px) !important; }
.tiempo              { font-size: clamp(11px, 0.60vw, 17px) !important; }
.pos                 { font-size: clamp(18px, 1.04vw, 32px) !important; }
.pos-num             { font-size: clamp(16px, 0.83vw, 26px) !important; }

/* Data rows (tarjetas info) */
.data-key            { font-size: clamp(9px,  0.47vw, 14px) !important; }
.data-val            { font-size: clamp(11px, 0.57vw, 16px) !important; }

/* Tablas genéricas */
table                { width: 100%; }
th, td               { font-size: clamp(11px, 0.57vw, 16px); }

/* Stats / counters */
.stat                { font-size: clamp(18px, 0.94vw, 28px) !important; }

/* Grid layouts — ampliar a pantallas grandes */
.grid-2              { gap: clamp(12px, 0.63vw, 24px); }

/* Logo / marca */
.logo-wrap           { font-size: clamp(13px, 0.68vw, 22px) !important; }

/* Toasts y alertas */
.toast               { font-size: clamp(11px, 0.57vw, 16px) !important; }

/* Lang switcher (compartido en varias páginas) */
.lang-btn            { font-size: clamp(13px, 0.83vw, 22px) !important; }
.lang-code           { font-size: clamp(7px,  0.36vw, 11px) !important; }

/* ── FIX iOS Safari / móviles (2/8/2026) ─────────────────────────────────
   Requisito Jonathan: usa iPhone habitualmente y varios botones (sobre
   todo dentro de modales) no respondían al tap. Causas conocidas:
   1) delay 300ms en iOS al no declarar touch-action → primer tap se pierde
   2) inputs/textarea con font-size <16px provocan ZOOM AUTOMÁTICO en iOS
      al enfocar, reflow del layout y los botones quedan fuera del viewport
   3) tap-highlight-color transparente enmascara si el tap se registró
   Este bloque aplica a TODAS las páginas RM (rm-scale.css cargado en 48
   templates). Cero regresión desktop. */

/* Todos los botones/enlaces clicables: sin delay 300ms + feedback visual táctil */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a[href],
[onclick],
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(232, 0, 26, 0.35);
}

/* Botones DENTRO de modales: touch target mínimo iOS 44x44 garantizado */
.modal-overlay button,
.modal-overlay .btn,
.modal-overlay [onclick] {
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

/* Inputs / textareas dentro de modales: 16px mínimo evita zoom auto iOS.
   Sin esto, al enfocar un textarea Safari zoomea, el modal se descuadra
   y los botones se salen del viewport. Aplica sólo a viewport móvil. */
@media (max-width: 900px) {
  .modal-overlay input[type="text"],
  .modal-overlay input[type="search"],
  .modal-overlay input[type="email"],
  .modal-overlay input[type="tel"],
  .modal-overlay input[type="number"],
  .modal-overlay input[type="password"],
  .modal-overlay textarea,
  .modal-overlay select,
  .modal-overlay .modal-input,
  .modal-box input[type="text"],
  .modal-box input[type="search"],
  .modal-box textarea,
  .modal-box .modal-input {
    font-size: 16px !important;
  }
  /* Modales ocupan casi toda la pantalla en móvil para no perder botones */
  .modal-overlay .modal-box,
  .modal-overlay .modal {
    width: 96vw !important;
    max-width: 96vw !important;
  }
}