/* CSS Document */

/*div, nav, a, span, tr, th, td {border: 1px solid #000000; }*/
                
/*DECLARACION DE VARIABLES PARA SU FUTURO USO: color: var(--red);*/
:root{
    
    /*COLORES LOGO: NARANJA #F79663 - VERDE #00ACB3*/
    
    --font-family-principal: 'Arial', 'Tahoma', 'Calibri' ;
    
    --color-fondo: #FFFFFF;
    --color-letra: #000000;
    --color-fondo-resaltado: #BFE2DE;
    --color-letra-naranja: #F79663;
        
    --letra-xs: 8px;
    --letra-s: 10px;
    --letra-m: 12px;
    --letra-l: 14px;
    --letra-xl: 16px;
    --letra-xxl: 18px;
    --letra-xxxl: 20px;
    
    --color-enlaces-hover: #000000;
    
    --color-fondo-drop: #E5E7E9;
    
    --color-letra-pregunta-semana: #F79663;
    --color-letra-pregunta-semana-hover: #00ACB3;
    
    --color-fondo-pie: #EBEDEF;
    --color-letra-pie: #000000;
    --color-letra-pie-titulos: #85929E;
    --color-letra-pie-enlaces-hover: #F79663;
    
    --color-fondo-cookies: rgba(1, 1, 1, 0.8);
    --color-letra-cookies: #FFFFFF;
    --color-ok-cookies: #F79663;
    --color-ok-cookies-hover: #00ACB3;
    
    --color-fondo-loader-pagina: rgba(255, 255, 255, 0.8);
    
    --color-fondo-formulario: #EBEDEF;
    --color-letra-formulario: #000000;
    
    --color-letra-boton: #000000;
    --color-boton-aceptar: #00ACB3;
    --color-boton-cancelar: #F79663;
    --color-boton-aceptar-hover: #02D6DE;
    --color-boton-cancelar-hover: #FCB793;
    
    --color-fondo-boton-secciones-consultas: linear-gradient(135deg, #FFFFFF 0%, #f79663 100%);
    --color-letra-boton-secciones-consultas: #000000;
    
    --boton-sin-pulsar: #F4D3C3;
    --boton-pulsado: #CAEFEE;
    --boton-fijo: #E8DAEF;
    
    
    /*TABLAS*/
    --letra-tablas: 13px;
    --letra-tablas-modal: 12px;
    --color-fondo-filas-impares: #D6DBDF;
    --color-fondo-fila-seleccionada: #BDBCBC;
    --color-fondo-fila-hover: #BDBCBC;
    --color-fondo-columna-hover: #BDBCBC;
    --color-fondo-filtro-lleno: #F79663;
    --letra-tablas-botones: 13px;
    --letra-tablas-filtro-columna: 11px;
    --color-fondo-suma-columna: #D6DBDF;
    --letra-tablas-titulo: 15px;
    --letra-tablas-nota: 13px;
    
    /*------------------*/
    
    /*COLORES TABLAS*/
    
    --rojo: #E74C3C;
    --verde: #27AE60;
    --amarillo: #F7DC6F;
    
    --amarillas: #D4AC0D;
    --rojas: #E74C3C;
    
    --victoria: #7DCEA0;
    --empate: #F7DC6F;
    --derrota: #F1948A;
    
    --champion1: #A569BD;
    --champion2: #D2B4DE;
    --uefa1: #52BE80;
    --uefa2: #A9DFBF;
    --ferias: #52BE80;
    --confecopa: #9C640C;
    --intertoto: #9C640C;
    --copa-liga-espana: #9C640C;
    --recopa: #5DADE2;
    --super-copa-europa: #21618C;
    --copa-latina: #21618C;
    --intercontinental: #F4D03F;
    --mundial-clubs: #F4D03F;
    --copa-espana: #E74C3C;
    --super-copa-espana: #797D7F;
    
        
    --ascenso: #A569BD;
    --promocionascenso1: #52BE80;
    --promocionascenso2: #A9DFBF;
    --promociondescenso1: #F5B7B1;
    --promociondescenso2: #EC7063;
    --descenso: #CB4335;
    --descenso-admin: #F5B041;
    
    
    /*-----------------*/
    
}
/*------------------------*/

/*BARRAS DESPLAZAMIENTO VENTANA*/
::-webkit-scrollbar { width: 10px; height: 10px; } /*BARRA COMPLETA*/
::-webkit-scrollbar-thumb { background: #34495E; border-radius: 10px; } /*DESLIZADOR*/
::-webkit-scrollbar-track { background: #B2BABB; } /*CONTENEDOR*/
/*------------------------*/

/*ANIMACIONES*/
@keyframes animacionPreguntaSemana {
  0%{ transform: translate(0); }
  10%{ transform: translate(-2px,-2px); }
  20%{ transform: translate(2px,-2px); }
  30%{ transform: translate(-2px,2px); }
  40%{ transform: translate(2px,2px); }
  50%{ transform: translate(-2px,-2px); }
  60%{ transform: translate(2px,-2px); }
  70%{ transform: translate(-2px,2px); }
  80%{ transform: translate(-2px,-2px); }
  90%{ transform: translate(2px,-2px); }
  100%{ transform: translate(0); }
}
/*------------------------*/
        
/*EXTRAS A BOOTSTRAP*/
.position-fixed { position: fixed!important; }
.float-right { float: right!important; }
.sin-padding-x { padding-left: 0!important; padding-right: 0!important; }
.texto-importante { font-weight: bold;}
.texto-plano { 
    font-weight:normal!important; 
    text-decoration: none!important; 
    font-style: normal!important; 
}
.horitzontal {
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.letra-xs{ font-size: var(--letra-xs); }
.letra-s{ font-size: var(--letra-s); }
.letra-m{ font-size: var(--letra-m); }
.letra-l{ font-size: var(--letra-l); }
.letra-xl{ font-size: var(--letra-xl); }
.letra-xxl{ font-size: var(--letra-xxl); }
.letra-xxxl{ font-size: var(--letra-xxxl); }
.subrayada{text-decoration: underline;}
.cursiva{font-style: italic;}
.texto-rojo{color: var(--rojo);}
.texto-verde{color: var(--verde);}
.texto-naranja{color: var(--color-letra-naranja);}
.tarjetas-amarillas{ color: var(--amarillas)}
.tarjetas-rojas{ color: var(--rojas)}
.color-fondo-resaltado{background: var(--color-fondo-resaltado);}
.border-normal{ border: 1px solid; border-radius: 4px; }
.border-radius{ border: 1px solid; border-radius: 24px; }
.click:hover { cursor: pointer; }
.borde-sin-borde-redondo { padding: 1px !important; border-radius: 6px !important; }
.fondo-victoria { background-color: var(--victoria); }
.fondo-empate { background-color: var(--empate); }
.fondo-derrota { background-color: var(--derrota); }
.fondo-champion { background-color: var(--champion2); }
.fondo-uefa { background-color: var(--uefa2); }
.fondo-descenso { background-color: var(--promociondescenso1); }
.boton-pulsado { background-color: var(--boton-pulsado); }
.boton-sin-pulsar { background-color: var(--boton-sin-pulsar); }
.boton-fijo { background-color: var(--boton-fijo); }

/*------------------------*/
        
/*ETIQUETAS GENERALES*/        
body {
    font-family: var(--font-family-principal);
    color: var(--color-letra);
    background: var(--color-fondo);
}
.div-principal {
    max-width: 1100px;
    position: relative;
}
a{
    text-decoration: none;
    background-color: transparent;
    color: var(--color-letra);
}
a:hover{ cursor: pointer !important; color: var(--color-enlaces-hover); }
select:hover { cursor: pointer !important; border-color: var(--color-enlaces-hover); }
input:hover { border-color: var(--color-enlaces-hover) !important; }
.boton-aceptar {
    padding: 10px 20px;
    border-radius: 24px;
    /*border: 2px solid #defff8;*/
    font-weight: bold;
    background-color: var(--color-boton-aceptar);
    color: var(--color-letra-boton);
}
.boton-aceptar:hover{ 
    background-color: var(--color-boton-aceptar-hover);
    border: 1px solid #000000;
}
.boton-cancelar {
    padding: 10px 20px;
    border-radius: 24px;
    /*border: 2px solid #defff8;*/
    font-weight: bold;
    background-color: var(--color-boton-cancelar);
    color: var(--color-letra-boton);
}
.boton-cancelar:hover{ 
    background-color: var(--color-boton-cancelar-hover);
    border: 1px solid #000000;
}
/*-------------------------------*/


/*DIV USUARIOS*/
#div-usuarios{
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
#div-usuarios a{ padding: 0.5rem; }
#div-usuarios .dropdown-menu {
        border-radius: 4px;
        background: var(--color-fondo-drop);
        font-size: 0.8rem;
        letter-spacing: 0px;
        color: var(--color-letra);
}
#div-usuarios .dropdown-menu p:hover{ background-color: inherit!important; }
#div-usuarios .dropdown-menu a { font-weight: 600!important; }
/*------------------*/
        
/*BARRA MENU PRINCIPAL*/
            
    /*MENU MOVIL*/
    #menu-movil a{ color: var(--color-letra); }
    #menu-movil a:hover{ color: var(--color-enlaces-hover); }
    #menu-movil .dropdown-menu {
        border-radius: 4px;
        background: var(--color-fondo-drop);
        text-align: center;
        font-size: 20px;
        color: var(--color-letra);
    }
    #menu-movil .dropdown-menu a:hover{ background: inherit!important; }
    /*----------------*/
        
    /*MENU PRINCIPAL*/
    #menu-principal .dropdown-menu { 
        border-radius: 4px;
        background: var(--color-fondo-drop);
    }
    #menu-principal .dropdown-menu a{ color: var(--color-letra); }
    #menu-principal .dropdown-menu a:hover{ 
        background: inherit!important;
        color: var(--color-enlaces-hover);
    }
    /*----------------*/
        
/*--------------------*/
                
/*BANNER HORIZONTAL 1 */
        
    /*BANNER HORIZONTAL 1 GRANDE*/
    #bannerH1-728 {
        padding-left: 0!important;
        padding-right: 0!important;
        min-height: 90px;
        max-height: initial;
        overflow: hidden;
    }
    /*----------------*/
        
    /*BANNER HORIZONTAL 1 PEQUEÑO*/
    #bannerH1-354 {
        padding-left: 0!important;
        padding-right: 0!important;
        min-height: 60px;
        max-height: initial;
        overflow: hidden;
    }
    /*----------------*/
        
/*--------------------*/
        
/*BANNER VERTICAL DERECHO */
@media screen and (max-width: 1270px){
    #bannerVD { display: none!important; }
}
#bannerVD {
    width: 160px;
    height: 600px;
    position: absolute;
    top: 35px;
    right: -165px;
}
#bannerVD a{ padding: 0!important; }
/*----------------*/

/*PREGUNTA DE LA SEMANA*/

#pregunta-semana {
    padding-left: 0!important;
    padding-right: 0!important;
    overflow: hidden;
    font-style: italic;
}
#animacion-pregunta-semana {  animation: animacionPreguntaSemana 3.5s linear 0s infinite; }
#pregunta-semana a{ color: var(--color-letra-pregunta-semana); }
#pregunta-semana a:hover{ color: var(--color-letra-pregunta-semana-hover); }
/*----------------*/
            
/*PIE */
#footer {
    margin-top: 3rem;
    background: var(--color-fondo-pie);
    color: var(--color-letra-pie);
    font-size: 13px;
}
#footer span{ 
    color: var(--color-letra-pie-titulos);
    font-weight: 700!important;
}
#footer #version { font-weight: 700!important; }
#footer a{ 
    color: var(--color-letra-pie);
    font-weight: 700!important;
}
#footer a:hover{ color: var(--color-letra-pie-enlaces-hover); }
/*----------------*/
        
/*BARRA COOKIES */
#barra-cookies {
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: var(--color-fondo-cookies);
    padding: 1rem;
    font-size: 13px;
    color: var(--color-letra-cookies);
}
#barra-cookies a {
    padding: 2rem;
    color: var(--color-ok-cookies);
}
#barra-cookies .ok-cookies { color: var(--color-ok-cookies); }
#barra-cookies .ok-cookies:hover { color: var(--color-ok-cookies-hover); }
/*----------------*/

/*LOADER PAGINA */
#loader-pagina {
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-fondo-loader-pagina);
    padding: 1rem;
}
/*----------------*/

/*FORMULARIO LOGIN Y REGISTRO*/
#form-login form, #form-register form {
    padding: 16px;
    border-radius: 4px;
    /*border: 2px solid #defff8;*/
    /*box-shadow: 0 8px 24px -16px rgb(0 0 0 / 50%);*/
    background: var(--color-fondo-formulario);
    color:var(--color-letra-formulario);
}
/*----------------*/

/*SECCIONES*/

    /*BOTONES CONSULTAS*/
    .boton-secciones-consultas{
        background: var(--color-fondo-boton-secciones-consultas);
        border-radius: 4px;
        box-shadow: 0 8px 24px -12px rgb(0 0 0 / 100%);
        color:var(--color-letra-boton-secciones-consultas);
    }
    .boton-secciones-consultas:hover{
        color: inherit!important;
        text-decoration: underline; 
    }
    .boton-secciones-consultas .cantidades{ font-style: italic; }
    /*----------------*/

/*----------------*/

/*TABLAS*/

/*HEAD FIJO SI HAY SCROLL Y*/
table thead {
    top: 0px;
    position: sticky;
    overflow: hidden;
    left: 0px;
    z-index: 2;
}
/*---------------------*/

table{ font-size: var(--letra-tablas); }
table tr.odd td { background-color: var(--color-fondo-filas-impares); }
table.no-cebra tr.odd td { background-color: inherit; }
table td, table th{
    padding-top: 0!important;
    padding-bottom: 0!important;
    padding-left: 2px!important;
    padding-right: 2px!important;
}


    /*CLASE HOVER, MARCA LA LINEA O COLUMNA AL PASAR EL RATON POR ENCIMA*/
    .resalta-columna{ background-color: var(--color-fondo-columna-hover)!important; }
    table.resalta-linea tr:hover td { background-color: var(--color-fondo-fila-hover); }
    /*----------------------------------*/

    /*SELECT, MARCA LA LINEA SELECCIONADA*/
    table tr.selected td { background-color: var(--color-fondo-fila-seleccionada); }
    /*----------------------------------*/

    /*TABLAS MODAL*/
    table.tabla-modal{ font-size: var(--letra-tablas-modal); }
    /*-------------------*/

    /*ELIMINAR FLECHA MENU DESPLEGABLE BOTONES*/
    .dt-down-arrow { display: none; }
    /*---------------------*/

    /*ELIMINAR FLECHAS ORDENACION COLUMNAS*/
    table.dataTable thead .sorting, 
    table.dataTable thead .sorting_asc, 
    table.dataTable thead .sorting_desc {
        background-image:none!important;
    }
    /*----------------------*/
    
    /*LEYENDA TABLAS*/
    div.leyenda-normal{ font-size: var(--letra-s); border-radius: 4px; border: 1px solid #000000; }
    div.leyenda-clasificacion-iconos{ font-size: var(--letra-s); border-radius: 4px; border: 1px solid #000000; }
    div.leyenda-clasificacion-competiciones{ font-size: var(--letra-s); border-radius: 4px; border: 1px solid #000000; }
    div.leyenda-clasificacion-sanciones{ font-size: var(--letra-m); border-radius: 4px; border: 1px solid #000000; }
    
    /*--------------------*/

    /*ESTILO INPUT FILTRO COLUMNAS*/
    .filtrocolumna input {
        margin-bottom: 3px !important;
        font-size: var(--letra-tablas-filtro-columna) !important;
        padding: 2px 0 0 0 !important;
        text-align: center !important;
        border: 1px solid !important;
        border-radius: 24px !important;
    }
    /*-------------------*/

    /*ESTILO INPUT SUMA COLUMNAS*/
    .suma input {
        margin-bottom: 3px !important;
        font-size: var(--letra-tablas-filtro-columna) !important;
        padding: 2px 0 0 0 !important;
        text-align: center !important;
        border: 1px solid !important;
        border-radius: 24px !important;
        background-color: var(--color-fondo-suma-columna) !important;
    }
    /*-------------------*/
    
    /*ANCHO FILTROS COLUMNAS HEADER*/
	.filtroXS input { width: 30px; text-align: center; } /*HASTA 3 CARACTERES MAXIMO*/
	.filtroS input { width: 45px; text-align: center; } /*HASTA 5 CARACTERES MAXIMO*/
	.filtroM input { width: 60px; text-align: center; } /*HASTA 7 CARACTERES MAXIMO*/
	.filtroL input { width: 75px; text-align: center; } /*HASTA 9 CARACTERES MAXIMO*/
    .filtroXL input { width: 90px; text-align: center; } /*HASTA 11 CARACTERES MAXIMO*/
    /*-------------------*/

    /*ESTILO FILTRO COLUMNAS Y GENERAL DATATABLE LLENO*/
    .filtrolleno{background-color: var(--color-fondo-filtro-lleno) !important;}
    /*-------------------*/

    /*ESTILO TITULO Y NOTA TABLA*/
    .titulo-tabla{
        text-align: center;
        text-decoration: underline;
        font-size: var(--letra-tablas-titulo)!important;
        font-weight: bold;
    }
    .nota-tabla{
        font-style: italic;
        font-size: var(--letra-tablas-nota)!important;
    }
    /*-------------------*/

    /*SELECT LENGHT DATATABLE*/
    .dataTables_length select {
        font-size: var(--letra-tablas-botones)!important;
        padding: 0 !important;
        text-align: center !important;
        border-radius: 24px !important;
    }
    /*-------------------*/
    
    /*FILTRO DATATABLE*/
    .dataTables_filter input {
        width: 100px !important;
        font-size: var(--letra-tablas-botones)!important;
        padding: 0 !important;
        text-align: center !important;
        border: 1px solid !important;
        border-radius: 24px !important;
    }
    .dataTables_filter label:hover { color: var(--color-enlaces-hover) !important; }
    .dataTables_filter input:hover { border: 1px solid var(--color-enlaces-hover) !important; }
    /*-------------------*/
    
    /*ESTILO BOTONES TABLA*/
    .boton-tabla{ 
        padding: 0!important; 
        margin: 0 2px 0 2px!important; 
        background: inherit!important; 
        border: none!important;
    }
    .boton-tabla:hover{ 
        background: inherit!important;  
        border: none!important; 
        color: var(--color-enlaces-hover) !important; 
    }
    .boton-tabla-dropdown{ width: auto!important; }
    .boton-tabla-dropdown span{ 
        padding: 0 0 0 0!important; 
        margin: 0 10px 0 5px!important;
    }
    .boton-colvis{ 
        padding: 0!important; 
        font-size: var(--letra-tablas-botones)!important; 
    }
    .boton-colvis:hover{ color: var(--color-enlaces-hover) !important; }
    .boton-colvis-dropdown{ width: auto!important; }

        /*ESTILO SUB-BOTONES COLVIS*/
        div.dt-button-collection button.dt-button, div.dt-button-collection button.dt-button.active, div.dt-button-collection div.dt-button, div.dt-button-collection div.dt-button.active, div.dt-button-collection a.dt-button, div.dt-button-collection a.dt-button.active {
            padding: 0!important;
            font-size: var(--letra-tablas-botones)!important;
        }
        /*-------------------*/

        /*ESTILO SUB-BOTONES COLVIS HOVER*/
        div.dt-button-collection button.dt-button:hover, div.dt-button-collection button.dt-button.active:hover, div.dt-button-collection div.dt-button:hover, div.dt-button-collection div.dt-button.active:hover, div.dt-button-collection a.dt-button:hover, div.dt-button-collection a.dt-button.active:hover {
            color: var(--color-enlaces-hover) !important;
        }
        /*-------------------*/

    /*-------------------*/

    /*ESTILO INFORMACION DATATABLE*/
    .dataTables_info { font-size: var(--letra-tablas-botones)!important; }
    .select-info { margin-left: 1rem !important; }
    /*---------------------------*/
    
    /*ESTILO PAGINACION DATATABLE*/
    .dataTables_paginate.paging_simple_numbers { font-size: var(--letra-tablas-botones)!important; }
    .dataTables_paginate.paging_simple_numbers a{ padding-left: 3px !important; padding-right: 3px !important; }
    /*---------------------------*/

/*------------------------------*/