/* ===================================================
   SIRA – CSS d’accessibilitat garantida
   Aquest CSS defineix els mínims d’usabilitat i
   accessibilitat del frontend SIRA.
   NO és decoratiu.
   Versió plugin: 1.8.2
   =================================================== */


/* ===================================================
   1. ESTRUCTURA I FLUX VISUAL
   =================================================== */
.formulari-sociAI {
    /* font-family: unset; */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.formulari-sociAI input,
.formulari-sociAI button,
.formulari-sociAI label,
.formulari-sociAI textarea,
.formulari-sociAI select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}


/* Agrupació input + botó */
.formulari-sociAI>div {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 0.2em;
}


/* ===================================================
   2. INPUT – llegibilitat de dades crítiques
   =================================================== */

.formulari-sociAI input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 1.3em;
    padding: 0.2em;
    min-width: 8ch;
    text-align: center;
}


/* ===================================================
   3. BOTONS – feedback i prevenció d’errors
   =================================================== */

.formulari-sociAI button {
    font-size: 1.2em;
    padding: 0.2em 1.2em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
    border: none;
    box-sizing: border-box;
    outline: none;
    white-space: nowrap;
}

.formulari-sociAI button:focus-visible {
    outline: 3px solid #a5d6a7;
    outline-offset: 2px;
}

/* Estat desactivat – CRÍTIC */
.formulari-sociAI button:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    outline: none;
}

.formulari-sociAI #sociAI_submit {
    min-width: 9.5em;
    /* ajustable */
    text-align: center;
}


/* ===================================================
   4. MISSATGES – feedback cognitiu clar
   =================================================== */

.formulari-sociAI #sociAI_msg {
    margin-top: 0.6em;
    min-height: 1.2em;
    /* evita salts visuals */
    font-weight: bold;
}


/* ===================================================
   5a. BLOC AUXILIAR – continuïtat del procés
   =================================================== */

.formulari-sociAI .sociAI-aux {
    margin-top: 0.5em;
}

/* ===================================================
   5b. BLOC VERSIÓ – mostrar doscretament la versió del plugin
   =================================================== */

.formulari-sociAI .sociAI-version {
    display: block;
    width: 100%;
    text-align: right !important;
    /* align-self: flex-end; */
    font-size: 0.75em;
    color: #666;
    margin-top: 1.5em;
}

/* ===================================================
   6. FOCUS DE TECLAT – WCAG obligatori
   =================================================== */

.formulari-sociAI button:focus-visible,
.formulari-sociAI input:focus-visible {
    outline: 3px solid #1976d2;
    outline-offset: 2px;
}


/* ===================================================
   7. LECTORS DE PANTALLA – text no visible
   =================================================== */

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ===================================================
   8. MODE FOSC – preferència d’usuari
   =================================================== */

@media (prefers-color-scheme: dark) {

    .formulari-sociAI input {
        background-color: #111;
        color: #f0f0f0;
        border: 1px solid #666;
    }

    .formulari-sociAI #sociAI_msg {
        color: #f0f0f0;
    }

    .formulari-sociAI button:focus-visible,
    .formulari-sociAI input:focus-visible {
        outline-color: #90caf9;
    }
}


/* ===================================================
   9. REDUCCIÓ DE MOVIMENT – accessibilitat neurològica
   =================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* =================================================== */
/* ===================================================
   SIRA – Formulari auxiliar (Accessibility First)
   Base autoportant, independent del tema
   ===================================================
   =================================================== */

/* Bloc general */
.formulari-sociAI .sociAI-aux {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin-top: 1em;
    padding: 1em;
    border-radius: 8px;
    background-color: #e5e5e5;
    color: #000;
}

/* Títol del bloc auxiliar */
.formulari-sociAI .sociAI-aux>p:first-of-type {
    font-weight: normal;
    font-size: 1.0em;
    margin-bottom: 0.4em;
}

/* Text introductori */
.formulari-sociAI .sociAI-aux>p {
    margin-top: 0;
    margin-bottom: 1em;
}

/* Contenidor del formulari auxiliar */
.formulari-sociAI .sociAI-aux-form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* Cada pregunta */
.formulari-sociAI .sociAI-aux-field {
    padding: 0.8em;
    border-radius: 6px;
    background-color: #ffffff;
}

/* Text de la pregunta */
.formulari-sociAI .sociAI-aux-field label,
.formulari-sociAI .sociAI-aux-field legend {
    font-weight: bold;
    display: block;
    margin-bottom: 0.4em;
}

/* Fieldset net i clar */
.formulari-sociAI .sociAI-aux-field fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Opcions (radio / checkbox) */
.formulari-sociAI .sociAI-aux-field fieldset>div {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.4em 0.2em;
}

/* Fer clicable tota la línia */
.formulari-sociAI .sociAI-aux-field fieldset>div label {
    cursor: pointer;
}

/* Inputs text / number / select */
.formulari-sociAI .sociAI-aux-field input[type="text"],
.formulari-sociAI .sociAI-aux-field input[type="number"],
.formulari-sociAI .sociAI-aux-field select {
    width: 100%;
    font-size: 1.05em;
    padding: 0.4em;
    margin-top: 0.2em;
}

/* Focus clar i visible */
.formulari-sociAI .sociAI-aux-field input:focus-visible,
.formulari-sociAI .sociAI-aux-field select:focus-visible {
    outline: 3px solid #1976d2;
    outline-offset: 2px;
}

/* =====================
   Mode fosc
   ===================== */
@media (prefers-color-scheme: dark) {

    .formulari-sociAI .sociAI-aux {
        background-color: #2b2b2b;
        color: #f0f0f0;
    }

    .formulari-sociAI .sociAI-aux-field {
        background-color: #1e1e1e;
    }

    .formulari-sociAI .sociAI-aux-field input[type="text"],
    .formulari-sociAI .sociAI-aux-field input[type="number"],
    .formulari-sociAI .sociAI-aux-field select {
        background-color: #111;
        color: #f0f0f0;
        border: 1px solid #666;
    }

    .formulari-sociAI .sociAI-aux-field input:focus-visible,
    .formulari-sociAI .sociAI-aux-field select:focus-visible {
        outline-color: #90caf9;
    }
}

/* ===== Formulari auxiliar – mode clar ===== */

/* Fons general del bloc auxiliar */
.formulari-sociAI .sociAI-aux {
    background-color: #e5e5e5;
    /* mateix criteri que el formulari base */
}

/* Cada pregunta com a caixa diferenciada */
.formulari-sociAI .sociAI-aux-field {
    background-color: #ffffff;
    /* blanc pur per destacar clarament */
}

@media (prefers-color-scheme: dark) {

    /* Fons general del bloc auxiliar */
    .formulari-sociAI .sociAI-aux {
        background-color: #2f2f2f;
        /* gris fosc, no negre */
    }

    /* Cada pregunta com a caixa diferenciada */
    .formulari-sociAI .sociAI-aux-field {
        background-color: #1a1a1a;
        /* negre menys profund */
    }
}

/* ===================================================
   SIRA – Ràdio: alineació estable (forçar)
   =================================================== */

.formulari-sociAI .sociAI-aux-field fieldset>div:has(input[type="radio"]) {
    display: grid;
    grid-template-columns: 3em auto;
    /* columna fixa + text */
    align-items: center;
    column-gap: 0.8em;
    padding: 0.2em 0;
    justify-content: initial;
    /* anul·la centrats previs */
}

/* Ràdio gran i clar */
.formulari-sociAI .sociAI-aux-field input[type="radio"] {
    width: 1.2em;
    height: 1.2em;
    justify-self: center;
    accent-color: #1976d2;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    .formulari-sociAI .sociAI-aux-field input[type="radio"] {
        accent-color: #90caf9;
    }
}


/* ===================================================
   SIRA – Checkbox: alineació estable (forçar)
   =================================================== */

.formulari-sociAI .sociAI-aux-field fieldset>div:has(input[type="checkbox"]) {
    display: grid;
    grid-template-columns: 3em auto;
    align-items: center;
    column-gap: 0.8em;
    padding: 0.2em 0;
    justify-content: initial;
    /* anul·la centrats previs */
}

/* Checkbox gran */
.formulari-sociAI .sociAI-aux-field input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    justify-self: center;
    accent-color: #1976d2;
}

@media (prefers-color-scheme: dark) {
    .formulari-sociAI .sociAI-aux-field input[type="checkbox"] {
        accent-color: #90caf9;
    }
}

/* ===================================================
   SIRA – Camp numèric accessible
   =================================================== */

.formulari-sociAI .sociAI-aux-field input[type="number"] {
    font-size: 1.4em;
    text-align: center;
    width: fit-content;
    min-width: 7ch;
    max-width: fit-content;
    padding: 0.2em 0.2em 0.2em 0.2em;
}

/* Spinner (controls ↑ ↓) – fer-los visibles */
.formulari-sociAI .sociAI-aux-field input[type="number"]::-webkit-inner-spin-button,
.formulari-sociAI .sociAI-aux-field input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    height: 1.4em;
}

/* Firefox */
/* Eliminar spinners del number (Firefox i estàndard) */
.formulari-sociAI .sociAI-aux-field input[type="number"] {
    -moz-appearance: textfield;
    /* Firefox */
    appearance: textfield;
    /* estàndard */
}

@media (prefers-color-scheme: dark) {

    .formulari-sociAI .sociAI-aux-field input[type="number"] {
        background-color: #111;
        color: #ffffff;
        border: 1px solid #888;
    }
}

/* ===================================================
   SIRA – Camp de text accessible
   =================================================== */

.formulari-sociAI .sociAI-aux-field input[type="text"] {
    font-size: 1.4em;
    /* text clarament més gran */
    width: 100%;
    /* ocupa tot el bloc */
    box-sizing: border-box;
    /* padding inclòs */
    padding: 0.2em 0.6em;
    /* aire equilibrat */
    text-align: center;
}

@media (prefers-color-scheme: dark) {

    .formulari-sociAI .sociAI-aux-field input[type="text"] {
        background-color: #111;
        color: #ffffff;
        border: 1px solid #888;
    }
}

/* ===================================================
   SIRA – Select accessible
   =================================================== */

.formulari-sociAI .sociAI-aux-field select {
    font-size: 1.4em;
    /* text gran */
    width: 100%;
    /* ocupa tot el bloc */
    box-sizing: border-box;
    padding: 0.2em 2.2em 0.2em 0.6em;
    text-align: center;
    /* text centrat */
    appearance: auto;
    /* mantenim control natiu */
}

@media (prefers-color-scheme: dark) {

    .formulari-sociAI .sociAI-aux-field select {
        background-color: #111;
        color: #ffffff;
        border: 1px solid #888;
    }
}



/* ===================================================
   SIRA – Bloc de pagament
   =================================================== */

.formulari-sociAI .sociAI-pay {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin-top: 0.8em;
    padding: 0.8em;
    background-color: #e5e5e5;
    border-radius: 6px;
}

.formulari-sociAI > div.sociAI-pay {
    display: block;
}


.formulari-sociAI .sociAI-pay p {
    margin: 0 0 0.6em 0;
    font-weight: normal;
    font-size: 1.0em;
}

.formulari-sociAI .sociAI-pay-info {
    font-size: 1em;
    line-height: 1.4;
}

.formulari-sociAI .sociAI-pay button {
    font-size: 1.05em;
    padding: 0.6em 1.2em;
    font-weight: bold;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    display: block;
    margin: 0.8em auto 0 auto;    /* centrar botó de pagament */
}



@media (prefers-color-scheme: dark) {

    .formulari-sociAI .sociAI-pay {
        background-color: #1a1a1a;
        border: 1px solid #444;
    }

    .formulari-sociAI .sociAI-pay-info {
        color: #f0f0f0;
    }
}