.elementor-kit-6{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#797979;--e-global-color-text:#C7C7C7;--e-global-color-accent:#837B42;--e-global-color-b297cd6:#0C0C0C;--e-global-color-e626cca:#333333;--e-global-color-c59d4bd:#919191;--e-global-color-e8eb6c1:#191919;--e-global-color-bd19292:#39361E;--e-global-color-75d5c7b:#180D0D;--e-global-color-f8e70e3:#7C7B75;--e-global-color-edce0d3:#161616;--e-global-typography-primary-font-family:"Philosopher";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Philosopher";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Playfair";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Philosopher";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-b297cd6 );color:#FFFFFF;font-family:"Philosopher", Serif;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* CSS COMPONENTES "EXPERIENCIAS"*/

#lista-experiencias {
    position: relative;
    margin-left: 20px;
    padding-left: 30px;
    border-left: 2px solid #837B42;
}

.experiencia-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.experiencia-item {
    position: relative;
    margin-bottom: 40px;
}

.experiencia-punto {
    position: absolute;
    left: -37px;
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: #837B42;
    border-radius: 50%;
    z-index: 2;
}

.experiencia-detalle {
    margin-left: 0;
}

/* Prioridad visual: Rol primero */
.experiencia-detalle .rol {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}

.experiencia-detalle .organizacion {
    font-size: 14px;
    color: #ccc;
    margin-top: 2px;
}

.experiencia-detalle .fecha {
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    margin-top: 4px;
}

/* Oculta los ítems extras */
.experiencia-oculta {
    display: none;
}

/* Botón Ver más */
.btn-ver-mas {
    background-color: transparent;
    border: 1px solid #837B42;
    color: #837B42;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
    display: block;
    border-radius: 7px;
}

.btn-ver-mas:hover {
    background-color: #837B42;
    color: #fff;
}

/* Ocultar al usuario campo 'user_asignator' */
.pods-field__container.pods-field-option.pods-field-html-class.pods-form-ui-row-type-text.pods-form-ui-row-name-user-asignator {
  display: none;
}


/* Botones de acción dentro de cada experiencia */
.acciones-experiencia {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.acciones-experiencia .btn-editar,
.acciones-experiencia .btn-eliminar {
    padding: 7px 14px;
    border: none;
    border-radius: 7px;
    background-color: #837B42;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease-in-out;
}

.acciones-experiencia .btn-eliminar {
    background-color: transparent;
    border: 1px solid #837B42;
    color: #837B42;
}

.acciones-experiencia .btn-editar:hover,
.acciones-experiencia .btn-eliminar:hover {
    background-color: #a29a5b;
    color: #fff;
}

/* Formulario de experiencia */
#form-experiencia {
    margin-top: 5px;
    padding: 30px;
    border-radius: 7px;
    background-color: #1c1c1c;
    border: 0px solid #837B42;
}

#form-experiencia label {
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
    display: block;
}

#form-experiencia input[type="text"],
#form-experiencia input[type="date"] {
    width: 100%;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid #837B42;
    background-color: #0e0e0e;
    color: #fff;
    margin-bottom: 15px;
    box-sizing: border-box;
}

#form-experiencia button[type="submit"] {
    background-color: #837B42;
    color: #fff;
    padding: 7px 14px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

#form-experiencia button[type="submit"]:hover {
    background-color: #a29a5b;
}

/* Mensajes de estado para Experiencias */
.experiencia-estado {
    background-color: #1c1c1c;
    color: #dddddd;
    border-left: 4px solid #837B42;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    max-width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    font-size: 15px;
}

/* Icono si hay */
.experiencia-estado svg {
    margin-right: 10px;
    flex-shrink: 0;
}

/* Fade in/out opcional con JS */
.experiencia-estado.fade {
    animation: fadeInOut 5s ease forwards;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; display: none; }
}


.mensaje-feedback {
    transition: opacity 1s ease;
    opacity: 1;
}
.mensaje-feedback.fade-out {
    opacity: 0;
}


/* Fin CSS COMPONENTES "EXPERIENCIAS" */


/* CSS COMPONENTES "TRIPULANTE - MI PERFIL" */


.mensaje-fallback {
  font-size: 14px;
  color: #333;
  margin: 0;
}

.link-tripulante {
  color: #837B42;
  text-decoration: underline;
  font-weight: 500;
}


/* Fin CSS COMPONENTES "TRIPULANTE - MI PERFIL" */

/* CSS COMPONENTE "MIS DATOS" */

.formulario-completo-datos {
    margin-top: 0px;
    padding: 30px;
    border-radius: 7px;
    background-color: #1c1c1c;
    border: 1px solid #2a2a2a;
    max-width: 600px;
}

.formulario-completo-datos h3 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
}

.formulario-completo-datos label {
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
    display: block;
}

.formulario-completo-datos input[type="text"],
.formulario-completo-datos input[type="date"] {
    width: 100%;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid #837B42;
    background-color: #0e0e0e;
    color: #fff;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.formulario-completo-datos button[type="submit"] {
    background-color: transparent;
    border: 1px solid #837B42;
    color: #837B42;
    padding: 7px 14px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}

.formulario-completo-datos button[type="submit"]:hover {
    background-color: #837B42;
    color: #fff;
}

.mensaje-exito {
    background-color: #1c1c1c;
    color: #00d25b;
    border-left: 4px solid #00d25b;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 7px;
    font-size: 15px;
    max-width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Fin CSS COMPONENTE "MIS DATOS" */

/* Background Animado para Componentes */

  .phi-background {
    position: relative;
    overflow: hidden;
    background-color: #0a0a0a;
    z-index: 0;
  }

  .phi-background::before,
  .phi-background::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: 
      radial-gradient(circle, rgba(42, 42, 42, 0.08) 1%, transparent 1.618%),
      repeating-linear-gradient(
        45deg,
        rgba(42, 42, 42, 0.04),
        rgba(42, 42, 42, 0.04) 1px,
        transparent 1px,
        transparent calc(1px * 1.618)
      );
    background-size: 8% 8%, 3.236px 3.236px;
    animation: phi-spin 60s linear infinite;
    z-index: -1;
  }

  .phi-background::after {
    animation-direction: reverse;
    opacity: 0.5;
  }

  @keyframes phi-spin {
    0% {
      transform: rotate(0deg) scale(1);
    }
    100% {
      transform: rotate(360deg) scale(1);
    }
  }
  
    .full {
      width: 100%;
      height: 100%;
    }

/* Fin Background Animado para Componentes */



/* CSS COMPONENTE "ALTA TRIPULANTE" */

.formulario-alta-tripulante-wrapper {
    margin-top: 20px;
    padding: 30px;
    border-radius: 7px;
    background-color: #1c1c1c;
    border: 1px solid #2a2a2a;
    max-width: 600px;
}

.formulario-alta-tripulante label {
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
}

.formulario-alta-tripulante input[type="text"],
.formulario-alta-tripulante input[type="email"] {
    width: 100%;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid #837B42;
    background-color: #0e0e0e;
    color: #fff;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.formulario-alta-tripulante button[type="submit"] {
    background-color: transparent;
    border: 1px solid #837B42;
    color: #837B42;
    padding: 7px 14px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}

.formulario-alta-tripulante button[type="submit"]:hover {
    background-color: #837B42;
    color: #fff;
}

/* Mensajes de estado */
.formulario-alta-tripulante-wrapper p {
    color: #ccc;
    font-size: 14px;
}

.formulario-alta-tripulante-wrapper p[style*="color: red"] {
    color: #ff6b6b !important;
}

.formulario-alta-tripulante-wrapper p[style*="color: #00d25b"] {
    color: #00d25b !important;
}

.estado-invitacion {
    margin-top: 20px;
    font-size: 15px;
    color: #00d25b;
}

.estado-invitacion.error {
    color: #ff6b6b;
}



/* Fin CSS COMPONENTE "ALTA TRIPULANTE" */

/*  COLOR ESTADOS LOGROS */

.logro-ok {
    padding: 1px 8px;
    background-color: #1c441c;
    margin: 0px;
    border-radius: 7px 0px 7px 0px;
    font-size: 12px !important;
}

.logro-incompleto {
    padding: 1px 8px;
    background-color: #421111;
    margin: 0px;
    border-radius: 7px 0px 7px 0px;
    
}


/* ===============================
   FORMULARIO DE PROYECTO
   =============================== */
#form-proyecto {
    margin-top: 5px;
    padding: 30px;
    border-radius: 7px;
    background-color: #1c1c1c;
    border: 0;
}

#form-proyecto label {
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
    display: block;
}

#form-proyecto input[type="text"],
#form-proyecto input[type="url"],
#form-proyecto input[type="file"],
#form-proyecto input[type="datetime-local"],
#form-proyecto textarea {
    width: 100%;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid #837B42;
    background-color: #0e0e0e;
    color: #fff;
    margin-bottom: 15px;
    box-sizing: border-box;
}

#form-proyecto textarea {
    resize: vertical;
}

#form-proyecto button[type="submit"],
#form-proyecto .btn-guardar {
    background-color: #837B42;
    color: #fff;
    padding: 7px 14px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

#form-proyecto button[type="submit"]:hover,
#form-proyecto .btn-guardar:hover {
    background-color: #a29a5b;
}

/* ===============================
   MENSAJES DE ESTADO
   =============================== */
.proyecto-estado {
    background-color: #1c1c1c;
    color: #dddddd;
    border-left: 4px solid #837B42;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    max-width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    font-size: 15px;
}

/* ===============================
   USUARIOS ASOCIADOS
   =============================== */
.asignacion-usuarios-wrapper {
    margin-top: 20px;
}

.asignacion-usuarios {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}

.usuarios-lista {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.usuarios-lista h4 {
    color: #837B42;
    font-size: 14px;
    margin-bottom: 6px;
    text-align: center;
}

.usuarios-lista select {
    width: 100%;
    height: 200px;
    background-color: #0e0e0e;
    color: #fff;
    border: 1px solid #837B42;
    border-radius: 7px;
    padding: 5px;
}

.botones-asignacion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.botones-asignacion button {
    background-color: #837B42;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.botones-asignacion button:hover {
    background-color: #a29a5b;
}

.buscar-usuario {
    width: 100%;
    padding: 7px 10px;
    margin-bottom: 10px;
    border: 1px solid #837B42;
    border-radius: 7px;
    background-color: #0e0e0e;
    color: #fff;
    font-size: 14px;
}
.buscar-usuario::placeholder {
    color: #aaa;
}

/* ===============================
   BOTÓN EDITAR PROYECTO
   =============================== */
.btn-editar-proyecto {
    background-color: transparent;
    border: 1px solid #837B42;
    color: #837B42;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-block;
}

.btn-editar-proyecto:hover {
    background-color: #837B42;
    color: #fff;
}

/* ===============================
   TOGGLE ESTADO DE INSCRIPCIONES
   =============================== */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.label-estado {
    color: #fff;
    font-size: 14px;
    margin-right: 10px;
    flex-shrink: 0;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    background-color: #7a0000;
    border-radius: 24px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

#proy_inscripcion {
    display: none;
}

#proy_inscripcion:checked + .toggle-switch {
    background-color: #006b3c;
}

#proy_inscripcion:checked + .toggle-switch::after {
    transform: translateX(22px);
}

/* Texto al lado del toggle */
.estado-texto {
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.estado-texto.abiertas {
    color: #00c853;
}
.estado-texto.cerradas {
    color: #d32f2f;
}

/* Ocultar detalles cuando está cerrado */
.oculto {
    display: none;
}

/* ===============================
   SLIDER VACANTES
   =============================== */
.slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

#proy_vacantes {
    flex: 1;
    accent-color: #837B42;
}
#valor-vacantes {
    color: #fff;
    font-size: 14px;
}

/* ===============================
   OPCIONES DE INSCRIPCIÓN
   =============================== */
#opciones-inscripcion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.opcion-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.opcion-item input[type="text"] {
    flex: 1;
    padding: 6px 8px;
    border-radius: 7px;
    border: 1px solid #837B42;
    background-color: #0e0e0e;
    color: #fff;
}

.btn-eliminar-opcion {
    background: #a00;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.btn-eliminar-opcion:hover {
    background: #c22;
}

.btn-eliminar-opcion:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ===============================
   FIELDSETS Y LEYENDAS
   =============================== */
fieldset {
    border: 1px solid #3a3a3a;
    padding: 10px 15px;
    border-radius: 7px;
    margin-bottom: 20px;
}
legend {
    color: #837B42;
    font-weight: bold;
    font-size: 14px;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 768px) {
    .asignacion-usuarios {
        flex-direction: column;
    }
    .botones-asignacion {
        flex-direction: row;
        justify-content: center;
    }
}

.proy-usuarios {
    margin-top: 10px;
    font-size: 14px;
    color: #ccc;
}

.proy-usuarios strong {
    color: #837B42;
}

.proy-usuario-tag {
    display: inline-block;
    background-color: #2a2a2a;
    border: 1px solid #837B42;
    border-radius: 5px;
    padding: 2px 8px;
    margin: 3px 5px 0 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    transition: background-color 0.2s ease;
}

.proy-usuario-tag:hover {
    background-color: #837B42;
    color: #fff;
}

.proy-usuarios.vacio {
    color: #777;
    font-style: italic;
}/* End custom CSS */