/* Letra base fija y columna de 960 px como máximo (soporte#231): Pico hace crecer la letra con el ancho de la
   pantalla (hasta 20 px en un portátil) y ensancha la columna hasta 1450 px. Sus reglas van en media queries con el
   mismo selector: estas, que se cargan después, las ganan todas. La letra depende del tamaño del texto del formulario
   (Mantenimiento > Frontoffice, <html data-texto>): 15, 17 (mediano, también sin indicar) o 19 px; el visitante puede
   cambiarlo con los botones A− A A+ de la barra superior, que llegan también a 21 px */
:root {
    --pico-font-size: 106.25%;
}

:root[data-texto="pequeno"] {
    --pico-font-size: 93.75%;
}

:root[data-texto="grande"] {
    --pico-font-size: 118.75%;
}

:root[data-texto="muy-grande"] {
    --pico-font-size: 131.25%;
}

/* Color principal (Mantenimiento > Frontoffice, <html style="--color-principal: #rrggbb">): Pico lo usa en el botón
   Enviar, los enlaces y el foco de los campos; los tonos más claros y más oscuros se calculan a partir de él. Sin
   color, todo queda como estaba */
:root[style*="--color-principal"] {
    --pico-primary: var(--color-principal);
    --pico-primary-background: var(--color-principal);
    --pico-primary-border: var(--color-principal);
    --pico-primary-underline: color-mix(in srgb, var(--color-principal) 50%, transparent);
    --pico-primary-hover: color-mix(in srgb, var(--color-principal) 80%, black);
    --pico-primary-hover-background: color-mix(in srgb, var(--color-principal) 80%, black);
    --pico-primary-hover-border: color-mix(in srgb, var(--color-principal) 80%, black);
    --pico-primary-hover-underline: color-mix(in srgb, var(--color-principal) 80%, black);
    --pico-primary-focus: color-mix(in srgb, var(--color-principal) 35%, transparent);
    --pico-primary-inverse: #fff;
}

:root[style*="--color-principal"] .info-proceso:not(.info-success):not(.info-error) {
    background-color: color-mix(in srgb, var(--color-principal) 8%, white);
    border-left-color: var(--color-principal);
}

:root[style*="--color-principal"] .info-proceso .fa-info-circle,
:root[style*="--color-principal"] .info-proceso a {
    color: var(--color-principal);
}

:root[style*="--color-principal"] .zona-documentos.arrastrando {
    background-color: color-mix(in srgb, var(--color-principal) 8%, white);
}

.container {
    max-width: 960px;
}

label:has(+textarea[required])::after,
label:has(+input[required])::after
{
    content: ' *';
    color: red;
}

.errorMessage {
	color: red;
}

#errorMessage:empty {
	display: none;
}

#errorMessage .info-proceso {
	margin-top: 0.75rem;
	margin-bottom: 0;
}

#sp-top-bar {
    background-color: #f5f5f5;
    box-shadow: rgb(92, 92, 92) 0px -1px 12px -6px inset;
    font-size: 15px;
    padding: 0.15rem 0;
    /* Pico da a todo section 1rem por debajo: la separación hasta el logo ya la pone la cabecera */
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

#sp-top-bar .barra-superior {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}

/* El teléfono no se parte entre líneas; el correo, si no cabe, sí */
#sp-top-bar .sp-contact-phone a {
    white-space: nowrap;
}

#sp-top-bar .sp-contact-email a {
    overflow-wrap: anywhere;
}

#sp-top-bar ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

#sp-top1 ul {
    justify-content: flex-start;
}

#sp-top2 ul {
    justify-content: flex-end;
    gap: 1.25rem;
}

#sp-top-bar li {
    list-style: none;
    padding: 0;
    line-height: 1;
}

#sp-top1 li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

#sp-top1 li a i {
    font-size: 17px;
}

#sp-top1 li a:hover i {
    color: #5a5a5a;
}

#sp-top-bar a {
    font-family: Open Sans, sans-serif;
    color: #8c8c8c;
    text-decoration: none;
}

#sp-top-bar i {
    color: #8c8c8c;
}

#sp-top-bar .sp-contact-info li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

body > header {
    padding: 0;
}

body > header > .container {
    padding-top: 0.6rem;
    padding-bottom: 0;
}

body > main {
    padding-top: 0.75rem;
}

/* Barra superior en móvil o pantalla estrecha (soporte#231): en la primera fila el selector de idioma a la izquierda
   y los iconos de las redes a la derecha; en la segunda, también a la derecha y debajo de las redes, el contacto, con
   teléfono y correo en la misma línea si caben.
   Deja de ser fija: con dos filas taparía parte del formulario */
@media (max-width: 768px) {
    #sp-top-bar {
        position: static;
        padding: 0.4rem 0;
    }

    #sp-top-bar .barra-superior {
        grid-template-columns: 1fr;
        row-gap: 0.35rem;
    }

    #sp-top-bar .social-icons {
        margin-left: auto;
    }

    #sp-top-bar #sp-top2 ul {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.4rem 1.25rem;
    }
}

/* Logo y, a su derecha, la ayuda del formulario (soporte#231); en móvil, la ayuda debajo del logo */
.cabecera-logo {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.cabecera-logo .sp-default-logo {
    flex-shrink: 0;
    max-width: 100%;
    height: auto;
}

.cabecera-logo .ayuda {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .cabecera-logo {
        flex-direction: column;
        gap: 0.6rem;
    }

    .cabecera-logo .ayuda {
        align-self: stretch;
    }
}

main.aviso {
    padding-top: 2rem;
}

main > h1 {
    margin-top: 0;
}

/* ===== Formulario: tamaño reducido y filas ===== */

main > h1 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.info-proceso {
    background-color: #f0f7ff;
    border-left: 4px solid #3b82f6;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.info-proceso p {
    margin: 0 0 0.3rem 0;
    color: #1e3a5f;
}

.info-proceso ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #4a5568;
}

.info-proceso li {
    margin-bottom: 0.1rem;
}

.info-proceso .fa-info-circle {
    color: #3b82f6;
    margin-right: 0.25rem;
}

.info-proceso a {
    color: #2563eb;
    text-decoration: underline;
}

/* Variante success */
.info-proceso.info-success {
    background-color: #f0fdf4;
    border-left-color: #16a34a;
}

.info-proceso.info-success p {
    color: #14532d;
}

.info-proceso.info-success .fa-check-circle {
    color: #16a34a;
    margin-right: 0.25rem;
}

/* Variante error */
.info-proceso.info-error {
    background-color: #fef2f2;
    border-left-color: #dc2626;
}

.info-proceso.info-error p {
    color: #7f1d1d;
}

.info-proceso.info-error .fa-exclamation-triangle {
    color: #dc2626;
    margin-right: 0.25rem;
}

.info-footer {
    margin-top: 0.75rem !important;
    font-size: 0.85rem;
}

.errores-registro {
    background-color: #ffffff;
    border: 1px solid #fecaca;
    padding: 0.75rem;
    margin: 0.5rem 0;
    font-size: 0.85rem;
    color: #7f1d1d;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 4px;
}

#registro legend {
    font-size: 0.9rem;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 0;
    padding-bottom: 0;
}

#registro fieldset {
    margin-bottom: 0.25rem;
}

#registro label {
    font-size: 0.8rem;
    margin-bottom: 0.1rem;
}

#registro input[type="text"],
#registro input[type="email"],
#registro textarea {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.35rem;
    height: auto;
    line-height: 1.3;
}

#registro textarea {
    min-height: 5rem;
    resize: vertical;
}

.asunto-counter {
    text-align: right;
    font-size: 0.75rem;
    color: #8c8c8c;
    margin-top: -0.25rem;
    margin-bottom: 0.25rem;
}

/* ===== Spinner overlay para AutoFirma ===== */

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-overlay[hidden] {
    display: none;
}

.spinner-box {
    background-color: #ffffff;
    padding: 2rem 2.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    max-width: 360px;
}

.spinner-box p {
    margin: 0.75rem 0 0 0;
    font-size: 0.95rem;
    color: #1e3a5f;
    font-weight: bold;
}

.spinner-box .spinner-hint {
    margin-top: 0.25rem;
    font-weight: normal;
    font-size: 0.8rem;
    color: #6b7280;
}

.spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border: 4px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spinner-rotate 0.9s linear infinite;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

/* Sin separación entre filas: ya la da el margen inferior de los campos */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.75rem;
}

.form-row .form-field {
    display: flex;
    flex-direction: column;
}

/* Deshabilitar boton Enviar mientras el formulario no sea valido (solo CSS) */
#registro:invalid input[type="submit"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.form-footnote {
    font-size: 0.75rem;
    color: #8c8c8c;
    margin-top: 0.5rem;
    margin-bottom: 0;
    text-align: right;
    font-style: italic;
}

.required-mark {
    color: red;
    font-weight: bold;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}
/* Documentos (soporte#231): dos zonas (DNI/NIF y el resto) con arrastrar y soltar, la lista de cada una y el total.
   El control nativo queda oculto pero enfocable; se ve el botón propio, traducido */
.zonas-documentos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.zona-documentos {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 2px dashed var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.zona-documentos.obligatoria {
    border-color: #f2a3a3;
}

.zona-documentos.arrastrando {
    border-color: var(--pico-primary);
    background-color: #f0f7ff;
}

#registro .zona-titulo {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.35rem 0;
    font-size: 0.85rem;
}

.zona-marca {
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--pico-muted-color);
}

.zona-marca.obligatoria {
    color: red;
    font-weight: bold;
}

#registro .zona-seleccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
}

#registro input[type="file"].fichero-oculto {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
}

#registro .boton-fichero {
    display: inline-block;
    flex-shrink: 0;
    margin: 0;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--pico-secondary-inverse);
    background: var(--pico-secondary-background);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
}

#registro .boton-fichero:hover {
    background: var(--pico-secondary-hover-background);
}

#registro input[type="file"].fichero-oculto:focus-visible + .zona-seleccion .boton-fichero {
    outline: 2px solid var(--pico-primary-focus);
    outline-offset: 2px;
}

#registro .lista-documentos {
    margin: 0.4rem 0 0 0;
    padding: 0;
}

#registro .lista-documentos:empty {
    display: none;
}

#registro .lista-documentos li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.2rem 0;
    list-style: none;
    font-size: 0.8rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

.lista-documentos .fa {
    color: var(--pico-muted-color);
}

.lista-documentos .nombre-documento {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lista-documentos .tamano-documento {
    color: var(--pico-muted-color);
    white-space: nowrap;
}

#registro .quitar-documento {
    width: auto;
    margin: 0;
    padding: 0 0.35rem;
    line-height: 1.4;
    color: #b91c1c;
    background: none;
    border: 0;
}

#registro .quitar-documento:hover {
    background: #fef2f2;
}

.total-documentos {
    margin: 0.4rem 0 0.5rem 0;
    font-size: 0.75rem;
    color: #8c8c8c;
    text-align: right;
}

.total-documentos.superado {
    color: #b91c1c;
    font-weight: bold;
}

.acciones {
    display: flex;
    justify-content: flex-end;
}

.acciones input[type="submit"] {
    width: auto;
    font-size: 0.85rem;
    padding: 0.35rem 1rem;
    margin: 0.5rem 0 0.5rem 0;
    white-space: nowrap;
}

.spinner-box .spinner-progreso {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.spinner-box .spinner-progreso:empty {
    display: none;
}

@media (max-width: 600px) {
    .zonas-documentos {
        grid-template-columns: 1fr;
    }
}

/* Selector de idioma a la izquierda de la barra superior (frontoffice.idioma.multiidioma); el desplegable
   flota por encima del contenido (position absolute + z-index) y no cambia la altura de la cabecera */
#sp-top1 .sp-column {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

#sp-top-bar .selector-idioma {
    position: relative;
    display: flex;
    align-items: center;
}

#sp-top-bar .selector-idioma details {
    margin: 0;
    padding: 0;
    border: 0;
}

#sp-top-bar .selector-idioma summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #8c8c8c;
    font-family: Open Sans, sans-serif;
    cursor: pointer;
    list-style: none;
}

#sp-top-bar .selector-idioma summary::-webkit-details-marker {
    display: none;
}

#sp-top-bar .selector-idioma summary::after {
    display: none;
}

#sp-top-bar .selector-idioma summary .fa {
    font-size: 0.8rem;
}

#sp-top-bar .selector-idioma ul {
    position: absolute;
    left: 0;
    top: calc(100% + 0.5rem);
    z-index: 1000;
    display: block;
    min-width: 9rem;
    margin: 0;
    padding: 0.3rem 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#sp-top-bar .selector-idioma ul li {
    display: block;
    margin: 0;
    text-align: left;
}

#sp-top-bar .selector-idioma ul a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    color: #333;
    white-space: nowrap;
}

#sp-top-bar .selector-idioma ul a:hover,
#sp-top-bar .selector-idioma ul a.actual {
    background: #f0f0f0;
}

/* Botones A− A A+ del tamaño del texto, en la barra superior junto al selector de idioma; en px, como la barra, para
   que no crezcan con el texto */
/* Pico convierte un role="group" en una botonera a todo el ancho: aquí cada botón con su tamaño */
#sp-top-bar .tamano-texto[role="group"] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

#sp-top-bar .tamano-texto[role="group"] > button {
    flex: 0 0 auto;
    border-radius: 3px;
}

#sp-top-bar .tamano-texto button {
    width: auto;
    margin: 0;
    padding: 1px 6px;
    line-height: 1.2;
    font-family: Open Sans, sans-serif;
    font-weight: bold;
    color: #8c8c8c;
    background: none;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    box-shadow: none;
    cursor: pointer;
}

#sp-top-bar .tamano-texto .texto-menos {
    font-size: 12px;
}

#sp-top-bar .tamano-texto .texto-defecto {
    font-size: 14px;
}

#sp-top-bar .tamano-texto .texto-mas {
    font-size: 16px;
}

#sp-top-bar .tamano-texto button:hover:not(:disabled) {
    color: #5a5a5a;
    border-color: #8c8c8c;
}

#sp-top-bar .tamano-texto button:disabled {
    opacity: 0.4;
    cursor: default;
}