/**
 * Estilos del frontend del cuestionario.
 * Diseño sobrio, tipografía legible, alta accesibilidad.
 */

.epeval-container {
    max-width: 880px;
    margin: 2em auto;
    padding: 1em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #2a2a2a;
    line-height: 1.55;
}

/* Forzar que el atributo hidden funcione aún cuando temas lo sobreescriban */
.epeval-container [hidden] { display: none !important; }
.epeval-container .epeval-nav-link { cursor: pointer; }

.epeval-screen h1 {
    font-size: 1.85em;
    margin-bottom: .3em;
    color: #563782;
}
.epeval-screen h2 { font-size: 1.3em; margin-top: 1.6em; }
.epeval-lead { font-size: 1.05em; color: #444; margin-bottom: 1.4em; }

.epeval-form { margin-top: 1em; }

.epeval-fieldset {
    border: 1px solid #d6d3e0;
    border-radius: 8px;
    padding: 1.2em 1.4em;
    margin-bottom: 1.4em;
    background: #fdfcfe;
}
.epeval-fieldset legend {
    font-weight: 600;
    padding: 0 .5em;
    color: #563782;
}

.epeval-field {
    display: block;
    margin-bottom: 1em;
}
.epeval-field > span,
.epeval-field-label {
    display: block;
    font-weight: 600;
    margin-bottom: .35em;
    color: #333;
}
.epeval-field > small {
    display: block;
    color: #666;
    font-size: .85em;
    margin-top: .25em;
}
.epeval-field input[type="text"],
.epeval-field input[type="email"],
.epeval-field input[type="tel"],
.epeval-field input[type="number"],
.epeval-field select,
.epeval-field textarea {
    width: 100%;
    padding: .55em .75em;
    border: 1px solid #c4c0d2;
    border-radius: 4px;
    font: inherit;
    box-sizing: border-box;
    background: #fff;
}
.epeval-field input:focus,
.epeval-field select:focus,
.epeval-field textarea:focus {
    outline: 2px solid #7B5EA7;
    outline-offset: 1px;
    border-color: #7B5EA7;
}

.epeval-field input[aria-invalid="true"],
.epeval-field select[aria-invalid="true"],
.epeval-field textarea[aria-invalid="true"] {
    border-color: #c0362c;
    background: #fff5f5;
}

.epeval-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}
.epeval-row-4 {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
    .epeval-row-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.epeval-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .55em;
    margin-bottom: .6em;
    line-height: 1.4;
}
.epeval-checkbox input { margin-top: .25em; flex-shrink: 0; }

.epeval-callout {
    background: #fffaeb;
    border: 1px solid #f0d878;
    border-left: 4px solid #c88a17;
    padding: .8em 1em;
    border-radius: 4px;
    margin: 0 0 1.2em;
    font-size: .95em;
    color: #5a4112;
    line-height: 1.5;
}
.epeval-callout strong { color: #3a2a08; }

/* Modal de ambigüedades */
.epeval-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}
.epeval-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}
.epeval-modal-content {
    position: relative;
    background: #fff;
    max-width: 600px;
    width: 100%;
    border-radius: 10px;
    padding: 1.6em 1.8em;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    max-height: 85vh;
    overflow-y: auto;
}
.epeval-modal-content h2 {
    margin-top: 0;
    color: #c88a17;
    font-size: 1.25em;
}
.epeval-conflict-block {
    background: #fff8ed;
    border: 1px solid #f0d878;
    border-radius: 6px;
    padding: .8em 1em;
    margin: .8em 0;
}
.epeval-conflict-block code {
    background: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid #e0d8c5;
    font-size: .95em;
}
.epeval-conflict-block ul {
    margin: .5em 0 .2em 1.5em;
    padding: 0;
}
.epeval-conflict-note {
    font-size: .92em;
    color: #555;
    margin-top: 1em;
}
.epeval-modal-actions {
    display: flex;
    flex-direction: column;
    gap: .55em;
    margin-top: 1.2em;
}
.epeval-btn-link {
    background: transparent;
    color: #563782;
    text-decoration: underline;
    border: none;
    padding: .4em .8em;
    font-size: .92em;
}
.epeval-btn-link:hover { color: #3a2659; }

.epeval-disclosure {
    margin-bottom: 1em;
    border: 1px solid #d6d3e0;
    border-radius: 6px;
    background: #fdfcfe;
}
.epeval-disclosure summary {
    padding: .8em 1em;
    cursor: pointer;
    user-select: none;
}
.epeval-disclosure[open] summary {
    border-bottom: 1px solid #d6d3e0;
}

.epeval-legal-text {
    white-space: pre-wrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .95em;
    padding: 1em 1.2em;
    margin: 0;
    background: #fff;
    color: #333;
    line-height: 1.55;
}

.epeval-edades-grupo {
    background: #f5f2fb;
    border-radius: 6px;
    padding: .8em 1em;
    margin-top: .5em;
}
.epeval-edades-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: .6em;
    margin-top: .4em;
}
.epeval-edades-inputs input {
    padding: .45em;
    border: 1px solid #c4c0d2;
    border-radius: 4px;
    font: inherit;
    text-align: center;
}

.epeval-actions { margin-top: 1.5em; }

.epeval-btn {
    display: inline-block;
    padding: .8em 1.6em;
    font: inherit;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}
.epeval-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.epeval-btn-primary {
    background: #7B5EA7;
    color: #fff;
}
.epeval-btn-primary:hover:not(:disabled) {
    background: #5e4486;
}

.epeval-message {
    margin-top: 1em;
    padding: .8em 1em;
    border-radius: 4px;
    display: none;
}
.epeval-message.error {
    display: block;
    background: #fff5f5;
    color: #c0362c;
    border: 1px solid #f0c0bf;
}
.epeval-message.success {
    display: block;
    background: #f1faf3;
    color: #2c7a3a;
    border: 1px solid #b7e0c1;
}

.epeval-error {
    text-align: center;
    padding: 2em;
}
.epeval-completado {
    text-align: center;
    padding: 2em;
}
.epeval-completado h1 { color: #2c7a3a; }

/* ------- Cuestionario completo ------- */

.epeval-cuestionario .epeval-progreso {
    position: sticky;
    top: 0;
    background: #fdfcfe;
    padding: .8em 0;
    z-index: 10;
    border-bottom: 1px solid #e0dded;
}
.epeval-progress-bar {
    background: #ece8f3;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: .4em;
}
.epeval-progress-fill {
    background: #7B5EA7;
    height: 100%;
    transition: width .3s;
}
.epeval-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .9em;
    color: #555;
    margin: .4em 0 0;
}
.epeval-savestatus { color: #2c7a3a; font-style: italic; }
.epeval-savestatus.saving { color: #888; }
.epeval-savestatus.error  { color: #c0362c; }

.epeval-section-nav {
    margin: 1em 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.epeval-section-nav ol {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .35em;
    min-width: max-content;
}
.epeval-section-nav li {
    flex: 0 0 auto;
}
.epeval-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .45em .65em;
    background: #fff;
    border: 1px solid #d6d3e0;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    min-width: 78px;
    transition: all .15s;
}
.epeval-nav-link:hover { background: #f5f2fb; }
.epeval-section-nav li.active .epeval-nav-link {
    background: #7B5EA7;
    color: #fff;
    border-color: #7B5EA7;
}
.epeval-section-nav li.done .epeval-nav-link {
    background: #e8f5ec;
    border-color: #b7e0c1;
}
.epeval-section-nav li.done.active .epeval-nav-link {
    background: #7B5EA7;
    color: #fff;
}
.epeval-nav-num {
    font-size: 1.2em;
    font-weight: bold;
}
.epeval-nav-label {
    font-size: .75em;
    margin-top: 2px;
}

.epeval-seccion {
    margin-top: 1em;
    padding: 1.4em;
    background: #fff;
    border: 1px solid #e0dded;
    border-radius: 8px;
}
.epeval-seccion-titulo {
    color: #563782;
    margin-top: 0;
}
.epeval-seccion-orden {
    color: #999;
    margin-right: .35em;
}
.epeval-seccion-desc {
    color: #555;
    margin-bottom: 1.5em;
    font-style: italic;
}
.epeval-subseccion {
    color: #563782;
    margin: 1.6em 0 .6em;
    padding-bottom: .35em;
    border-bottom: 1px dashed #d0cce0;
    font-size: 1.05em;
}

.epeval-pregunta {
    margin-bottom: 1.4em;
    padding-bottom: 1em;
    border-bottom: 1px dotted #ece8f3;
}
.epeval-pregunta:last-child { border-bottom: none; }
.epeval-pregunta-texto {
    display: block;
    margin-bottom: .6em;
    font-weight: 500;
}
.epeval-q-num {
    color: #888;
    margin-right: .35em;
    font-weight: 600;
}
.epeval-pregunta-area-main {
    background: #f5f2fb;
    padding: .9em 1em;
    border-radius: 6px;
    border-left: 3px solid #7B5EA7;
}
.epeval-pregunta-area-main .epeval-pregunta-texto { font-weight: 600; }

.epeval-radio-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
}
.epeval-radio-opt {
    display: flex;
    align-items: center;
    gap: .4em;
    padding: .45em .8em;
    border: 1px solid #d6d3e0;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    transition: all .12s;
    font-size: .92em;
}
.epeval-radio-opt:hover { background: #f8f6fc; border-color: #b8a9d4; }
.epeval-radio-opt input { margin: 0; }
.epeval-radio-opt.checked {
    background: #7B5EA7;
    border-color: #7B5EA7;
    color: #fff;
}

.epeval-actions-cuestionario {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin-top: 2em;
    padding: 1em;
    background: #fdfcfe;
    border-top: 1px solid #e0dded;
    position: sticky;
    bottom: 0;
}

.epeval-btn-success {
    background: #2c7a3a;
    color: #fff;
}
.epeval-btn-success:hover:not(:disabled) {
    background: #205a2b;
}

.epeval-revision-resumen {
    background: #f5f2fb;
    padding: 1em 1.4em;
    border-radius: 8px;
    margin-top: 1em;
}
.epeval-revision-resumen ul {
    list-style: none;
    padding: 0;
}
.epeval-revision-resumen li {
    padding: .35em 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #d0cce0;
}
.epeval-revision-resumen li:last-child { border-bottom: none; }
.epeval-revision-resumen .complete { color: #2c7a3a; font-weight: 600; }
.epeval-revision-resumen .incomplete { color: #c0362c; font-weight: 600; }