/* Estilos generales */

html, body {
    height: -webkit-fill-available;
    overflow-x: hidden;
  }
body {
    min-height: var(--real100vh);
  }

body {
    font-family: 'Poppins', sans-serif; /* Tipografía más moderna */
    background-color: #1e1e2f; /* Fondo oscuro para un aspecto profesional */
    color: #f0f0f0; /* Texto claro para contraste */
    margin: 0;
    padding: 0px;
    padding-top: calc(env(safe-area-inset-top, 0px) - 15px);
    align-items: center;
    background: #102530;
    overflow-x: hidden;
    flex-direction: column;
    justify-content: center;
}

h3{
    text-align: center;
    background: white;
    color: #102530;
    padding: 5px;
    font-size: 22px;
}

#toast-container>div {
    opacity: 1 !important;
    max-width: 250px;
}

/* Overlay for the popup */
.popup-overlay, .saveAsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Esto ayuda a prevenir problemas con el teclado virtual */
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    padding: 20px;
}

/* Hidden state for the overlay */
.popup-overlay.hidden {
    display: none;
}

/* Popup styling */
.popup {
    background: #102530;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 400px;
    width: 100%;
    margin: 0 20px;
    border: 1px solid white;
    font-size: 16px;

    max-height: 95%; /* Limita el alto del popup */
    overflow-y: auto; /* Activa scroll interno si el contenido se pasa */
}

.popup h2 {
    margin-top: 0;
}

.popup p {
    font-size: 13px;
    line-height: 1.5;
    margin: 15px 0;
}

.popup input {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.popup-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.popup-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.color_red{
    color: #ff5c5c;
}

.red{
    background: #893232;
    color: white;
}

#cancelButton {
    background: #81c7cd;
    color: #1c2c37;
}

#confirmButton {
    background: #893232;
    color: white;
}

#confirmButton.enabled {
    cursor: pointer;
    background: #ff5c5c;
}

#playcover{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: rgba(0, 0, 0, 0.95);
    display: none;
}

.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
    background: #292929eb;
    border-radius: 5px;
}

.cover .fa-arrows-up-down{
    cursor: pointer;
}

.cover .fa-trash-can{
    cursor: pointer;
    font-weight: 200;
}

.bt_move{
    position: absolute;
    bottom: 18px;
    right: 37px;
    padding-left: 12px !important;
}

.bt_delete{
    position: absolute;
    bottom: 18px;
    right: 98px;
}

#svg-container, #svg-container-iphone{
    width: 125px;
    margin-left: 50px;
}

.flex{
    display: flex !important;
    gap: 50px;
    align-items: center;
    justify-content: center;
}

#aux-keyb{
    position: fixed;
    bottom:0;
    right: 0;
    left: 0;
    z-index: 10;
    display: none;
}

.simple-keyboard {
    color:black;
}

.close-b{
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ececec;
}

#close_key{
    color: #333;
    font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
    background: #fff;
    border-radius: 5px;
    border-bottom: 1px solid #b5b5b5;
    padding: 5px;
    width: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 2px;
    box-shadow: 0 0 3px -1px rgba(0,0,0,.3);
}

.hg-theme-default{
    border-radius: 0px 0px 5px 5px !important;
}
/* 🔥 Efecto cuando la tecla es presionada */
.hg-button:active,
.hg-button-active {
  background-color:rgb(180, 179, 175) !important; /* Color de fondo al presionar */
  color: #000 !important; /* Color del texto */
  transform: scale(0.9); /* Simula un efecto de presión */
  transition: background-color 0.1s, transform 0.1s;
}

/* 🔥 Restaurar el estado normal cuando no está presionada */
.hg-button {
  background-color: #f5f5f5; /* Color de fondo por defecto */
  color: #333; /* Color del texto */
  transition: background-color 0.2s, transform 0.2s;
  height: 50px !important;
}

#gamepad-config, #gamepad-config-iphone{
    width:190px;
}

.rojillo {
    fill: #dc5656 !important;
    animation: glow 1.5s ease-in-out infinite;
}

/* Definición de la animación glow */
@keyframes glow {
    0% {
        filter: drop-shadow(0 0 5px black) blur(10px);
    }
    50% {
        filter: drop-shadow(0 0 15px #dc5656) blur(5px);
    }
    100% {
        filter: drop-shadow(0 0 5px #dc5656) blur(2px);
    }
}

.shop_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1e2d34; /* fondo oscuro suave */
    border-radius: 16px;
    padding: 16px;
    margin-top: 12px;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s ease-in-out;
}

.shop_box:hover {
    transform: scale(1.02);
}

.shop_box_left_title {
    font-size: 24px;
    font-weight: 600;
    color: white;
}

.shop_box_left_price {
    font-size: 18px;
    color: #cccccc;
    margin-top: 4px;
}

.shop_box_right button {
    background-color: #2f3f46;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.shop_box_right button:hover {
    background-color: #3c4f58;
}

.shop_popup_img{
    width:60%;
    margin:20px 0px;
}

#shop_popup_credits{
    font-size: 24px;
    font-weight: 600;
    color: #2c2e2f;
}

#shop_popup_price{
    font-size: 18px;
    color: #2c2e2f;
    margin-top: 10px;
}

#popupCancelButton{
    background: #893232;
    color: white;
    margin: 15px 0px;
}

#popupConfirmButton{
    background: #81c7cd;
    color: #1c2c37;
}

#gamepad-log, #gamepad-log-iphone{
    width:100%;
    text-align: center;
}

#cancel-config, #cancel-config-iphone{
    margin-top: 20px;
}

.coverbutton{
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin: 0px 5px;
    border-radius: 50%;
    margin: 0px 5px;
    padding-left: 13px;
    font-size: 22px;
}

#stopActingButton{
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: 500px;
    margin: 0 auto;
}
.key-placeholder span{
    display: flex;
    align-items: center;
    margin-left: 10px;
}
.key-placeholder span i{
    margin-left: 5px;
}

.touches_preventer{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: none;
}

.file_message{
    margin-left: auto;
}

.performanceload{
    width:40px;
}

.fa-angle-right {
    font-size: 20px;
}

.fa-check{
    margin-left: -4px;
    font-size: 20px;
}

.fa-xmark{
    font-size: 20px;
    margin-left: -1px;
}

/* Título */
h1 {
    text-align: center;
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Contenedor principal */
.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #2e2e3f;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.message_switch{
    margin-right: auto;
    display: flex;
    margin-left: 5%;
    z-index: 3;
}

/* Etiquetas */
label {
    display: block;
    color: #f0f0f0;
    margin-right: 10px;
}

.lavel_switch{
    font-size: 13px !important;
    width: auto !important;
}

.group-block{
    padding: 10px;
    background: #1c2c37;
    border-bottom: 1px solid #204658;
}

/* Inputs y Selects */
input,
select,
textarea, #credits {
    width: 65%;
    padding: 5px;
    border: none;
    background-color: unset;
    color: #ffffff;
    font-size: 16px;
    box-sizing: border-box;
    outline: none;
    text-align: right;
    border-radius: 5px;
    
}

.capa{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000000db;
    top: 0;
    left: 0;
    border-radius: 8px;
}
.message_counter{ 
    font-size: 13px;
    margin-top: 10px;
    padding-top: 2px;
    margin-left: 2px;
}

input:disabled{
    opacity: 0.4;
    border-bottom: 1px solid #231f1f;
    background: #232020;
}

#creditbox{
    text-align: center;
    background: #42a34c;
    padding: 5px;
    display: block;
    margin-bottom: 10px;
}

.miniselector{
    margin-right: 10px;
    font-size: 11px;
    width: auto;
}

.miniinput{
    width:100%;
}

.minilabel{
    width: 60px;
}

.key{
    width: 80px;
    padding: 0px;
    height: 30px;
    margin: 5px 0 0px 5px;
    font-size: 12px;
}

.removeMsg{
    z-index: 3;
    display: none;
}

.type2group .input-group{
    margin-bottom: 10px;
}

textarea {
    resize: none;
    height: 50px;
}

.input-group span{
    padding-left: 5px;
}

.labelslider{
    width: 100% !important;
}

/* Botones */
button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    color: #1c2c37;
    background-color: #81c7cd; /* Azul vibrante */
    transition: background-color 0.3s, transform 0.2s;
    align-items: center;
    justify-content: center;
}

button:active {
    background-color: #487a7f; /* Azul más oscuro al pasar el mouse */ 
}


.small {
    border-radius: 50%;
    width: 50px;
    height: 50px;   
    margin: 0px 10px;
}

.red{
    background: #dc5656;
}

.arrow {
    font-weight: bold;
    font-size: 14px;
}

.drop-tittle{
    text-align: center;
    border-top: 1px solid white;
    padding: 15px;
    cursor: pointer;
}

.dropdown-group{
    display: none;
    border: 1px solid #204558;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Botón toggle específico */
#toggleButton {
    background-color: #ff5c5c; /* Rojo vibrante */
    color: white    ;
}

#toggleButton:hover {
    background-color: #d64a4a; /* Rojo más oscuro */
}

/* Slider contenedor */
.slider-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slider{
    text-align: center;
}


/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px !important;
    height: 30px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #82c8cd;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  #backgroundButton, #updateKeysButton{
    margin-top: 10px;
    
  }

/* Label styling */
.input-group label {
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 35%;
    margin: 5px;
}

.input-group .label2 {
    width: 65%;
    display: flex;
    flex-direction: row-reverse;
}

.message_label{
    width: 5% !important;
}

textarea{
    width: 95%;
}

.slider-label{
    font-size: 12px;
    padding: 13px;
}

.group-range{
    display: flex;
    align-items: center;
}

/* Checkbox styling */
.input-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #81c7cd; /* Cambia esto según tu color primario */
    margin: 0;
}

.input-group{
    display: flex;
    position: relative;
}

.flexright{
    flex-direction: row-reverse;
}

.flexright2{
    flex-direction: row-reverse;
    align-items: center;
    margin: 15px 0px 0px;
}

.type2group{
    display: block;
    position: relative;
}

.home-container{
    margin: 0 auto;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    min-height: var(--real100vh2);
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}

.home-container h1 {
    font-family: 'Roboto', sans-serif; /* Fuente profesional */
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #82c8cd; /* Azul claro que complementa el fondo */
}

.home-container p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6; /* Mejora la legibilidad */
    margin: 10px 8px; /* Añade espacio interno */
    color: #ffffff; /* Un tono de gris claro */
}

.fbbutton{
    font-size: 60px;
    color: #82c8cd;
}

.header{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 5px 10px;
    padding-top: 10px;
}

.header_logo img{
    width: 160px;
}

.header_logo{
    margin-right: auto;
}

/* Estilo del saludo */
.greeting {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    position: relative;
}

/* Contenedor del logout */
.logout-container {
    margin-left: 10px;
    position: relative;
}   

/* Icono de power off */
.logout-icon {
    font-size: 18px;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-right: 0;
}

.logout-icon:hover {
    color: #ff5c5c; 
}

/* Menú de logout */
.logout-menu {
    position: absolute;
    top: 40px;
    width: 100px;
    right: 0;
    background-color: #ff5c5c;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.center{
    text-align: center;
}

.padding-box{
    padding:0px 10px;
    margin-bottom: 100px;
    display: inline-block;
}

.spacing{
    padding:0px 10px;
}

#swipe_log{
    font-size: 60px;
    text-align: center;
}

/* Enlace dentro del menú */
.logout-link { 
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.logout-link:hover {
    background-color: #ff5c5c;
}
  

/* Sliders */
input[type="range"] {
    -webkit-appearance: none;
    height: 1px;
    padding: 0;
    background: #f6f6f6;
    border-radius: 5px;
    outline: none;
    transition: background 0.3s;
    width: 100%;
}

#languageSelector-button, #voiceSelector-button{
    display: block;
    width: auto;
}

input[type="checkbox"]{
    width: 20px;
    height: 20px;
}

#mainContainer, .cover-container{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    min-height: 100%;
}

.cover-container{
    padding-top: calc(env(safe-area-inset-top, 0px) - 15px);
}

.toast-top-right {
    top: calc(env(safe-area-inset-top, 0px) - -50px) !important;
}

.main_home{
    min-height:100%;
}

.main_insert_reg_code, .main_insert_password, .main_login{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra verticalmente solo si hay espacio */
    overflow: visible; /* Asegura que el contenido no se corte */
    text-align: center;
}


.main_ghost_whispers{
    height: 100%;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #81c7cd;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: #81c7cd;
    transform: scale(1.2);
}

/* Etiquetas dinámicas para sliders */
.slider-container span {
    font-size: 0.85rem;
    color: #bbbbbb;
}


.custom-slider {
    appearance: none;
    width: 100%;
    height: 6px;
    background: #ccc; /* Color normal del slider */
    border-radius: 5px;
    outline: none;
    transition: background 0.3s ease;
}

/* Botón del slider */
.custom-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #007BFF; /* Azul por defecto */
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.custom-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #007BFF; /* Azul por defecto */
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Estilo del slider activo */
.custom-slider.active-slider { 
    transition: box-shadow 0.3s ease; 
    box-shadow: 0 0 10px rgb(255, 255, 255); /* Sombra suave */
}

/* Botón del slider cuando está activo */
.custom-slider.active-slider::-webkit-slider-thumb { 
    transition: box-shadow 0.3s ease; 
    box-shadow: 0 0 10px rgb(255, 255, 255); /* Sombra suave */
}

.custom-slider.active-slider::-moz-range-thumb { 
    transition: box-shadow 0.3s ease; 
    box-shadow: 0 0 10px rgb(255, 255, 255); /* Sombra suave */
}


/* Fondo para secciones */
textarea{
    border: 1px solid #666677;
    text-align: left;
}
input {
    border-bottom: 1px solid #666677;
}

#delay{
    font-size: 15px;
    color: #82c8cd;
    text-align: center;
}

#remote_connected{
    margin-right: 10px;
    font-size: 22px;
    color: #ffffff;
}

#remote_connected.on{
    color: #90c5cb;
}

#remote_connected.off{
    color: #ff5c5c;
}

/* PAW modal */
#installModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .modal-content {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1ebeb;
    color: black;
    padding: 0px 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 460px;
    margin: 0 auto;
  }
  
  #ios-install-message {
    display: flex;  
    gap: 30px;
    background: #f1ebeb;
    color: black;
    position: fixed;
    top: 0px;
    padding: 10px 20px;
    z-index: 1000;
}
     
  .modal-content button {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  #installButton {
    background-color: #81c7cd;
    color: #1c2c37;
    width: 30%;
  }
  
  .modal-header{
    text-align: left;
    width: 100%;
  }

  #closeModal, #closeModalIOS {
    font-size: 30px;
  }

.login-container { 
    text-align: center; 
    color: white;
    width: 320px;
}

.login-logo{
    width:320px;
}

.home-logo{
    width:200px;
}

.footer{
    border-top: 1px solid #626262;
    border-bottom: 1px solid #626262;
    background:#3c3c3c;
    position: fixed;
    bottom: 0px;
    width: 100%;
    max-width: 500px;
    height: 50px; 
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    z-index: 4;
    margin: 0 auto;
    margin: 0px;    
    padding-bottom: 15px;
}

.foot-button {
    flex: 1; /* Los botones ocupan partes iguales del espacio disponible */
    text-align: center; /* Centrar contenido dentro del botón */
    border-right: 1px solid #626262;
    background: #333;
    padding: 5px 0px;
    border-bottom: 1px solid #626262;
}

.foot-button:last-child {
    border-right: none; /* Quita el borde derecho del último elemento */
}

.foot-button a {
    text-decoration: none; /* Eliminar subrayado de los enlaces */
    color: white; /* Color del texto */
    font-size: 12px; /* Tamaño de la fuente */
    display: flex;
    flex-direction: column; /* Colocar el ícono y el texto en columna */
    align-items: center; /* Centrar horizontalmente */
    justify-content: center; /* Centrar verticalmente */
    transition: color 0.3s ease;
}

.foot-button img{
    width: 35px; /* Tamaño del ícono */
    margin-bottom: 5px; /* Espacio entre el ícono y el texto */
    transition: filter 0.3s ease; /* Transición suave */
}

/* Botón grande */
.foot-button.big {
    flex: 1.5; /* Botón más ancho */
}

.foot-button a:hover img,
.foot-button a:active img,
.foot-button.active a
 {
    color: #90c5cb;
    transition: filter 0.3s ease;
}

.foot-button i{
    font-size: 20px;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.input-container {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.login-container input{
    text-align: center;
    font-size: 18px;
}

.filepond--credits{
    display:none;   
}

.uploadme label{
    color: #1c2c37;
}

input[type="email"], .login-container input {
    width: 100%;
    background: transparent;
    border: none; 
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 18px;
    padding: 10px 0;
    outline: none;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

input[type="email"]::placeholder, .login-container input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.login_span{
    font-size: 14px;
    color: #82c8cd;
}

.text_span{
    font-size: 14px;
    color: white;
    padding: 10px 20px;
    text-align: left;
}

strong{
    color: #82c8cd;
}

#settings{
    font-size: 13px;
}

.trapdoor{
    text-align: center;
    text-decoration: none;
    color: #81c7cd;
    font-weight: bold;
    cursor: pointer;
}

.topwhite{
    border-top: 1px solid white;
}

.underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: #487a7f;
    transition: 2s;
}

input[type="email"]:focus ~ .underline, .login-container input:focus ~ .underline {
    width: 100%;
}

.dropdown{
    display: none;
}

.end{
    border-bottom: 1px solid white;
    padding-bottom: 15px;
    margin-bottom: 15px; 
    background: #1c2c37;
}

.message2{
    margin-right: auto;
    display: flex;
    margin-left: 5%;
}





.table-class { 
    text-align: center; 
    line-height: 40px; 
    border: 1px solid #1f4555;
    margin-top: 10px;
}
.colspan-10{ width:10%}
.colspan-80{ width:80%}
.colspan-90{ 
    width:90%; 
    display: flex;
    position: relative;
}
.colspan-20{ width:20%}
.colspan-70{ width:70%}
.row{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #1f4555;
    padding: 10px 0;
    position: relative;
}
.row-header{ padding:0}
.content{ 
    width: 100%;
    line-height: normal;
    display: flex;
    align-items: center;
}
.cont-button { 
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.small2{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0px 5px;
    
}
.small3{
    padding: 0;
}
.cont-edit{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1c2c37;
    display: none;
    align-items: center;
    justify-content: center;
}
.edit-layer, .rename-layer{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.key2{
    margin: 0 15px;
    padding: 0px;
    height: 30px;
    font-size: 12px;
    max-width: 220px;
}
.labname{
    line-height: normal;
    width: 100%;
}
.labname input{
    width:90%;
}

.hidden{
    display: none;
}

.saveselector{
    margin: 10px 0px 20px;
}
.saveactname input, .saveactname label{
    margin:0px;
    margin-left: 5px;
}

.saveactname{
    margin-bottom: 20px;    
}

.message_buttons{
    padding: 10px;
    display: flex;
    gap: 10px;
}

/* Botón de acción */
.perform-button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.perform-button:hover {
    background-color: #0056b3;
}

/* Celdas del nombre del acto */
.act-name, .file-name {
    text-align: left;
    font-weight: bold;
    padding-left: 15px;
}

/* Checkbox centrado */
.edit-checkbox {
    margin: 0 auto;
    display: block;
}

.min_text{
    font-size: 11px;
}

.keysbox{
    display: flex;
    padding: 0px 5px;
}
.key-placeholder{
    width: 50%;
    font-size: 13px;
    background: #181616;
    border: 1px solid #3d3636;
    padding: 10px;
    margin: 5px 5px;
    display: flex;
    align-items: center;
}
.keysbox2{  
    margin: 5px 0px;
    margin-bottom: 0px; 
    padding: 5px;
    background: white;
    color: black;
    text-align: center;
    font-weight: bold;
}
.keybox3-wrapper{
}
.performa{
    display:flex;
}

#performance-messages{
    max-height: 300px;
    overflow-y: auto;
}

.keysbox3{
    margin: 5px 10px;
    padding: 5px;
    background: #181616;
    border: 1px solid #3d3636;
    text-align: left;
    font-size: 13px;    
    display: flex;
    align-items: center;
}
.keybox3-num{

}
.keybox3-msg{
    width: 100%;
    padding-left: 10px;
}
.keybox3-status{

}
.performance-log{
    height: 1000px;
    font-size: 13px;
    color: #aba0a0;
}
#p-log{ 
    background: #181616;
    border: 1px solid #3d3636;
    height: 100%;
    padding: 15px;
}
#p-log div{
    margin-bottom:10px;
}
.cover-container h3{
    margin: 5px 10px;
}
.cover-msg{
    display: flex;
    justify-content: center;
    align-items: center;
}
.keysbox3 i{
    font-size: 20px;
}

.fa-circle-check{
    color: #82c8cd;
}

.fa-hourglass{
    color: #c7814c;
}

.cover-msg div{
    margin: 0 10px;
}

/* Para depurar: Aplicar un color de fondo a las filas */
.table-row:nth-child(even) {
}

/* Ajuste responsivo */
@media (max-width: 2368px) {
    body {
       
    }

    h1 {
        font-size: 1.8rem;
    }

    button {
        width: 100%;
    }
}

@media (max-width: 350px){
    .header_logo img {
        width: 115px;
    }
}