:root {
    --colour-dark-grey: #282c34;
    --colour-security: #0b6be1;
    --colour-seek-destroy: #bd0003;
    --colour-recon: #f05c22;
    --colour-infiltration: #5f5f5f;
    --colour-faction: #414d00;
    --colour-player1: #6ea4c6;
    --colour-player1-dark: #0066a5;
    --colour-player1-light: #c1d8e6;
    --colour-player2: #d98180;
    --colour-player2-dark: #d1232a;
    --colour-player2-light: #eec7c7;
    --colour-white: #ffffff;
    --colour-red: #ae0707;
    --colour-red-off: #dea9a9;
    --colour-navy: #103252;
    --colour-navy-off: #bacad8;
    --colour-player1: #ae0707;
    --colour-player1-off: #dea9a9;
    --colour-player2: #103252;
    --colour-player2-off: #bacad8;
    --colour-platform-primary: #0b6be1;
    --colour-game-background: #ffffff;
    --bs-dark: #343a40;
    --bs-dark-hover: #23272b;
    --bs-light: #f8f9fa;
    --bs-light-hover: #dae0e5;
    --bs-dark-middle: #42464b;
    --bs-dark-orange: #e34510;
    
}

html, body {
    width: 100vw;
	height: 100%;
    min-height: 100vh;
    padding: 0px;
    margin: 0px;
}

.page{
    max-width:100%;
}

#menu-toggle {
    margin-right: 15px;
    margin-bottom: 10px;
}

.fs-7 {
    font-size: 0.9rem !important;
}

.fs-8 {
    font-size: 0.8rem !important;
}

/* Estilo para el menú en dispositivos móviles */
#myTab.d-flex {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-y: auto;
    width: 100%;
}

/* Estilo para el menú en desktop */
@media (min-width: 768px) {
    #myTab.d-flex {
        width: 450px; /* Ancho específico para desktop */
    }
}

.lock-icon {
  border-radius: 5px;
  width: 55px;
  height: 45px;
  background-color: #333;
  animation: dip 1s forwards; /* Añadido 'forwards' para mantener la posición final */
  animation-delay: 1.5s; 
  margin-bottom: 20px;
  position: relative; /* Asegura que los pseudo-elementos se posicionen relativos al .lock-icon */

  &::before,
  &::after {
    content: '';
    position: absolute;
    border-left: 5px solid #333;
    height: 20px;
    width: 25px;
    left: calc(50% - 12.5px);
  }

  &::before {
    top: -25px;
    height: 30px;
    border: 5px solid #333;
    border-bottom-color: transparent;
    border-radius: 15px 15px 0 0;
    animation: lock 2s forwards, spin 2s forwards; /* Mantén ambas animaciones y añade 'forwards' */
  }

  &::after {
    top: -10px; 
    border-right: 5px solid transparent;
    animation: spin 2s forwards; /* Añadir 'forwards' */
  }
}

@keyframes lock {
  0% {
    top: -35px;
  }
  65% {
    top: -35px;
  }
  100% {
    top: -25px; /* Mantener en su posición final */
  }
}

@keyframes spin {
  0% {
    transform: scaleX(-1); /* Inicia con la inversión horizontal */
    left: calc(50% - 30px);
  }
  65% {
    transform: scaleX(1); /* Despliega horizontalmente */
    left: calc(50% - 12.5px); /* Centra en la posición final */
  }
  100% {
    transform: scaleX(1); /* Mantiene la escala final */
    left: calc(50% - 12.5px); /* Mantiene la posición final */
  }
}

@keyframes dip {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px); /* Mantener la posición final */
  }
}



#myTab.d-flex li {
    width: 100%;
} 

#myTab.d-flex li button {
    width: 100%;
    text-align: left;
}

p {
    margin: 0.5em 0;
}

h2 {
    display: block;
    font-size: 1.3em !important;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h5 {
    font-size: 0.83em;
    font-weight: bold;
}

img {
    overflow-clip-margin: content-box;
    overflow: clip;
}

ul {
    list-style-type: circle;
}

ul li:not([class]) {
    margin: 3px 0px 5px 0px;
}

.tc-recon {
    color: #f05c22 !important;
    color: var(--colour-recon) !important;   
}

.tc-white {
    color: #fff !important;
    color: var(--colour-white) !important;   
}

.tc-security {
    color: #0b6be1 !important;
    color: var(--colour-security) !important;   
}

.tc-grey {
    color: #282c34 !important;
    color: var(--colour-dark-grey) !important;   
}

.tc-red {
    color: #ae0707;
    color: var(--colour-red);
}

.tc-navy {
    color: #103252;
    color: var(--colour-navy);
}

.bg-recon {
    background-color: #f05c22;
    background-color: var(--colour-recon);   
}

.bg-grey {
    background-color: #282c34;
    background-color: var(--colour-dark-grey);   
}

.bg-navy {
    background-color: #103252;
    background-color: var(--colour-navy);
}

.bg-white {
    background-color: #fff;;
}

.bg-red {
    background-color: #ae0707;
    background-color: var(--colour-red);
}

.bg-red-off {
    background-color: #dea9a9;
    background-color: var(--colour-red-off);
}

.bg-navy-off {
    background-color: #bacad8;
    background-color: var(--colour-navy-off);
}

.border-recon {
    border: 1px solid #282c34;
    border: 1px solid var(--colour-recon);
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;    
}

.border-grey {
    border: 1px solid #282c34;
    border: 1px solid var(--colour-dark-grey);
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;    
}

.border-navy {
    border: 1px solid #103252;
    border: 1px solid var(--colour-navy);
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;       
}

.border-red {
    border: 1px solid #ae0707;
    border: 1px solid var(--colour-red);
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;           
}

.output {
    float: left;
}

.color-dark-grey{
    background-color: #282c34;
    background-color: var(--colour-dark-grey);
}

#app-header {
    align-items: center;
    background-color: #282c34;
    background-color: var(--colour-dark-grey);
    min-height: 8vh;
    padding: 15px;
}

#app-header .navbar-toggler {
    color: #fff;
}

#app-header .navbar-toggler:focus {
    box-shadow: none;
}

#app-header .navbar-brand {
    font-family: "Bebas Neue", sans-serif;
    color: #fff;
    font-size: calc(1.525rem + 1.5vw);
    line-height: calc(1.525rem + 1.5vw);
}

.endnote {
    clear: both;
    font-size: 75%;
}

.step-exp.description {
    color: grey;
    font-style: italic;
}

.fill { 
    min-height: 100%;
    height: 100%;
}

.map-cards, .alert {
    border-radius: 10px !important;
}

.card .notice, .card.mission .label {
    font-family: Roboto Mono,monospace;
    text-align: center;
    text-transform: uppercase;
}

.card.mission .label {
    font-size: 1.38em;
    font-weight: 400;
    margin: 10px 0 5px;
    padding: 0 0 5px;
}

.card.mission .letter, .card.mission .title {
    background-color: #282c34;
    background-color: var(--colour-dark-grey);
}

.card.mission .title {
    align-items: center;
    color: #fff;
    display: flex;
    font-family: Bebas Neue;
}

.card.mission .letter {
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    font-size: 5em;
    line-height: 1;
    margin-left: 15px;
    padding: 5px 15px;
}

.card.mission .letter, .card.mission .title {
    background-color: #282c34;
    background-color: var(--colour-dark-grey);
}

.card.mission .mission-name {
    font-size: 3em !important;
    margin: 0;
    padding: 0 20px;
}

.card {
    text-align: justify;
    border: 1px solid #282c34;
    border: 1px solid var(--colour-dark-grey);
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;
    font-size: calc(13px + 0.2vw);
    min-height: 220px;
    position: relative;
    transition: .3s;
}

.card .occurance p {
    margin-bottom: 0.5em;
}

.card.map img {
    width: 100%;
}

.card h4 {
    font-size: 1.2em;
    margin: 10px 0 10px;
}

.card h5 {
    background-color: #f05c22;
    background-color: var(--colour-recon);
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin: 10px 0 5px;
    padding: 5px 10px;
    font-size: 1.1em;
}

.card h4, .card h5 {
    font-family: Roboto Mono,monospace;
    text-transform: uppercase;
}

.card.map {
    min-height: 320px;
}

.card .name {
    border-bottom: 1px solid #999;
    font-family: Roboto Mono,monospace;
    font-weight: 400;
    margin: 0;
    padding: 0 0 5px;
    text-align: center;
    text-transform: uppercase;
}

.card .notice {
    background: #ffdbdb;
    color: #a53131;
    margin: 8px 0;
    padding: 3px 0;
}

.card .notice, .card.mission .label {
    font-family: Roboto Mono,monospace;
    text-align: center;
    text-transform: uppercase;
}

.card.mission .middle {
    padding-top: 0;
}

.card .middle {
    padding: 10px;
}

.card .archetype {
    background-color: #282c34;
    background-color: var(--colour-dark-grey);
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-family: Bebas Neue;
    font-size: 1.8em;
    font-weight: 400;
    margin: -1px;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
}

.card.tacop .archetype {
    background-color: #414d00 !important;
    background-color: var(--colour-faction) !important;
}

.card.security .archetype {
    background-color: #0b6be1 !important;
    background-color: var(--colour-security) !important;
}

.card.infiltration .archetype {
    background-color: #5f5f5f !important;
    background-color: var(--colour-infiltration) !important;
}

.card.recon .archetype {
    background-color: #f05c22 !important;
    background-color: var(--colour-recon) !important;
}

.card.seek-destroy .archetype {
    background-color: #bd0003 !important;
    background-color: var(--colour-seek-destroy) !important;
}

.card.tacop {
    border-color: #414d00;
    border-color: var(--colour-faction);
}

.card.security {
    border-color: #0b6be1;
    border-color: var(--colour-security);
}

.card.infiltration {
    border-color: #5f5f5f;
    border-color: var(--colour-infiltration);
}

.card.recon {
    border-color: #f05c22;
    border-color: var(--colour-recon);
}

.card.seek-destroy {
    border-color: #bd0003;
    border-color: var(--colour-seek-destroy);
}

.card h5 {
    background-color: #f05c22;
    background-color: var(--colour-recon);
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin: 10px 0 5px;
    padding: 5px 10px;
}

i.square, i.triangle {
    content: "";
    display: inline-block;
    height: 13px;
    margin: 0;
    width: 13px;
}

i.square {
    background-color: blue;
}

i.triangle {
    background: url("./img/triangle.svg") no-repeat 50%/contain;
}

i.pentagon {
    background: url("./img/pentagon.svg") no-repeat 50%/contain;
    height: 13px;
    width: 13px;
}

i.circle, i.pentagon {
    content: "";
    display: inline-block;
    margin: 0;
}

i.circle {
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 50%;
    height: 11px;
    width: 11px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

ul {
    list-style-type: disc;
}

input[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
}

.nav-link {
    padding: .1875rem 0.6rem .1875rem 0rem;
    margin-top: .125rem;
    margin-left: .125rem;
    color: var(--bs-body-color);
    font-size: 0.9em;
    text-decoration: none;
}

#ktToolkitMainTab .nav-link {
    font-size: 1em;
}


.nav-tabs .nav-link.active {
    color: #000 !important;
    background-color: #e4f3f7 !important;
    border: 1px solid #e4f3f7 !important;
}

.img-map-legend {
    max-width: 150px;
    width: 100%;
}

.img-map-legend-volkus {
    max-width: 250px;
    width: 100%;
}


.desc-map-legend {
    font-size: 1em;
    font-family: Roboto Mono,monospace;
    text-transform: uppercase;
    text-align: left;
}

.switch-label {
    cursor: pointer;
    text-indent: -9999px;
    width: 60px;
    height: 30px;
    background: var(--colour-recon);
    display: block;
    border-radius: 30px;
    position: relative;
    display: inline-block !important;
}

.switch-label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 20px;
    transition: 0.3s;
}

input:checked + .switch-label {
    background: var(--colour-security);
}

input:checked + .switch-label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.bottom-arrow:before {
    content: '';
    position: relative;
    left: 20px;
    top: 6.6em;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 30px solid var(--colour-dark-grey);
    border-left: 31px solid transparent;
    border-right: 31px solid transparent;
}

.bottom-arrow.light:before {
    border-top: 30px solid var(--colour-navy);
}

.bottom-arrow .step-title {
    background-color: #282c34;
    background-color: var(--colour-dark-grey);
    align-items: center;
    color: #fff;
    display: flex;
    font-family: Bebas Neue;    
}

.bottom-arrow.light .step-title {
    background-color: var(--colour-navy);  
}

.bottom-arrow .step-letter {
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    font-size: 2.8em;
    line-height: 1;
    margin-left: 15px;
    padding: 5px 5px;
    width: 72px;
    text-align: center;
}

.bottom-arrow .step-name {
    margin: 0;
    font-size: 28px;
    padding: 0 20px;
}


.bottom-arrow .step-exp {
    margin-left: 88px;
    margin-top: 10px;
    font-size: 0.82em;
}


.hex-title {
    height: 80px;
    width: 80px;
    -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    float: left;
    font-family: "Bebas Neue", sans-serif;
    align-items: center;
    color: #fff;
    font-size: calc(1.925rem + 3.3vw);
    line-height: 92px;
    cursor: pointer;
}

.hex-title.loading{
    background-image: url("../img/dot-loader.gif");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    background-size: 45px 45px;
}

.hex-title.play{
    background-image: url("../img/play-button.png");
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    background-size: 45px 45px;
}

.hex-name.panel_player_1 {
    float: left;
    height: 81px;
    margin-right: 12px;
    margin-top: 4px;
    text-align: left;
    width: calc(100% - 92px);
}

.hex-name.panel_player_2 {
    float: left;
    height: 81px;
    margin-left: 12px;
    margin-top: 4px;
    text-align: left;
    width: calc(100% - 92px);
}

.hex-name .faction.panel_player_1, .hex-name .faction.panel_player_2 {
    height: 36px;
    line-height: 39px;
    border-radius: 0px 0px 0px 10px;
}

.hex-name .faction .form-select{
    position: relative;
    margin-left: 0px;
    margin-top: -39px;
    background-color: transparent;
    border: 0px;
    color: #fff;
}

.hex-name .faction .form-select option {
    color: #000; 
    background-color: #fff;
}

.hex-name .faction .form-select optgroup {
    color: #fff; 
    background-color: #0d6efd; 
}

.hex-name .faction.panel_player_1:before {
    content: '';
    position: relative;
    right: -100%;
    top: -31px;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-right: 23px solid transparent;
}

.hex-name .faction.panel_player_2:before {
    content: '';
    position: relative;
    left: -22px;
    top: -31px;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 23px solid transparent;
}

.hex-name .faction.bg-recon:before {
    border-bottom: 42px solid var(--colour-recon);
}

.hex-name .faction.bg-grey:before {
    border-bottom: 42px solid var(--colour-dark-grey);
}

#factionFilterSelect {
    padding-left: 80px;
}

#factionFilterSelect option {
    padding-left: 0px;
    color: var(--bs-body-color);
    background-color: #fff !important;
}

#factionFilterSelect optgroup{
    padding-left: 0px;
    color: #fff; 
    background-color: #0d6efd !important;
}

.generated-mission {
    align-items: center;
    display: flex;
    justify-content: center;
}

.time {
    font-family: Orbitron;
    text-align: center;
    min-width: 32px;
    display: inline-block;
    font-size: x-large;
    font-weight: bold;
}

.radius-10 {
    border-radius: 10px;
}

.primary-points {
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;       
}

.form-select {
    font-size: 0.95em !important;
}

.primary-points-title {
    top: 0px;
    left: 0px;
    width: 100%;
    color: #fff; 
    border-radius: 10px 10px 0px 0px; 
    text-align: center;
    font-size: 0.8em !important;
    padding: 0.22rem 0.375rem 0.22rem 0.375rem
}

.primary-points .text {
    font-family: "Bebas Neue", sans-serif;
    text-align: center;
    font-size: 3em;
    line-height: 43px;
    padding: 0px !important;
    margin: 30px 0px 0px 0px !important;
}

  .panel_player {
    margin-top: 10px !important;
    margin-bottom: 2px !important;
    padding-left: 1px !important;
  }

  .panel_player .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 3px;
    padding: 2px;
  }

  .panel_player .grid-item {
    display: flex;
    align-items: center; 
    gap: 5px; 
  }

  .panel_player .tp-text {
    font-size: 0.7em;
    color: #333; 
    font-style: italic;
    width: 20px;
  }

.primary-points .btn-p-rest {
    bottom: 0px;
    left: 0px;
    width: 25%;
    color: #fff;   
    border-radius: 0px 0px 0px 10px;    
    border-right: 1px solid #fff; 
    cursor: pointer;     
}

.primary-points .btn-p-add {
    bottom: 0px;
    right: 50%;
    width: 25%;
    color: #fff;
    border-radius: 0px 10px 0px 0px;
    cursor: pointer;
}


/* Botón de restar */
.btn-kill-done-rest {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25%;
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 36px; /* Ajusta según el tamaño del botón */
}

/* Botón de añadir */
.btn-kill-done-add {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25%;
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 36px; /* Ajusta según el tamaño del botón */
}

/* Texto del contador */
#kill_done_count_p1, 
#kill_done_count_p2 {
    font-size: 1.5rem;
    padding: 0px 20px;
}

#miniatures-title-p1,
#miniatures-title-p2 {
    white-space: normal; /* Permite que el texto se envuelva */
    word-break: break-word; /* Divide las palabras largas si es necesario */
    overflow: hidden; /* Oculta cualquier contenido que exceda el contenedor */
    text-align: center; /* Centra el texto en su contenedor */
    display: block; /* Asegura que el span se comporte como un bloque para facilitar el ajuste de texto */
}

.visible-checkbox {
    width: 20px !important;
    height: 20px !important;
    visibility: visible !important;
    display: inline-block;
    appearance: auto;
    flex-shrink: 0;
}

.checkbox-group-scorecard {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.gotomission {
    cursor: pointer;
}

.gotoplay {
    cursor: pointer;
}

.led-red-on {
    margin: 0.15em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #f00;
    box-shadow: rgb(0 0 0 / 20%) 0 -1px 7px 1px, inset #790c0c 0 -1px 9px, rgb(255 0 0 / 70%) 0 2px 12px;
}

.led-red-off {
    margin: 0.15em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #A00; 
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
}

.led-navy-on {
    margin: 0.15em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #24E0FF;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 12px;
}

.led-navy-off {
    margin: 0.15em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #103252;
    box-shadow: rgb(0 0 255 / 20%) 0 -1px 7px 1px, inset #10164a 0 -1px 9px, rgb(42 0 255 / 50%) 0 2px 0;
}

.panel_player_on{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    z-indez: 999999;
}

.ajax-con {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ae0707;
    position: absolute;
    top: -13%;
    right: -16%;
}

.modal-body {
    min-height: 200px;
}

.shareModalTxt {
    font-family: Roboto Mono,monospace;
    font-size: 18px;
}

.stndtext {
    font-family: system-ui !important;
}

.gototacops {
    top: 50%;
    right: 0;
    cursor: pointer;
}

.lang-flags {
    background-color: transparent;
    border-color: transparent;
    top: 6px;
    right: 10px;
    appearance: none;
    padding-left: 12px;
    color: inherit;
}

#menu-close {
    background-color: var(--colour-white) !important;  
    color: var(--colour-white) !important;  
    border: none;  
    position: absolute;  
    top: 23px;
    right: 23px;
    z-index: 1000;  
}


.nav-link-css {
    color: var(--colour-white) !important;
    font-weight: var(--bs-nav-link-font-weight);
}

.faction-img {
    top: -62px;
    right: 0px;
    width: 5.6em;
} 

.faction-wiki-img {
    top: -15px;
    left: 12px !important;
    width: 4.6em;
} 


.faction-img img, .faction-wiki-img img{
    width: 100%;
}

.faction-shadow{
    -webkit-filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.24));
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.24));
} 


.shadow-panels {
    -webkit-filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.24));
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.24));
}

.description-input {
    padding: 0rem .75rem;
}

.img-faccion {
  max-width: 50px; /* ajusta esto según tus necesidades */
  height: auto;
}

.resultado-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap; /* Esto evita que los elementos se ajusten debajo de uno al otro */
}

.dots:hover {
  cursor: pointer;
}




/* Asegúrate de que el contenedor padre tenga position: relative */
#user-rival-container {
  position: relative;
}

.suggestions-container {
  position: absolute;
  z-index: 1000;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ddd;
  border-top: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  border-radius: 0 0 8px 8px; /* Esquinas redondeadas abajo */
  display: none; /* Ocultar inicialmente el contenedor */
}

.suggestion-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.active {
  background-color: #f6f6f6;
}

#alertsContainer {
  position: fixed;
  bottom: 0; /* Empieza justo fuera de la pantalla */
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(100%); /* Oculta inicialmente el alerta debajo de la pantalla */
  transition: transform 0.5s; /* Suaviza la entrada/salida */
  z-index: 2000; /* Asegúrate que está sobre otros elementos */
  pointer-events: none; /* Para que no bloquee clics */
}

.custom-context-menu .dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.15);
}

.alert {
  pointer-events: auto; /* Permite cerrar el alert si es necesario */
  margin-bottom: 0; /* Elimina el margen por defecto de los alerts de Bootstrap */
}

.opponent-name {
  max-width: 100px; /* Ajusta esto al ancho deseado */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* css para el dashboard */

.dashboard-row {
    column-gap: 10px;
    row-gap: 10px;
}

.dashboard-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: auto;
    margin: auto;
}

.dashboard-card-header {
    background-color: #024e9e;
    color: white;
    padding-left: 3px;
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: 16px;
}

.dashboard-card-body {
    padding: 20px 15px;
}

.dashboard-card-title {
    color: var(--colour-navy) !important;   
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.dashboard-card-text {
    font-size: 16px;
    color: #666;
}

.dashboard-card-table {
    margin-top: 15px;
}

.bi-three-dots-vertical.dropdown-toggle::after {
  content: none;
}

.bi-three-dots-vertical.dropdown-toggle {
  cursor: pointer;
}

.faccion_player_img_small {
    width: 40px !important;
    height: auto;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.3));
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.3));
}

#small-results-panel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    text-align: center;
    font-size: 2em;
    color: #2d3139;
    margin: 0 5px; 
}

.digit-container, .digit-separator {
    display: flex; /* Asegura que los elementos se muestren en línea */
    align-items: center;
    justify-content: center;
}

.digit-container {
    perspective: 500px; /* Para el efecto 3D */
}

.digit {
    display: inline-block;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

/* Estilos para el giro */
.flip {
    transform: rotateX(360deg);
}

/* Estilos para mantener la relación de aspecto del mapa */
#mapa-container {
    position: relative;
    z-index: 1; /* Bajo en la pila */            
    width: 100%; /* Puede ser ajustado según sea necesario */
}
#mapa-container::before {
    content: '';
    display: block;
    padding-top: 73.72%; /* Calculado como 100 / 1.357067510548523 */
}
#mapa {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../img/esceno_elements/map-op-1-min.png');
    background-size: cover;
}
.escenografia {
    position: absolute;
    z-index: 2; /* Más alto en la pila */            
    position: absolute;
    cursor: move; /* Cambia el cursor para indicar que se puede mover */
}

.escenografia-ejemplo {
    z-index: 2; /* Más alto en la pila */            
    max-height: 100px;
    max-width: 100px; 
    margin-right: 10px; 
}

.escenografia-seleccionada {
    -webkit-filter: drop-shadow(0px 4px 16px rgba(0, 123, 255, 0.6));
    filter: drop-shadow(0px 4px 16px rgba(0, 123, 255, 0.6));
}

.dragging {
    z-index: 3; /* Aún más alto cuando se está arrastrando */
}


.wrapper {
    position: relative;
}

.arrow {
    top: 50%;
    position: absolute;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px; /* Botones circulares */
    width: 50px; /* Ancho del botón */
    height: 50px; /* Altura del botón */
    transform: translateY(-50%);
    background-color: #fff;
    border: 1px solid #ddd;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.5); /* Sombra ligera para resaltar */
    cursor: pointer;
    transition: background-color 0.3s; /* Transición suave al cambiar el color de fondo */
}

.arrow:hover {
    background: #0d6efd;
    color: #ffffff !important;
}

.arrow:hover i{
    color: #ffffff !important;
}

.arrow i {
    color: #555; /* Color del ícono */
    font-size: 1em;
}


#left-arrow {
    left: -12px;
    z-index: 9;
}

#right-arrow {
    right: -12px;
    z-index: 9;
}


#escenografia-container {
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    width: 100%;
    display: flex;
    flex-wrap: nowrap; /* Asegura que los elementos estén en una sola fila */
    align-items: center; /* Alinea verticalmente los elementos en el centro */
    padding: 10px; /* Espacio alrededor del contenedor */
    box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
    border-color: #0b6be1;
    border: 1px solid var(--colour-security);
    border-radius: 10px;
    margin-bottom: 10px;
}


#escenografia-container img {
    vertical-align: middle;
    display: inline-block;
}

#control-buttons {
    position: fixed; /* O 'absolute' según necesites */
    bottom: 10px; /* Distancia desde la parte inferior */
    left: 50%; /* Centra el contenedor en el eje horizontal */
    transform: translateX(-50%); /* Alineación precisa en el centro */
    display: flex;
    flex-direction: column; /* Organiza los elementos en columnas */
    align-items: center; /* Centra los elementos horizontalmente */
    z-index: 4;
    width: auto;
}

#control-buttons .d-flex {
    flex-direction: row; /* Organiza los botones en filas */
    justify-content: center; /* Centra los botones horizontalmente */
    width: 100%; /* Ocupa el ancho completo del contenedor padre */
    gap: 10px; /* Espacio entre los botones */
}


/* Estilos para los botones al estilo Google Maps */
.map-style-button {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px; /* Botones circulares */
    width: 50px; /* Ancho del botón */
    height: 50px; /* Altura del botón */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.5); /* Sombra ligera para resaltar */
    cursor: pointer;
    transition: background-color 0.3s; /* Transición suave al cambiar el color de fondo */
}

.map-style-button:hover {
    background: #0d6efd;
    color: #ffffff !important;
}

.map-style-button:hover i{
    color: #ffffff !important;
}

.map-style-button i {
    color: #555; /* Color del ícono */
    font-size: 1em;
}

/* Asegúrate de que los botones no estén demasiado juntos */
#control-buttons .d-flex {
    gap: 8px;
}

.map-rating {
    position: absolute;
    right: 10px;
    bottom: 26px;
}

.map-rating .bi {
    color: gray;
    font-size: 15px; 
    cursor: pointer;  
}

.map-rating .bi-star-fill {
    color: #ffc107; 
}

.map-visibility {
    position: absolute;
    right: 7px;
    bottom: 3px;
}

.map-visibility i {
    color: #0446a6;
}

.disabled-link {
    color: #6c757d !important;
    pointer-events: none; 
    cursor: default;
}

.illuminated {
    font-weight: bold;
    text-shadow: 0 0 10px rgb(255 255 255);
}

.make-visible-player-2 {
    right: 100px !important;
    top: 22px;
    cursor: pointer;
}

.make-visible-player-1 {
    left: 100px !important;
    top: 10px;
    cursor: pointer;
}

.padding-long {
    padding-top: .5rem!important;
}

.padding-compress {
    padding-top: .25rem!important;
}

#tutorialOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

#tutorialHighlight {
    position: absolute;
    background: transparent;
    border: 2px solid #fff;
    z-index: 1001;
}

#tutorialSpeechBubble {
    position: absolute;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    z-index: 1002;
    /* Ajustar según necesidad */
    width: 350px;
    font-size: 0.82em;
}

#tutorialSpeechBubble button {
    margin-top: 10px;
    margin-right: 5px;
}

.dropdown-game {
    font-size: 0.82em !important;
}

.icon-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    padding-left: 20px; 
}

.icon-circle {
    width: 70px; 
    height: 70px; 
    border-radius: 50%; 
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle img {
    width: 100%; 
}

.menu-separator {
    border: 1px solid white;
    margin: 0px 15px 15px 15px; 
    opacity: 1 !important;
}

#btn-contact {
    padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
    margin-top: calc(-.5 * var(--bs-offcanvas-padding-y));
    margin-right: calc(-.5 * var(--bs-offcanvas-padding-x));
    margin-bottom: calc(-.5 * var(--bs-offcanvas-padding-y));
}




/* Estilo básico para la línea de tiempo */
.timeline {
    position: relative;
    padding-top: 20px;
    list-style: none;
}

/* Línea central para la línea de tiempo */
.timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
    width: 1px;
    margin-left: -1px;
    background-color: #0b6be1 !important;
    background-color: var(--colour-security) !important;   
}

/* Estilo para cada elemento de la línea de tiempo */
.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

/* Estilo para las flechas entre los iconos */
.timeline-item:not(:last-child) .timeline-icon::after {
    content: '\25BC';
    position: absolute;
    top: 100%;
    left: 10px;
    font-size: 20px;
    color: #0b6be1;
}


/* Estilo para el contenido de cada elemento */
.timeline-item .timeline-content {
    margin-left: 14px; /* Ajuste para alinear con el icono */
    margin-right: 10px; /* Asegurar que se extienda hasta el final de la pantalla */
    text-align: left;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 4px;
}

.timeline-item .timeline-content h5 {
    color: #103252 !important;
    color: var(--colour-navy) !important;
    font-size: 1.2em !important;
    margin-bottom: .7rem !important;
}

.timeline-item .timeline-content p {
    font-size: 0.9em !important;
}

/* Estilo para el icono de cada elemento */
.timeline-icon {
    position: absolute;
    top: 20px;
    left: -34px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #0b6be1 !important;
    color: var(--colour-security) !important;   
    border: 1px solid  #0b6be1;
    font-size: 22px;
    line-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo para elementos en el lado izquierdo en desktop */
.timeline-item.left .timeline-content {
    margin-right: calc(50% + 25px);
    text-align: right;
}

/* Estilo para elementos en el lado derecho en desktop */
.timeline-item.right .timeline-content {
    margin-left: calc(50% + 25px);
    text-align: left;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: invert(27%) sepia(99%) saturate(7487%) hue-rotate(214deg) brightness(89%) contrast(119%) !important;
}

.carousel-control-next, .carousel-control-prev {
    opacity: 0.8 !important;
}

.carousel-item {
    padding: 10px;
}

/* Clase personalizada para hacer visibles los checkboxes */
.visible-checkbox {
    width: 20px !important;
    height: 20px !important;
    visibility: visible !important;
    display: inline-block;
    appearance: auto;
    flex-shrink: 0; /* Evita que el checkbox se encoja */
}

/* Clase para alinear los checkboxes en horizontal */
.checkbox-group {
    display: flex;
    flex-direction: row; /* Alinea los checkboxes horizontalmente */
    justify-content: center; /* Centra los checkboxes dentro de la columna */
    align-items: center; /* Alinea verticalmente */
    gap: 5px; /* Ajusta el espacio entre los checkboxes */
    flex-wrap: nowrap; /* Previene el salto de línea */
}

.tp-grey {
   /* background-color: #f1f1f1;*/
}

.tp-grey-crossed {
    position: relative; /* Posiciona correctamente el contenido dentro del div */
    background: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 4px,
        transparent 5px,
        transparent 8px
    ); /* Ajusta el grosor y la opacidad del patrón */
    opacity: 0.5; /* Reduce la opacidad para que se vea apagado */
    background-color: #f0f0f0; /* Un fondo gris claro que sugiere que no está activo */
    border: 1px dashed rgba(0, 0, 0, 0.2); /* Un borde sutil para marcar los límites */
    pointer-events: none; /* Evita la interacción, reforzando la idea de que no está en uso */
}

.border-player1 {
    border: 1px solid #ae0707;
    border: 1px solid var(--colour-player1) !important;
    box-shadow: 0 0 0 transparent;
    background-color: var(--colour-game-background) !important;
}

.border-player2 {
    border: 1px solid #103252;
    border: 1px solid var(--colour-player2) !important;
    border-radius: 0px;
    box-shadow: 0 0 0 transparent;
    background-color: var(--colour-game-background) !important;
}

.cps {
    width: 100%;
    max-height: 82px;
    background-color: #fff;
    box-shadow: 0 0 0 transparent;
}

.prim {
    width: 100%;
    max-height: 86px;
    background-color: #fff;
    box-shadow: 0 0 0 transparent;
    height: 37px;
}

.prim .text,
.cps .text {
    font-family: "Bebas Neue", sans-serif;
    align-items: center;
    font-size: 3em;
    line-height: 100%;
    padding-right: 50px;
    padding-top: 7px;
}

.prim .title,
.cps .title {
    top: 0px;
    left: 0px;
    width: 100%;
    color: #fff;
    border-radius: 0px;
    font-size: 0.8em !important;
    padding: 0.25rem 0.375rem 0.22rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cps .btn-rest {
    bottom: 0px;
    right: 0px;
    width: 35%;
    color: #fff;
    border-radius: 0px;
    cursor: pointer;
    height: 32%;
}

.cps .btn-add {
    top: 28px;
    right: 0px;
    width: 35%;
    color: #fff;
    border-radius: 0px;
    cursor: pointer;
    height: 32.5%;
}

.alert-primary {
    position: absolute;
    top: -2px;
    right: 8px;
}

.heartbeat-icon {
    animation: heartbeat 1.5s infinite;
    display: inline-block;
}

@keyframes heartbeat {
    0%, 20%, 40%, 60%, 80%, 100% {
        transform: scale(1);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: scale(1.2);
    }
}

.titles-player1,
.titles-player2 {
    color: #fff;
    border-radius: 0px;
    font-size: 0.8em !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.border-radius-bl {
    border-radius: 0px 0px 0px 10px !important;
}

.border-radius-br {
    border-radius: 0px 0px 10px 0px !important;
}


.panel_player .tp-select, 
.tc-select {
    flex-grow: 1; 
    color: #fff !important; 
    border: none; 
    padding: 0.375rem;
    background-position: right 7px center;
    border-radius: .375rem;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .35rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.panel_player .tp-select option, 
.tc-select option {
    color: black; /* Texto negro para las opciones */
    background-color: white; /* Fondo blanco para las opciones */
}

.seek-destroy .middle {
    position: relative;
}

.card .middle {
    position: relative;
    overflow: hidden;
}

.seek-destroy-icon .middle::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/seek_destroy.svg'); 
    background-repeat: no-repeat;
    background-position: top;
    background-size: 80%; 
    opacity: 0.04; 
    z-index: 0; 
    pointer-events: none; 
}

.infiltration-icon .middle::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/infiltration.svg'); 
    background-repeat: no-repeat;
    background-position: top;
    background-size: 80%; 
    opacity: 0.04; 
    z-index: 0; 
    pointer-events: none; 
}

.security-icon .middle::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/security.svg'); 
    background-repeat: no-repeat;
    background-position: top;
    background-size: 80%; 
    opacity: 0.04; 
    z-index: 0; 
    pointer-events: none; 
}

.recon-icon .middle::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/recon.svg'); 
    background-repeat: no-repeat;
    background-position: top;
    background-size: 80%; 
    opacity: 0.04; 
    z-index: 0; 
    pointer-events: none; 
}


.point-check {
    appearance: none; 
    -webkit-appearance: none; 
    --bs-form-check-bg-image: none !important;
    mask: url('../img/point.svg') no-repeat center / contain;
    -webkit-mask: url('../img/point.svg') no-repeat center / contain; /* Compatibilidad con webkit */
    background-color: var(--bs-gray-300) !important;
    background-size: contain;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Para un efecto de cambio suave */
}

/* Colores cuando están seleccionados */
.point-check-player1:checked {
    background-color: var(--colour-player1) !important;    
}

.point-check-player2:checked {
    background-color: var(--colour-player2) !important;
}

/* Propiedades adicionales para mantener el estilo */
.point-check:checked {
    cursor: pointer; 
}

.point-check:disabled {
    pointer-events: none;
    filter: none;
    opacity: 1;
}

.point-check:focus {
    outline: none; /* Remueve el contorno al enfocar */
    box-shadow: none; /* Elimina cualquier sombra generada por el focus */
}


.modal-body-p {
    font-size: 0.9em !important;
}

.bg-player1 {
    background-color: #ae0707;
    background-color: var(--colour-player1) !important;
}

.bg-player1-off {
    background-color: #dea9a9;
    background-color: var(--colour-player1-off) !important;
}

.tc-player1 {
    color: #ae0707;
    color: var(--colour-player1) !important;
}

.bg-player1, .bg-player1 select,
.bg-player2, .bg-player2 select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");    
}

.bg-player2 {
    background-color: #103252;
    background-color: var(--colour-player2) !important;
}

.bg-player2-off {
    background-color: #bacad8;
    background-color: var(--colour-player2-off) !important;
}

.tc-player2 {
    color: #103252;
    color: var(--colour-player2) !important;
}

.tourning-point {
    background-color: #fff;
    border: 1px solid #0b6be1;
    border: 1px solid var(--colour-platform-primary);
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;    
}

.tourning-point .label {
    font-size: 24px;
    line-height: 44px;
    font-family: Bebas Neue;
    text-align: center;
    text-transform: uppercase;
    color: #0b6be1;
    color: var(--colour-platform-primary);
}

.btn-primary-platform-outline {
    background-color: #fff;
    color: #0b6be1;
    border: 1px solid #0b6be1;
    border: 1px solid var(--colour-platform-primary);
    background-color: var(--colour-game-background) !important;
}

.btn-check:checked + .btn-primary-platform-outline, .btn-primary-platform-outline:hover {
    background-color: #0b6be1;
    background-color: var(--colour-platform-primary) !important;
    color: #ffffff !important;
}


.btn.btn-primary-platform {
    background-color: #0b6be1;
    background-color: var(--colour-platform-primary);
    color: #ffffff;
    border: 1px solid #0b6be1;
    border: 1px solid var(--colour-platform-primary);
}

.btn.btn-primary-platform:hover {
    background-color: #ffffff !important;
    color: #0b6be1;
    color: var(--colour-platform-primary) !important;
}

.color-picker-label {
    font-size: 0.8em;
}


.tier-row {
    margin-bottom: 5px;
    min-height: 80px;
}

.tier-name {
    text-align: center;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.droppable {
    display: flex; /* Establece el contenedor como un flex container */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en múltiples líneas si es necesario */
    align-items: center; /* Alinea los elementos verticalmente */
    justify-content: flex-start; /* Alinea los elementos al inicio del contenedor */
    min-height: 50px; /* Altura mínima */
    border: 1px dashed #ccc;
}

.draggable {
    margin: 1px; /* Espaciado entre elementos */
    flex-shrink: 0; /* Evita que el elemento se reduzca si hay espacio insuficiente */
}


#factions-container .draggable {
    display: inline-block; /* o puedes usar 'flex' en el contenedor */
}

#factions-container {
    text-align: center; /* Centrar los iconos si hay espacio extra */
}


.tier-S { 
    background-color: #008000; /* Verde oscuro */
}

.tier-A-plus { 
    background-color: #4CAF50; /* Verde */
}

.tier-A { 
    background-color: #8BC34A; /* Verde claro */
}

.tier-A- { 
    background-color: #CDDC39; /* Verde lima */
}

.tier-B-plus { 
    background-color: #FFEB3B; /* Amarillo */
}

.tier-B { 
    background-color: #FFC107; /* Ámbar */
}

.tier-B- { 
    background-color: #FF9800; /* Naranja */
}

.tier-C { 
    background-color: #FF5722; /* Naranja oscuro */
}

.sortable-placeholder {
    background: #f0f0f0; 
    border: 1px dashed #666; 
    height: 70px; 
    width: 70px; 
    border-color: #0d6efd;
    border-radius: 3px;
}

.title-tierlist {
    background-color: #204676; 
    text-align: center;
    color: #fff;
    padding: 2px;
    border-top-left-radius: 10px;  /* Redondea la esquina superior izquierda */
    border-top-right-radius: 10px; /* Redondea la esquina superior derecha */

}

#modal-faction-content {
    font-size: 13px;
}

.modal-faction-data {
    visibility: hidden; /* Ocultar inicialmente */
    opacity: 0; /* Hacer transparente inicialmente */
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 400px;
    min-height: 480px;
    background-color: white; /* Color de fondo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 0px 12px 0 12px;
    z-index: 1000;

    /* Configuración inicial para el flip horizontal */
    transform: perspective(600px) rotateY(90deg);
    backface-visibility: hidden;
    transition: transform 0.5s ease, visibility 0s linear 0.5s, opacity 0.5s ease;
}

.modal-faction-data.show {
    visibility: visible; /* Hacer visible */
    opacity: 1; /* Hacer opaco */
    transform: perspective(600px) rotateY(0deg);
    transition-delay: 0s; /* Resetear el retraso de la transición */
}


.image-radio {
  position: relative;
  display: block;
  margin-bottom: 10px;
}

.gametype-radio-input {
  display: none;
}

.image-radio-label {
  cursor: pointer;
}

.image-radio-label .image-title-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5); /* Banda oscura */
  color: white;
  transition: opacity 0.3s;
  padding: 5px 0;
}

.image-radio-label:hover .image-title-overlay {
  opacity: 0.7;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

#btn-paypal .bi-cup-hot-fill {
  display: inline-block; /* Permite la transformación */
  animation: pulse 0.8s linear infinite; /* Ajusta la duración y el tipo de animación según necesites */
}


.notes-modal-body {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    height: calc(100% - 56px); /* Ajuste según el tamaño de tu modal-header y modal-footer */
}


.notes-message-container {
    display: flex;
    flex-direction: column;
    width: 100%; 
    overflow-x: hidden;
}

.notes-message {
    max-width: 90%;
    margin-bottom: 5px;
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 10px;
    position: relative;
    background-color: #007bff; /* Azul */
    color: white;
    align-self: flex-end;
    word-wrap: break-word;
    font-size: 0.9em;
    margin-left: auto;
    margin-right: 10px;
}

.notes-message::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -10px;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-left-color: #007bff;
    border-bottom: 0;
    border-right: 0;
    transform: translateX(-31%) translateY(50%) rotate(-225deg);
}

.notes-message small {
    font-size: 0.7em;
    font-style: italic;
    position: absolute;
    right: 15px;
    padding-top: 2px;
}

.notes-message-text {
    margin: 0;
}

.notes-message-image {
    max-width: 100%;
    border-radius: 5px;
    display: block;
}

#messagesArea {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 0.9em;
}

#hiddenImageUpload {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.link-tooltip {
    cursor: help;
    text-decoration: underline dotted;
}

.tooltip-inner {
    max-width: 350px;
}

/*Nuevo diseño de tarjetas crit-ops*/

.crit-op { 
    text-align: justify;
    border: 1px solid #282c34;
    border: 1px solid var(--colour-dark-grey);
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;
    position: relative;
    transition: .3s;
    margin-bottom: 10px;
}

.crit-op h2 {
    background-color: #282c34;
    background-color: var(--colour-dark-grey);
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-family: Bebas Neue;
    font-size: 1.8em !important;
    font-weight: 400;
    margin: -1px;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
}

.crit-op .mission-container, 
.tacop .mission-container {
    padding: 15px;
    margin: 0px auto;
    position: relative;
}

.crit-op .mission-action, 
.tacop .mission-action {
    font-weight: 500;
    color: #f94d1a;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.crit-op .header, 
.tacop .header,
.unique-actions-section .header {
    background-color: #f94d1a;
    font-weight: 600;
    color: white;
    padding: 6px 10px 6px 6px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crit-op .header div, 
.tacop .header div {
    padding: 2px 0px 2px 0px;
}

.crit-op .ap-box, 
.tacop .ap-box,
.unique-actions-section .ap-box {
    padding: 5px 0px;
    background-color: inherit;
}

.crit-op .content, 
.tacop .content {
    line-height: 1.6;
    padding: 6px 10px 0px 9px;
    border: 1px solid #f94d1a;
    position: relative;
}

.crit-op .content > ul, 
.tacop .content > ul,
.unique-actions-section > ul {
    list-style: none !important; /* No puntos en la primera lista */
    padding-left: 0 !important;
    margin: 0 !important;
}

.victory-points ul, 
.crit-op .content ul ul, 
.tacop .content ul ul,
.unique-actions-section ul ul {
    list-style: disc !important; /* Forzar los puntos */
    padding-left: 20px !important; /* Asegurar espacio para los puntos */
    margin: 0 !important;
}

.victory-points > ul > li,
.crit-op .content > ul > li,
.tacop .content > ul > li,
.unique-actions-section > ul > li {
    padding-left: 30px;
    position: relative;
}

.victory-points ul li,
.crit-op .content ul ul li,
.tacop .content ul ul li,
.unique-actions-section ul ul li {
    padding-left: 0 !important; /* Elimina padding que podría interferir con los puntos */
    position: static !important; /* Asegura que la posición sea la adecuada */
    display: list-item !important; /* Forzar que los li se muestren como elementos de lista */

}

.mission-cards .victory-points ul, 
.crit-op .victory-points ul, 
.tacop .victory-points ul,
.unique-actions-section ul {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    padding-inline-start: 0px;
}

.mission-cards .victory-points li, 
.crit-op .content li,
.tacop .content li,
.unique-actions-section li {
    margin-bottom: 10px;
    display: block; 
    padding-left: 30px; 
    position: relative;
}

.crit-op .content li strong, 
.crit-op .content li b,
.tacop .content li strong, 
.tacop .content li b {
    font-weight: bold;
    display: inline; 
}


.icon-yes, .icon-no {
    position: absolute;
    left: 1px;
    top: -2px;
    width: 17px;
    height: 17px;
    margin-right: 10px;
    vertical-align: top;
    margin-top: 5px;
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-yes {
    background-image: url(../img/yes.svg);
}

.icon-no {
    background-image: url(../img/no.svg);
}

.icon-inline {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: 0;
    margin-left: 5px;
}


.crit-op .victory-points,
.tacop .victory-points {
    margin-top: 20px;
    line-height: 1.6;
}

.rules-examples .sub-header,
.crit-op .sub-header,
.tacop .sub-header {
    font-weight: 500;
    color: #f94d1a;
    text-transform: uppercase;
    margin-bottom: 2px;
}


.icon-shoot {
    width: 35px;
    height: 15px;
    display: inline-block;
    background: url('../img/shoot.svg') no-repeat center center;
    background-size: contain;
    position: relative;
    top: 2px;
}

.icon-attack {
    width: 35px;
    height: 15px;
    display: inline-block;
    background: url(../img/attack.svg) no-repeat center center;
    background-size: contain;
    position: relative;
    top: 2px;
}

.icon-move {
    width: 35px;
    height: 15px;
    display: inline-block;
    background: url(../img/move.svg) no-repeat center center;
    background-size: contain;
    position: relative;
    top: 2px;
}

.icon-save {
    width: 35px;
    height: 15px;
    display: inline-block;
    background: url(../img/save.svg) no-repeat center center;
    background-size: contain;
    position: relative;
    top: 2px;
}

.icon-wounds {
    width: 35px;
    height: 15px;
    display: inline-block;
    background: url(../img/wounds.svg) no-repeat center center;
    background-size: contain;
    position: relative;
    top: 2px;
}

.icon-apl {
    width: 35px;
    height: 15px;
    display: inline-block;
    background: url(../img/apl.svg) no-repeat center center;
    background-size: contain;
    position: relative;
    top: 2px;
}

.datacard-img{
    max-height: 400px !important;
}

.basic-rules,
.timeline,
.mission-container {
    font-size: calc(13px + 0.2vw);
    text-align: justify;
}

.basic-rules .section {
    font-weight: 500;
    color: #f94d1a;
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: 15px;
    text-transform: uppercase; 
    border-bottom: 1px solid #f94d1a;
}

.basic-rules .rules-title {
    font-weight: 500;
    color: #f94d1a;
    font-size: 15px;
    margin-bottom: 5px;
    margin-top: 5px;
    text-transform: uppercase; 
    border-bottom: 1px solid #f94d1a;
}

.basic-rules a {
    color: inherit; /* Mantiene el color del texto */
    font-weight: 600; /* Ajusta el grosor de la fuente para que esté un poco más negrita */
}

.basic-rules .rules-steps {
    padding: 0px 10px;
    border: 1px solid #dbdde0;
    background-color: #f3f2f2;
}

.basic-rules em {
    color: #f94d1a;
}

.basic-rules .rules-example img,
.basic-rules .rules-example figcaption {
    width: 100%;
}

.intro img {
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 152px;
    margin: 10px 0;
}

.accordion-button:not(.collapsed) {
    background-color: #e4f3f7 !important;
}

.accordion-button:focus {
    box-shadow: none !important;
}


#searchResults {
    width: inherit; /* Ocupar todo el ancho del input */
    max-height: 200px; /* Limitar la altura máxima del dropdown */
    overflow-y: auto; /* Permitir scroll si hay muchos resultados */
    z-index: 1000; /* Asegurarse de que esté encima de otros elementos */
    display: none; /* Oculto por defecto */
}

#searchResults li {
    cursor: pointer; /* Hacer clic en los elementos */
}


.ploy {
    text-align: justify;
    font-size: calc(13px + 0.2vw);
}

.ploy .gambit-title {
    background-color: #919E94;
}

.ploy .firefight-title {
    background-color: #3E4347;
}

.ploy .gambit-title,
.ploy .firefight-title {
    position: relative;
    display: inline-block;
    padding: 13px 7px 8px 5px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ploy .gambit-title::before,
.ploy .firefight-title::before {
    content: '';
    position: absolute;
    top: 2.5px;
    left: -4px;
    right: 2.5px;
    bottom: -5px;
    border: 3.5px solid #ffffff;
    pointer-events: none;
}

.agents-number-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: calc(15px + 0.2vw);
    text-align: center;
    background-color: #4a4a4a !important;
    color: white;
    font-weight: 500;
    vertical-align: middle;
    max-width: 42px;
}

.kills-number-text {
    background-color: #4a4a4a !important;
    font-size: calc(15px + 0.2vw);
    font-weight: 500;
    color: white;    
}

.kills-subtitle {
    background-color: #677369 !important;
    font-weight: 500;
}

.kills-space {
    background-color: #E8472B !important;    
}

.fixed-width {
    width: 100px; /* Establece el ancho que desees para las celdas */
    text-align: center;
}

.selected-row {
    background-color: #f0e68c !important; /* Cambia el color según prefieras */
}

#killopsModal .modal-body {
    font-size: calc(13px + 0.2vw);
}


.exploring-triangle-container {
    position: relative;
    width: 90%; /* Ocupa el 90% del contenedor */
    max-width: 320px; /* Limitar el tamaño máximo del contenedor */
    margin-left: 20px;
    aspect-ratio: 1; /* Mantener la proporción de un cuadrado */
    background: url('../img/triangles_exp_out.svg') no-repeat center center;
    background-size: contain;
}
      

/* Posicionamos la imagen de la flecha central */
.exploring-arrows {
    position: absolute;
    width: 35%;
    height: 35%;
    top: 67%;
    left: 49.5%;
    transform: translate(-50%, -50%);
    background: url('../img/triangle_exp.svg') no-repeat center center;
    background-size: contain;
}

/* Estilos de texto */
.triangle-text {
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    font-weight: 500;
}

/* Números más grandes */
.exploring-triangle-number {
    font-size: 2em; /* Ajustar el tamaño de los números */
}

/* Texto de las acciones más pequeño */
.exploring-triangle-action {
    font-size: 0.78rem; /* Ajustar el tamaño del texto de las acciones */
}

.triangle-text-top {
    top: 23%; /* Ajustar el texto en el triángulo superior */
}

.triangle-text-bottom {
    bottom: 13%;
    left: 25%;
}

.triangle-text-right {
    bottom: 13%;
    right: 25%;
}

.text-warning-emphasis {
    color: #bf08af !important;
}

/* Tema DARK */
body.dark-mode {
  /* Aplicación de las variables personalizadas para el modo oscuro */
  --bs-body-bg: var(--bs-dark) !important;
  --bs-body-color: var(--bs-light) !important;
  --bs-body-bg: var(--bs-dark) !important;
  --bs-body-color: var(--bs-light) !important;
  /* Ajustes para inputs */
  --bs-input-bg: var(--colour-dark-grey); /* Fondo de inputs */
  --bs-input-border-color: var(--colour-navy-off); /* Color del borde de inputs */
  --bs-input-color: var(--bs-light); /* Color del texto dentro de inputs */
  --bs-input-placeholder-color: var(--bs-light-hover); /* Color del placeholder */
  /* Ajustes para botones */
  --bs-button-bg: var(--colour-security); /* Fondo de botones */
  --bs-button-border-color: var(--colour-security); /* Color del borde de botones */
  --bs-button-color: var(--bs-light); /* Color del texto de botones */
}

body.dark-mode .larow {
    background-color: var(--bs-dark) !important;
}

body.dark-mode #btn-contact, 
body.dark-mode #btn-paypal button,
body.dark-mode .dashboard-card-title,
body.dark-mode .dashboard-card-text {
    color: var(--bs-light) !important;
}

/* Aplicando las variables ajustadas a elementos específicos en modo oscuro */
body.dark-mode .form-control,
body.dark-mode .form-control span,
body.dark-mode .form-select {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-input-border-color);
    color: var(--bs-input-color) !important;
}

body.dark-mode .card {
    background-color: #5c5c5c;
    border-color: var(--bs-input-border-color);
    color: var(--bs-input-color) !important;
}

body.dark-mode .form-control::placeholder {
    color: var(--bs-input-placeholder-color) !important;
}

body.dark-mode .btn-primary {
    background-color: var(--bs-button-bg) !important;
    border-color: var(--bs-button-border-color) !important;
    color: var(--bs-button-color) !important;
}

body.dark-mode input[type='date']::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Invierte los colores para el modo oscuro */
}

body.dark-mode .timeline-item .timeline-content,
body.dark-mode .timeline-icon {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-input-color) !important;    
}

body.dark-mode .timeline-item .timeline-content h5,
body.dark-mode .timeline-item:not(:last-child) .timeline-icon::after {
    color: var(--bs-input-color) !important;    
}

body.dark-mode .timeline:before {
    background-color: var(--bs-light) !important;
}

body.dark-mode .card .archetype,
body.dark-mode .card.mission .letter, 
body.dark-mode .card.mission .title {
    background-color: var(--bs-dark-middle);
}

body.dark-mode .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-image: var(--bs-form-select-bg-img);
}

body.dark-mode .weapons-table table, 
body.dark-mode .abilities-table table {
    background-color: #5c5c5c;
}

body.dark-mode .row-odd {
    background-color: #737373;
}

body.dark-mode .row-even {
    background-color: #5c5c5c;
}

body.dark-mode .card-container, 
body.dark-mode .weapons-table th, 
body.dark-mode .abilities-table th,
body.dark-mode .card.infiltration .archetype {
    background-color: var(--bs-dark-middle) !important;
    color: var(--bs-light) !important;
}

body.dark-mode .profile-container .header,
body.dark-mode .datacard-profile-img {
    background-color: var(--bs-dark-orange);
}

body.dark-mode .datacard-header {
    border-color: var(--bs-dark-orange);
}

body.dark-mode .keywords-table {
    border-top-color: var(--bs-dark-orange);
    border-left-color: var(--bs-dark-orange);
}

body.dark-mode .faction,
body.dark-mode .title-action {
    color: var(--bs-dark-orange);
}

body.dark-mode .faction-shadow {
    -webkit-filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.12)); 
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.12)); 
}

body.dark-mode .btn-close {
  --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") !important;
}

body.dark-mode .action-box {
    background-color: #5c5c5c;
}

/* Tooltips para el Modo Oscuro */
body.dark-mode .tooltip-inner {
    color: var(--bs-light); 
}


body.dark-mode .nav-tabs .nav-link.disabled,
body.dark-mode .nav-tabs .nav-link:disabled {
    color: #696969;
}


body.dark-mode  .lang-flags option {
    color: var(--colour-dark-grey);
}


body.dark-mode  #factionFilterSelect option,
body.dark-mode .dropdown-game option {
    padding-left: 0px;
    color: var(--bs-light); 
    background-color: var(--colour-dark-grey) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode #tutorialText,
body.dark-mode .suggestion-item {
    color: var(--colour-dark-grey) !important;
}

body.dark-mode  #factionFilterSelect optgroup{
    padding-left: 0px;
    color: var(--bs-light); 
    background-color: #0d6efd !important;
}


.crit-op .header, .tacop .header, 
.unique-actions-section .header {
    background-color: var(--bs-dark-orange);
}

body.dark-mode .basic-rules .section,
body.dark-mode .basic-rules .rules-title {
    border-bottom: 1px solid var(--bs-dark-orange);
    color: var(--bs-dark-orange);
}

body.dark-mode .basic-rules em {
    color: var(--bs-dark-orange);
}

body.dark-mode .basic-rules .rules-steps {
    border: 1px solid #744c3f;
    background-color: #41464a;    
}

body.dark-mode .ploy .gambit-title::before,
body.dark-mode .ploy .firefight-title::before {
    border: 3.5px solid var(--bs-dark);
}

body.dark-mode .ploy .gambit-title {
    background-color: #717a73;
}

body.dark-mode .ploy .firefight-title {
    background-color: #555d66;
}

body.dark-mode .equipo-name {
    border-color: white !important;
}

body.dark-mode .crit-op .header, 
body.dark-mode .tacop .header, 
body.dark-mode .unique-actions-section .header {
    background-color: var(--bs-dark-orange);
}


body.dark-mode .card-header,
body.dark-mode .card-stats, 
body.dark-mode .card-footer {
    background-color: #262626;
}

body.dark-mode .text-info-emphasis {
    color: #93EBFB !important;
}

body.dark-mode .text-warning-emphasis {
    color: #ff00e9 !important;
}