/*
    FIT4CEA — hoja de estilos del tema (se carga después de la variación de color y de base.css).
    Identidad tomada de la presentación de kick-off de WP2 y del logo de fit4cea.eu:
      · títulos en Helvetica, texto en Calibri (o la sans-serif del sistema); nada se descarga de terceros
      · texto casi negro (#0A0A0A) sobre blanco y grises neutros para superficies
      · UN SOLO VERDE: el teal del logo (#005860) para botones, enlaces, progreso, foco y títulos de grupo
        (decisión 12-09-2026 tras la prueba en móvil: sin verde pálido ni verde brillante)
    Móvil primero: tamaños y espaciados pensados para 375 px; los medios amplían a partir de 768 px.
    Especificidad alta a propósito (body.fit4cea …) para imponerse al tema base.
*/

body.fit4cea {
    --f4c-primary: #005860;
    --f4c-primary-dark: #003e44;
    --f4c-ink: #0a0a0a;
    --f4c-ink-soft: #555555;
    --f4c-line: #dddddd;
    --f4c-surface: #f2f2f2;      /* gris neutro: fila marcada, cabecera de matriz, pista del progreso */
    --f4c-surface-alt: #f8f8f8;  /* filas alternas de la matriz */
    --f4c-heading-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --f4c-body-font: Calibri, Carlito, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    font-family: var(--f4c-body-font);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--f4c-ink);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

body.fit4cea #outerframeContainer {
    -webkit-hyphens: manual;
    hyphens: manual;
    /* Sin separación silábica, pero una palabra que no cabe en la línea se parte antes que desbordar la pantalla
       («Technologie-/apparatuurleveranciersmodel» desbordaba 35 px a 375 px en neerlandés, 14-09-2026) */
    overflow-wrap: anywhere;
}

/* ---------- Cabecera: logo del proyecto con el emblema de la UE ---------- */
body.fit4cea #survey-nav.navbar {
    background-color: #ffffff;
    border-bottom: 1px solid var(--f4c-line);
    box-shadow: none;
    min-height: 60px;
}
body.fit4cea #survey-nav .navbar-brand.logo-container {
    padding: 0.5rem 0;
    margin: 0;
}
body.fit4cea #survey-nav .logo-container img.logo {
    height: 40px;
    width: auto;
    max-width: 70vw;
}
body.fit4cea #survey-nav .navbar-toggler {
    color: var(--f4c-ink);
}

/* ---------- Barra de progreso: fina, verde del logo ---------- */
body.fit4cea .top-container .progress {
    height: 6px;
    border-radius: 0;
    background-color: var(--f4c-surface);
}
body.fit4cea .top-container .progress .progress-bar {
    background-color: var(--f4c-primary);
}

/* ---------- Tipografía ---------- */
body.fit4cea h1,
body.fit4cea h2,
body.fit4cea h3,
body.fit4cea .survey-name,
body.fit4cea .group-title,
body.fit4cea .question-title-container .question-text {
    font-family: var(--f4c-heading-font);
    color: var(--f4c-ink);
    letter-spacing: -0.01em;
}
body.fit4cea h1.survey-name {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.75rem 0 1rem;
}
body.fit4cea #welcome-container p,
body.fit4cea #welcome-container li,
body.fit4cea .group-description {
    font-size: 1.0625rem;
}
body.fit4cea #welcome-container strong {
    font-family: var(--f4c-heading-font);
    font-weight: 600;
}
body.fit4cea #welcome-container ul {
    padding-left: 1.25rem;
}
body.fit4cea #welcome-container li {
    margin-bottom: 0.4rem;
}

/* Título de grupo: teal sobre blanco con filete inferior */
body.fit4cea h2.group-title {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--f4c-primary);
    padding: 0.5rem 0 0.5rem;
    margin: 0.5rem 0 1rem;
    border-bottom: 2px solid var(--f4c-primary);
}

/* ---------- Preguntas: tarjeta blanca con borde fino ---------- */
body.fit4cea .question-container {
    background-color: #ffffff;
    border: 1px solid var(--f4c-line);
    border-radius: 4px;
    padding: 1rem 1rem 0.75rem;
    margin: 0 0 1rem;
    box-shadow: none;
}
body.fit4cea .question-title-container .question-text,
body.fit4cea .question-container .ls-label-question {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}
body.fit4cea .ls-questionhelp,
body.fit4cea .question-help-container,
body.fit4cea .question-valid-container {
    color: var(--f4c-ink-soft);
    font-style: normal;
    font-size: 0.9375rem;
}
body.fit4cea .question-container .asterisk {
    color: #b00020;
}
/* Texto informativo (preguntas de tipo texto libre sin respuesta): sin tarjeta */
body.fit4cea .question-container.boilerplate {
    border: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}
body.fit4cea .question-container.boilerplate .question-text,
body.fit4cea .question-container.boilerplate .ls-label-question {
    font-family: var(--f4c-body-font);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* ---------- Opciones de respuesta: tocables con el pulgar ---------- */
body.fit4cea .answer-item label,
body.fit4cea .checkbox-item label,
body.fit4cea .radio-item label {
    color: var(--f4c-ink);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.35;
    min-height: 44px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
body.fit4cea .radio-item label::before,
body.fit4cea .checkbox-item label::before {
    top: 0.6rem;
}
body.fit4cea .radio-item label::after {
    top: calc(0.6rem + 3px);
}
body.fit4cea .checkbox-item label::after {
    top: calc(0.6rem + 2px);
}
body.fit4cea .answer-item.radio-item,
body.fit4cea .answer-item.checkbox-item {
    margin-bottom: 0;
    border-radius: 4px;
}
/* Opción marcada: se resalta la fila entera, casilla incluida */
body.fit4cea .answer-item.checkbox-item:has(input:checked),
body.fit4cea .answer-item.radio-item:has(input:checked) {
    background-color: var(--f4c-surface);
}
body.fit4cea .form-control,
body.fit4cea .form-select {
    min-height: 44px;
    font-size: 1.0625rem;
    border-color: #bfc4c9;
    color: var(--f4c-ink);
}
body.fit4cea .form-control:focus,
body.fit4cea .form-select:focus {
    border-color: var(--f4c-primary);
    box-shadow: 0 0 0 3px rgba(0, 88, 96, 0.25);
}

/* Matrices: cabeceras discretas y filas legibles en pantallas pequeñas (el tema base las apila) */
body.fit4cea .ls-answers th,
body.fit4cea .ls-answers thead {
    font-family: var(--f4c-heading-font);
    font-weight: 600;
    color: var(--f4c-ink);
    background-color: var(--f4c-surface);
}
body.fit4cea .ls-answers tbody tr:nth-child(even) {
    background-color: var(--f4c-surface-alt);
}
body.fit4cea .ls-answers .answertext {
    color: var(--f4c-ink);
}

/* ---------- Navegación y botones ---------- */
body.fit4cea .ls-move-btn,
body.fit4cea .btn-primary,
body.fit4cea .btn-outline-secondary.ls-saveaction {
    font-family: var(--f4c-heading-font);
    font-weight: 600;
    font-size: 1rem;
    min-height: 46px;
    padding: 0.6rem 1.5rem;
    border-radius: 4px;
}
body.fit4cea .ls-move-btn.btn-primary,
body.fit4cea #ls-button-submit {
    background-color: var(--f4c-primary);
    border-color: var(--f4c-primary);
    color: #ffffff;
}
body.fit4cea .ls-move-btn.btn-primary:hover,
body.fit4cea .ls-move-btn.btn-primary:focus,
body.fit4cea #ls-button-submit:hover,
body.fit4cea #ls-button-submit:focus {
    background-color: var(--f4c-primary-dark);
    border-color: var(--f4c-primary-dark);
    color: #ffffff;
}
body.fit4cea .ls-move-btn.btn-outline-secondary,
body.fit4cea .ls-move-previous-btn {
    color: var(--f4c-primary);
    border-color: var(--f4c-primary);
    background-color: #ffffff;
}
body.fit4cea a {
    color: var(--f4c-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
body.fit4cea a:hover,
body.fit4cea a:focus {
    color: var(--f4c-primary-dark);
}
body.fit4cea :focus-visible {
    outline: 3px solid var(--f4c-primary);
    outline-offset: 2px;
}

/* En móvil, los botones de navegación ocupan todo el ancho y el siguiente va arriba */
@media (max-width: 575.98px) {
    body.fit4cea .outerframe.container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    body.fit4cea #navigator-container {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }
    body.fit4cea #navigator-container > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    body.fit4cea #navigator-container .ls-move-btn {
        width: 100%;
        margin: 0;
    }
    body.fit4cea .question-container {
        padding: 0.875rem 0.875rem 0.5rem;
    }
}

/* Matriz apilada en móvil: la cabecera repite las opciones de cada fila; se oculta.
   Especificidad alta: el tema base la muestra con «.no-tables-mobile table.ls-answers thead:not(.ls-hidden)». */
@media (max-width: 767.98px) {
    body.fit4cea .no-tables-mobile table.ls-answers thead:not(.ls-hidden),
    body.fit4cea table.ls-answers thead {
        display: none;
    }
}

/* Pantallas medianas y grandes: más aire y tipografía algo mayor */
@media (min-width: 768px) {
    body.fit4cea #survey-nav .logo-container img.logo {
        height: 52px;
    }
    body.fit4cea h1.survey-name {
        font-size: 2.25rem;
    }
    body.fit4cea h2.group-title {
        font-size: 1.625rem;
    }
    body.fit4cea .question-container {
        padding: 1.25rem 1.5rem 1rem;
    }
    body.fit4cea .question-title-container .question-text,
    body.fit4cea .question-container .ls-label-question {
        font-size: 1.25rem;
    }
    body.fit4cea #survey-nav .logo-container img.logo {
        height: 52px;
    }
}

/* Aviso de anonimato del pie: discreto */
body.fit4cea .ls-privacy,
body.fit4cea #privacy,
body.fit4cea .privacy-notice {
    color: var(--f4c-ink-soft);
    font-size: 0.875rem;
}

/* Página final */
body.fit4cea #submit-container,
body.fit4cea .completed-text {
    font-size: 1.0625rem;
}

/* ---------- Portada de la instancia (views/layout_survey_list.twig): una columna, botón al router ---------- */
body.fit4cea-home #fit4cea-home,
body.fit4cea-home #fit4cea-footer {
    max-width: 42rem;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}
body.fit4cea-home #fit4cea-home {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}
body.fit4cea-home #fit4cea-home h1 {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.5rem 0 1rem;
}
body.fit4cea-home #fit4cea-home .fit4cea-lead {
    font-size: 1.125rem;
}
body.fit4cea-home #fit4cea-home .fit4cea-start-container {
    margin: 1.5rem 0 0.75rem;
}
body.fit4cea-home #fit4cea-home .fit4cea-start {
    display: block;
    width: 100%;
    background-color: var(--f4c-primary);
    border-color: var(--f4c-primary);
    color: #ffffff;
    text-decoration: none;
}
body.fit4cea-home #fit4cea-home .fit4cea-start:hover,
body.fit4cea-home #fit4cea-home .fit4cea-start:focus {
    background-color: var(--f4c-primary-dark);
    border-color: var(--f4c-primary-dark);
    color: #ffffff;
}
body.fit4cea-home #fit4cea-home .fit4cea-link {
    color: var(--f4c-ink-soft);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}
/* Contacto: mismo tratamiento que un título de grupo */
body.fit4cea-home #fit4cea-home h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--f4c-primary);
    padding-bottom: 0.4rem;
    margin: 2rem 0 0.75rem;
    border-bottom: 2px solid var(--f4c-primary);
}
body.fit4cea-home #fit4cea-footer {
    padding-top: 1rem;
    padding-bottom: 2rem;
    border-top: 1px solid var(--f4c-line);
    color: var(--f4c-ink-soft);
    font-size: 0.875rem;
}
@media (min-width: 576px) {
    body.fit4cea-home #fit4cea-home .fit4cea-start {
        display: inline-block;
        width: auto;
    }
}
@media (min-width: 768px) {
    body.fit4cea-home #fit4cea-home {
        padding-top: 2.5rem;
    }
    body.fit4cea-home #fit4cea-home h1 {
        font-size: 2.125rem;
    }
}