/* ===== PadelBoard - Tailwind-lite (solo utilidades usadas en index.html) ===== */

/* Reset y tipografía base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;background:#f9fafb;color:#111827}

/* Colores base */
:root{
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-600:#3B82F6; --blue-700:#2563eb; --blue-800:#1e40af; /* --blue-600:#2563eb; --blue-700:#1d4ed8;*/
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937;
  --green-600:#059669; --white:#ffffff;
}

/* Utilidades de color de fondo y texto */
.bg-white{background:#fff} .bg-gray-50{background:var(--gray-50)}
.bg-blue-600{background:var(--blue-600)} .bg-blue-700{background:var(--blue-700)}
.text-white{color:#fff} .text-gray-600{color:var(--gray-600)} .text-gray-700{color:var(--gray-700)} .text-gray-800{color:var(--gray-800)}
.text-blue-600{color:var(--blue-600)} .text-blue-800{color:var(--blue-800)}

/* Gradiente tipo Tailwind */
.bg-gradient-to-r{background-image:linear-gradient(to right, var(--from,transparent), var(--to,transparent))}
.from-blue-50{--from:var(--blue-50)} .to-blue-100{--to:var(--blue-100)}

/* Bordes, radios y sombras */
.rounded-xl{border-radius:0.75rem} .rounded-2xl{border-radius:1rem}
.border-2{border:2px solid var(--gray-200)} .border-gray-200{border-color:var(--gray-200)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}

/* Tipografía: tamaños usados */
.text-xs{font-size:.75rem;line-height:1rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-bold{font-weight:700}
.font-medium{font-weight:500}

/* Espaciados (padding/margin) que aparecen en tu HTML */
.p-6{padding:1.5rem} .p-8{padding:2rem}
.px-2{padding-left:.5rem;padding-right:.5rem} .px-4{padding-left:1rem;padding-right:1rem} .px-6{padding-left:1.5rem;padding-right:1.5rem} .px-8{padding-left:2rem;padding-right:2rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem} .py-4{padding-top:1rem;padding-bottom:1rem} .py-8{padding-top:2rem;padding-bottom:2rem}
.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem}

/* Layout: contenedor, centrado, flex, grid, gaps */
.max-w-4xl{max-width:56rem} .mx-auto{margin-left:auto;margin-right:auto}
.flex{display:flex} .flex-1{flex:1 1 0} .flex-col{flex-direction:column}
.items-center{align-items:center} .justify-center{justify-content:center} .justify-between{justify-content:space-between}
.grid{display:grid} .gap-4{gap:1rem} .gap-6{gap:1.5rem}

/* Columnas “md:” simplificadas (en móviles será 1 col; en >=768px aplicamos md) */
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Inputs/selects */
input,select{width:100%;padding:.75rem 1rem;font-size:1rem;border:2px solid var(--gray-200);border-radius:.75rem;background:#fff;color:var(--gray-800);outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(37,99,235,.2);outline:none}

/* Botones */
button{cursor:pointer}
.bg-blue-600:hover{background:var(--blue-700)}
.bg-gray-500{background:#6b7280} .bg-gray-500:hover{background:#4b5563}
.text-blue-600:hover{color:#1d4ed8}

/* Tarjetas/opciones */
.option-card{border:2px solid transparent;border-radius:1rem;transition:transform .2s, box-shadow .2s, border-color .2s}
.option-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.1);border-color:var(--blue-600)}
.option-card.selected{border-color:var(--blue-600);background-image:linear-gradient(135deg,#f0f4ff,#e8f2ff)}

/* Navegación inferior fija */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--gray-200);z-index:50}
/*.main-content{padding-bottom:140px}*/
.w-6{width:1.5rem}.h-6{height:1.5rem}

/* Tabs (activo/inactivo) */
.tab-active{color:#3B82F6;border-top:3px solid #3B82F6}
.tab-inactive{color:#6B7280}

/* Utilidades varias */
.hidden{display:none !important} .active{display:block}
.text-center{text-align:center}

/* Estilo para el logo de la App */
.app-logo {
  max-width: 360px; /* Mantenemos el ancho máximo */
  width: 100%;
  height: auto;
  display: block;  /* display:block y margin:auto centran la imagen */
  margin-left: auto;
  margin-right: auto;
}

/* Banner de descarga: que no tape el contenido en pantallas pequeñas */
#download-banner{box-shadow:0 -6px 16px rgba(0,0,0,.06)}
@media (max-width:768px){
  .py-8{padding-top:1rem;padding-bottom:1rem}
  .px-4{padding-left:.75rem;padding-right:.75rem}
  .p-8{padding:1rem}.p-6{padding:.75rem}
  .mb-8{margin-bottom:1.5rem}.mb-6{margin-bottom:1rem}
  .text-3xl{font-size:1.5rem;line-height:2rem}
  .text-2xl{font-size:1.25rem;line-height:1.75rem}
  .text-xl{font-size:1.125rem;line-height:1.75rem}
  .text-lg{font-size:1rem;line-height:1.5rem}
}

/* Pequeñas (<480px) */
@media (max-width:480px){
  .px-4{padding-left:.5rem;padding-right:.5rem}
  .p-8{padding:.75rem}
}
/* ===== FIX ESPECÍFICO: Banner inferior + Navegación inferior + Pestañas ===== */

/* 0) Utilidades que faltaban (medidas, texto y espaciados horizontales) */
.w-5{width:1.25rem} .h-5{height:1.25rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.space-x-2 > * + *{margin-left:.5rem}
.space-x-4 > * + *{margin-left:1rem}

/* 1) Banner de descarga inferior (siempre pequeño) */
#download-banner{
  position:fixed; left:0; right:0; bottom:60px; z-index:40;
  padding:.5rem .75rem; /* py-2 px-3 aprox */
  font-size:.875rem;    /* text-sm */
}
#download-banner svg{width:1.25rem;height:1.25rem} /* w-5 h-5 */
#download-banner .text-sm{font-size:.875rem;line-height:1.25rem}
#download-banner button{padding:.25rem .75rem;border-radius:9999px}
@media (max-width:480px){
  #download-banner{padding:.4rem .6rem}
}

/* 2) Navegación inferior – altura fija y elementos compactos */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:60px; background:#fff; border-top:1px solid #e5e7eb;
}
.bottom-nav > .flex{display:flex; height:100%}
.bottom-nav button{padding:6px 4px}
.bottom-nav svg{width:24px;height:24px}        /* w-6 h-6 */
.bottom-nav span{font-size:12px;line-height:1}

/* 3) Pestañas: por defecto ocultas, solo .active visible */
.content-section {
  display: none;
  min-height: 100vh;
  background-color: #3b82f6; /* Color de respaldo si el degradado falla */
  background-image: linear-gradient(
    to bottom,            /* De arriba hacia abajo */
    #001755 0%,           /* El color oscuro empieza arriba */
    #001755 40px,        /* Sigue oscuro HASTA 150px */
    #3b82f6 100px,        /* El color claro empieza EN 150px */
    #3b82f6 100%         /* El color claro sigue hasta el final */
  );
}
.content-section.active{display:block}

/* 4) Seguridad extra: que ningún SVG “reviente” el layout */
svg{max-width:100%;height:auto}

/* ===== NUEVO: Selector de Segmentos ===== */
.segmented-control {
  display: flex;
  width: 100%;
  border: 2px solid var(--blue-600); /* Borde principal azul */
  border-radius: 0.75rem;            /* esquinas redondeadas (rounded-xl) */
  overflow: hidden;                  /* Para contener los botones */
  background: var(--blue-50);        /* Fondo azul muy claro */
}
.segment-button {
  flex: 1; /* Ocupa espacio equitativo */
  padding: 0.75rem 1rem; /* Espaciado interno */
  border: none;
  background: transparent;
  color: var(--blue-800);
  font-weight: 500; /* font-medium */
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
/* Estilo para el botón que NO está seleccionado, al pasar el mouse */
.segment-button:not(.selected):hover {
  background-color: var(--blue-100);
}
/* Estilo para el botón SELECCIONADO */
.segment-button.selected {
  background-color: var(--blue-600);
  color: var(--white);
  font-weight: 700; /* font-bold */
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}
/* Añade una línea divisoria entre los botones */
.segment-button + .segment-button {
  border-left: 2px solid var(--blue-600);
}

/* ===== NUEVO: Tarjeta Resumen (Tipo de Juego) ===== */
.game-type-summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--blue-600);
  border: 2px solid var(--blue-700);
  border-radius: 0.75rem; /* rounded-xl */
  padding: 1.25rem; /* p-5 */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.05);
}
.game-type-summary-card h3 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.25rem 0;
}
.game-type-summary-card p {
  font-size: 0.875rem; /* text-sm */
  color: var(--blue-100);
  margin: 0;
}
.change-button {
  border: none;
  background-color: var(--blue-50);
  color: var(--blue-700);
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem; /* rounded-lg */
  cursor: pointer;
  transition: background-color 0.2s;
}
.change-button:hover {
  background-color: var(--blue-100);
}

/* ===== NUEVO: Lista de Botones (Modal Tipo de Juego) ===== */
.game-type-button-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* gap-3 */
}
.game-type-button-list button {
  width: 100%;
  padding: 1.25rem 1rem; /* p-5 p-4 */
  background-color: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: 0.75rem; /* rounded-xl */
  text-align: left;
  transition: all 0.2s;
}
.game-type-button-list button:hover {
  border-color: var(--blue-600);
  background-color: var(--blue-50);
}
.game-type-button-list button h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--blue-800);
  margin: 0 0 0.25rem 0;
}
.game-type-button-list button p {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin: 0;
}

.game-type-button-list button.selected {
  background-color: var(--blue-600);
  border-color: var(--blue-700);
  color: var(--white);
}

.game-type-button-list button.selected h3 {
  color: var(--white);
}

.game-type-button-list button.selected p {
  color: var(--blue-100);
}

/* ===== NUEVO: Modal de Confirmación ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: block; /* <-- CAMBIADO */
  overflow-y: auto; /* <-- AÑADIDO */
  z-index: 100;
  backdrop-filter: blur(4px);
  padding: 2rem 1rem; /* <-- CAMBIADO (padding: 1rem) */
}

.modal-content {
  background: var(--white);
  border-radius: 1rem;  /* rounded-2xl */
  padding: 1.5rem;       /* p-6 */
  max-width: 56rem;      /* max-w-4xl */
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04); /* shadow-xl */
  /* Animación de entrada */
  transform: scale(0.95);
  opacity: 0;
  animation: modal-fade-in 0.2s ease-out forwards;
}

@keyframes modal-fade-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1.0); opacity: 1; }
}

.modal-content .grid {
  display: grid;
}
.modal-content .gap-6 {
  gap: 1.5rem;
}
.modal-content .md\:grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
/* Estilos para los botones dentro del modal */
.modal-actions {
  display: flex;
  flex-direction: column-reverse; /* Móvil primero */
  gap: 1rem;
  margin-top: 1.5rem; /* mt-6 */
}

/* En pantallas más grandes, botones uno al lado del otro */
@media (min-width: 640px) { /* sm: */
  .modal-actions {
    flex-direction: row;
  }
  .modal-actions button {
    flex: 1; /* Ocupan el mismo espacio */
  }
}

/* ===== NUEVO: Estilos para el Resumen en Lista del Modal ===== */
.summary-list {
  width: 100%;
  margin-bottom: 1.5rem; /* mt-6 */
}
.summary-group {
  /* Crea la línea divisoria */
  border-bottom: 1px solid var(--gray-200);
  padding: 0.75rem 0; /* py-3 */
}
.summary-group:first-child {
  padding-top: 0;
}
.summary-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.summary-title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 700; /* font-bold */
  color: var(--blue-800);
  margin-bottom: 0.5rem; /* mb-2 */
}
.summary-details {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--gray-700);
}
/* Hace que el texto dentro del resumen se vea bien */
.summary-details p {
  margin: 0 0 0.5rem 0; /* mb-2 */
}
.summary-details p:last-child {
  margin-bottom: 0;
}

/* ===== NUEVO: Tarjetas de Jugadores ===== */

/* 1. La tarjeta contenedora */
.pair-card {
  border: 2px solid var(--blue-600); /* Borde azul general */
  border-radius: 0.75rem;            /* rounded-xl */
  overflow: hidden;                  /* Para redondear el header */
  background-color: var(--white);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.05);
}

/* 2. El encabezado azul sólido */
.pair-card .pair-header {
  background-color: var(--blue-600);
  padding: 0.75rem; /* p-3 */
}

.pair-card .pair-header h3 {
  color: var(--white); /* Texto blanco */
  font-weight: 700;
  font-size: 1.25rem; /* text-xl */
  text-align: center;
  margin: 0;
}

/* 3. El "cuerpo" blanco que envuelve los inputs */
.pair-card .pair-body {
  padding: 1rem; /* p-4, da espacio interior */
  background-color: var(--white);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem; /* ¡Esto crea el espacio entre los inputs! */
}

/* 4. Estilo de los inputs (fondo blanco, borde gris) */
.pair-card input[type="text"] {
  background-color: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 0.5rem; /* rounded-lg */
}

/* 5. Tu idea: Borde azul cuando el campo tiene texto */
.pair-card input[type="text"]:not(:placeholder-shown) {
  border-color: var(--blue-600);
}

/* 6. El estilo :focus se mantiene como antes */
.pair-card input[type="text"]:focus {
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3) !important;
  outline: none;
}

/* ===== NUEVO: Bloquear scroll del body cuando el modal está abierto ===== */
body.modal-open {
  overflow: hidden;
}

/* ===== ESTILOS MODO TORNEO (Custom Checkbox) ===== */
.tournament-card {
  display: block;
  background: white;
  border-radius: 1rem; /* rounded-xl */
  padding: 0.1rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

/* Ocultamos el input original feo */
.custom-checkbox-input {
  display: none; 
}

/* Creamos la CAJA bonita */
.checkmark-box {
  height: 21px;
  width: 21px;
  background-color: white;
  border: 2px solid var(--gray-200);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0; /* Evita que se aplaste si hay mucho texto */
}

/* Cuando el input (oculto) está marcado, cambiamos la caja */
.custom-checkbox-input:checked ~ div .checkmark-box {
  background-color: var(--blue-600);
  border-color: var(--blue-600);
}

/* Mostrar el tick cuando está checked */
.custom-checkbox-input:checked ~ div .checkmark-box::after {
  display: block;
}

/* El dibujo del tick (palomita) */
.checkmark-box::after {
  content: "";
  display: none;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  margin-bottom: 2px; /* Pequeño ajuste visual */
}

/* ===== MODAL ESTILO VIDRIO (GLASSMORPHISM) ===== */
.modal-glass {
  /* Fondo oscuro semi-transparente (Azul noche al 80%) */
  background: rgba(103, 103, 103, 0.5);
  
  /* EL EFECTO DE VIDRIO BORROSO */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%); /* Obligatorio para iPhone */
  
  /* Borde fino y sutil (como el canto de un cristal) */
  border: 1px solid rgba(255, 255, 255, 0.15);
  
  /* Sombra suave para profundidad */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  
  /* Forma y Texto */
  border-radius: 1.5rem; /* Bordes muy redondeados */
  color: white;
  padding: 2rem;
  max-width: 26rem;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  
  /* Animación */
  transform: scale(0.95);
  animation: modal-fade-in 0.2s ease-out forwards;
}

/* Botón con estilo cristal más brillante */
.btn-glass-action {
  background: var(--blue-600);
  color: white;
  font-weight: 800;
  width: 100%;
  padding: 1rem;
  border-radius: 1rem;
  font-size: 1.125rem;
  border: none;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-glass-action:hover {
  transform: scale(1.02);
}

/* ===== MODAL AVANZADO (HEADER + SCROLL + FOOTER) ===== */

/* 1. El contenedor principal se vuelve flexible */
.modal-scrollable-layout {
  display: flex;
  flex-direction: column;
  max-height: 70vh; /* Ocupa máximo el 85% de la altura de la pantalla */
  overflow: hidden; /* Evita que el contenedor entero tenga scroll */
  padding: 0 !important; /* Quitamos padding general para manejarlo por secciones */
}

/* 2. Cabecera Fija (Título y X) */
.modal-header-fixed {
  flex-shrink: 0; /* No se encoge */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem; /* p-5 p-6 */
  border-bottom: 1px solid var(--gray-200);
  background: white; /* Para tapar el contenido al hacer scroll */
}

/* 3. Cuerpo Scrollable (Donde van los botones) */
.modal-body-scroll {
  flex-grow: 1; /* Ocupa todo el espacio disponible */
  overflow-y: auto; /* Scroll vertical si hace falta */
  padding: 1.5rem;
  /* Scroll suave */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 4. Pie Fijo (Botón Cancelar) */
.modal-footer-fixed {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  display: flex;       
  justify-content: center;
  align-items: center;
}

/* Estilo para la X de cerrar */
.btn-close-x {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-500);
  padding: 0.5rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-close-x:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

.w-full {
  width: 100%;
}


/* ===== ESTILOS "PRÓXIMAMENTE" ===== */
.option-card.option-disabled {
  background: var(--gray-100);
  border-color: var(--gray-200);
  opacity: 0.7;
  cursor: not-allowed;
  transform: none; /* Prevenir efecto hover */
  box-shadow: none;  /* Prevenir efecto hover */
}
.option-card.option-disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--gray-200);
}
/* Estilo para el texto "Próximamente" */
.option-card.option-disabled .comming-soon {
  color: var(--gray-500);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  line-height: 1;
  margin-top: 4px;
}
/* Deshabilitar inputs y selects */
.input-disabled,
.input-disabled:focus {
  background: var(--gray-100);
  cursor: not-allowed;
  border-color: var(--gray-200);
  box-shadow: none;
}