/* ============================================================
   assets/css/mobile.css
   Estilos responsive — RallyTimer
   Optimizado para uso en dispositivos móviles (uso principal)
   Touch targets mínimos: 44px (WCAG 2.1)
   Fuentes mínimas: 14px (previene zoom en iOS)
   ============================================================ */

/* ── TOUCH BASE — se aplica siempre en dispositivos con touch ── */
@media (hover: none) and (pointer: coarse) {
  /* Quita el highlight azul de tap en iOS/Android */
  * { -webkit-tap-highlight-color: transparent; }

  /* Feedback táctil en elementos interactivos */
  .btn:active,
  .nav-item:active,
  .rally-tab:active,
  .etapa-tab:active,
  .estado-tab:active,
  .cat-tab:active,
  .pill:active {
    opacity: .72;
    transform: scale(.97);
  }
}

/* ══════════════════════════════════════════════════════════════
   TABLET / TELÉFONO — max 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── LAYOUT GENERAL ── */
  body { overflow-x: hidden; }
  .main { margin-left: 0 !important; }
  .topbar {
    padding-left: 3.8rem !important;
    flex-wrap: wrap;
    height: auto !important;
    min-height: 56px;
    gap: .4rem;
  }
  .content { padding: .75rem !important; }

  /* ── BOTONES — mínimo 44px de alto ── */
  .btn {
    font-size: .875rem !important;    /* 14px */
    padding: .65rem 1rem !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
  }
  .btn-sm {
    font-size: .8rem !important;
    padding: .55rem .85rem !important;
    min-height: 40px;
  }
  .btn-grande {
    padding: .8rem 1.2rem !important;
    font-size: 1rem !important;
    min-height: 44px;
    width: 100%;
  }
  .btn-yellow { font-size: .875rem !important; }
  .btn-icon { min-width: 44px; min-height: 44px; }

  /* ── INPUTS — 16px previene zoom en iOS ── */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  select,
  textarea {
    font-size: 1rem !important;   /* 16px — imprescindible en iOS */
    min-height: 44px;
    padding: .6rem .75rem !important;
    box-sizing: border-box;
  }
  textarea { min-height: 88px; }

  /* ── FORMS ── */
  .form-grid,
  .form-grid-3,
  .cfg-grid { grid-template-columns: 1fr !important; }
  .fg.full { grid-column: 1 !important; }

  /* ── TABLAS ── */
  .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { font-size: .875rem; }
  th, td { padding: .5rem .65rem !important; }
  th { font-size: .65rem; letter-spacing: .12em; }

  /* ── TABS (rally, etapa, estado) ── */
  .rally-tabs,
  .etapa-tabs,
  .etapa-bar {
    gap: .25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .2rem;
    scrollbar-width: none;
  }
  .rally-tabs::-webkit-scrollbar,
  .etapa-tabs::-webkit-scrollbar,
  .etapa-bar::-webkit-scrollbar { display: none; }

  .rally-tab,
  .etapa-tab {
    font-size: .82rem !important;
    padding: .6rem .85rem !important;
    min-height: 40px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .estado-tabs { flex-wrap: wrap; }
  .estado-tab {
    font-size: .82rem;
    padding: .6rem .8rem;
    min-height: 40px;
  }

  .cat-tabs { gap: .25rem; flex-wrap: wrap; }
  .cat-tab {
    font-size: .82rem;
    padding: .55rem .75rem;
    min-height: 40px;
  }

  /* ── CALENDARIOS ── */
  .cal-block-header { flex-direction: column; align-items: flex-start !important; gap: .4rem; }
  .rally-row { flex-wrap: wrap; gap: .5rem; }
  .rally-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .countdown { min-width: unset; }

  /* ── INSCRIPCIONES ── */
  .insc-header { flex-wrap: wrap; }
  .datos-grid { grid-template-columns: 1fr 1fr !important; }
  .insc-actions { flex-wrap: wrap; }

  /* ── ORDEN DE PARTIDA ── */
  .orden-row { flex-wrap: wrap; gap: .4rem; }
  .hora-prog { min-width: unset; }
  .cfg-grid { grid-template-columns: 1fr 1fr !important; }
  .cfg-actions { flex-wrap: wrap; }
  .orden-pos { display: none; }

  /* ── PUNTOS ── */
  .pts-table th:last-child,
  .pts-table td:last-child { display: none; } /* barra visual */
  .pts-config-row { flex-direction: column; align-items: flex-start; gap: .6rem; }

  /* ── COMISARIOS ── */
  .com-header { flex-wrap: wrap; }
  .perm-rally { flex-wrap: wrap; gap: .4rem; }
  .com-perms { padding: .6rem .8rem; }

  /* ── PENALIZACIONES ── */
  .two-col { grid-template-columns: 1fr !important; }
  .ofic-banner { flex-direction: column; align-items: flex-start !important; }
  .pen-item { flex-wrap: wrap; }

  /* ── CATEGORÍAS ── */
  .cat-grid { grid-template-columns: 1fr !important; }

  /* ── LISTA INSCRITOS ── */
  .insc-table th:nth-child(5),
  .insc-table td:nth-child(5) { display: none; } /* procedencia */

  /* ── STATS / CHIPS ── */
  .stats-row { display: none; }
  .ev-stats   { display: none; }
  .stat-grid  { grid-template-columns: 1fr 1fr !important; gap: .6rem; }
  .stat-val   { font-size: 1.6rem !important; }

  /* ── MODALES ── */
  .modal {
    max-width: 96vw !important;
    padding: 1rem !important;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .form-grid .fg,
  .form-grid-3 .fg { grid-column: 1 !important; }

  /* ── SIDEBAR OVERLAY ── */
  .sidebar {
    position: fixed !important;
    top: 0;
    left: -264px;
    z-index: 200;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: left .26s cubic-bezier(.4, 0, .2, 1),
                box-shadow .26s ease;
    box-shadow: none;
  }
  .sidebar.sb-open {
    left: 0;
    box-shadow: 6px 0 28px rgba(0, 0, 0, .55);
  }
  .sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 199;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .sb-overlay.sb-visible { display: block; }
  .hamburger { display: flex !important; }

  /* Hamburger más grande para touch */
  .hamburger {
    width: 46px !important;
    height: 46px !important;
    top: .6rem !important;
    left: .6rem !important;
  }

  /* Nav items con área táctil generosa */
  .nav-item {
    padding: .8rem 1.2rem !important;
    font-size: .88rem !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ── TOPBAR ── */
  .page-title { font-size: 1rem !important; }
  .clock      { font-size: .82rem; }

  /* ── FLASH / ALERTAS ── */
  .flash { font-size: .875rem; padding: .75rem 1rem; }
  .alert-box { flex-wrap: wrap; gap: .5rem; }

  /* ── LIVE PANEL ── */
  .live-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .live-header > div:last-child { width: 100%; }
  .live-header .btn { width: 100%; justify-content: center; }

  /* ── COMISARIO TRAMO ── */
  .piloto-header { gap: .5rem; }
  .driver-info   { min-width: 0; }
  .driver-name   { font-size: .9rem; }
  .reloj-auto-panel { flex-direction: column; }
  .manual-grid   { grid-template-columns: 1fr !important; }

  /* ── VISTA PÚBLICA ── */
  .clubs-grid  { grid-template-columns: 1fr !important; }
  .hero-title  { font-size: 1.8rem !important; }
  .filter-bar  { flex-wrap: wrap; gap: .5rem; }
  .filter-group { flex-wrap: wrap; gap: .3rem; }
  .pill {
    font-size: .82rem !important;
    padding: .4rem .7rem !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .event-banner { flex-direction: column; }

  /* ── THEME TOGGLE en sidebar ── */
  .theme-toggle {
    min-height: 40px;
    font-size: .72rem !important;
  }

  /* ── BOTÓN LOGOUT ── */
  .logout-btn {
    min-height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

}

/* ══════════════════════════════════════════════════════════════
   TELÉFONO PEQUEÑO — max 480px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .datos-grid { grid-template-columns: 1fr !important; }
  .driver-co  { display: none; }
  .rally-date { display: none; }
  .topbar .page-title { font-size: .9rem; }
  .stat-grid  { grid-template-columns: 1fr !important; }
  .stat-val   { font-size: 1.5rem !important; }
}