@import url('/competicion/fuente/cabin/Cabin-VariableFont_wdth,wght.ttf');
@import url('/competicion/fuente/cabin/Cabin-Italic-VariableFont_wdth,wght.ttf');

.al-an-100-100 {height:100%; width:100%;}
.al-an-auto-100 {height:auto; width:100%;}
.al-an-100-auto {height:100%; width:auto;}

body{
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    font-family: calibri, sans-serif;
}

/* Barra de aceptación de las cookies */

#barraaceptacion {
    display:none;
    position:fixed;
    left:0px;
    right:0px;
    top:0px;
    padding:30px;
    width:100%;
    height:100%;
    text-align:center;
    min-height:100%;
    background-color: rgba(255, 255, 255, 0.65);
    z-index:99999;
}
 
.inner {
    position:absolute;
    font-size:18px;
    line-height:34px;
    font-weight: bold;
    top:5%;
}

.tablacookies {
	background-color: rgba(255, 255, 255, 1);
	border:1px solid #6666cc;
}
 

/*  Efectos generales SlideIn y FadeIn  */

    @keyframes slideInTop {
      0% {
        opacity: 0;
        transform: translateY(-100%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInBottom {
      0% {
        opacity: 0;
        transform: translateY(100%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInLeft {
      0% {
        opacity: 0;
        transform: translateX(-100%);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInRight {
      0% {
        opacity: 0;
        transform: translateX(100%);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .fadeIn {
      animation: fadeIn 0.5s ease-in-out;
    }

    .containerFadeIn {
      animation: fadeIn 1s ease-in-out;
    }

    .containerSlideIn {
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-timing-function: ease-in-out;
    }

    .slide-in-top {
      animation-name: slideInTop;
    }

    .slide-in-bottom {
      animation-name: slideInBottom;
    }

    .slide-in-left {
      animation-name: slideInLeft;
    }

    .slide-in-right {
      animation-name: slideInRight;
    }

/* Más efectos generales */

   @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }

    .parpadeo {
      animation: blink 1s infinite;
    }

/* Estilo de la página inicial */

    .containerInicio {
      display: flex;
      align-items: center;
    }

    .imageSlideInLeft {
      width: 80px;
      animation: slideInLeft 0.6s ease-in-out;
      margin-right: 60px;
      margin-left: 60px;
    }
    
    .textInicio {
      font-size: 48px;
      font-weight: medium;
      font-family: sans-serif;
      color: #6666cc;
    }
    
    .textInicio span {
      animation: slideInLeft 0.9s ease-in-out;
      animation-fill-mode: both;
      opacity: 0;
    }

    @keyframes parpadeo {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }
	
    .parpadeo {
      animation: parpadeo 1s infinite;
    }


/* Barra superior de navegación */

#barra_superior {z-index:100; position: relative;}
.mi-dropmenu {z-index:100; position:relative;}

/* Aspectos generales */

.boton300 {width:300px;}
.colores {background-color:#6666cc; color:#ffffff;}
.colores:hover {background-color:#4444cc; color:#ffffff;}
.colores2 {background-color:#ff5533; color:#ffffff;}
.colores2:hover {background-color:#ff7f00; color:#ffffff;}
.colores3 {background-color:#22cc22; color:#ffffff;}
.colores3:hover {background-color:#ff7f00; color:#ffffff;}

.coloresNeutro:hover {background-color:#6666cc; color:#ffffff;}

.colores-white {color:#6666cc;}
.colores-white:hover {color:#ff7f00;}

.color1 {color:#6666cc;}
.color2 {color:#ff7f00;}

.bgcolor1 {background-color:#6666cc;}
.bgcolor2 {background-color:#ff7f00;}

.enlace:hover {background-color:#6666cc; color:#ffffff; cursor:pointer;}

.sindecoracion {text-decoration:none;}

.altura-linea-1 {line-height:1;}
.altura-linea-8 {line-height:0.8;}

.pointer {cursor: pointer;}
.pointer2 {cursor: pointer;}
.pointer2:hover {font-weight:bold;}

.peque {font-size:0.8em;}

.columnas {padding:1px; column-count:auto; column-gap: 1em;}
.columnas-150 {column-width: 150px;}
.columnas-100 {column-width: 100px;}
.columnas-200 {column-width: 200px;}

.rotate-45 {position:absolute; left:0px; top;0px; overwrite:hidden; transform: rotate(-45deg); transform-origin: left top; text-align:left;}
/*.pre-rotate-45::before {content: ""; display: inline-block; width: 50%;}*/

/* Mapa inicio*/

.cambioBoton:hover {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}

/* Mapa */

.miCapitulo {margin:2px; font-size:11pt; font-family: calibri; font-stretch: condensed; line-height:1; 
cursor:pointer; position:relative; float:left; border-radius:20px; width:125px; height:42px; padding:6px; z-index:5;}
.miCapituloNum {position:absolute; left:-5px; top:-5px; font-size:11pt; color:#6666cc; background-color:#ffffff; border:1px solid #6666cc; z-index:5;}

#messageContainer {display: none; position: absolute; top:-80px; left:-150px; padding: 15px; color:#6666cc; }
#mensajeMarcadorOculto {background-color:#ffffff; border-radius:15px; border:1px solid #6666cc; padding:5px; z-index:10;}
#avatar-objetos {position:relative; float:right; width:160px; height:230px;text-align:center;}

/* Capitulo */

.testVerde {background-color:#CCFF88; border:1px solid white;}
.testAmarillo {background-color:#FFFF4D; border:1px solid white;}
.testRojo {background-color:#FF8080; border:1px solid white;}

#test-capitulo td {padding:2px; padding-left:4px; padding-right:4px;}

/*  TEST */

input.grande {
	text-align:center; outline: 0; background: url(icon/a.png);  background-position:center;
	border:0px solid #DADADA; padding:0; background-repeat: no-repeat; font-size:inherit; font-family:inherit; 
	border-radius:10px;
	}

input.grande:focus {
	background: url(icon/b.png); background-position:center; background-repeat: no-repeat; 
	outline: 0;
	}

/* Listado de pruebas personales */

#tablaPruebasPersProf TD {line-height:0.8;}

/* TOOLTIP */

.tooltip-ancho .tooltip-inner {
    max-width: 350px; 
    text-align: left; /* Opcional: mejora la lectura en textos largos */
}

.tooltip-muy-ancho .tooltip-inner {
    max-width: 450px; 
    text-align: left; /* Opcional: mejora la lectura en textos largos */
}