/************************************
  Login
******************************************/
.login__form__wrap {
    background-color: #F9F8F4; padding: 20px; border: 20px solid #FFF; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1); border-radius: 10px;
  }
  .login__form__wrap .login__indicaciones { font-style: italic; color: #999; font-size: 13px; }
  .login__form__wrap h3 { font-size: 24px; color:var( --e-global-color-blocksy_palette_1 ); text-align: center; margin-bottom: 15px; }


/************************************
  Perfil
******************************************/  
h3.informacion__titulo {
  display: flex; justify-content: space-between; align-items: center;
}
h3.informacion__titulo img{
  max-width: 120px; height: auto;
}

.perfil__avatar {
  width: 120px; height: 120px; overflow: hidden; border-radius: 50%;
}

.perfil__row__wrap {
  display:flex; gap: 50px;
}
.perfil__row {
    display:flex; gap: 20px;
}
.perfil__col50 {
  width: 50%;  
}
.perfil__col33 {
  width: 33.3333%;  
}
.perfil__col25 {
  width: 25%;  
}
.perfil__col66 {
  width: 66.6666%;  
}
.perfil__sidebar {
    width: 25%;
}
.perfil__content {
    width: 75%;
    padding-bottom: 40px;
}

/***********************************
 Tabla
***********************************/
table.mitabla th{
  background-color: #999; text-align: left; color: #FFF;
}

/***********************************
  Formularios
************************************/
ul.perfil__form {
  padding: 0; margin: 0; list-style: none; 
}
ul.perfil__form li{
  margin-bottom: 10px;
}
ul.perfil__form button.btn,
a.btn, button.btn__rojo {
  padding: 7px 65px;
  border-radius: 14px;
  color: var(--theme-button-text-initial-color);
  border: var(--theme-button-border);
  background-color: var(--theme-button-background-initial-color);
  cursor: pointer;
}
.curso__right a.btn { padding: 7px 25px; text-align: center; width: 100%; }


ul.perfil__form button.btn:hover,
a.btn:hover {
  background-color: var(--theme-button-background-hover-color); color: var(--theme-button-text-initial-color);
}
ul.perfil__form input:disabled {
  background-color: #eee;
  opacity: .6;
}
ul.perfil__form select.text-control {
  font-size: 15px; color: #333; height: 185px; padding: 10px;
}
ul.perfil__form select.text-control option{ color: #333; }

form.esperando { position: relative; }
form.esperando::before { content: ""; width: 100%; height: 100%; position: absolute; top:0; left: 0; background-color: rgba(255, 255, 255, .7); z-index: 9; }
form.esperando::after { content: ""; width: 60px; display: block; position: absolute; left: 50%; top: 50%; z-index: 10;
  margin-left: -30px; margin-top: -7px; opacity: .6;
  aspect-ratio: 4; --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: l7 1s infinite linear; }
@keyframes l7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}

/*****************************
  Loader
*******************************/
/* CSS for the loader */
.loader {
    display: none; /* Hidden by default */
    border: 4px solid #f3f3f3; /* Light gray border */
    border-top: 4px solid #9c0a0a; /* Blue top border for spinning effect */
    border-radius: 50%; /* Circular shape */
    width: 40px; /* Size of the loader */
    height: 40px;
    animation: spin 1s linear infinite; /* Spinning animation */
    position: fixed; /* Center on screen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensure it appears above other content */
}

/* Spinning animation */
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


/*****************************
  Registro Actividad
**************************************/
ul.actividad__wrap { list-style: none; margin: 0; padding: 0; }
ul.actividad__wrap button.btn { 
  padding: 7px 65px;
  border-radius: 14px;
  color: var(--theme-button-text-initial-color);
  border: var(--theme-button-border);
  background-color: var(--theme-button-background-initial-color);
  cursor: pointer;
}


/***********************************
  Cuentas
************************************/
.perfil__cuentas .item{
  padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #CCC; display: flex; gap: 30px; font-size: 13px;
}
.perfil__cuentas .item__logo{
  width: 100px; flex: 0 0 auto;
}
.perfil__cuentas h4 {
  font-size: 15px; margin-bottom: 5px; line-height: 1.2em;
}
.perfil__cuentas p { margin-bottom: 0; }


/****************************************
  Centro de Trabajo
******************************************/
.actividad__contenido  ul {
  list-style: none; margin: 0; padding: 0;
}
.actividad__contenido button.btn {
  padding: 7px 65px;
  border-radius: 14px;
  color: var(--theme-button-text-initial-color);
  border: var(--theme-button-border);
  background-color: var(--theme-button-background-initial-color);
  cursor: pointer;
}
.actividad__contenido button.btn:hover {
  background-color: var(--theme-button-background-hover-color);
  color: var(--theme-button-text-initial-color);
}

/***********************************
 Modal
**************************************/
.modal__wrap {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; align-items: center; justify-content: center; z-index: 99;
}
.modal__wrap.activo {
  display: flex;
}
.modal__wrap .modal__content {
  width: 900px; max-width: 95%; background-color: #FFF; border-radius: 20px; padding: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.075); position: relative;
} 
.modal__content .perfil__row { gap: 40px; }
.modal__content a.modal__cerrar { position: absolute; right:5px; top:5px; display: block; width: 24px; height: 24px; background-color: var(--color-base); color:#FFF; font-weight:bold; border-radius:50%; text-align: center; font-size: 16px; }
.modal__content a.modal__cerrar:hover { background-color: #000; }

#modal_factura { display: none; }


/***********************************
  Misc
************************************/
.mt-1 { margin-top: .25em; }
.mt-2 { margin-top: .5em; }
.mt-3 { margin-top: 1em; }
.mt-4 { margin-top: 2em; }
.mt-5 { margin-top: 4em; }

.mb-1 { margin-bottom: .25em; }
.mb-2 { margin-bottom: .5em; }
.mb-3 { margin-bottom: 1em; }
.mb-4 { margin-bottom: 2em; }
.mb-5 { margin-bottom: 4em; }

.alert { margin-top: 1rem; position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem; }
.alert-success { 
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
 }
 .alert-error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}