/* --- 18 - Statkraft --- */

@font-face {
    font-family: 'StatkraftSans';
    src: url('../fonts/18/StatkraftSansVF.ttf') format('truetype');
    font-weight: 100 900;
    /* Tipografía variable: soporta todos los pesos del 100 al 900 */
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Máscaras de Fondo (Login, Registro, Password y Cabecera)
   ========================================================================== */

/* Login y Registro */
.bg-frontpage {
    background: #02b0f7 !important;
    /* Evita destello guinda/rojo heredado de estilos padre */
}

.mask {
    position: relative !important;
    overflow: hidden;
    background-color: #02b0f7 !important;
    /* Celeste Statkraft de fondo de carga */
    background-image:
        radial-gradient(circle at 25% 50%, rgba(255, 255, 255, 1) 0%, rgba(0, 220, 255, 0.95) 15%, rgba(2, 176, 247, 0.6) 40%, rgba(0, 0, 0, 0) 70%),
        /* Centro blanco incandescente con halos cyan y azul como en Illustrator */
        url("../img/5/18/fondo.jpg");
    background-size:
        100% 100%,
        cover;
    background-repeat:
        no-repeat,
        no-repeat;
    background-position:
        center center,
        center center;
    min-height: 100vh;
    z-index: 1;
}

/* El brillo de circunferencias en mezcla Screen (Detrás del logo) - Proporción y filtro calibrados */
.mask::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* Apilamos 3 capas de la misma imagen de brillo para triplicar la luz base */
    background-image:
        url("../img/5/18/brillo.png"),
        url("../img/5/18/brillo.png"),
        url("../img/5/18/brillo.png") !important;
    background-size:
        auto 83vh,
        auto 83vh,
        auto 83vh !important;
    /* Escalado proporcional al logo de 45vh (ratio 1.85) */
    /* Más grande que el logo para que sobresalga */
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat !important;
    /* Centrado verticalmente al 50%, movido horizontalmente a 25% y con desfase de +3.2vh para simetría exacta */
    background-position:
        calc(25% + 3.2vh) 50%,
        calc(25% + 3.2vh) 50%,
        calc(25% + 3.2vh) 50% !important;
    mix-blend-mode: screen !important;
    /* Quita el fondo negro y fusiona la luz mágicamente */
    /* Filtro optimizado para resaltar los bordes dorados sobre el centro incandescente */
    filter: brightness(4.5) contrast(0.95) saturate(0.5) !important;
    opacity: 1 !important;
    z-index: 1 !important;
    /* Encima del fondo */
    pointer-events: none !important;
}

/* El logo de Statkraft (Delante del brillo) */
.mask::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("../img/5/18/logo_index.png") !important;
    background-size: auto 45vh !important;
    /* Escalado a 45vh de alto para mayor protagonismo */
    background-repeat: no-repeat !important;
    background-position: 25% 50% !important;
    /* Desplazado más a la izquierda (25%) y centrado verticalmente al 50% */
    z-index: 2 !important;
    /* Delante del brillo */
    pointer-events: none !important;
}

/* Asegurar que la tarjeta de login quede siempre por encima de las capas del logo/brillo */
.login-container {
    position: relative !important;
    z-index: 10 !important;
}

/* Recuperar Password y Cambiar Password */
.password .mask,
.cambiarPassword .mask {
    min-height: inherit !important;
    height: 100% !important;
    background-image:
        radial-gradient(circle at 25% 50%, rgba(255, 255, 255, 1) 0%, rgba(0, 220, 255, 0.95) 15%, rgba(2, 176, 247, 0.6) 40%, rgba(0, 0, 0, 0) 70%),
        /* Centro incandescente para uniformidad */
        url("../img/5/18/fondo.jpg");
    background-size:
        100% 100%,
        cover;
    background-repeat:
        no-repeat,
        no-repeat;
    background-position:
        center center,
        center center;
}

.password .mask::before,
.cambiarPassword .mask::before {
    background-size: auto 40vh, auto 40vh, auto 40vh !important;
    /* Escalado proporcional para contenedor de 50vh */
    background-position:
        calc(25% + 3.2vh) 50%,
        calc(25% + 3.2vh) 50%,
        calc(25% + 3.2vh) 50% !important;
}

.password .mask::after,
.cambiarPassword .mask::after {
    background-size: auto 22vh !important;
    /* Escalado de logo para contenedor de 50vh */
    background-position: 25% 50% !important;
    /* Centrado a la izquierda (25%) y verticalmente al 50% */
}

/* Cabecera general with beautiful bottom-up celeste gradient overlay */
.cabecera .mask {
    background-image:
        linear-gradient(to top, rgba(2, 176, 247, 1) 0%, rgba(2, 176, 247, 0.85) 15%, rgba(2, 176, 247, 0.4) 35%, rgba(2, 176, 247, 0) 55%),
        url("../img/5/18/header-bg.jpg") !important;
    background-size: cover, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, center center !important;
    min-height: auto !important;
    height: auto !important;
}

.cabecera .mask::before,
.cabecera .mask::after {
    content: none !important;
    display: none !important;
}

/* Registro - cuando solo hay nombre completo*/
.registro-nombre {
    display: block !important;
}

.registro-nombre-completo {
    display: none !important;
}

/* Registro - nivel de seguridad 0 */
.label-secure-pwd,
.secure-pwd {
    display: none;
}

.r_correo {
    display: none;
}


/* ==========================================================================
   Formulario de Login, Registro y Contraseñas Premium (Statkraft)
   ========================================================================== */

/* Tarjeta Blanca Corporativa con Transparencia Ligera */
.glass-card {
    background: rgba(255, 255, 255, 0.93) !important;
    /* Retornamos la ligera transparencia solicitada */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    border-radius: 40px !important;
    /* Muy redondeado como en el mockup */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    /* Sombra muy sutil */
    padding: 40px 35px !important;
}

/* Título de Bienvenida en Marrón Sólido (Formato Oración) */
.login-title {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.2rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    color: #2c0f00 !important;
    /* Marrón corporativo sólido */
    text-transform: lowercase !important;
    /* Permite forzar formato oración */
    margin-bottom: 30px !important;
    display: block !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
    /* Removemos explícitamente cualquier sombra rojiza heredada */
}

.login-title::first-letter {
    text-transform: uppercase !important;
}

/* Etiquetas del Formulario */
.form-label {
    font-family: 'StatkraftSans', sans-serif !important;
    color: #2c0f00 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
}

/* Entradas de Texto (Gris claro, redondeados, sin borde) */
.form-control.glass-input {
    font-family: 'StatkraftSans', sans-serif !important;
    background: #f4f4f4 !important;
    /* Gris claro sólido */
    border: none !important;
    border-radius: 16px !important;
    /* Entradas pill-shape/redondeadas */
    color: #2c0f00 !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control.glass-input::placeholder {
    color: #b3b3b3 !important;
    /* Gris medio para el placeholder */
    font-weight: 500 !important;
}

.form-control.glass-input:focus {
    background: #eaeaea !important;
    box-shadow: 0 0 0 3px rgba(44, 15, 0, 0.1) !important;
    color: #2c0f00 !important;
    outline: none !important;
}

/* Enlaces y Textos Auxiliares (Completamente en Marrón Corporativo) */
.link-registro {
    color: #2c0f00 !important;
    font-weight: 700 !important;
    font-style: italic !important;
    /* En cursiva según el mockup */
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}

.link-registro:hover {
    color: #2c0f00 !important;
    opacity: 0.8 !important;
    text-decoration: underline !important;
}

.link-forgot-password {
    color: #2c0f00 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
    font-size: 0.95rem !important;
}

.link-forgot-password:hover {
    color: #2c0f00 !important;
    opacity: 0.8 !important;
    text-decoration: underline !important;
}

.login-aux-text {
    font-family: 'StatkraftSans', sans-serif !important;
    color: #2c0f00 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

.msgAutorizo {
    font-family: 'StatkraftSans', sans-serif !important;
    color: #2c0f00 !important;
    opacity: 0.75 !important;
}

.msgError {
    font-family: 'StatkraftSans', sans-serif !important;
    color: #ff3b30 !important;
    font-weight: 600 !important;
}

/* Botón de Acción Principal (Marrón Sólido) */
.btn-login {
    font-family: 'StatkraftSans', sans-serif !important;
    background: #2c0f00 !important;
    /* Marrón corporativo sólido */
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 16px 0 !important;
    box-shadow: 0 4px 12px rgba(44, 15, 0, 0.15) !important;
    /* Sombra muy sutil */
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.btn-login:hover {
    background: #3e1600 !important;
    /* Marrón ligeramente más claro */
    box-shadow: 0 6px 16px rgba(44, 15, 0, 0.2) !important;
    color: #ffffff !important;
}

.btn-login:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 6px rgba(44, 15, 0, 0.15) !important;
}

/* Flecha de Regresar */
.my-2 a .fa-arrow-left {
    color: #2c0f00 !important;
    transition: all 0.2s ease !important;
}

.my-2 a:hover .fa-arrow-left {
    color: #02b0f7 !important;
    transform: translateX(-3px) !important;
}


/* ==========================================================================
   Menú de Navegación (Cabecera y Top Menu) - Statkraft
   ========================================================================== */
.top-menu {
    background: linear-gradient(135deg, #02b0f7 0%, #008cc7 100%) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.navbar-nav .nav-link {
    position: relative !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #2c0f00 !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navbar-nav .nav-link:hover {
    color: #2c0f00 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Indicador de item activo / seleccionado */
.navbar-nav .nav-link.active {
    color: #2c0f00 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Subrayado animado premium (Marrón sobre el celeste) */
.navbar-nav .nav-link::after {
    content: "" !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 12px !important;
    right: 12px !important;
    height: 3px !important;
    background-color: #2c0f00 !important;
    /* Marrón */
    border-radius: 2px !important;
    transform: scaleX(0) !important;
    transform-origin: right !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navbar-nav .nav-link:hover::after {
    transform: scaleX(1) !important;
    transform-origin: left !important;
}

.navbar-nav .nav-link.active::after {
    transform: scaleX(1) !important;
    transform-origin: left !important;
    background-color: #2c0f00 !important;
}

/* Cabecera general */
.cabecera {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: none !important;
    /* Retirar gradiente guinda/marrón heredado de bg-frontpage */
}

.cabecera .mask {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cabecera h2 {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 800 !important;
    color: #2c0f00 !important;
    letter-spacing: -0.5px !important;
}

/* Remover márgenes y paddings del logo para alinearlo al borde inferior */
.cabecera img[src*="logo-copa"] {
    padding: 0 !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    display: block !important;
}

/* Botón de Salir Moderno (Statkraft) */
.top-menu a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 6px 18px !important;
    border-radius: 20px !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    float: right;
}

.top-menu a:hover,
.top-menu a:focus {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #2c0f00 !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px);
}

.top-menu a:active {
    transform: translateY(1px);
}

.top-menu a i {
    font-size: 0.9rem !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.3s ease !important;
}

.top-menu a:hover i {
    transform: translateX(3px) !important;
    color: #2c0f00 !important;
}


/* ==========================================================================
   Pantalla de Mis Pronósticos - Statkraft Premium Design
   ========================================================================== */

/* Contenedores de botones */
.pronosticos .grabar,
.pronosticos .cont-ver {
    width: 100% !important;
    padding: 6px 4px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Botón de Pronóstico Base */
.pronosticos .btn-pron {
    height: 42px !important;
    border-radius: 12px !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    border: none !important;
}

/* Botón Activo (Grabar - Marrón Corporativo) */
.pronosticos .btn_activo {
    background-color: #2c0f00 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(44, 15, 0, 0.25) !important;
    border: none !important;
}

.pronosticos .btn_activo:hover,
.pronosticos .btn_activo:focus {
    background-color: #3e1600 !important;
    box-shadow: 0 6px 15px rgba(44, 15, 0, 0.35) !important;
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* Botón Modificar (Azul Statkraft) */
.pronosticos .btn_no_activo {
    background: linear-gradient(135deg, #02b0f7 0%, #009ce0 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(2, 176, 247, 0.25) !important;
    border: none !important;
}

.pronosticos .btn_no_activo:hover,
.pronosticos .btn_no_activo:focus {
    background: linear-gradient(135deg, #1cc0ff 0%, #02b0f7 100%) !important;
    box-shadow: 0 6px 15px rgba(2, 176, 247, 0.4) !important;
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* Botones "Ver Reporte" con Borde Marrón y fondo blanco */
.pronosticos .ver button,
.pronosticos .ver-reporte button {
    border-radius: 12px !important;
    background-color: #ffffff !important;
    border: 2px solid #2c0f00 !important;
    color: #2c0f00 !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.82rem !important;
    letter-spacing: 0.3px;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 8px rgba(44, 15, 0, 0.06) !important;
    cursor: pointer;
}

.pronosticos .ver button:hover,
.pronosticos .ver button:focus,
.pronosticos .ver-reporte button:hover,
.pronosticos .ver-reporte button:focus {
    background-color: #2c0f00 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(44, 15, 0, 0.25) !important;
    transform: translateY(-1px);
}

.pronosticos .ver button i,
.pronosticos .ver-reporte button i {
    font-size: 0.95rem !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pronosticos .fc-ver-reporte,
.pronosticos .ver-reporte button span {
    color: inherit !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
}

.pronosticos .ver button {
    width: 100% !important;
    height: 42px !important;
}

.pronosticos .ver-reporte button {
    width: auto !important;
    height: 32px !important;
    padding: 0 16px !important;
    vertical-align: middle !important;
    margin: 0 4px !important;
}

/* Casillas de inputs de marcadores */
.pronosticos .editable,
.pronosticos .no_editable {
    width: 48px !important;
    height: 44px !important;
    text-align: center !important;
    border-radius: 12px !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-block !important;
}

.pronosticos .editable {
    border: 2px solid rgba(44, 15, 0, 0.2) !important;
    background: #f4f4f4 !important;
    color: #2c0f00 !important;
}

.pronosticos .editable:focus {
    border-color: #02b0f7 !important;
    box-shadow: 0 0 0 3px rgba(2, 176, 247, 0.25) !important;
    background: #ffffff !important;
    transform: translateY(-1px);
}

.pronosticos .no_editable {
    border: 2px solid rgba(0, 0, 0, 0.05) !important;
    background: rgba(0, 0, 0, 0.03) !important;
    color: #777777 !important;
}

/* Tarjetas de partidos con elevación elástica */
.pronosticos .class-partido {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(44, 15, 0, 0.04) !important;
    border: 1px solid rgba(44, 15, 0, 0.06) !important;
    margin-bottom: 20px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 10px 0 !important;
}

.pronosticos .class-partido:hover {
    box-shadow: 0 12px 30px rgba(44, 15, 0, 0.1) !important;
    transform: translateY(-2px);
}

/* Banda de fecha con borde izquierdo marrón */
.pronosticos .titulo-pronostico {
    background: rgba(44, 15, 0, 0.04) !important;
    color: #2c0f00 !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    padding: 0 20px !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    margin-top: 24px !important;
    margin-bottom: 14px !important;
    border-left: 5px solid #2c0f00 !important;
    text-transform: capitalize;
}

/* Banderas como estampas tridimensionales */
.pronosticos img[src*="banderas"] {
    border-radius: 6px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.25s ease !important;
}

.pronosticos img[src*="banderas"]:hover {
    transform: scale(1.08);
}

/* Cápsula de hora */
.pronosticos .aca-va-hora {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    color: #2c0f00 !important;
    font-size: 0.9rem !important;
    background: rgba(2, 176, 247, 0.08) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    display: inline-block !important;
}


/* ==========================================================================
   Títulos y Tipografía de Pantallas (Inicio, Perfil, etc.) - Statkraft
   ========================================================================== */
h1 {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 800 !important;
    color: #2c0f00 !important;
    font-size: 2.2rem !important;
}

h2 {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 800 !important;
    color: #2c0f00 !important;
}

h3 {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    color: #2c0f00 !important;
    font-size: 1.4rem !important;
}

h4 {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    color: #2c0f00 !important;
    font-size: 1.25rem !important;
}

a {
    color: #2c0f00 !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: #02b0f7 !important;
}

/* ==========================================================================
   Diseño de Círculos de Inicio - Statkraft Premium (Celeste y Centrado)
   ========================================================================== */
.inicio-circulo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
    width: 86px !important;
    height: 86px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: linear-gradient(135deg, #02b0f7 0%, #008cc7 100%) !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 8px 24px rgba(2, 176, 247, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Forzar que todos los círculos de la bienvenida sean celestes Statkraft */
.inicio-circulo.bg-fucsia,
.inicio-circulo.bg-turquesa,
.inicio-circulo.bg-amarillo,
.inicio-circulo.bg-morado {
    background: linear-gradient(135deg, #02b0f7 0%, #008cc7 100%) !important;
}

/* Corregir que los gráficos internos se salgan y desalineen */
.inicio-circulo img {
    max-width: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.3s ease !important;
}

/* Efectos sutiles interactivos en los círculos */
.inicio-circulo:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 12px 30px rgba(2, 176, 247, 0.5) !important;
    border-color: #ffffff !important;
}

.inicio-circulo:hover img {
    transform: scale(1.1) rotate(5deg) !important;
}


/* ==========================================================================
   Botones Generales, Alertas y Campeonato - Statkraft
   ========================================================================== */
.btn-primary {
    background-color: #2c0f00 !important;
    border-color: transparent !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 10px 22px !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(44, 15, 0, 0.2) !important;
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled) {
    background-color: #3e1600 !important;
    box-shadow: 0 6px 20px rgba(44, 15, 0, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.btn-primary:active:not(:disabled) {
    transform: translateY(1px) !important;
}

/* Botón de bienvenida "Ver mi equipo" / "Unirme a un equipo" centrado y destacado con espacio especial */
.container.inicio a.btn.btn-primary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: fit-content !important;
    margin: 20px auto 15px auto !important;
    /* Centrado con un margen superior e inferior generoso */
    padding: 12px 30px !important;
    /* Mayor padding para un look premium */
    border-radius: 30px !important;
    /* Botón píldora moderno */
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background-color: #2c0f00 !important;
    /* Marrón corporativo de Statkraft */
    color: #ffffff !important;
    box-shadow: 0 5px 18px rgba(44, 15, 0, 0.2) !important;
    /* Sombra tridimensional sutil */
    border: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.container.inicio a.btn.btn-primary:hover,
.container.inicio a.btn.btn-primary:focus {
    background-color: #3e1600 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(44, 15, 0, 0.3) !important;
    color: #ffffff !important;
}

.container.inicio a.btn.btn-primary:active {
    transform: translateY(1px) !important;
    box-shadow: 0 3px 10px rgba(44, 15, 0, 0.15) !important;
}

.btn-primary:disabled {
    background-color: #cccccc !important;
    opacity: 0.65 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.btn-secondary {
    background-color: #02b0f7 !important;
    border-color: transparent !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 10px 22px !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(2, 176, 247, 0.2) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #009ce0 !important;
    box-shadow: 0 6px 20px rgba(2, 176, 247, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.btn-secondary:active {
    transform: translateY(1px) !important;
}

/* Alertas de error premium */
.alert-danger,
.alert-warning {
    color: #ff3b30 !important;
    border-color: rgba(255, 59, 48, 0.2) !important;
    background-color: rgba(255, 59, 48, 0.05) !important;
    border-radius: 12px !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 600 !important;
}

/* Botones y Widgets del Módulo Mi Equipo */
.btn-copy-code {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #02b0f7 0%, #008cc7 100%) !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(2, 176, 247, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.btn-copy-code:hover,
.btn-copy-code:focus {
    background: linear-gradient(135deg, #008cc7 0%, #007bb0 100%) !important;
    box-shadow: 0 6px 16px rgba(2, 176, 247, 0.35) !important;
    transform: scale(1.05) translateY(-1px) !important;
}

.btn-copy-code:active {
    transform: scale(0.98) translateY(1px) !important;
}

.btn-delete-team {
    border-radius: 16px !important;
    border: 2px solid #ff3b30 !important;
    color: #ff3b30 !important;
    background: transparent !important;
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    padding: 14px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 10px rgba(255, 59, 48, 0.05) !important;
    cursor: pointer !important;
}

.btn-delete-team:hover,
.btn-delete-team:focus {
    background: #ff3b30 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(255, 59, 48, 0.25) !important;
    transform: translateY(-1px) !important;
}

.btn-delete-team:active {
    transform: translateY(1px) !important;
}

/* Tarjeta del Campeonato */
.campeonato-header-card {
    border-left: 5px solid #2c0f00 !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

.campeonato-header-title {
    font-family: 'StatkraftSans', sans-serif !important;
    color: #2c0f00 !important;
    font-weight: 800 !important;
}

.campeonato-header-text {
    font-family: 'StatkraftSans', sans-serif !important;
    color: #333333 !important;
}


/* ==========================================================================
   Pantalla de Tabla de Posiciones - Statkraft Premium (Strictly CSS)
   ========================================================================== */

/* Contenedor general */
.tabla-posiciones {
    font-family: 'StatkraftSans', sans-serif !important;
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
}

.tabla-posiciones h1 {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 800 !important;
    color: #2c0f00 !important;
    font-size: 2.2rem !important;
    margin-bottom: 5px !important;
}

/* Nota Importante / Advertencia en Rojo (Delgado y pequeño) */
.tabla-posiciones .text-danger {
    color: #ff3b30 !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 6px !important;
    margin-bottom: 15px !important;
    display: inline-block !important;
    width: auto !important;
}

.tabla-posiciones .text-danger::before {
    content: "\f071" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 6px !important;
    font-size: 0.88rem !important;
    display: inline-block !important;
}

/* Listas y Reglas corporativas en celeste */
.tabla-posiciones ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-top: 10px !important;
}

.tabla-posiciones li {
    list-style: none !important;
    list-style-type: none !important;
    position: relative !important;
    padding-left: 22px !important;
    margin-bottom: 6px !important;
    font-size: 0.95rem !important;
    color: #2c0f00 !important;
    font-family: 'StatkraftSans', sans-serif !important;
}

.tabla-posiciones li::before {
    content: "•" !important;
    color: #02b0f7 !important;
    font-weight: bold !important;
    font-size: 1.4rem !important;
    position: absolute !important;
    left: 4px !important;
    top: -3px !important;
}

.tabla-posiciones span {
    font-size: 1rem !important;
    color: #2c0f00 !important;
    font-weight: 600 !important;
    font-family: 'StatkraftSans', sans-serif !important;
}

/* Campo de Búsqueda Corporativo */
.tabla-posiciones .input-group {
    box-shadow: 0 4px 20px rgba(44, 15, 0, 0.04) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1.5px solid rgba(44, 15, 0, 0.1) !important;
    background: #ffffff !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

.tabla-posiciones #text-buscar {
    border: none !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    color: #2c0f00 !important;
    font-family: 'StatkraftSans', sans-serif !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

.tabla-posiciones #addon-wrapping {
    background: linear-gradient(135deg, #02b0f7 0%, #008cc7 100%) !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
}

/* Tarjeta contenedora de la Tabla */
.tabla-posiciones #d_contenido {
    background: #ffffff !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(44, 15, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(44, 15, 0, 0.03) !important;
    padding: 24px !important;
    margin-top: 15px !important;
    margin-bottom: 40px !important;
}

/* Tabla Estilo Carta */
.tabla-posiciones .t_puntajes {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Cabecera */
.tabla-posiciones .t_puntajes thead tr {
    background: rgba(44, 15, 0, 0.04) !important;
}

.tabla-posiciones .t_puntajes th {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 800 !important;
    color: #2c0f00 !important;
    padding: 16px 12px !important;
    border: none !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    vertical-align: middle !important;
}

.tabla-posiciones .t_puntajes th:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.tabla-posiciones .t_puntajes th:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Filas de la Tabla */
.tabla-posiciones .t_puntajes td {
    font-family: 'StatkraftSans', sans-serif !important;
    padding: 16px 12px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(44, 15, 0, 0.08) !important;
    color: #2c0f00 !important;
    font-size: 0.95rem !important;
    background: transparent !important;
}

.tabla-posiciones .t_puntajes tbody tr {
    transition: background-color 0.2s ease !important;
}

.tabla-posiciones .t_puntajes tbody tr:hover {
    background-color: rgba(2, 176, 247, 0.02) !important;
}

/* Primera columna (N°) */
.tabla-posiciones .t_puntajes td:first-child {
    font-weight: 800 !important;
    color: #888888 !important;
}

/* Segunda columna - Solo en Equipos se ocultan las imágenes y se renderizan los checks */
.tabla-posiciones #t_puntajes_equipos td:nth-child(2) img {
    display: none !important;
}

/* Renderizar check verde premium para equipo completo */
.tabla-posiciones #t_puntajes_equipos td:nth-child(2):has(img:not([src*="vacio"]))::after {
    content: "\f058" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #28a745 !important;
    font-size: 1.35rem !important;
    display: inline-block !important;
    filter: drop-shadow(0 2px 4px rgba(40, 167, 69, 0.15)) !important;
}

/* Renderizar círculo gris limpio para equipo incompleto */
.tabla-posiciones #t_puntajes_equipos td:nth-child(2):has(img[src*="vacio"])::after {
    content: "\f111" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
    color: #ccc !important;
    font-size: 1.15rem !important;
    display: inline-block !important;
    opacity: 0.7 !important;
}

/* Segunda columna - En tabla individual se redimensionan los avatares para que queden finos */
.tabla-posiciones #t_puntajes_individual td:nth-child(2) img,
.tabla-posiciones #t_puntajes td:nth-child(2) img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Tercera columna (Nombre de Equipo / Usuario) */
.tabla-posiciones .t_puntajes td:nth-child(3) {
    font-weight: 700 !important;
    color: #2c0f00 !important;
    text-align: left !important;
    padding-left: 20px !important;
}

/* Inyectar icono de grupo para tabla de equipos */
.tabla-posiciones #t_puntajes_equipos td:nth-child(3)::before {
    content: "\f0c0" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #02b0f7 !important;
    margin-right: 10px !important;
    font-size: 0.9rem !important;
    display: inline-block !important;
}

/* Inyectar icono de usuario para tabla individual */
.tabla-posiciones #t_puntajes_individual td:nth-child(3)::before,
.tabla-posiciones #t_puntajes td:nth-child(3)::before {
    content: "\f007" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #02b0f7 !important;
    margin-right: 10px !important;
    font-size: 0.9rem !important;
    display: inline-block !important;
}

/* Columnas de Puntos Intermedios */
.tabla-posiciones .t_puntajes td.puntaje {
    font-weight: 700 !important;
    color: #2c0f00 !important;
}

/* Columna de Puntos Total (Resaltada en Celeste) */
.tabla-posiciones .t_puntajes td.total {
    font-weight: 900 !important;
    color: #2c0f00 !important;
    background-color: rgba(2, 176, 247, 0.08) !important;
    border-left: 1px solid rgba(2, 176, 247, 0.1) !important;
    border-right: 1px solid rgba(2, 176, 247, 0.1) !important;
}


/* ==========================================================================
   Ajustes Responsivos para Móviles (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Evitar cualquier scroll horizontal accidental en la página */
    html, body {
        overflow-x: hidden !important;
    }

    .mask {
        background-image:
            radial-gradient(circle at center 27vh, rgba(0, 220, 255, 0.95) 0%, rgba(2, 176, 247, 0.6) 30%, rgba(0, 0, 0, 0) 65%),
            /* Retroiluminación de alta intensidad */
            url("../img/5/18/fondo.jpg") !important;
        background-size:
            100% 100%,
            cover !important;
        background-repeat:
            no-repeat,
            no-repeat !important;
        background-position:
            center center,
            center center !important;
    }

    .password .mask,
    .cambiarPassword .mask {
        background-image:
            radial-gradient(circle at center 25vh, rgba(0, 220, 255, 0.95) 0%, rgba(2, 176, 247, 0.6) 30%, rgba(0, 0, 0, 0) 65%),
            /* Retroiluminación de alta intensidad */
            url("../img/5/18/fondo.jpg") !important;
        background-size:
            100% 100%,
            cover !important;
        background-repeat:
            no-repeat,
            no-repeat !important;
        background-position:
            center center,
            center center !important;
    }

    .mask::before {
        background-size: auto 52vh, auto 52vh, auto 52vh !important;
        background-position:
            calc(50% + 2vh) 0vh,
            calc(50% + 2vh) 0vh,
            calc(50% + 2vh) 0vh !important;
    }

    .mask::after {
        background-size: auto 22vh !important;
        background-position: center 5vh !important;
    }

    /* Posicionamiento y dimensiones de la tarjeta (2/3 de la pantalla) */
    .login-container {
        margin-top: 32vh !important;
        height: 66vh !important;
        padding-bottom: 2vh !important;
        z-index: 10 !important;
    }

    .login-container .glass-card {
        height: 100% !important;
        overflow-y: auto !important;
        border-radius: 40px !important;
        padding: 3vh 20px !important;
        box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.05) !important;
    }

    /* Ajustes responsivos de inputs y tipografía para evitar scroll innecesario */
    .login-container .login-title {
        font-size: 1.6rem !important;
        margin-bottom: 1.2vh !important;
    }

    .login-container .mb-4 {
        margin-bottom: 3.2vh !important;
    }

    .login-container .form-label {
        margin-bottom: 1.2vh !important;
        font-size: 0.88rem !important;
    }

    .login-container .form-control.glass-input {
        padding: 1.2vh 18px !important;
        font-size: 0.9rem !important;
    }

    .login-container .btn-login {
        padding: 1.2vh 0 !important;
        font-size: 0.95rem !important;
    }

    .login-container .mt-4 {
        margin-top: 1.8vh !important;
    }

    .login-container .mt-3 {
        margin-top: 1.5vh !important;
    }

    /* Forzar alineación desde el tope para precisión matemática */
    .mask .row.vh-100 {
        align-items: flex-start !important;
    }

    .password .mask::before,
    .cambiarPassword .mask::before {
        background-size: auto 45vh, auto 45vh, auto 45vh !important;
        background-position:
            calc(50% + 1.7vh) 2vh,
            calc(50% + 1.7vh) 2vh,
            calc(50% + 1.7vh) 2vh !important;
    }

    .password .mask::after,
    .cambiarPassword .mask::after {
        background-size: auto 26vh !important;
        background-position: center 12vh !important;
    }

    /* Cabecera general - permitir desborde para el menú colapsable absoluto */
    .cabecera .mask {
        background-image:
            linear-gradient(to top, rgba(2, 176, 247, 1) 0%, rgba(2, 176, 247, 0.85) 15%, rgba(2, 176, 247, 0.4) 35%, rgba(2, 176, 247, 0) 55%),
            url("../img/5/18/header-bg.jpg") !important;
        background-size: cover, cover !important;
        background-repeat: no-repeat, no-repeat !important;
        background-position: center center, center center !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        /* CRITICAL: Permitir que el dropdown absoluto desborde sin cortarse */
    }

    /* Fila de la cabecera en móvil: alinear logo a la izquierda y menú a la derecha */
    .cabecera .row.mask {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 16px !important;
        margin: 0 !important;
        height: 80px !important;
        /* Altura de la cabecera del banner */
    }

    /* Columna del Logo (originalmente col-2 order-5) */
    .cabecera .row.mask>.col-2.order-5 {
        order: 1 !important;
        /* Mover a la izquierda en móvil */
        width: 50% !important;
        /* Darle la mitad de la pantalla */
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* Logo de la Copa - Muy grande, legible y con sombra sutil de alta calidad */
    .cabecera img[src*="logo-copa"] {
        height: 60px !important;
        /* Escalado a 60px de altura para un impacto visual masivo */
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
        filter: drop-shadow(0 2px 5px rgba(44, 15, 0, 0.18)) !important;
    }

    /* Columna del Menú/Navbar (originalmente col-9 order-1) */
    .cabecera .row.mask>.col-9.order-1 {
        order: 2 !important;
        /* Mover a la derecha en móvil */
        width: 50% !important;
        /* Darle la otra mitad de la pantalla */
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ajustar los contenedores bootstrap internos para que la alineación sea perfecta a la derecha y remover contextos de posicionamiento */
    .cabecera .row.mask>.col-9.order-1,
    .cabecera .row.mask>.col-9.order-1>.row,
    .cabecera .row.mask>.col-9.order-1 .col-10,
    .cabecera .row.mask>.col-9.order-1 .navbar,
    .cabecera .row.mask>.col-9.order-1 .container-fluid {
        position: static !important;
        /* CRITICAL: Remover contextos relativos para que el dropdown absoluto se alinee con .mask y use el ancho completo */
    }

    .cabecera .row.mask>.col-9.order-1>.row,
    .cabecera .row.mask>.col-9.order-1 .col-10,
    .cabecera .row.mask>.col-9.order-1 .navbar,
    .cabecera .row.mask>.col-9.order-1 .container-fluid {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Botón Toggler del Navbar (Hamburger) - Moderno, visible y con contraste perfecto */
    .cabecera .navbar-toggler {
        border: 2px solid #2c0f00 !important;
        /* Borde marrón sólido corporativo de Statkraft */
        border-radius: 12px !important;
        padding: 6px 10px !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        /* Fondo claro para que resalte al máximo */
        box-shadow: 0 4px 10px rgba(44, 15, 0, 0.12) !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cabecera .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(44, 15, 0, 0.25) !important;
        outline: none !important;
    }

    .cabecera .navbar-toggler:active {
        transform: scale(0.95) !important;
    }

    /* Icono del hamburger con barritas gruesas marrón oscuro sólido para máxima visibilidad */
    .cabecera .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232c0f00' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        opacity: 1 !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* Menú desplegable absoluto - Ocupa el 100% de la pantalla y flota sobre el contenido */
    .cabecera .navbar-collapse {
        position: absolute !important;
        top: 80px !important;
        /* Posicionado exactamente al borde inferior de la cabecera de 80px */
        left: 0 !important;
        width: 100% !important;
        /* Ocupa el 100% real del ancho del header */
        background: linear-gradient(135deg, #02b0f7 0%, #008cc7 100%) !important;
        /* Fondo celeste corporativo */
        z-index: 9999 !important;
        padding: 15px 24px !important;
        border-bottom: 3px solid #2c0f00 !important;
        /* Línea de cierre marrón */
        border-top: 1.5px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 10px 25px rgba(44, 15, 0, 0.18) !important;
        margin: 0 !important;
    }

    /* Visibilidad responsiva de clases */
    .big {
        display: none !important;
    }

    .movil {
        display: block !important;
    }

    /* Ajustes para el Menú de Navegación en móviles */
    .navbar-collapse .nav-link {
        padding: 10px 15px !important;
        border-radius: 6px !important;
        margin: 4px 0 !important;
        font-size: 0.95rem !important;
        color: #2c0f00 !important;
        opacity: 0.8 !important;
    }

    .navbar-collapse .nav-link::after {
        display: none !important;
        /* Desactivar la línea horizontal en móviles */
    }

    .navbar-collapse .nav-link:hover {
        background-color: rgba(44, 15, 0, 0.05) !important;
        color: #2c0f00 !important;
        opacity: 1 !important;
    }

    .navbar-collapse .nav-link.active {
        background-color: rgba(44, 15, 0, 0.1) !important;
        color: #2c0f00 !important;
        /* Marrón para destacar en el colapsable */
        border-left: 3px solid #2c0f00 !important;
        border-radius: 0 6px 6px 0 !important;
        padding-left: 12px !important;
        opacity: 1 !important;
    }

    /* Top Menu y Botón Salir en móviles */
    .top-menu {
        padding: 6px 10px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .top-menu .row {
        margin: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .top-menu .col-3,
    .top-menu .col-2 {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
    }

    .top-menu .offset-7 {
        margin-left: 0 !important;
    }

    .top-menu img {
        max-height: 48px !important;
        padding: 4px 0 !important;
    }

    .top-menu a {
        padding: 5px 12px !important;
        font-size: 0.82rem !important;
    }

    /* Ajustes específicos para el listado de pronósticos en móviles */
    .pronosticos .editable,
    .pronosticos .no_editable {
        width: 42px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
        border-radius: 8px !important;
    }

    .pronosticos .titulo-pronostico {
        font-size: 0.88rem !important;
        padding: 0 15px !important;
        margin-top: 16px !important;
        margin-bottom: 10px !important;
        min-height: 40px !important;
    }

    .pronosticos .class-partido {
        border-radius: 16px !important;
        padding: 8px 0 !important;
    }

    /* Pantalla de Inicio / Bienvenida en móviles */
    .container.inicio {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-top: 1rem !important;
        padding-bottom: 50px !important;
        /* Margen/espacio inferior de seguridad para evitar cortes */
    }

    .inicio h1 {
        font-size: 1.8rem !important;
        text-align: center !important;
    }

    .inicio .textoBienvenida_1 {
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        padding: 0 8px !important;
    }

    .inicio .inicio-circulo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 72px !important;
        height: 72px !important;
        padding: 0 !important;
        margin: 12px auto 8px auto !important;
        border-width: 2.5px !important;
    }

    .inicio .inicio-circulo img {
        max-width: 38px !important;
        max-height: 38px !important;
        width: auto !important;
        height: auto !important;
    }

    .inicio h3 {
        font-size: 1.2rem !important;
        text-align: center !important;
        margin-top: 6px !important;
        margin-bottom: 4px !important;
    }

    .inicio span {
        display: block !important;
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    /* Pantalla Perfil en móviles - Sistema de Spacing Premium */
    .container.perfil {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 40px !important;
        /* Espacio extra al final de la página */
    }

    .perfil h1 {
        font-size: 1.6rem !important;
        margin-top: 25px !important;
        margin-bottom: 20px !important;
        color: #2c0f00 !important;
    }

    /* Margen inferior uniforme para separar cada fila del formulario y evitar empastes */
    .perfil form .row,
    .perfil #formPassword .row {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }

    .perfil .form-control {
        border-radius: 12px !important;
        /* Bordes más redondeados modernos */
        padding: 12px 14px !important;
        /* Más alto para facilitar el toque táctil */
        border: 1.5px solid rgba(44, 15, 0, 0.15) !important;
        font-size: 0.95rem !important;
        background-color: #ffffff !important;
        color: #2c0f00 !important;
    }

    .perfil .form-control:disabled {
        background-color: #f4f4f4 !important;
        /* Color gris suave premium para campos bloqueados */
        border-color: rgba(44, 15, 0, 0.08) !important;
        color: #888888 !important;
    }

    .perfil .form-control:focus {
        border-color: #02b0f7 !important;
        box-shadow: 0 0 0 3px rgba(2, 176, 247, 0.2) !important;
        background-color: #ffffff !important;
    }

    .perfil label {
        color: #2c0f00 !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        /* Etiquetas en negrita de alta visibilidad */
        margin-top: 0 !important;
        margin-bottom: 6px !important;
        /* Margen para empujar el input respectivo hacia abajo */
        display: block !important;
    }

    /* Empujar toda la columna del Avatar hacia abajo en móviles para separarla del botón Grabar */
    .perfil .col-12.col-md-5.text-center {
        margin-top: 35px !important;
        padding-top: 15px !important;
    }

    /* Contenedor de la Imagen de Avatar Preview */
    .perfil #img-avatar {
        max-width: 140px !important;
        height: auto !important;
        border-radius: 24px !important;
        box-shadow: 0 8px 24px rgba(44, 15, 0, 0.08) !important;
        margin-bottom: 22px !important;
        /* CRITICAL: Espacio generoso para separar del botón Elegir Avatar */
        border: 2px dashed rgba(44, 15, 0, 0.15) !important;
        background: #ffffff !important;
        padding: 5px !important;
        transition: transform 0.25s ease !important;
    }

    .perfil #img-avatar:hover {
        transform: scale(1.05) !important;
    }

    /* Divider de sección */
    .perfil .divider {
        margin-top: 35px !important;
        margin-bottom: 30px !important;
        border-top: 1.5px dashed rgba(44, 15, 0, 0.15) !important;
    }

    /* Puntos Extra en móviles */
    .puntosextra {
        padding: 12px 8px !important;
    }

    .puntosextra h1 {
        font-size: 1.7rem !important;
        margin-top: 12px !important;
    }

    .puntosextra select.form-select {
        width: 90% !important;
        max-width: 280px !important;
        font-size: 0.95rem !important;
    }

    .puntosextra .btn-grabar {
        width: 85% !important;
        max-width: 250px !important;
    }

    .puntosextra .tabla-general {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
    }

    /* Pestañas personalizadas en móviles */
    .tabla-posiciones .custom-pills {
        padding: 3px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto 15px auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }

    .tabla-posiciones .custom-pills li {
        padding-left: 0 !important;
        margin-bottom: 0 !important;
        display: inline-block !important;
    }

    .tabla-posiciones .custom-pills li::before {
        content: none !important;
    }

    .tabla-posiciones .custom-pills .custom-pill-link {
        font-weight: normal !important;
        font-size: 0.62rem !important;
        padding: 4px 8px !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
    }

    .tabla-posiciones .custom-pills .custom-pill-link i {
        display: none !important;
    }

    /* --- Tabla de Posiciones en Móviles (Preferencias de Diseño) --- */
    .tabla-posiciones {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Evitar que los textos largos en span y advertencias hereden inline-block de escritorio y se centren desbordando la pantalla */
    .tabla-posiciones span {
        display: block !important;
        width: 100% !important;
        font-size: 0.78rem !important;
    }

    .tabla-posiciones h1 {
        font-size: 1.4rem !important;
    }

    .tabla-posiciones .text-danger {
        display: block !important;
        width: 100% !important;
        font-size: 0.78rem !important;
    }

    .tabla-posiciones li {
        font-size: 0.78rem !important;
    }

    .tabla-posiciones li::before {
        font-size: 1.1rem !important;
        top: -1px !important;
    }

    /* Permitir que la tabla se expanda más hacia los lados que el texto superior */
    .tabla-posiciones #d_contenido {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    /* Forzar diseño de tabla fijo para evitar desbordamientos y distribuir columnas proporcionalmente */
    .tabla-posiciones .t_puntajes {
        table-layout: fixed !important;
        width: 100% !important;
    }

    .tabla-posiciones .t_puntajes th:nth-child(1),
    .tabla-posiciones .t_puntajes td:nth-child(1) {
        width: 28px !important;
    }

    .tabla-posiciones .t_puntajes th:nth-child(3),
    .tabla-posiciones .t_puntajes td:nth-child(3) {
        width: auto !important;
    }

    /* Asegurar que las pestañas contengan el desbordamiento de la tabla si fuera necesario */
    .tabla-posiciones .tab-content,
    .tabla-posiciones .tab-pane {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Ocultar avatares, columnas vacías y la columna de Puntos Extra (columna 5) en móvil */
    .tabla-posiciones .t_puntajes th:nth-child(2),
    .tabla-posiciones .t_puntajes td:nth-child(2),
    .tabla-posiciones .t_puntajes th:nth-child(4),
    .tabla-posiciones .t_puntajes td:nth-child(4),
    .tabla-posiciones .t_puntajes th:nth-child(5),
    .tabla-posiciones .t_puntajes td:nth-child(5) {
        display: none !important;
    }

    /* Reducir padding y tamaño de fuente para que quepa en el ancho */
    .tabla-posiciones .t_puntajes th,
    .tabla-posiciones .t_puntajes td {
        padding: 4px 2px !important;
        font-size: 0.7rem !important;
    }

    /* Reducir fuente y padding específicos de la cabecera de la tabla */
    .tabla-posiciones .t_puntajes thead th {
        font-size: 0.65rem !important;
        padding: 4px 2px !important;
    }

    .tabla-posiciones .t_puntajes td:nth-child(3) {
        padding-left: 4px !important;
        font-size: 0.65rem !important;
    }

    /* Ocultar iconos de grupo/usuario en móvil para ahorrar espacio horizontal */
    .tabla-posiciones .t_puntajes td:nth-child(3)::before {
        display: none !important;
    }

    /* Reducir el ancho de las columnas de puntajes (G/E, Score, Total) en móvil */
    .tabla-posiciones .t_puntajes th:nth-child(6),
    .tabla-posiciones .t_puntajes td:nth-child(6),
    .tabla-posiciones .t_puntajes th:nth-child(7),
    .tabla-posiciones .t_puntajes td:nth-child(7),
    .tabla-posiciones .t_puntajes th:nth-child(8),
    .tabla-posiciones .t_puntajes td:nth-child(8) {
        width: 52px !important;
        max-width: 52px !important;
        min-width: 52px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        font-size: 0.65rem !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    /* --- Modal Detalle de Miembros del Grupo en Móviles --- */
    /* Reducir padding de la tarjeta modal en móviles */
    .style-modal-grupo .modal-header {
        padding: 12px 16px !important;
    }

    .style-modal-grupo .modal-body {
        padding: 12px !important;
    }

    /* Ocultar columnas detalladas en cabeceras y celdas estándar */
    #t_miembros_grupo th:nth-child(4),
    #t_miembros_grupo tbody tr:not(.fila-total) td:nth-child(4),
    #t_miembros_grupo th:nth-child(5),
    #t_miembros_grupo tbody tr:not(.fila-total) td:nth-child(5),
    #t_miembros_grupo th:nth-child(6),
    #t_miembros_grupo tbody tr:not(.fila-total) td:nth-child(6) {
        display: none !important;
    }

    /* Ocultar celdas de sumatoria de las columnas detalladas en la fila de total */
    #t_miembros_grupo tr.fila-total td:nth-child(2),
    #t_miembros_grupo tr.fila-total td:nth-child(3),
    #t_miembros_grupo tr.fila-total td:nth-child(4) {
        display: none !important;
    }

    /* Ajustar espaciado y fuentes de la tabla del modal */
    #t_miembros_grupo th,
    #t_miembros_grupo td {
        padding: 6px 2px !important;
        font-size: 0.7rem !important;
    }

    /* Reducir el tamaño de los avatares en la tabla del modal */
    #t_miembros_grupo td img {
        width: 26px !important;
        height: 26px !important;
    }
}

/* ==========================================================================
   Estilos de Pestañas Premium (General / Escritorio)
   ========================================================================== */
.tabla-posiciones .custom-pills {
    background-color: rgba(44, 15, 0, 0.05) !important;
    padding: 6px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    border: 1.5px solid rgba(44, 15, 0, 0.08) !important;
}

.tabla-posiciones .custom-pills .nav-item {
    margin: 0 4px !important;
}

.tabla-posiciones .custom-pills .custom-pill-link {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #2c0f00 !important;
    border-radius: 14px !important;
    padding: 10px 24px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    background: transparent !important;
    opacity: 0.75 !important;
}

.tabla-posiciones .custom-pills .custom-pill-link:hover {
    color: #2c0f00 !important;
    background-color: rgba(44, 15, 0, 0.08) !important;
    opacity: 1 !important;
}

.tabla-posiciones .custom-pills .custom-pill-link.active {
    background-color: #2c0f00 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(44, 15, 0, 0.2) !important;
    opacity: 1 !important;
}

/* Animaciones suaves para la alternancia de pestañas */
.tab-content>.tab-pane {
    transition: opacity 0.2s linear, transform 0.2s ease-out !important;
}

.tab-content>.tab-pane.fade {
    transform: translateY(8px) !important;
}

.tab-content>.tab-pane.fade.show {
    transform: translateY(0) !important;
}

/* Resguardo de seguridad de visibilidad: ocultar permanentemente paneles inactivos */
.tab-content>.tab-pane:not(.active) {
    display: none !important;
}

/* ==========================================================================
   Estilos de Enlace de Grupo Interactivo y Modal Detalle de Grupo
   ========================================================================== */
.tabla-posiciones .btn-ver-grupo {
    color: #2c0f00 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    display: inline-block !important;
}

.tabla-posiciones .btn-ver-grupo:hover {
    color: #02b0f7 !important;
    text-decoration: underline !important;
    transform: translateX(2px);
}

/* Modal Detalle de Grupo - Premium Statkraft Design */
.style-modal-grupo {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 28px !important;
    border: 1.5px solid rgba(44, 15, 0, 0.1) !important;
    box-shadow: 0 15px 40px rgba(44, 15, 0, 0.15) !important;
    overflow: hidden;
}

.style-modal-grupo .modal-header {
    background: linear-gradient(135deg, #02b0f7 0%, #008cc7 100%) !important;
    padding: 20px 28px !important;
    border-bottom: 2px solid #2c0f00 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.style-modal-grupo .modal-title {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    /* White text on blue background */
    font-size: 1.25rem !important;
    text-shadow: 0 1px 3px rgba(44, 15, 0, 0.2) !important;
}

.style-modal-grupo .modal-title #lblNombreGrupo {
    color: #2c0f00 !important;
    /* Dark brown group name for readability and high contrast */
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.style-modal-grupo .btn-close-white {
    filter: invert(1) !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s ease !important;
}

.style-modal-grupo .btn-close-white:hover {
    opacity: 1 !important;
}

.style-modal-grupo .modal-body {
    padding: 28px !important;
    background-color: #ffffff !important;
}

/* Tabla interna del Modal */
.table-dark-custom {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
}

.table-dark-custom thead tr {
    background: rgba(44, 15, 0, 0.04) !important;
}

.table-dark-custom th {
    font-family: 'StatkraftSans', sans-serif !important;
    font-weight: 800 !important;
    color: #2c0f00 !important;
    padding: 14px 10px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    border: none !important;
    vertical-align: middle !important;
}

.table-dark-custom th:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.table-dark-custom th:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.table-dark-custom td {
    font-family: 'StatkraftSans', sans-serif !important;
    padding: 14px 10px !important;
    color: #2c0f00 !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid rgba(44, 15, 0, 0.08) !important;
    vertical-align: middle !important;
}

.table-dark-custom td img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid rgba(44, 15, 0, 0.1) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

.table-dark-custom td:first-child {
    font-weight: 800 !important;
    color: #888888 !important;
}

.table-dark-custom td:nth-child(3) {
    color: #2c0f00 !important;
}

/* Fila de Suma / Total */
.table-dark-custom tr.fila-total td {
    font-weight: 800 !important;
    background: rgba(2, 176, 247, 0.06) !important;
    color: #2c0f00 !important;
    border-top: 1.5px solid #2c0f00 !important;
    border-bottom: 2px solid #2c0f00 !important;
}

.table-dark-custom tr.fila-total td:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.table-dark-custom tr.fila-total td:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    background: rgba(2, 176, 247, 0.12) !important;
}

/* Utilidades / Sobreescrituras de Color */
.text-primary {
    color: #02b0f7 !important;
}