*{
	font-family: monospace;
}

body {
    margin: 0;
    padding: 0;
    background: url('/img/fondo.jpg') repeat;
}
.container {
    margin: 50px auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.web-container{
    max-width: 800px;
}

.public-pages h1 {
    text-align: center;
    color: #333;
}
.public-pages p {
    text-align: justify;
}

.public-pages h2 {
    text-align: center;
    margin-top: 100px;
}



.homepage-links{
    display: block;
    width: 81%;
    margin: 40px auto 40px;
    overflow: auto;
}

.homepage-links a{
    float: left;
    margin: 0px 15px; 
}
.homepage-links img{
    max-width: 50px;
}
    
.social-links {
    text-align: center;
    margin-top: 20px;
}
.social-links a {
    margin: 0 10px;
    color: #333;
    text-decoration: none;
}
.shop-link, .login-link {
    display: block;
    text-align: center;
    margin-top: 20px;
}

.bottom-links{
    display: block;
    width: 57%;
    margin: 40px auto 0px;
    overflow: auto;
}

.bottom-links a{
    float: left;
    margin: 0px 15px; 
}
.bottom-links img{
    max-width: 50px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: monospace;
}

.panel-default>.panel-heading {
    color: #333;
    background-color: #e0e0ef;
    border-color: #aaa;
    font-weight: bold;
}

.panel-default {
    border-color: #AAA;
}
.panel {
    background-color: #F7F7F7;
}

.content-header{
    overflow: hidden;
}


.content-header .logo{
    width: 300px;
}
.main-header .logo_s {
    height: 50px;
}

.operadores-activity-table{
	width: 100%;
}
.operadores-activity-table td{
	padding: 2px;
}
.achievement-image{
	max-width: 150px;
    max-height: 180px;
}

.achievement-list{
	padding-left: 16px;
    list-style: circle;
}

.achievement-list .achievement-fecha{
	font-weight: bold;
    padding: 0 10px;
}

.achievement-list li{
	margin-bottom: 5px;
}


.logro-list{
	padding: 0px;
    list-style: none;
}
.logro-list li{
	float:left;
	margin: 3px;
}

.logro-list .logro-type-3 img{
	width: 150px;
}

.logro-list .logro-type-4 img{
	width: 100px;
}

.recruit-container .logo{
	height: 122px;
    float: left;
    margin-right: 20px;
    margin-left: 16px;
}

#dashboard table{
	font-size: 16px;
}
#dashboard table .act-fecha{
	width: 100px;
}
#dashboard table .act-type{
	width: 150px;
	color: #999933;
}
#dashboard table .act-type.act-type-Entrenamiento{
	color: #3333FF;
}
#dashboard table .act-type.act-type-Mision{
	color: #339933;
}
#dashboard table .act-name{
	
}
#dashboard table .act-resultado{
	width: 130px;
}
#dashboard table .act-resultado.act-resultado-Pendiente{
	color: #777777
}
#dashboard table .act-resultado.act-resultado-Satisfactorio{
	color: #339933;
}
#dashboard table .act-resultado.act-resultado-Fallo{
	color: #993333
}
#dashboard table .act-resultado.act-resultado-Inconcluso{
	color: #999933;
}

.assist-table{
	width: 90%;
    margin: 5%;
}


.assist-table td, .assist-table th{
	padding: 2px;
    border-bottom: 1px solid #aaa;
}

.report-box {
    display: block;
    float: left;
    width: 185px;
    border: 1px solid;
    border-radius: 6px;
    margin: 0px 10px;
    height: 170px;
}

.report-box label {
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    font-size: 20px;
}

.report-box span {
    text-align: center;
    display: block;
    width: 100%;
    font-size: 55px;
    margin-top: 21px;
}
.report-box-operadores{
	background-color: #9eca90;
}
.report-box-misiones{
	background-color: #F5D09B;
}
.report-box-train{
	background-color: #9BD0F5;
}
.report-box-otros{
	background-color: #D09BF5;
}

.squad-container{
    background-color: #f0f0f0;
}
.squad-item {
    background-color: #fff;
    border: 1px solid;

    padding: 5px;
    margin: 5px;
    min-height: 400px;
    border-radius: 14px;
    overflow: hidden;
}
.squad-title {
    width: 80%;
    font-size: 20px;
    padding: 10px 0 10px 10px;
    text-align: left;
}

.squad-leader-title{
    font-size: 18px;
    margin: 10px 0;
    padding: 7px;
    border-top: 1px solid;
    border-bottom: 1px solid;
}


.team-container{
    background-color: #f0f0f0;
}
.team-item {
    background-color: #fff;
    border: 1px solid #afafaf;
    padding: 10px;
    margin: 5px 10px;
    border-radius: 14px;
    float: left;
    width: 97%;
}

.team-title {
    width: 80%;
    font-size: 18px;
    padding: 10px 0 10px 10px;
    text-align: left;
}

.team-img{
    max-height: 50px;
    max-width: 50px;
    float: right;
    margin-right: 10px;
}
.team-leader, .squad-leader, .team-member-cant {
    color: #7f7f7f;
}
.team-member span {
    font-size: 16px;
}
.team-member ul {
    list-style: none;
    padding-left: 0px;
}
.team-member li {
    padding: 5px 4px;
    margin: 2px;
    clear: both;
    overflow: auto;
    background-color: #f5f5f5;
}

.team-member li .float-left{
    float: left;
}
.team-member li .float-right{
    float:right;
}

.team-member .group-icon{
    width: 28px;
    padding: 1px;
    display: block;
}

.team-member .group-1{
    background: #f7c9cf;
}
.team-member .group-2{
    background: #cfcbf7;
}
.team-member .group-3{
    background: #afe2b1;
}
.team-member .group-4{
    background: #fffa90;
}
.opt-3dot {
    width: 10px;
    height: 20px;
    float: right;
}
.opt-list {
    width: 200px;
    position: absolute;
    z-index: 999;
    margin-top: 0px;
    right: 30px;
}
.opt-list a, .opt-list button {
    display: block;
    width: 100%;
}

.recruitment-comment
{
    font-size: 12px;
    color: #999;
}



/* Estilo base: ambos elementos ocultos inicialmente */
.distinciones-large, .distinciones-small {
    display: none;
}

/* Para pantallas menores o iguales a 768px */
@media (max-width: 800px) {
    .distinciones-small {
        display: block; /* Mostrar solo en pantallas pequeñas */
    }
}

/* Para pantallas mayores a 768px */
@media (min-width: 800px) {
    .distinciones-large {
        display: block; /* Mostrar solo en pantallas grandes */
    }
}

.panel-distinciones{
    position: relative;
    overflow: visible;
    height: 787px;
    width: 787px;
    margin: 0px auto;
}

.panel-distinciones .distinciones-bg{
    display: block;
    position: absolute;
}

.panel-distinciones .distinciones-medallas{
    position: absolute;
    margin-left: 120px;
    top: 130px;
    width: 574px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}
.panel-distinciones .distinciones-medallas li{
    text-align: center;
    margin: 0px 1px 120px;
}

.panel-distinciones .distinciones-medallas img{
    max-width: 140px;
    max-height: 220px;
}
.color-infraction-1{
    background-color: #60c060;
}
.color-infraction-2{
    background-color: #f0f090;
}
.color-infraction-3{
    background-color: #f09090;
}

.asistencia-icon{
    width: 15px;
}

.panel-distinciones .distinciones-galones{
    position: absolute;
    margin-left: 57px;
    bottom: 310px;
    width: 574px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    z-index: 9;
}

.panel-distinciones .distinciones-galones li{
    margin: 1px;
    text-align: center
}

.panel-distinciones .distinciones-galones img{
    width: 110px;
    height: 30px;
}

.operador-status-left, .operador-status-right{
    min-height: 290px;

}

.distinciones-item{
    position:relative;
}

/* Oculta el tooltip por defecto */
.distinciones-tooltip {
    display: none; /* Inicialmente oculto */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 97%;
    z-index: 100;
    background-color: rgba(30, 30, 30, 0.8);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Flecha del tooltip */
.distinciones-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; /* Colocado en la parte inferior del tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; /* Triángulo */
}

/* Muestra el tooltip al hacer hover */
.distinciones-item:hover .distinciones-tooltip {
    display: block; /* Muestra el tooltip */
}

/* Evita que el tooltip se salga de la pantalla */
.distinciones-tooltip {
    width: 350px; /* Define un ancho máximo */
    word-wrap: break-word; /* Permite dividir palabras largas */
}
.distinciones-tooltip-title{
    font-weight: 800;
    font-size: 16px;
}
.distinciones-tooltip-description{
    text-align: left;
}

.tooltip-galon{
    max-width: 110px;
    max-height: 30px;
}

.tooltip-image{
    max-width: 140px;
    max-height: 220px;
}





.asist-list{

}
.asist-list ul{
    list-style: none;
    padding: 0;
}
.asist-list ul ul {
    padding-left: 15px;
}   
.asist-squad-img {
    height: 20px;
}
.asistencia-rango-icon{
    height: 20px;
}
.asist-list-squad-name{
    text-decoration: underline;
    margin-top: 5px;
}
.asist-list-op {
    padding: 2px 0px;
}

.scoreboard{
    width: 100%;
}

.scoreboard tr:first-child td:first-child {
    font-size: 17px;
    font-weight: 800;
}
.scoreboard tr {
    border-bottom: 1px solid #ccc;
}
.scoreboard tr td {
    padding: 5px 0;
}