/* public/css/main.css — Estilos globales · Mobile First */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --verde:        #639922;
  --verde-light:  #EAF3DE;
  --verde-dark:   #27500A;
  --azul:         #185FA5;
  --azul-light:   #E6F1FB;
  --ambar:        #BA7517;
  --ambar-light:  #FAEEDA;
  --ambar-dark:   #633806;
  --rojo:         #E24B4A;
  --rojo-light:   #FCEBEB;
  --rojo-dark:    #791F1F;
  --teal:         #1D9E75;
  --teal-light:   #E1F5EE;
  --gris:         #5F5E5A;
  --gris-light:   #F1EFE8;
  --sidebar-w:    200px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --border:       0.5px solid #e0ddd6;
  --text:         #1a1a1a;
  --text-sec:     #666;
  --text-ter:     #999;
  --bg:           #ffffff;
  --bg-sec:       #f8f7f4;
  --bg-ter:       #f3f1ec;
  /* Responsive */
  --bottom-nav-h: 60px;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px; color: var(--text); background: var(--bg-ter);
  /* Prevent iOS text size adjust */
  -webkit-text-size-adjust: 100%;
}

/* ── Layout ─────────────────────────────────────────────── */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w);
           border-right: var(--border); display: flex; flex-direction: column;
           background: var(--bg-sec); }
.logo { padding: 20px 16px 16px; border-bottom: var(--border); }
.logo-title { font-size: 13px; font-weight: 500; }
.logo-sub   { font-size: 11px; color: var(--text-sec); margin-top: 2px; }
.logo-badge { display: inline-block; margin-top: 6px; background: var(--verde-light);
              color: var(--verde-dark); font-size: 10px; padding: 2px 7px; border-radius: 20px; }
.nav { padding: 8px 0; flex: 1; }
.nav-section { padding: 8px 16px 4px; font-size: 10px; font-weight: 500;
               color: var(--text-ter); letter-spacing: .06em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 16px;
            font-size: 13px; color: var(--text-sec); cursor: pointer; transition: background .1s; }
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.active { background: var(--bg); color: var(--text); font-weight: 500;
                   border-right: 2px solid var(--verde); }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Main ─────────────────────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { padding: 14px 20px; border-bottom: var(--border);
          display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 8px; }
.topbar-title { font-size: 15px; font-weight: 500; }
.topbar-sub   { font-size: 12px; color: var(--text-sec); margin-top: 1px; }
.content { flex: 1; overflow-y: auto; padding: 16px 20px; -webkit-overflow-scrolling: touch; }

/* ── Componentes ─────────────────────────────────────────── */
.btn { font-size: 12px; padding: 6px 12px; border: var(--border);
       border-radius: var(--radius-md); background: transparent;
       color: var(--text); cursor: pointer; white-space: nowrap;
       -webkit-tap-highlight-color: transparent; }
.btn:hover { background: var(--bg-sec); }
.btn-verde { background: var(--verde-light); border-color: transparent;
             color: var(--verde-dark); font-weight: 500; }
.btn-rojo  { background: var(--rojo-light);  border-color: transparent; color: var(--rojo-dark); }
.btn-azul  { background: var(--azul-light);  border-color: transparent; color: var(--azul); }

.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
             gap: 8px; margin-bottom: 16px; }
.stat-card { background: var(--bg-sec); border-radius: var(--radius-md); padding: 10px 12px; }
.stat-label { font-size: 11px; color: var(--text-sec); margin-bottom: 3px; }
.stat-value { font-size: 20px; font-weight: 500; }

.card { background: var(--bg); border: var(--border); border-radius: var(--radius-lg);
        overflow: hidden; }

.tab-bar { display: flex; border-bottom: var(--border); margin-bottom: 16px; }
.tab     { padding: 9px 16px; font-size: 13px; color: var(--text-sec);
           cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -0.5px;
           white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--verde); font-weight: 500; }

.pos-badge { font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 500; }
.pos-POR { background: var(--ambar-light); color: var(--ambar-dark); }
.pos-DEF { background: var(--azul-light);  color: var(--azul); }
.pos-CEN { background: var(--verde-light); color: var(--verde-dark); }
.pos-DEL { background: #FAECE7; color: #993C1D; }

.estado-badge { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 500; }
.estado-activo              { background: var(--verde-light); color: var(--verde-dark); }
.estado-lesionado           { background: var(--rojo-light);  color: var(--rojo-dark); }
.estado-sancionado          { background: var(--ambar-light); color: var(--ambar-dark); }
.estado-baja_temporal       { background: var(--gris-light);  color: var(--gris); }
.estado-baja_proxima_temporada { background: #FBEAF0; color: #4B1528; }

.avatar { border-radius: 50%; display: flex; align-items: center;
          justify-content: center; font-weight: 500; flex-shrink: 0; }

.search-box { padding: 7px 10px; font-size: 13px; border: var(--border);
              border-radius: var(--radius-md); background: var(--bg-sec);
              color: var(--text); outline: none; }
.search-box:focus { border-color: var(--verde); }

.loading { display: flex; align-items: center; justify-content: center;
           height: 200px; color: var(--text-ter); font-size: 13px; }
.empty-state { text-align: center; padding: 40px; color: var(--text-ter); font-size: 13px; }

/* ── Overlay modal ─────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35);
           display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--bg); border-radius: var(--radius-lg); border: var(--border);
         max-height: 85vh; display: flex; flex-direction: column; }
.modal-header { padding: 14px 20px; border-bottom: var(--border);
                display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title  { font-size: 14px; font-weight: 500; }
.modal-body   { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px;
                flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-footer { padding: 12px 20px; border-top: var(--border);
                display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
                padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.close-btn    { font-size: 16px; cursor: pointer; color: var(--text-sec);
                padding: 2px 6px; border-radius: var(--radius-md); background: none; border: none;
                min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; }
.close-btn:hover { background: var(--bg-sec); }

/* ── Formulario fullscreen (móvil) ─────────────────────────── */
.fullscreen-form {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg, #fff); z-index: 500;
  display: flex; flex-direction: column; overflow: hidden;
}
.fullscreen-form-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-color, #e0ddd6);
  flex-shrink: 0; background: var(--bg, #fff);
}
.fullscreen-form-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px; padding-bottom: 100px;
}
.fullscreen-form-body .form-grid { grid-template-columns: 1fr; }
.fullscreen-form-body .form-group.full { grid-column: span 1; }
.fullscreen-form-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--bg, #fff); border-top: 1px solid var(--border-color, #e0ddd6);
}
.fullscreen-form-footer-btn {
  width: 100%; padding: 14px; border: none; border-radius: 10px;
  background: var(--verde, #639922); color: #fff;
  font-size: 15px; font-weight: 500; cursor: pointer; touch-action: manipulation;
}
.fullscreen-form-footer-btn:disabled { opacity: .6; cursor: not-allowed; }
@media (min-width: 769px) { .fullscreen-form { display: none !important; } }

/* ── Formulario ────────────────────────────────────────── */
.form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full { grid-column: span 2; }
.form-label { font-size: 11px; color: var(--text-sec); font-weight: 500; }
.form-input, .form-select, .form-textarea {
  padding: 7px 10px; font-size: 13px; border: var(--border);
  border-radius: var(--radius-md); background: var(--bg-sec);
  color: var(--text); width: 100%; font-family: inherit; }
.form-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.form-section-title { font-size: 11px; font-weight: 500; color: var(--text-ter);
                      text-transform: uppercase; letter-spacing: .06em;
                      padding-bottom: 6px; border-bottom: var(--border); }

/* ════════════════════════════════════════════════════════
   BOTTOM NAVIGATION (mobile-only component)
   ════════════════════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg-sec);
  border-top: 1px solid #e0ddd6;
  z-index: 300;
  box-shadow: 0 -1px 0 rgba(0,0,0,.05), 0 -6px 16px rgba(0,0,0,.05);
}

.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: var(--text-ter);
  font-size: 9px;
  font-weight: 500;
  padding: 6px 2px;
  letter-spacing: .03em;
  transition: color .12s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 44px;
  text-align: center;
}

.bnav-item.active { color: var(--verde); }

.bnav-icon {
  font-size: 20px;
  line-height: 1;
  display: block;
  transition: transform .12s;
}

.bnav-item.active .bnav-icon { transform: scale(1.1); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (< 768px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Layout: sidebar hidden, bottom nav visible */
  .sidebar    { display: none !important; }
  .bottom-nav { display: flex; }

  /* Main: reserve space for bottom nav */
  .main { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); }

  /* Content */
  .content { padding: 12px 16px; }

  /* Topbar: allow wrapping for tabs/buttons */
  .topbar {
    padding: 10px 16px;
    flex-wrap: wrap;
    align-items: center;
  }
  .topbar > div:first-child { flex: 1; min-width: 0; }

  /* Touch-friendly buttons (44px min tap target) */
  .btn {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Inputs/selects: 44px height + disable iOS auto-zoom */
  .form-input,
  .form-select {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* Search box */
  .search-box {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px !important;
  }

  /* Forms: 1 column */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-group.full { grid-column: span 1 !important; }

  /* Stats row: 2 columns */
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-value { font-size: 18px; }

  /* Cards with wide content: horizontal scroll */
  .card { overflow-x: auto; }

  /* Modals: bottom sheet — sits above bottom nav + Safari bar */
  .overlay {
    align-items: flex-end !important;
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)) !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: calc(100svh - var(--bottom-nav-h) - var(--safe-bottom) - 40px) !important;
    border-bottom: none !important;
  }
  .modal-body { padding: 14px 16px; }
  .modal-header { padding: 12px 16px; }
  .modal-footer {
    padding: 12px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer .btn { flex: 1; min-height: 44px; justify-content: center; }

  /* Tabs: scrollable horizontal */
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: 8px 14px; font-size: 12px; }

  /* ── Override inline grid styles from JS modules ────── */
  /* 3-column grids → 2 columns */
  .content [style*="repeat(3,1fr)"],
  .content [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 4-column grids → 2 columns */
  .content [style*="repeat(4,1fr)"],
  .content [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 7-column grids → 2 columns */
  .content [style*="repeat(7,1fr)"],
  .content [style*="repeat(7, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 2-column grids in content (not inside modal) → 1 column */
  .content [style*="grid-template-columns:1fr 1fr"],
  .content [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* span 2 → span 1 inside content grids */
  .content [style*="grid-column:span 2"],
  .content [style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }

  /* ── Module-specific helpers ────────────────────────── */

  /* Progress bars section in equipacion */
  .eq-progress-col { display: none; }

  /* Attendance table: horizontal scroll hint */
  .ent-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Partidos: 2-col detail stacks vertically */
  .par-detalle-cols { flex-direction: column !important; }

  /* Filas de jugador en lista: adaptar */
  .jugador-fila-badges { display: none; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (768px – 1024px)
   ════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 14px 18px; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Desktop (> 1024px)
   ════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .bottom-nav { display: none !important; }
}