:root {
    --fd-main-color: #011b7a;
}

/* container */
#fundalogy-form-container {
    max-width: 800px; margin: 0 auto; padding: 0px;
    font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal;
    background: #f5f6fa; /*border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
}
#fundalogy-form-container * {box-sizing: border-box;}


/* header */
.fundalogy-form-header {background-color:var(--fd-main-color); color: #fff; padding: 35px;}
.fundalogy-form-header h2 {margin-bottom: 1em; font-size: 2rem;}
.fundalogy-form-header p {font-size: 1rem; margin: 0;}

/* secciones */
.form-section {padding:50px 25px; padding-bottom: 0;}

.form-section h3 {
    display: flex; align-items: center; justify-content: center;
    padding: 15px; margin: 0; margin-bottom: 35px; 
    background-color: var(--fd-main-color); color:#fff; 
    font-size: 1.4rem; font-weight: 400; text-transform: uppercase; letter-spacing: 1px;
}
.form-section h3 span.section-icon {width: 60px; height: 60px; background: url('../images/icon-f.png') no-repeat center;}
.form-section h3 span.section-title {max-width: 270px; padding: 5px 10px;}

/* campos del formulario */
.form-group {flex: 1; margin-bottom: 1.5em; padding: 20px; padding-top: 0; background-color: #e6e6f2; line-height: 0;}
.form-row {display: flex; gap: 20px; margin-bottom: 1.5rem;}
.form-group.half-width {flex: 0 0 calc(50% - 10px);}

/* index and label */
.form-group .index {display: inline-block;
    width: 25px; height: 25px; margin: 0; margin-bottom: 0.5em;
    font-size: 14px; font-weight: 600; line-height: 25px; text-align: center;
    background-color: var(--fd-main-color); color: #fff;
}
.form-group label, .group-label {display: block; margin:0.6em 0; font-size: 0.95rem; font-weight: 600; color: #333; line-height: 1.5;}
.form-group .form-check label {    display: inline!important;
    margin: 0; font-size: 1rem;
    font-weight: normal; cursor: pointer!important;}

.label-placeholder {display: block;
        font-style: italic;
        font-weight: 400;}



/* inputs */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="url"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
    width: 100%; padding: 12px 16px; 
    font-size: 1rem; font-family: "Manrope", sans-serif;
    border: 2px solid #ddd; border-radius: 6px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;   
}

.form-group input:focus, 
.form-group select:focus,
.form-group textarea:focus {
    outline: none; border-color: var(--fd-main-color); box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.1);
}

.form-group textarea {resize: vertical; min-height: 100px;}
.form-group .form-check input[type="checkbox"] {margin-right: 8px;}

/* TYPE FILE */
.form-group input[type="file"] {padding:5px;}
.form-group input[type="file"]::file-selector-button{
    padding: .5rem .9rem; margin-right: .7rem; border-radius: .4rem; cursor: pointer;
    font: inherit; background: #fff; color: #666; border: 0;
}
.form-group input[type="file"]::file-selector-button:hover{ filter: brightness(1.1); }
.form-group input[type="file"]::file-selector-button:active{ transform: translateY(1px); }
.form-group input[type="file"]:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
/* Safari/Chromium más viejos (opcional) */
@supports selector(input[type="file"]::-webkit-file-upload-button){
    input[type="file"]::-webkit-file-upload-button{
      font: inherit; background: #fff; color: #fff; border: 0;
      padding: .5rem .9rem; border-radius: .4rem; cursor: pointer;
    }
}

.file-item {display: none!important;}
.file-help-text {font-size: 0.90rem;
    color: #666;
    margin: 10px 5px;
    line-height: 1;
    display: block;}
    
/* OBJETIVOS */
.objetivosODS-group {display: flex; flex-wrap: wrap; /*gap: 15px; margin-top: 15px;*/}
.objetivosODS-group .group-label {width: 100%;}
.objetivosODS-group .form-check {width: 20%;}
.objetivosODS-group .form-check label {position: relative; display: inline-block!important;}
.objetivosODS-group .form-check input[type="checkbox"] {position: absolute; opacity: 0; margin: 0;}

.objetivosODS-group .form-check img {
    display: block; max-width: 100%; height: auto; padding: 2px; 
    background-color: #fff; transition: all 0.2s ease; cursor: pointer;
}

.objetivosODS-group .form-check img, .objetivosODS-group .form-check input[type="checkbox"].disabled-by-limit:disabled + img {
    opacity: 0.5; filter: grayscale(70%);
}
.objetivosODS-group .form-check img:hover {opacity: 0.7; filter: grayscale(60%);}
.objetivosODS-group .form-check input[type="checkbox"]:checked + img {opacity: 1; filter: grayscale(0%);}
.objetivosODS-group .form-check input[type="checkbox"].disabled-by-limit:disabled + img {
    cursor: not-allowed;
}

.form-group.range-group {display: flex; flex-wrap: wrap;}
.form-group.range-group .group-label {width: 100%;}
.form-group.range-group .form-radio {width: 10%;
    background-color: #fff;
    border: 5px solid #e6e6f2;
    text-align: center;}

/* Cuando el radio está seleccionado */
.form-group.range-group .form-radio input[type="radio"]:checked + span {
    background-color: #fff; border-color: #ccc; 
  }

/* RGPD */




/* redes sociales */
.social-networks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.social-network-item {
    position: relative;
}

.social-network-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.social-network-item label {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.social-network-item input[type="checkbox"]:checked + label {
    border-color: #2c5aa0;
    background: #f0f4ff;
    color: #2c5aa0;
    font-weight: 600;
}

.social-icon {
    margin-right: 10px;
    font-size: 1.2em;
}

/* Rating  */
.rating-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
}

.rating-container input[type="range"] {
    flex: 1;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

.rating-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #2c5aa0;
    border-radius: 50%;
    cursor: pointer;
}

.rating-container input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #2c5aa0;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.rating-value {
    font-weight: 600;
    font-size: 1.2em;
    color: #2c5aa0;
    min-width: 30px;
    text-align: center;
}

.rating-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.skill-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill-item label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0;
}

/* File Upload */
.file-upload-container {
    text-align: center;
    padding: 30px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

.file-upload-container:hover {
    border-color: #2c5aa0;
}

.file-upload-container input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.file-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #2c5aa0;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.file-upload-label:hover {
    background: #1e3f70;
}

.file-upload-icon {
    font-size: 1.2em;
}

.file-upload-info {
    margin-top: 15px;
    color: #666;
}

.file-list {
    margin-top: 20px;
    text-align: left;
}

.file-item {
    padding: 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-item .file-name {
    font-weight: 500;
}

.file-item .file-size {
    color: #666;
    font-size: 0.9em;
}

/* Enviar */
.form-submit-container {padding: 25px; padding-top: 0;}
.submit-button {
    min-width: 200px; padding: 15px 40px; border: none; border-radius: 0; cursor: pointer;
    font-size: 1.1rem; font-weight: 600; background-color: var(--fd-main-color); color: white;
    transition: all 0.3s ease;
}

.submit-button:hover:not(:disabled) {opacity: 0.8; transform: translateY(-2px);}
.submit-button:disabled {opacity:0.5; cursor: not-allowed; transform: none;}


.submit-loader {
    display: inline-block;
    margin-left: 10px;
}

/* Respuesta */
.form-messages {
    margin-top: 20px;
    padding: 15px;
    border-radius: 6px;
    font-weight: 500;
}

.form-messages.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-messages.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* validación */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}
.error-message {
    display: block!important; margin-top: 5px;
    color: #dc3545; font-size: 0.8rem; font-weight: bold; line-height: 1;
}

/* responsive */
@media (max-width: 768px) {
    /*
    #fundalogy-form-container {padding: 15px; margin: 10px;}
    .form-row {flex-direction: column;}
    .form-group.half-width {flex: 1;}
    */
}

@media (max-width: 480px) {
    /*
    .form-section {padding: 15px; }
    .submit-button {width: 100%; padding: 15px 20px;}
    */
}

.required-asterisk {color: #dc3545; margin-left: 2px;}
#fundalogy-rgpd-container {background-color: #fff; padding: 25px 0;}
#fundalogy-rgpd-container table {border-collapse: collapse; border-spacing: 0;}
#fundalogy-rgpd-container table th, #fundalogy-rgpd-container table td {padding: 10px; vertical-align: top; border:1px solid #ccc; font-size: 0.9rem;}