/* ==========================================================================
   VARIABLES GLOBALES (Tu Panel de Control Visual)
   ========================================================================== */
:root {
    /* Paleta de Colores Principal */
    --color-primario: #2563eb;       /* Azul principal (Botones primarios) */
    --color-primario-hover: #1d4ed8;
    --color-secundario: #10b981;     /* Verde éxito (Botones de guardado/secundarios) */
    --color-secundario-hover: #059669;
    --color-peligro: #ef4444;        /* Rojo para errores/bloqueos */
    --color-alerta: #f59e0b;         /* Naranja para advertencias */
    
    /* Fondos y Superficies */
    --color-fondo: #f8fafc;          /* Fondo general de la app */
    --color-superficie: #ffffff;     /* Fondo de las tarjetas blancas */
    
    /* Textos */
    --color-texto-oscuro: #0f172a;   /* Títulos */
    --color-texto-base: #1e293b;     /* Párrafos normales */
    --color-texto-suave: #64748b;    /* Subtítulos o texto secundario */
    
    /* Bordes y Estructura */
    --color-borde: #e2e8f0;          /* Líneas divisorias suaves */
    --color-borde-fuerte: #cbd5e1;   /* Bordes de inputs */
    --radio-tarjetas: 12px;
    --radio-botones: 8px;
    --sombra-base: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* ==========================================================================
   ESTILOS BASE
   ========================================================================== */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto-base);
    margin: 0;
    padding: 20px;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 600px;
    margin: auto;
}

h2, h3, h4 {
    color: var(--color-texto-oscuro);
    margin-top: 0;
}

/* ==========================================================================
   COMPONENTES ESTRUCTURALES
   ========================================================================== */
.header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

.card, .filtros-box {
    background: var(--color-superficie);
    padding: 20px;
    border-radius: var(--radio-tarjetas);
    box-shadow: var(--sombra-base);
    margin-bottom: 20px;
    border: 1px solid var(--color-borde);
}

/* ==========================================================================
   FORMULARIOS (Inputs y Selects)
   ========================================================================== */
input[type="text"], 
input[type="number"], 
select {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-botones);
    box-sizing: border-box;
    font-size: 1rem;
    background: var(--color-superficie);
    color: var(--color-texto-oscuro);
    transition: border-color 0.2s;
}

input:focus, select:focus {
    border-color: var(--color-primario);
    outline: none;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
button {
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.btn-primary, .btn-secondary, .btn-save {
    color: white;
    border: none;
    padding: 14px;
    border-radius: var(--radio-botones);
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-primary { background: var(--color-primario); }
.btn-primary:hover { background: var(--color-primario-hover); }
.btn-primary:disabled { background: var(--color-texto-suave); cursor: not-allowed; }

.btn-secondary, .btn-save { background: var(--color-secundario); }
.btn-secondary:hover, .btn-save:hover { background: var(--color-secundario-hover); }

.btn-back {
    background: var(--color-borde);
    border: none;
    padding: 8px 15px;
    border-radius: var(--radio-botones);
    cursor: pointer;
    color: var(--color-texto-suave);
    font-weight: bold;
}

.btn-share {
    background: #25D366; /* Verde WhatsApp Fijo */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: var(--radio-botones);
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
   .switch-container { 
       display: flex; 
       align-items: center; 
       gap: 12px; 
       margin: 15px 0; 
       background: #f8fafc; 
       padding: 12px 15px; 
       border-radius: 8px; 
       border: 1px solid #e2e8f0; 
    }
    
   .switch { 
      position: relative; 
      display: inline-block; 
      width: 46px; 
      height: 24px; 
      flex-shrink: 0; 
   }
   .switch input { 
      opacity: 0; 
      width: 0; 
      height: 0; 
   }

   .slider { 
      position: absolute; 
      cursor: pointer; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      background-color: #cbd5e1; 
      transition: .4s; 
      border-radius: 24px; 
   }

   .slider:before { 
      position: absolute; 
      content: ""; 
      height: 18px; 
      width: 18px; 
      left: 3px; 
      bottom: 3px; 
      background-color: white; 
      transition: .4s; 
      border-radius: 50%; 
      box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
   }
   
   input:checked + .slider { background-color: #10b981; }
   
   input:checked + .slider:before { transform: translateX(22px); }

/* ==========================================================================
   MÓDULOS ESPECÍFICOS (Predicciones, Posiciones, Unirse)
   ========================================================================== */
/* Tarjetas de Partidos */
.card-match {
    display: flex;
    flex-direction: column;
    padding: 15px;
    margin-bottom: 15px;
}

.card-match.locked {
    background: var(--color-fondo);
    opacity: 0.85;
}

.card-match.locked input {
    background: var(--color-borde);
    color: var(--color-texto-suave);
    cursor: not-allowed;
}

/* Tabla de Posiciones */
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th { background: var(--color-texto-base); color: white; padding: 15px; text-align: left; font-size: 0.9rem; text-transform: uppercase; }
.ranking-table td { padding: 15px; border-bottom: 1px solid var(--color-fondo); font-weight: 500; }
.pos-1 td { background: #fffbeb; font-weight: bold; }
.pos-2 td { background: #f1f5f9; }
.pos-3 td { background: #fff7ed; }

/* Badges y Etiquetas */
.badge-codigo { background: #dcfce3; color: #166534; padding: 4px 8px; border-radius: 6px; font-weight: bold; font-family: monospace; font-size: 1.1rem; letter-spacing: 1px; }
.badge-torneo { background: #e0e7ff; color: #3730a3; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: bold; display: inline-block; margin-right: 5px; margin-bottom: 5px;}
.badge-pos { color: white; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.pos-1 .badge-pos { background: #fbbf24; }
.pos-2 .badge-pos { background: #94a3b8; }
.pos-3 .badge-pos { background: #d97706; }

/* Utilidades */
.hidden { display: none !important; }
.text-center { text-align: center; }
.log-box { background: #1e293b; color: #10b981; font-family: monospace; padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 0.85rem; max-height: 200px; overflow-y: auto; display: none; }

/* ==========================================================================
   BOTONES SOCIALES (OAuth)
   ========================================================================== */
.btn-social {
    background: white;
    color: var(--color-texto-base);
    border: 1px solid var(--color-borde-fuerte);
    padding: 12px;
    border-radius: var(--radio-botones);
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.btn-social:hover {
    background: var(--color-fondo);
    border-color: #94a3b8;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-texto-suave);
    margin: 20px 0;
    font-size: 0.85rem;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--color-borde);
}

.divider:not(:empty)::before { margin-right: .25em; }
.divider:not(:empty)::after { margin-left: .25em; }

/* Estilos del Paywall */
.paywall-box { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 2px dashed #38bdf8; padding: 20px; border-radius: 12px; text-align: center; margin-top: 15px; 
.btn-pay { color: white; border: none; padding: 14px; border-radius: 8px; font-weight: bold; cursor: pointer; width: 100%; font-size: 1.1rem; margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.2s; }
.btn-pay:disabled { opacity: 0.7; cursor: not-allowed; }