/* ===================================================
   🔹 LOGIN & REGISTER
   =================================================== */

/* Logo */
.login-logo a {
  color: #fff !important;     /* blanco */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* opcional, mejora contraste */
}

.login-logo a:hover {
  color: #f8f9fa !important; /* tono blanco más claro al hover */
  text-decoration: none;
}

/* Fondo login/register */
.login-page,
.register-page {
  background: url("../../images/fondo-registroIII.jpeg") no-repeat center center;
  background-size: cover;
  position: relative; /* 👈 asegura que absolute use este contenedor */
  min-height: 100vh;   /* asegura que siempre cubra */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card con transparencia */
.login-box .card,
.register-box .card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
}

/* Posición en pantallas grandes */
.login-box,
.register-box {
  position: absolute;
  left: 180px;
  top: 55%;
  transform: translateY(-50%);
  width: 380px; /* ancho fijo en desktop */
  max-width: 100%; /* que nunca desborde */
}

/* --- 🔹 Responsividad --- */
@media (max-width: 992px) {
  .login-box,
  .register-box {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 40px auto;
    width: 90%; /* ocupa casi todo el ancho */
    max-width: 420px; /* límite */
  }
}

@media (max-width: 576px) {
  .login-box,
  .register-box {
    margin: 20px auto;
    width: 95%;
  }

  .login-box .card-body,
  .register-box .card-body {
    padding: 20px 15px;
  }

  .input-group .form-control {
    font-size: 16px;
  }

  .btn {
    font-size: 16px;
    padding: 10px;
  }
}


/* ===================================================
   🔹 AJUSTES RESPONSIVOS (usuarios + admin)
   =================================================== */

/* Pantallas menores a 576px (móviles) */
@media (max-width: 576px) {
  /* Ocultar columnas secundarias en tablas largas */
  table th.d-none-sm,
  table td.d-none-sm {
    display: none;
  }

  /* Botones pequeños → más grandes en mobile */
  .btn-sm {
    font-size: 14px;
    padding: 6px 10px;
    margin: 2px 0;
  }

  /* Ajustar padding de tablas en card */
  .card-body.table-responsive {
    padding: 10px;
  }

  /* Inputs y selects más cómodos en mobile */
  .form-control {
    font-size: 15px;
    padding: 8px;
  }

  /* Tablas más compactas */
  .table td,
  .table th {
    font-size: 14px;
    padding: 6px;
  }

  /* Badges más legibles */
  .badge {
    font-size: 0.85rem;
    padding: 5px 8px;
  }

  /* Dashboard cards */
  .card .card-body {
    padding: 12px;
  }
  .card .fa-3x {
    font-size: 2rem; /* iconos más chicos para que no rompan */
  }

  /* Fixture en mobile: reducir espacios */
  .fixture {
    gap: 30px !important;
    padding: 10px;
  }

  .partido {
    min-width: 180px;
    margin-bottom: 40px;
  }

  /* Formularios en modales */
  .modal-dialog {
    max-width: 95%;
    margin: 10px auto;
  }
  .modal-body {
    padding: 15px;
  }
}

/* Pantallas entre 576px y 768px (tablets) */
@media (max-width: 768px) {
  .btn-sm {
    font-size: 15px;
    padding: 7px 12px;
  }

  .table td,
  .table th {
    font-size: 15px;
  }

  /* Fixture: menos separación en tablet */
  .fixture {
    gap: 50px;
  }
}

/* ===================================================
   🔹 FIXTURE
   =================================================== */

.fixture {
  display: flex;
  gap: 80px;
  padding: 20px;
  overflow-x: auto;
}

/* Cada columna de ronda */
.ronda {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Cada partido */
.partido {
  min-width: 240px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid #ccc !important;
  border-radius: 8px;
  background: #fff;
  position: relative;
  padding: 8px;
  box-sizing: border-box;
  margin-bottom: 60px; /* espacio entre partidos */
}

/* 🔹 Ajuste por rondas (alineación en llaves) */
.ronda[data-ronda="2"] .partido { margin-top: 80px; }
.ronda[data-ronda="3"] .partido { margin-top: 160px; }
.ronda[data-ronda="4"] .partido { margin-top: 320px; }
.ronda[data-ronda="5"] .partido { margin-top: 640px; }

/* Fila de equipo + sets */
.equipo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}

/* Nombre siempre pegado a la izquierda */
.nombre-equipo {
  flex: 1;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputs de sets */
.inputs-sets {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Los cuadraditos */
.cuadradito {
  width: 35px;
  height: 35px;
  padding: 0;
  text-align: center;
  font-size: 14px;
  line-height: 35px;
  box-sizing: border-box;
}

/* Resaltado ganador */
.partido .ganador,
.fw-bold.text-success {
  font-weight: bold;
  background: #d4edda;
  border-radius: 4px;
  border: 1px solid #28a745;
  color: #155724;
  padding: 2px 4px;
}

/* Partidos vacíos (byes o pendientes) */
.partido.vacio {
  opacity: 0.6;
  font-style: italic;
}

/* 🔹 Quitar flechitas de inputs numéricos */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinners {
  appearance: textfield;
  -moz-appearance: textfield; /* Firefox */
}

.badge-light {
  font-size: 0.75rem;
  vertical-align: middle;
}

/* ===================================================
   🔹 FIXES COMPATIBILIDAD Y ACCESIBILIDAD
   =================================================== */

/* Inputs numéricos: sin spinners en todos los navegadores */
.no-spinners {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

/* Bloquear selección de iconos SweetAlert2 en Safari */
div:where(.swal2-icon) {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

/* Compatibilidad con Safari para alineación de th */
th {
  text-align: -webkit-match-parent;
  text-align: match-parent;
}

/* Evitar uso de zoom (sin soporte en Firefox) — opcional, solo comentario */
div:where(.swal2-icon) {
  /* zoom: var(--swal2-icon-zoom); → mantener solo si lo necesitas */
}

/* Text-size adjust global (evita zoom automático en iPhone) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-overflow-scrolling: touch;
}

/* ✅ Fix iOS modal: permitir clics y entrada */
.modal {
  -webkit-overflow-scrolling: touch !important;
  touch-action: manipulation !important;
}
.modal-backdrop {
  cursor: default !important;
}


/* =============== MODAL INSCRIPCIÓN PURO CSS =============== */
/* Overlay */
.insc-overlay {
  position: fixed; /* overlay sí puede ser fixed */
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out;
  z-index: 1060; /* por encima de AdminLTE */
}

/* Contenedor modal (NO fixed para evitar bugs de iOS con inputs) */
.insc-modal[hidden] { display: none !important; }

.insc-modal {
  position: absolute;
  left: 50%;
  top: 12vh;                 /* evita solaparse con teclado iOS */
  transform: translateX(-50%); /* solo X, no Y (mejora iOS) */
  width: min(92vw, 520px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  z-index: 1061;
  border: 1px solid rgba(0,0,0,.08);
}

/* Contenido */
#insc-form { padding: 14px; }
.insc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 6px 10px 6px;
}
.insc-header h3 { margin: 0; font-size: 1.15rem; }
.insc-desc { margin: 0 6px 10px 6px; color:#6c757d; font-size:.9rem; }

.insc-close {
  border: none; background: transparent; font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: 2px 6px; color:#6b7280;
}

.insc-field { margin: 10px 6px; display:flex; flex-direction: column; gap:6px; }
.insc-input, .insc-select {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 10px;
  padding: 10px 12px; font-size: 16px; /* 16px evita zoom en iOS */
  outline: none; background: #fff;
}
.insc-input:focus, .insc-select:focus { border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

.insc-hint { color:#6b7280; font-size:.8rem; }

.insc-actions {
  display:flex; gap:10px; justify-content:flex-end; padding: 8px 6px 2px 6px;
}
.insc-btn {
  border-radius: 10px; padding: 10px 14px; font-size: 15px; cursor:pointer; border:1px solid transparent;
}
.insc-btn-primary { background:#16a34a; color:#fff; border-color:#16a34a; }
.insc-btn-primary:disabled { opacity:.6; cursor:not-allowed; }
.insc-btn-secondary { background:#e5e7eb; color:#111827; }

body.insc-lock {
  overflow: hidden;          /* bloquea scroll fondo */
  touch-action: none;
}

/* Animación entrada */
.insc-modal { opacity: 0; transform: translateX(-50%) translateY(10px); transition: opacity .18s, transform .18s; }
.insc-modal.insc-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.insc-overlay.insc-open { opacity: 1; pointer-events: auto; }

/* Mobile tweaks */
@media (max-width: 576px) {
  .insc-modal { top: 8vh; }
}