/************************************
  General
******************************************/
:root {
  --color-guinda:#9C2E49;
  --color-guinda-oscuro:#90223d;
  --color-guinda-claro:#f9e6e8;
  --color-lightgrey: #F1F1F1;
}

/************************************
  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;
}

.perfil__encabezado {
  display: grid !important;
  background-image: url(https://ccaqp2.hostingcti.com/wp-content/uploads/2025/10/portada-perfil.webp);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 35px;
  padding-top: 140px;
  padding-left: 40px;
  padding-right: 40px;
  margin-bottom: 20px;
}
.perfil__encabezado h1{ color: #FFF; font-size: 35px; }


/***********************************
 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: #FFF;
  border: var(--color-guinda);
  background-color: var(--color-guinda);
  cursor: pointer;
}
.curso__right a.btn { padding: 7px 25px; text-align: center; width: 100%; }


ul.perfil__form button.btn:hover,
a.btn:hover, button.btn__rojo:hover {
  background-color: var(--color-guinda-oscuro); color:#FFF;
}

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 var(--color-guinda); /* 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: #FFF;
  border: var(--color-guinda);
  background-color: var(--color-guinda);
  cursor: pointer;
}
ul.actividad__wrap button.btn:hover {
  color: #FFF;
  background-color: var(--color-guinda-oscuro);
} 


/***********************************
  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(--color-guinda);
  border: var(--color-guinda);
  background-color: var(--color-guinda);
  cursor: pointer;
}
.actividad__contenido button.btn:hover {
  background-color: var(--color-guinda);
  color: var(--color-guinda);
}

/***********************************
 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-guinda); 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, .alert-danger {
  color: var(--color-guinda);
  background-color: #f8d7da;
  border-color: #f5c6cb;
} 

.text-center { text-align: center; }



/***********************************
  Responsive
************************************/
@media screen and (max-width:767px) {
  .perfil__row, .perfil__row__wrap { flex-direction: column; }
  .perfil__col33, .perfil__col25, .perfil__col50 { width: 100%; }

  input[type="file"] { max-width: 100%; width: 180px; }
  .row-cursos { grid-template-columns: 1fr; }

  .curso__detalles h2, h2 { font-size: 25px !important; }  
  .curso__wrap { grid-template-columns: 1fr; } 
  .curso__wrap h3, .modal__content h3, h3 { font-size: 22px !important; }

  .tab__nav ul { padding-left: 0; }
  .tab__nav ul li a { padding: 10px 15px; font-size: 14px; } 
  .curso__right { margin-top: 40px; margin-bottom: 40px; }

  .perfil__sidebar, .perfil__content { width: 100%; }

  table.mitabla th, table.mitabla td { font-size: 13px; padding: 7px 10px; }
  section.filter-block ul.buscador__letras { flex-wrap: wrap; }
  .row-empleos, .row-noticias { grid-template-columns: 1fr; }
  .row-actividades { grid-template-columns: 1fr; }
  .actividad__thumbnail { height: 400px; }
  .resultados-block ul { padding-left: 0; }
}