/**
 * @file traductor-inclusivo.css
 * @brief Estilos generales de EquIAtext.
 * @details Contiene la apariencia global, las pestañas Texto e Imágenes, acceso, mantenimiento, pie de página y componentes compartidos.
 * @ingroup estilos
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #f5f5f7;
    color: #222;
}

h1,
h2,
.subtitulo,
button,
.boton-copiar,
.boton-icono {
    font-family: 'Poppins', sans-serif;
}

.pagina {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

h1,
h2,
.subtitulo,
button,
.boton-copiar,
.boton-icono {
    font-family: 'Poppins', sans-serif;
}

h1 {
    margin-bottom: 8px;
    font-weight: bold;
    color: #4A3678;
}

.subtitulo {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 18px;
    color: #564376;
    font-weight: bold;
}

.descripcion {
    margin-top: 0;
    color: #555;
}

.descripcion-movil {
    display: none;
}

.descripcion-escritorio {
    display: block;
}

.contenedor-traductor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 24px;
}

.columna {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
}

.cabecera-caja {
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    background: #fafafa;
}

.cabecera-caja h2 {
    margin: 0;
    font-size: 18px;
    }

.caja-texto {
    min-height: 300px;
    padding: 18px;
    font-size: 17px;
    line-height: 1.6;
    outline: none;
    white-space: pre-wrap;
}

.caja-original {
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.caja-original.caja-bloqueada {
    background-color: #EEEAF5;
    color: #666;
    cursor: not-allowed;
}

.caja-original:empty::before {
    content: attr(data-placeholder);
    color: #999;
}

.caja-resultado .placeholder {
    color: #999;
}

.acciones {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

button {
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 15px;
    cursor: pointer;
    background: #564376;
    color: #fff;
    font-weight: bold;
}

button:hover {
    opacity: 0.92;
}

.boton-secundario {
    background: #666;
}

.estado {
    margin-top: 14px;
    color: #555;
}

.panel-explicaciones {
    margin-top: 24px;
}

.panel-explicaciones h2 {
    margin-bottom: 14px;
}

/* Cabecera del apartado de explicaciones */
.cabecera-explicaciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.cabecera-explicaciones h2 {
    margin: 0;
}

.boton-informe-cambios {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 36px;
    padding: 7px 11px;

    border: 1px solid #d8c9ea;
    border-radius: 8px;

    background: #fff;
    color: #564376;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;

    cursor: pointer;
}

.boton-informe-cambios:hover {
    background: #EEEAF5;
    color: #4A3678;
    border-color: #4A3678;
    opacity: 1;
}

.boton-informe-cambios svg {
    display: block;
    flex: 0 0 auto;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tarjeta-explicacion {
    background: #fff;
    border: 1px solid #ddd;
    border-left: 6px solid #564376;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.tarjeta-explicacion p {
    margin: 6px 0;
}

.fragmento-original {
    color: #c1121f;
    font-weight: bold;
}

.fragmento-sustituido {
    color: #218838;
    font-weight: bold;
}


.etiqueta-aparicion-fragmento {
    display: inline-block;
    margin-left: 34px;
    color: inherit;
    font-size: 15px;
    line-height: normal;
    font-style: normal;
    font-weight: 400;
    white-space: nowrap;
}

.pie-pagina {
    margin-top: 40px;
    padding-top: 20px;
    padding-bottom: 12px;
    border-top: 1px solid #ddd;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.pie-pagina p {
    margin: 4px 0;
}

.resumen-legal-pie {
    max-width: 920px;
    margin: 0 auto 14px !important;
    color: #564376;
    font-size: 14px;
    line-height: 1.6;
}

.resumen-legal-pie strong {
    color: #4A3678;
}

.linea-titularidad-pie,
.linea-proteccion-pie {
    display: block;
}

.linea-titularidad-pie {
    color: #4A3678;
    font-weight: 600;
}

.linea-proteccion-pie {
    margin-top: 2px;
    color: #756a80;
    font-size: 13px;
    line-height: 1.5;
}

.label-selector-alternativa {
    display: block;
    margin-top: 10px;
    margin-bottom: 6px;
}

.selector-alternativa-traductor {
    display: block;
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #cfc6df;
    border-radius: 6px;
    background-color: #fff;
    color: #222;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
}

.selector-alternativa-traductor option {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
}

.selector-alternativa-traductor:focus {
    outline: 2px solid #4A3678;
    border-color: #4A3678;
}

.opcion-recomendada {
    font-weight: bold;
    color: #4A3678;
}

.nota-recomendada {
    font-size: 13px;
    color: #4A3678;
    margin-top: 4px;
    margin-bottom: 10px;
}

.metadatos-alternativa-seleccionada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;

    min-height: 25px;
    margin: 5px 0 10px;
}

.insignia-alternativa {
    display: inline-flex;
    align-items: center;

    min-height: 25px;
    padding: 4px 9px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}

.insignia-recomendada {
    border-color: #d8cdea;
    background: #eeeaf5;
    color: #4A3678;
}

.insignia-tipo {
    border-color: #eccddd;
    background: #f8eaf0;
    color: #8d244b;
}

.detalle-alternativa {
    margin-top: 10px;
    padding: 10px;
    background-color: #faf7ff;
    border-radius: 6px;
}

/* Ajustes generales responsive */
html {
    font-size: 16px;
}

body {
    overflow-x: hidden;
}

.pagina {
    width: 100%;
}

.contenedor-traductor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.columna {
    min-width: 0;
}

.caja-texto {
    overflow-wrap: break-word;
    word-break: normal;
    overflow-y: auto;
}

.selector-alternativa-traductor {
    max-width: 100%;
}

.cabecera-caja-resultado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.boton-copiar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d8c9ea;
    border-radius: 8px;
    padding: 7px 10px;
    background: #fff;
    color: #564376;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.boton-copiar:hover {
    background: #f4ecff;
    opacity: 1;
}

.boton-copiar svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.boton-copiar.oculto {
    display: none;
}


.boton-copiar:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    background: #f7f5f9;
    color: #867d8f;
    border-color: #dfd8e6;
    box-shadow: none;
}

.boton-copiar:disabled:hover {
    background: #f7f5f9;
    color: #867d8f;
}

.boton-copiar.copiado {
    background: #e6f4ea;
    color: #218838;
    border-color: #b8dfc2;
}

.oculto {
    display: none !important;
}

.cabecera-caja-original,
.cabecera-caja-resultado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #d8c9ea;
    border-radius: 8px;
    background: #fff;
    color: #564376;
    cursor: pointer;
}

.boton-icono:hover {
    background: #f4ecff;
    opacity: 1;
}

.boton-icono svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

button:disabled,
.boton-icono:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

button:disabled:hover,
.boton-icono:disabled:hover {
    opacity: 0.55;
}

.estado-cargando {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #564376;
    font-weight: bold;
}

.spinner-analisis {
    width: 18px;
    height: 18px;
    border: 3px solid #d8c9ea;
    border-top-color: #564376;
    border-radius: 50%;
    animation: girar-spinner 0.8s linear infinite;
}

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

/* Cabecera principal de la aplicación */
.cabecera-aplicacion {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;

    overflow: visible;
}

/* Botón de cierre de sesión */

.boton-logout {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid #d8c9ea;
    border-radius: 8px;

    background: #fff;
    color: #564376;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.boton-logout:hover {
    background: #F8EAF0;
    color: #C94F7C;
    border-color: #C94F7C;

    box-shadow:
        0 4px 12px
        rgba(201, 79, 124, 0.14);
}

.boton-logout svg {
    display: block;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logo-principal {
    display: block;
    width: auto;
    height: 65px;
    max-width: 100%;
    max-width: none;
    object-fit: contain;
    margin-left: -7px;
}

/* Selector principal de modos */
.selector-modos {
    margin-top: 18px;
    border-bottom: 1px solid #ddd;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.tabs-modos {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-width: max-content;
}

/* Sobrescribe el estilo general de los botones */
.tab-modo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: max-content;

    padding: 11px 16px 12px;

    border: none;
    border-radius: 8px 8px 0 0;

    background: transparent;
    color: #666;

    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.tab-modo.activo {
    transform: translateY(-1px);
}

.tab-modo:hover {
    background: #fff;
    color: #564376;
    opacity: 1;
}

.tab-modo.activo {
    background: #fff;
    color: #564376;

    border: 1px solid #cfc0e6;
    border-bottom-color: transparent;

    box-shadow: 0 3px 10px rgba(86, 67, 118, 0.14);

    font-weight: 700;
}

.tab-modo.activo::after {
    content: "";
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: -1px;

    height: 4px;

    border-radius: 4px 4px 0 0;
    background: #C94F7C;
}

.tab-modo:focus-visible {
    outline: 3px solid #d8c9ea;
    outline-offset: 2px;
}

/* Contenido asociado a cada pestaña */
.panel-modo {
    padding-top: 18px;
}

/* Igualación óptica del pie entre Texto, Imágenes y Documentos. */
#panel-documentos {
    padding-bottom: 2px;
}

.panel-modo[hidden] {
    display: none !important;
}

/* Panel temporal para funcionalidades futuras */
.panel-proximamente {
    padding: 28px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
}

.panel-proximamente h2 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #564376;
}

.panel-proximamente p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

/* =========================================================
   Revisión de imágenes
   ========================================================= */

.zona-subida-imagen {
    height: 300px;
    min-height: 300px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: #fff;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.zona-subida-imagen.arrastrando {
    background: #EEEAF5;

    box-shadow:
        inset 0 0 0 2px #564376;
}

.zona-subida-imagen.zona-bloqueada {
    opacity: 0.65;
    pointer-events: none;
}


/* Input oculto */

.input-imagen-oculto {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* Zona inicial */

.contenido-zona-imagen {
    width: 100%;
    min-height: 264px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 24px;

    border: 2px dashed #cfc6df;
    border-radius: 10px;

    background: #FAF7FF;

    text-align: center;
}

.icono-subida-imagen {
    margin-bottom: 14px;

    fill: none;
    stroke: #564376;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.titulo-subida-imagen {
    margin: 0 0 5px;

    color: #4A3678;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.texto-subida-imagen {
    margin: 0 0 16px;

    color: #666;

    font-size: 14px;
}

.ayuda-subida-imagen {
    margin: 12px 0 0;

    color: #888;

    font-size: 12px;
}


/* Botones de selección */

.boton-seleccionar-imagen,
.boton-cambiar-imagen {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 16px;

    border-radius: 8px;

    background: #564376;
    color: #fff;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.boton-seleccionar-imagen:hover,
.boton-cambiar-imagen:hover {
    background: #4A3678;

    box-shadow:
        0 5px 14px
        rgba(74, 54, 120, 0.18);
}


/* Vista previa */

.vista-previa-imagen {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    border-radius: 8px;

    background: #fafafa;
}

.previsualizacion-imagen {
    display: block;

    width: 100%;
    height: 100%;
    max-height: none;

    object-fit: contain;

    border-radius: 8px;

    background: #fafafa;
}

.boton-cambiar-imagen {
    margin-top: 12px;

    background: #fff;
    color: #564376;

    border: 1px solid #d8c9ea;
}

.boton-cambiar-imagen:hover {
    background: #EEEAF5;
    color: #4A3678;
}

/* =========================================================
   Pantalla de acceso administrativo
   ========================================================= */

.pagina-login {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at top left,
            rgba(201, 79, 124, 0.08),
            transparent 34%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(74, 54, 120, 0.10),
            transparent 38%
        ),
        #f5f5f7;
}

.contenedor-login {
    width: 100%;
    max-width: 460px;
}

.tarjeta-login {
    position: relative;

    width: 100%;

    padding: 42px 38px 34px;

    border: 1px solid #ddd;
    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 18px 45px
        rgba(74, 54, 120, 0.12);
}

.logo-login {
    display: block;

    width: min(100%, 300px);

    margin:
        0 auto
        28px;
}

.cabecera-login {
    margin-bottom: 26px;

    text-align: center;
}

.cabecera-login h1 {
    margin:
        0
        0
        8px;

    color: #4A3678;

    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.25;
}

.cabecera-login p {
    margin: 0;

    color: #666;

    font-size: 15px;
    line-height: 1.55;
}


/* Botón volver */

.volver-login {
    position: absolute;

    top: 16px;
    left: 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 1px solid #d8c9ea;
    border-radius: 8px;

    background: #fff;
    color: #564376;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.volver-login:hover {
    background: #EEEAF5;
    color: #4A3678;
    border-color: #4A3678;
}

.volver-login svg {
    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Formulario */

.formulario-login {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.grupo-campo-login {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.grupo-campo-login label {
    color: #333;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.campo-login-con-icono {
    position: relative;
}

.campo-login-con-icono > svg {
    position: absolute;

    top: 50%;
    left: 14px;

    transform: translateY(-50%);

    fill: none;
    stroke: #777;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.campo-login-con-icono input {
    width: 100%;

    padding:
        13px
        48px
        13px
        44px;

    border: 1px solid #d7d3dc;
    border-radius: 8px;

    background: #fff;
    color: #222;

    font-family: 'Inter', sans-serif;
    font-size: 16px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.campo-login-con-icono input:hover {
    border-color: #b9aec9;
}

.campo-login-con-icono input:focus {
    border-color: #4A3678;

    box-shadow:
        0 0 0 3px
        rgba(74, 54, 120, 0.12);

    background: #FAF7FF;
}

.campo-login-con-icono:focus-within > svg {
    stroke: #4A3678;
}

.boton-visibilidad-password {
    position: absolute;
    top: 50%;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6f6878;
    cursor: pointer;
    transform: translateY(-50%);
}

.boton-visibilidad-password:hover,
.boton-visibilidad-password:focus-visible {
    background: #EEEAF5;
    color: #4A3678;
    outline: none;
}

.boton-visibilidad-password:focus-visible {
    box-shadow: 0 0 0 3px rgba(74, 54, 120, 0.16);
}

.boton-visibilidad-password svg {
    position: static;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transform: none;
}

.boton-visibilidad-password svg[hidden] {
    display: none;
}


/* Botón acceder */

.boton-acceso-login {
    width: 100%;

    margin-top: 4px;

    padding: 13px 18px;

    border: none;
    border-radius: 8px;

    background: #564376;
    color: #fff;

    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.boton-acceso-login:hover {
    background: #4A3678;

    box-shadow:
        0 7px 18px
        rgba(74, 54, 120, 0.20);

    opacity: 1;
}

.boton-acceso-login:active {
    transform: translateY(1px);
}


/* Error */

.mensaje-error-login {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-bottom: 20px;
    padding: 11px 13px;

    border: 1px solid #e7b5c7;
    border-radius: 8px;

    background: #F8EAF0;
    color: #8e3155;

    font-size: 14px;
    line-height: 1.45;
}

.mensaje-error-login svg {
    flex: 0 0 auto;

    margin-top: 1px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Pie */

.pie-login {
    margin:
        24px
        0
        0;

    color: #888;

    text-align: center;

    font-size: 12px;
}

/* Tablets y pantallas medianas */
@media (max-width: 900px) {
    .pagina {
        padding: 24px 16px;
    }

    .cabecera-aplicacion {
        margin-bottom: 16px;
    }

    .logo-principal {
        height: 58px;
        margin-left: -6px;
    }

    .contenedor-traductor {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .caja-texto {
        min-height: 240px;
        font-size: 17px;
    }

    .descripcion-escritorio {
        display: none;
    }

    .descripcion-movil {
        display: block;
    }

    .zona-subida-imagen {
        height: 240px;
        min-height: 240px;
    }

    .contenido-zona-imagen {
        min-height: 204px;
    }
}

/* Móviles */
@media (max-width: 600px) {
    .pagina {
        padding: 20px 12px;
    }

    .cabecera-aplicacion {
        margin-bottom: 12px;
    }

    .logo-principal {
        height: 44px;
        margin-left: -5px;
    }

    h1 {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 10px;
    }

    .subtitulo {
        font-size: 17px;
        line-height: 1.35;
    }

    .descripcion {
        font-size: 15px;
        line-height: 1.45;
    }

    .contenedor-traductor {
        margin-top: 18px;
        gap: 14px;
    }

    .cabecera-caja {
        padding: 10px 12px;
    }

    .cabecera-caja h2 {
        font-size: 17px;
    }

    .caja-texto {
        min-height: 220px;
        padding: 14px;
        font-size: 16px;
        line-height: 1.55;
    }

    .acciones {
        flex-direction: column;
        gap: 10px;
    }

    button {
        width: 100%;
        padding: 14px 18px;
        font-size: 16px;
    }

    .estado {
        font-size: 15px;
    }

    .panel-explicaciones {
        margin-top: 20px;
    }

    .panel-explicaciones h2 {
        font-size: 20px;
    }

    .tarjeta-explicacion {
        padding: 12px;
        border-left-width: 4px;
    }

    .tarjeta-explicacion p {
        font-size: 15px;
        line-height: 1.45;
    }

    .selector-alternativa-traductor {
        font-size: 16px;
        padding: 10px;
    }

    .detalle-alternativa {
        padding: 10px;
    }

    .pie-pagina {
        margin-top: 28px;
        padding: 18px 12px 24px;
        font-size: 13px;
        line-height: 1.45;
    }

    .cabecera-caja-resultado {
        align-items: flex-start;
    }

    .boton-copiar {
        padding: 7px 9px;
        font-size: 13px;
    }

    .texto-copiar {
        display: none;
    }

    .boton-icono,
    .boton-copiar {
        width: 36px;
        min-width: 36px;
        height: 36px;
        padding: 0;
    }

    .cabecera-caja-original,
    .cabecera-caja-resultado {
        align-items: center;
    }
	
	.caja-original:empty,
    .caja-resultado:has(.placeholder) {
        min-height: 130px;
    }

    .selector-modos {
        margin-top: 14px;
    }

    .tabs-modos {
        gap: 2px;
    }

    .tabs-modos .tab-modo {
        width: auto;
        min-width: max-content;
        flex: 0 0 auto;

        padding: 10px 13px 11px;

        font-size: 14px;
    }

    .tab-modo.activo::after {
        left: 10px;
        right: 10px;
    }

    .panel-modo {
        padding-top: 14px;
    }

    .panel-proximamente {
        padding: 20px 16px;
    }

    .cabecera-explicaciones {
        align-items: center;
        gap: 10px;
    }

    .cabecera-explicaciones h2 {
        flex: 1;
    }

    .cabecera-explicaciones .boton-informe-cambios {
        width: auto;
        min-width: auto;

        padding: 9px 11px;

        font-size: 13px;
    }

    .cabecera-explicaciones .boton-informe-cambios span {
        display: inline;
    }

    .pagina-login {
        padding: 16px;
    }

    .tarjeta-login {
        padding:
            38px
            22px
            28px;
    }

    .logo-login {
        width: min(100%, 250px);

        margin-bottom: 24px;
    }

    .cabecera-login h1 {
        font-size: 21px;
    }

    .cabecera-login p {
        font-size: 14px;
    }

    .volver-login {
        top: 12px;
        left: 12px;
    }

    .boton-logout {
        width: 36px;
        height: 36px;
    }

    .boton-logout svg {
        width: 19px;
        height: 19px;
    }

    .zona-subida-imagen {
        height: 220px;
        min-height: 220px;
        padding: 14px;
    }

    .contenido-zona-imagen {
        min-height: 192px;
        padding: 20px 14px;
    }

    .boton-seleccionar-imagen,
    .boton-cambiar-imagen {
        width: 100%;
    }

}

/* Móviles muy estrechos */
@media (max-width: 380px) {
    h1 {
        font-size: 28px;
    }

    .subtitulo {
        font-size: 16px;
    }

    .logo-principal {
        width: min(100%, 285px);
    }

    .caja-texto {
        min-height: 200px;
        font-size: 16px;
    }

    .tarjeta-explicacion p {
        font-size: 14px;
    }
	
	.caja-original:empty,
    .caja-resultado:has(.placeholder) {
        min-height: 115px;
    }
}

/* =========================================================
   Revisión de documentos
   ========================================================= */

.contenedor-documentos {
    margin-top: 24px;
}

.columna-documento-carga {
    overflow: hidden;

    border: 1px solid #ddd;
    border-radius: 12px;

    background: #fff;
}

.zona-subida-documento {
    min-height: 290px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: #fff;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.zona-subida-documento.documento-seleccionado {
    min-height: 0;
    padding: 6px;
}

.zona-subida-documento.arrastrando {
    background: #EEEAF5;

    box-shadow:
        inset 0 0 0 2px #564376;
}

.zona-subida-documento.zona-bloqueada {
    opacity: 0.65;
    pointer-events: none;
}

.input-documento-oculto {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

.contenido-zona-documento {
    width: 100%;
    min-height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 28px;

    border: 2px dashed #cfc6df;
    border-radius: 10px;

    background: #FAF7FF;

    text-align: center;
}

.icono-subida-documento,
.icono-archivo-documento svg {
    fill: none;
    stroke: #564376;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icono-subida-documento {
    margin-bottom: 14px;
}

.titulo-subida-documento {
    margin: 0 0 5px;

    color: #4A3678;

    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.texto-subida-documento {
    margin: 0 0 16px;

    color: #666;

    font-size: 14px;
}

.ayuda-subida-documento {
    margin: 12px 0 0;

    color: #888;

    font-size: 12px;
}

.boton-seleccionar-documento,
.boton-cambiar-documento {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 16px;

    border-radius: 8px;

    background: #564376;
    color: #fff;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.boton-seleccionar-documento:hover {
    background: #4A3678;
}

.tarjeta-documento-seleccionado {
    width: 100%;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    gap: 16px;

    padding: 22px;

    border: 1px solid #d8c9ea;
    border-radius: 12px;

    background: #FAF7FF;
}

.icono-archivo-documento {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #EEEAF5;
}

.datos-archivo-documento {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.datos-archivo-documento strong {
    overflow: hidden;

    color: #2F2A5A;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.datos-archivo-documento span {
    color: #777;

    font-size: 13px;
}

.boton-cambiar-documento {
    border: 1px solid #d8c9ea;

    background: #fff;
    color: #564376;
}

.boton-cambiar-documento:hover {
    background: #EEEAF5;
}


/* Progreso */

.progreso-documento {
    margin-top: 18px;

    padding: 14px 16px;

    border: 1px solid #d8c9ea;
    border-radius: 10px;

    background: #fff;
}

.cabecera-progreso-documento {
    margin-bottom: 9px;

    color: #564376;

    font-size: 14px;
    font-weight: 700;
}

.pista-progreso-documento {
    width: 100%;
    height: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: #EEEAF5;
}

.barra-progreso-documento {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #564376,
            #C94F7C
        );

    transition:
        width 0.25s ease;
}


/* Resultados */

.resultados-documento {
    margin-top: 28px;
}

.cabecera-resultados-documento {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;
}

.cabecera-resultados-documento h2 {
    margin: 0 0 4px;

    color: #2F2A5A;
}

.resumen-documento-breve {
    margin: 0;

    color: #666;
}

.acciones-resultados-documento {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 8px;
}

.boton-accion-documento {
    width: auto;

    padding: 9px 12px;

    border: 1px solid #d8c9ea;

    background: #fff;
    color: #564376;

    font-size: 13px;
}

.boton-accion-documento:hover {
    background: #EEEAF5;
    opacity: 1;
}

.resumen-documento {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 20px;
}

.dato-resumen-documento {
    padding: 16px;

    border: 1px solid #e1d9ed;
    border-radius: 10px;

    background: #fff;
}

.dato-resumen-documento strong {
    display: block;

    margin-bottom: 3px;

    color: #4A3678;

    font-family: 'Poppins', sans-serif;
    font-size: 24px;
}

.dato-resumen-documento span {
    color: #666;

    font-size: 13px;
}


/* Selector de vistas */

.selector-vistas-documento {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 16px;

    padding-bottom: 10px;

    border-bottom: 1px solid #ddd;
}

.tab-vista-documento {
    width: auto;

    padding: 9px 13px;

    border: 1px solid transparent;

    background: transparent;
    color: #666;

    font-size: 14px;
}

.tab-vista-documento:hover {
    background: #FAF7FF;
    color: #564376;

    opacity: 1;
}

.tab-vista-documento.activo {
    border-color: #d8c9ea;

    background: #EEEAF5;
    color: #4A3678;
}


/* Filtros */

.filtros-documento {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 16px;
}

.filtro-documento {
    width: auto;

    padding: 8px 12px;

    border: 1px solid #ddd;

    background: #fff;
    color: #666;

    font-size: 13px;
}

.filtro-documento:hover {
    border-color: #cfc0e6;

    background: #FAF7FF;
    color: #564376;

    opacity: 1;
}

.filtro-documento.activo {
    border-color: #564376;

    background: #564376;
    color: #fff;
}


/* Incidencias */

.lista-incidencias-documento {
    display: grid;

    gap: 14px;
}

.incidencia-documento {
    overflow: hidden;

    border: 1px solid #ddd;
    border-left: 6px solid #C94F7C;
    border-radius: 10px;

    background: #fff;
}

.incidencia-documento.estado-aplicada {
    border-left-color: #218838;
}

.incidencia-documento.estado-ignorada {
    border-left-color: #999;

    opacity: 0.82;
}

.cabecera-incidencia-documento {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 13px 16px;

    border-bottom: 1px solid #eee;

    background: #fafafa;
}

.cabecera-incidencia-documento > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 8px;
}

.ubicacion-incidencia-documento {
    color: #777;

    font-size: 12px;
}

.etiqueta-estado-documento {
    padding: 4px 8px;

    border-radius: 999px;

    background: #EEEAF5;
    color: #564376;

    font-size: 12px;
    font-weight: 700;
}

.contexto-incidencia-documento {
    padding: 14px 16px;

    color: #444;

    font-size: 14px;
    line-height: 1.6;
}

.contexto-incidencia-documento mark {
    padding: 1px 3px;

    border-radius: 3px;

    background: #ffe2eb;
    color: #8d244b;
}

.cambio-incidencia-documento {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;

    background: #FCFBFE;
}

.cambio-incidencia-documento > div {
    min-width: 0;
}

.etiqueta-cambio {
    display: block;

    margin-bottom: 5px;

    color: #777;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
}

.flecha-cambio-documento {
    color: #9F66CB;

    font-size: 22px;
    font-weight: 700;
}

.selector-alternativa-documento {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid #cfc6df;
    border-radius: 7px;

    background: #fff;
    color: #222;

    font-size: 14px;
}

.selector-alternativa-documento:focus {
    outline: 2px solid #4A3678;
    border-color: #4A3678;
}

.explicacion-incidencia-documento {
    padding: 13px 16px;
}

.explicacion-incidencia-documento p {
    margin: 0 0 7px;

    line-height: 1.5;
}

.explicacion-incidencia-documento p:last-child {
    margin-bottom: 0;
}

.metadatos-incidencia-documento {
    color: #777;

    font-size: 12px;
}

.acciones-incidencia-documento {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    padding: 0 16px 16px;
}

.boton-aplicar-incidencia,
.boton-ignorar-incidencia {
    width: auto;

    padding: 8px 12px;

    font-size: 13px;
}

.boton-aplicar-incidencia {
    background: #564376;
}

.boton-ignorar-incidencia {
    border: 1px solid #ddd;

    background: #fff;
    color: #666;
}

.boton-ignorar-incidencia:hover {
    background: #f5f5f7;

    opacity: 1;
}

.sin-incidencias-documento {
    padding: 22px;

    border: 1px solid #ddd;
    border-radius: 10px;

    background: #fff;
}


/* Documento continuo bajo demanda */

.texto-revisado-documento {
    border: 1px solid #ddd;
    border-radius: 10px;

    background: #fff;
}

.aviso-vista-documento {
    margin: 0;

    padding: 12px 16px;

    border-bottom: 1px solid #e6deef;

    background: #FAF7FF;
    color: #564376;

    font-size: 13px;
}

.contenido-documento-revisado {
    max-height: 680px;

    overflow: auto;

    padding: 20px;

    white-space: pre-wrap;

    font-size: 15px;
    line-height: 1.65;
}

.cambio-aplicado-documento {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #218838;
    font-weight: bold;
}


/* Resumen por categorías */

.detalle-resumen-documento {
    padding: 18px;

    border: 1px solid #ddd;
    border-radius: 10px;

    background: #fff;
}

.tabla-resumen-documento {
    display: grid;

    gap: 8px;
}

.fila-resumen-documento {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 9px 0;

    border-bottom: 1px solid #eee;
}

.fila-resumen-documento:last-child {
    border-bottom: none;
}

.fila-resumen-documento strong {
    color: #4A3678;
}


/* Responsive documentos */

@media (max-width: 900px) {

    .resumen-documento {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .cabecera-resultados-documento {
        flex-direction: column;
    }

    .acciones-resultados-documento {
        justify-content: flex-start;
    }
}


@media (max-width: 600px) {

    .zona-subida-documento {
        min-height: 250px;

        padding: 12px;
    }

    .contenido-zona-documento {
        min-height: 220px;

        padding: 20px 14px;
    }

    .tarjeta-documento-seleccionado {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        padding: 16px;
    }

    .boton-cambiar-documento {
        grid-column:
            1 / -1;

        width: 100%;
    }

    .resumen-documento {
        grid-template-columns: 1fr;
    }

    .acciones-resultados-documento {
        width: 100%;
    }

    .boton-accion-documento {
        width: 100%;
    }

    .cambio-incidencia-documento {
        grid-template-columns: 1fr;
    }

    .flecha-cambio-documento {
        transform: rotate(90deg);

        text-align: center;
    }

    .acciones-incidencia-documento {
        flex-direction: column;
    }

    .boton-aplicar-incidencia,
    .boton-ignorar-incidencia {
        width: 100%;
    }
}


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

/* ==========================================================================
   Resultados homogéneos de Documentos y Sitios web
   ========================================================================== */

.acciones-explicaciones-homogeneas {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.boton-descargar-texto-revisado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #d8c9ea;
    border-radius: 8px;
    background: #fff;
    color: #564376;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.boton-descargar-texto-revisado:hover {
    background: #EEEAF5;
    color: #4A3678;
    border-color: #4A3678;
    opacity: 1;
}

.boton-descargar-texto-revisado svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.resultados-documento.panel-explicaciones {
    margin-top: 24px;
}

@media (max-width: 640px) {
    .cabecera-explicaciones {
        align-items: flex-start;
        flex-direction: column;
    }

    .acciones-explicaciones-homogeneas {
        width: 100%;
        justify-content: flex-start;
    }

    .boton-descargar-texto-revisado,
    .boton-informe-cambios {
        flex: 1 1 auto;
    }
}


/*
|--------------------------------------------------------------------------
| Enlaces legales compartidos
|--------------------------------------------------------------------------
*/

.enlaces-legales {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin: 18px auto 0;
    padding-top: 15px;
    border-top: 1px solid #e2dbea;
    max-width: 760px;
}

.enlaces-legales a,
.contacto-pie-pagina a {
    color: #564376;
    font-weight: 400;
    text-decoration: none;
}

.enlaces-legales a:hover,
.enlaces-legales a:focus-visible,
.contacto-pie-pagina a:hover,
.contacto-pie-pagina a:focus-visible {
    color: #2f2a5a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contacto-pie-pagina {
    margin-top: 10px !important;
}

.enlaces-legales-login {
    margin-top: 18px;
    padding-top: 15px;
    gap: 7px 12px;
    font-size: 12px;
}

.accesibilidad-pie-login {
    margin-top: 9px;
    font-size: 12px;
}

.accesibilidad-pie-login .estandares-accesibilidad-pie {
    padding-left: 0;
    border-left: 0;
}

.tarjeta-login .bloque-social-pie {
    margin-top: 12px;
}

@media (max-width: 620px) {
    .enlaces-legales {
        gap: 7px 12px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .enlaces-legales a {
        font-size: 12px;
    }
}

/* ==========================================================================
   Pegado de imágenes desde el portapapeles
   ========================================================================== */

.boton-pegar-imagen-portapapeles {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 10px;
    padding: 9px 14px;

    border: 1px solid #C94F7C;
    border-radius: 8px;

    background: #FFF5F8;
    color: #9A365E;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.boton-pegar-imagen-portapapeles:hover {
    background: #FCE7EF;
    border-color: #A93F68;
    box-shadow: 0 5px 14px rgba(169, 63, 104, 0.14);
    opacity: 1;
}

.boton-pegar-imagen-portapapeles:active {
    transform: translateY(1px);
}

.boton-pegar-imagen-portapapeles:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.boton-pegar-imagen-portapapeles svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================================
   Presentación homogénea del documento y su texto revisado
   ========================================================================== */

.contenedor-documentos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.columna-documento-carga,
.columna-documento-resultado {
    min-width: 0;
}

.zona-subida-documento {
    height: 300px;
    min-height: 300px;
}

.zona-subida-documento.documento-seleccionado {
    height: 300px;
    min-height: 300px;
    padding: 6px;
    background: #fff;
}

.zona-subida-documento.documento-seleccionado .tarjeta-documento-seleccionado {
    min-height: 288px;
    height: 100%;
    align-content: center;
}

.texto-revisado-documento-previa {
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;

    font-size: 15.5px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.texto-revisado-documento-previa.texto-documento-recortado {
    background:
        linear-gradient(
            to bottom,
            #fff 0%,
            #fff 90%,
            #FBF8FD 100%
        );
}

.texto-revisado-documento-previa .placeholder {
    display: block;
    margin: 0;
    padding: 0;
    white-space: normal;
}

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

@media (max-width: 600px) {
    .zona-subida-documento,
    .zona-subida-documento.documento-seleccionado,
    .texto-revisado-documento-previa {
        height: 250px;
        min-height: 250px;
        max-height: 250px;
    }

    .zona-subida-documento.documento-seleccionado .tarjeta-documento-seleccionado {
        min-height: 238px;
    }

    .boton-pegar-imagen-portapapeles {
        width: 100%;
        max-width: 280px;
    }
}


/* ==========================================================================
   Eliminación directa de imágenes y documentos adjuntos
   ========================================================================== */

.boton-eliminar-adjunto {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);
    color: #7067A5;

    box-shadow: 0 2px 9px rgba(47, 42, 90, 0.16);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.boton-eliminar-adjunto:hover {
    background: #EEEAF5;
    color: #4A3678;
    box-shadow: 0 3px 11px rgba(47, 42, 90, 0.2);
    opacity: 1;
}

.boton-eliminar-adjunto:focus-visible {
    outline: 2px solid #564376;
    outline-offset: 2px;
}

.boton-eliminar-adjunto:disabled {
    cursor: wait;
    opacity: 0.45;
}

.boton-eliminar-adjunto svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.boton-eliminar-imagen {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.boton-eliminar-documento {
    justify-self: end;
}

/* La X del documento queda anclada a la esquina de la tarjeta. */
.tarjeta-documento-seleccionado {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr);
    padding-right: 58px;
}

.boton-eliminar-documento {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* ==========================================================================
   Botón flotante para volver al inicio
   ========================================================================== */

.boton-volver-arriba {
    position: fixed;
    /* Alinea el borde derecho del botón con el contenido de .pagina. */
    right: max(20px, calc((100vw - 1200px) / 2 + 20px));
    bottom: 22px;
    z-index: 1600;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;

    border: 1px solid #8d75b2;
    border-radius: 50%;

    background: #564376;
    color: #fff;

    box-shadow:
        0 10px 24px rgba(47, 42, 90, 0.24),
        0 3px 8px rgba(47, 42, 90, 0.12);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.boton-volver-arriba:hover {
    opacity: 1;
    background: #4a3678;
    transform: translateY(-3px);
    box-shadow:
        0 13px 28px rgba(47, 42, 90, 0.28),
        0 4px 10px rgba(47, 42, 90, 0.14);
}

.boton-volver-arriba:focus-visible {
    outline: 3px solid #d8c9ea;
    outline-offset: 3px;
}

.boton-volver-arriba.en-inicio {
    opacity: 0.62;
}

.boton-volver-arriba svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 900px) {
    .boton-volver-arriba {
        right: 16px;
    }
}

@media (max-width: 600px) {
    .boton-volver-arriba {
        right: 12px;
        bottom: 13px;
        width: 42px;
        min-width: 42px;
        height: 42px;
    }
}

/* ==========================================================================
   Homogeneidad de las zonas de arrastre de Imágenes y Documentos
   ========================================================================== */

.zona-subida-imagen {
    height: 300px;
    min-height: 300px;
    padding: 18px;
}

.contenido-zona-imagen {
    min-height: 250px;
    padding: 28px;
}

@media (max-width: 900px) {
    .zona-subida-imagen {
        height: 300px;
        min-height: 300px;
        padding: 18px;
    }

    .contenido-zona-imagen {
        min-height: 250px;
        padding: 28px;
    }
}

@media (max-width: 600px) {
    .zona-subida-imagen {
        height: 250px;
        min-height: 250px;
        padding: 12px;
    }

    .contenido-zona-imagen {
        min-height: 220px;
        padding: 20px 14px;
    }
}

/* ==========================================================================
   v22 · Altura idéntica de las zonas discontinuas de Imágenes y Documentos
   ========================================================================== */

/* Se fija la altura real (no solo la altura mínima) de ambos recuadros. */
.contenido-zona-imagen,
.contenido-zona-documento {
    height: 250px;
    min-height: 250px;
    max-height: 250px;
}

/* La zona de Imágenes contiene un botón adicional; se compactan únicamente
   sus separaciones internas para que todo quepa sin aumentar el recuadro. */
.contenido-zona-imagen {
    padding: 14px 24px;
    overflow: hidden;
}

.contenido-zona-imagen .icono-subida-imagen {
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
}

.contenido-zona-imagen .titulo-subida-imagen {
    margin-bottom: 2px;
    font-size: 15px;
}

.contenido-zona-imagen .texto-subida-imagen {
    margin-bottom: 8px;
    font-size: 13px;
}

.contenido-zona-imagen .boton-seleccionar-imagen {
    padding-top: 8px;
    padding-bottom: 8px;
}

.contenido-zona-imagen .boton-pegar-imagen-portapapeles {
    margin-top: 6px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.contenido-zona-imagen .ayuda-subida-imagen {
    margin-top: 6px;
    font-size: 11.5px;
}

@media (max-width: 600px) {
    .contenido-zona-imagen,
    .contenido-zona-documento {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
    }

    .contenido-zona-imagen {
        padding: 10px 14px;
    }

    .contenido-zona-imagen .icono-subida-imagen {
        width: 32px;
        height: 32px;
        margin-bottom: 4px;
    }

    .contenido-zona-imagen .titulo-subida-imagen {
        font-size: 14px;
    }

    .contenido-zona-imagen .texto-subida-imagen {
        margin-bottom: 6px;
        font-size: 12.5px;
    }

    .contenido-zona-imagen .boton-pegar-imagen-portapapeles {
        margin-top: 5px;
    }

    .contenido-zona-imagen .ayuda-subida-imagen {
        margin-top: 5px;
    }
}

/* ==========================================================================
   v23 · Tipografía homogénea de las cajetillas «Texto revisado»
   ========================================================================== */

/*
 * Las tres vistas utilizan exactamente la tipografía de la pestaña Texto.
 * La regla explícita evita que los estilos particulares de Documentos o
 * Imágenes reduzcan el tamaño o alteren el interlineado.
 */
#texto-inclusivo,
#texto-inclusivo-imagen,
#previsualizacion-texto-documento {
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
}

#texto-inclusivo .placeholder,
#texto-inclusivo-imagen .placeholder,
#previsualizacion-texto-documento .placeholder {
    font-size: inherit;
    line-height: inherit;
}


/* ==========================================================================
   Redes sociales y contacto en el pie
   ========================================================================== */

.bloque-social-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 11px;
    max-width: 780px;
    margin: 13px auto 0;
}

.titulo-social-pie {
    color: #756a80;
    font-size: 13px;
    font-weight: 650;
}

.iconos-sociales-pie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.enlace-social-pie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d8c9ea;
    border-radius: 50%;
    background: #fff;
    color: #564376;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.enlace-social-pie:hover,
.enlace-social-pie:focus-visible {
    border-color: #564376;
    background: #564376;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.enlace-social-pie svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.enlace-social-pie--facebook svg,
.enlace-social-pie--linkedin svg {
    fill: currentColor;
    stroke: none;
}

.correo-social-pie {
    color: #564376;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.correo-social-pie:hover,
.correo-social-pie:focus-visible {
    color: #2f2a5a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Botón flotante para comunicar incidencias
   ========================================================================== */

.boton-incidencia-flotante {
    position: fixed;
    right: max(20px, calc((100vw - 1200px) / 2 + 20px));
    bottom: 80px;
    z-index: 1600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #d38aa7;
    border-radius: 50%;
    background: #b04f78;
    color: #fff;
    box-shadow: 0 10px 24px rgba(83, 38, 65, .22), 0 3px 8px rgba(47, 42, 90, .10);
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.boton-incidencia-flotante:hover,
.boton-incidencia-flotante:focus-visible {
    background: #943e65;
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 13px 28px rgba(83, 38, 65, .26), 0 4px 10px rgba(47, 42, 90, .12);
}

.boton-incidencia-flotante:focus-visible {
    outline: 3px solid #f1cbd9;
    outline-offset: 3px;
}

.boton-incidencia-flotante svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 900px) {
    .boton-incidencia-flotante {
        right: 16px;
    }
}

@media (max-width: 600px) {
    .boton-incidencia-flotante {
        right: 12px;
        bottom: 64px;
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    .bloque-social-pie {
        flex-direction: column;
    }
}

/* Acceso al backend para cuentas autorizadas */
.boton-panel-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d8c9ea;
    border-radius: 10px;
    background: #fff;
    color: #564376;
    text-decoration: none;
}
.boton-panel-admin:hover,
.boton-panel-admin:focus-visible {
    background: #eeeaf5;
    color: #4a3678;
}
.boton-panel-admin svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   Menú adaptable de los cuatro modos de revisión
   ========================================================================== */

.selector-modos {
    position: relative;
    overflow: hidden;
    scrollbar-width: none;
}

.selector-modos::-webkit-scrollbar {
    display: none;
}

.panel-menu-modos {
    display: block;
}

.boton-menu-modos,
.cabecera-menu-modos-movil,
.fondo-menu-modos {
    display: none;
}

.tabs-modos-probe {
    position: fixed !important;
    top: -10000px !important;
    left: -10000px !important;
    z-index: -1 !important;
    display: inline-flex !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

.selector-modos.modo-menu-movil {
    min-height: 54px;
    padding: 7px 0 9px;
    overflow: visible;
}

.selector-modos.modo-menu-movil .boton-menu-modos {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d8c9ea;
    border-radius: 11px;
    background: #fff;
    color: #4a3678;
    box-shadow: 0 3px 10px rgba(86, 67, 118, 0.1);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.selector-modos.modo-menu-movil .boton-menu-modos:hover {
    border-color: #bca6d7;
    background: #fbf9fd;
}

.selector-modos.modo-menu-movil .boton-menu-modos:focus-visible {
    outline: 3px solid #d8c9ea;
    outline-offset: 2px;
}

.boton-menu-modos svg,
.boton-cerrar-menu-modos svg {
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boton-menu-modos-texto {
    min-width: 0;
}

.modo-activo-menu {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: #c94f7c;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selector-modos.modo-menu-movil .fondo-menu-modos {
    position: fixed;
    inset: 0;
    z-index: 1098;
    display: block;
    background: rgba(36, 25, 51, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.selector-modos.modo-menu-movil .fondo-menu-modos[hidden] {
    display: none !important;
}

.selector-modos.modo-menu-movil .panel-menu-modos {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1099;
    display: flex;
    flex-direction: column;
    width: min(86vw, 340px);
    max-width: calc(100vw - 38px);
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #d8c9ea;
    background: #fff;
    box-shadow: 14px 0 34px rgba(41, 29, 61, 0.2);
    transform: translateX(-105%);
    visibility: hidden;
    pointer-events: none;
    transition:
        transform 0.22s ease,
        visibility 0s linear 0.22s;
}

.selector-modos.modo-menu-movil.menu-modos-abierto .panel-menu-modos {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition:
        transform 0.22s ease,
        visibility 0s linear 0s;
}

.selector-modos.modo-menu-movil.menu-modos-abierto .fondo-menu-modos {
    opacity: 1;
    pointer-events: auto;
}

.cabecera-menu-modos-movil {
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 14px;
    border-bottom: 1px solid #eee7f4;
}

.selector-modos.modo-menu-movil .cabecera-menu-modos-movil {
    display: flex;
}

.cabecera-menu-modos-movil > div {
    min-width: 0;
}

.cabecera-menu-modos-movil strong,
.cabecera-menu-modos-movil span {
    display: block;
}

.cabecera-menu-modos-movil strong {
    color: #4a3678;
    font-size: 17px;
    line-height: 1.25;
}

.cabecera-menu-modos-movil span {
    margin-top: 3px;
    color: #71677c;
    font-size: 12px;
    line-height: 1.35;
}

.boton-cerrar-menu-modos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #ded3e9;
    border-radius: 10px;
    background: #fff;
    color: #564376;
    cursor: pointer;
}

.boton-cerrar-menu-modos:hover {
    border-color: #c94f7c;
    color: #c94f7c;
    background: #fdf7fa;
}

.boton-cerrar-menu-modos:focus-visible {
    outline: 3px solid #d8c9ea;
    outline-offset: 2px;
}

.selector-modos.modo-menu-movil .tabs-modos {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 14px 0 0;
}

.selector-modos.modo-menu-movil .tabs-modos .tab-modo {
    position: relative;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    padding: 12px 13px 12px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #5f5668;
    box-shadow: none;
    font-size: 15px;
    text-align: left;
    transform: none;
}

.selector-modos.modo-menu-movil .tabs-modos .tab-modo:hover {
    border-color: #e2d8eb;
    background: #faf7fc;
    color: #564376;
}

.selector-modos.modo-menu-movil .tabs-modos .tab-modo.activo {
    border-color: #d8c9ea;
    background: #f8f3fb;
    color: #4a3678;
    box-shadow: 0 3px 10px rgba(86, 67, 118, 0.08);
}

.selector-modos.modo-menu-movil .tabs-modos .tab-modo.activo::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 5px;
    width: 4px;
    border-radius: 4px;
    background: #c94f7c;
}

.selector-modos.modo-menu-movil .tabs-modos .tab-modo.activo::after {
    display: none;
}

.selector-modos.menu-modos-sin-transicion .panel-menu-modos,
.selector-modos.menu-modos-sin-transicion .fondo-menu-modos {
    transition: none !important;
}

body.menu-modos-bloqueado {
    overflow: hidden;
    overscroll-behavior: contain;
}

@media (max-width: 420px) {
    .selector-modos.modo-menu-movil .boton-menu-modos {
        gap: 8px;
        padding-right: 10px;
    }

    .boton-menu-modos-texto {
        font-size: 13px;
    }

    .modo-activo-menu {
        font-size: 12px;
    }
}


/* Valoración de propuestas */
.tarjeta-explicacion-feedback{position:relative}
.feedback-acciones{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:5px;z-index:4;padding:4px;background:rgba(255,255,255,.94);border:1px solid rgba(216,220,229,.9);border-radius:999px;box-shadow:0 3px 10px rgba(27,35,55,.10)}
.feedback-icon{width:31px;height:31px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;transition:.18s ease;padding:6px}
.feedback-icon svg{width:100%;height:100%;fill:currentColor}.feedback-positivo{color:#198754}.feedback-negativo{color:#d33b45}
.feedback-icon:hover,.feedback-icon:focus-visible{transform:translateY(-1px);background:#f3f5f8;box-shadow:0 3px 8px rgba(27,35,55,.14);outline:none}.feedback-icon.seleccionado{box-shadow:0 0 0 2px currentColor inset;background:#f8fafc}
.feedback-bocadillo{position:absolute;top:50px;right:8px;width:min(390px,calc(100% - 16px));padding:17px;background:#fff;border:1px solid #d9dde7;border-radius:14px;box-shadow:0 14px 34px rgba(36,42,71,.2);z-index:20;box-sizing:border-box}
.feedback-bocadillo-flecha{position:absolute;top:-8px;right:45px;width:15px;height:15px;background:#fff;border-left:1px solid #d9dde7;border-top:1px solid #d9dde7;transform:rotate(45deg)}
.feedback-bocadillo.negativa .feedback-bocadillo-flecha{right:10px}.feedback-bocadillo label{display:block;font-weight:700;margin:0 25px 9px 0;color:#30364c}
.feedback-bocadillo textarea{width:100%;resize:vertical;min-height:92px;border:1px solid #cdd2df;border-radius:9px;padding:10px;font:inherit;box-sizing:border-box}.feedback-bocadillo textarea:focus{outline:2px solid #7067a5;outline-offset:1px}
.feedback-cerrar{position:absolute;top:7px;right:9px;border:0;background:transparent;font-size:25px;color:#656b78;cursor:pointer}.feedback-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:9px}.feedback-contador{font-size:.78rem;color:#757b89}.feedback-enviar{border:0;border-radius:8px;background:#404690;color:#fff;padding:9px 13px;font-weight:700;cursor:pointer}.feedback-enviar:disabled{opacity:.65;cursor:wait}.feedback-estado{min-height:18px;margin:7px 0 0!important;color:#b4232d;font-size:.84rem}.feedback-gracias{margin:0!important;font-weight:700;color:#198754;text-align:center}
@media(max-width:600px){.tarjeta-explicacion-feedback>p:first-of-type{padding-right:76px}.feedback-acciones{top:7px;right:7px}.feedback-bocadillo{top:48px;right:7px;width:calc(100% - 14px)}.feedback-bocadillo-flecha{right:44px}}

.saltar-contenido{position:fixed;left:1rem;top:-5rem;z-index:100000;background:#fff;color:#111;padding:.75rem 1rem;border:2px solid currentColor;border-radius:.4rem}.saltar-contenido:focus{top:1rem}.registro-login{text-align:center;margin-top:1rem}.registro-login a{font-weight:400}.mensaje-exito{padding:1rem;border:1px solid #2f7d4a;border-radius:.5rem;background:#eefaf2;color:#174b2b}
.eq-contador-cuota{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:.6rem auto 1rem;padding:.55rem .9rem;width:fit-content;max-width:calc(100% - 2rem);border:1px solid rgba(64,70,144,.22);border-radius:999px;background:#fff;font-size:.88rem}.eq-contador-cuota span{color:#4b4b55}@media(max-width:600px){.eq-contador-cuota{border-radius:.75rem;text-align:center}}


/* Registro público */
.contenedor-registro{max-width:560px}.tarjeta-registro{padding-top:34px}.logo-registro{width:min(100%,250px);margin-bottom:22px}.formulario-registro{gap:16px}.campo-registro{width:100%;padding:13px 14px;border:1px solid #d7d3dc;border-radius:8px;background:#fff;color:#222;font-family:'Inter',sans-serif;font-size:16px;line-height:1.3;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.campo-registro:hover{border-color:#b9aec9}.campo-registro:focus-visible{border-color:#6f4f9f;box-shadow:0 0 0 4px rgba(159,102,203,.16)}.campo-registro:user-invalid{border-color:#b4232d}.ayuda-campo-registro{color:#6f6878;font-size:12.5px;line-height:1.45}.aceptacion-registro{display:flex;align-items:flex-start;gap:10px;color:#4b4551;font-size:13.5px;line-height:1.5}.aceptacion-registro input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:#564376}.aceptacion-registro a,.pie-registro a,.mensaje-registro-exito a{color:#4a3678;font-weight:400}.pie-registro{text-align:center;margin:22px 0 0}.mensaje-registro-exito{padding:14px 16px;border:1px solid #b7dfc8;border-radius:9px;background:#f0fbf5;color:#17663a;line-height:1.55}@media(max-width:600px){.tarjeta-registro{padding:34px 22px 28px}.contenedor-registro{max-width:100%}}

/* Accesibilidad en el pie */
.accesibilidad-pie{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;margin-top:10px;font-size:12.5px}.accesibilidad-pie a{color:#4a3678;font-weight:400;text-decoration:none}.accesibilidad-pie a:hover,.accesibilidad-pie a:focus-visible{text-decoration:underline}.estandares-accesibilidad-pie{padding-left:14px;border-left:1px solid #cfc7d8;color:#6f6878}@media(max-width:560px){.estandares-accesibilidad-pie{width:100%;padding-left:0;border-left:0;text-align:center}}


/* Menú de cuenta y saldo de tokens */
.menu-cuenta{position:relative;display:inline-flex}.boton-menu-cuenta{cursor:pointer}.panel-menu-cuenta{position:absolute;top:calc(100% + 9px);right:0;z-index:120;width:min(330px,calc(100vw - 28px));overflow:hidden;border:1px solid #d8c9ea;border-radius:14px;background:#fff;box-shadow:0 16px 38px rgba(47,42,90,.18);text-align:left}.cabecera-menu-cuenta{display:grid;gap:3px;padding:14px 16px;border-bottom:1px solid #ebe5f0;background:#f8f5fb}.cabecera-menu-cuenta strong{color:#2f2a5a}.cabecera-menu-cuenta span{font-size:.82rem;color:#6a6173}.panel-menu-cuenta nav{display:grid;padding:7px}.panel-menu-cuenta nav a{padding:10px 11px;border-radius:9px;color:#45375f;text-decoration:none;font-weight:650}.panel-menu-cuenta nav a:hover,.panel-menu-cuenta nav a:focus-visible{background:#eeeaf5;color:#4a3678}.saldo-menu-cuenta{display:grid;gap:4px;padding:13px 16px;border-top:1px solid #ebe5f0;background:#fbf9fc}.saldo-menu-cuenta strong{color:#4c3c73}.saldo-menu-cuenta span{font-size:.88rem;font-weight:650;color:#34303a}.saldo-menu-cuenta small{color:#716979}.perfil-contenedor{width:min(760px,calc(100% - 32px));margin:28px auto}.perfil-tarjeta{padding:24px;border:1px solid #dfd5e7;border-radius:17px;background:#fff;box-shadow:0 10px 30px rgba(47,42,90,.06)}.perfil-cabecera{margin-bottom:20px}.perfil-cabecera h1{margin:0 0 6px;color:#2f2a5a}.perfil-cabecera p{margin:0;color:#6d6574}.perfil-form{display:grid;gap:16px}.perfil-campo{display:grid;gap:7px}.perfil-campo label{font-weight:700;color:#49404e}.perfil-campo input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #cec3d6;border-radius:10px;font:inherit}.perfil-campo input:focus{outline:3px solid rgba(159,102,203,.17);border-color:#9f66cb}.perfil-password-contenedor{position:relative}.perfil-password-contenedor input{padding-right:52px}.perfil-password-contenedor .boton-visibilidad-password{right:5px}.perfil-ayuda{font-size:.82rem;color:#706778}.perfil-acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}.perfil-boton{display:inline-flex;align-items:center;justify-content:center;padding:11px 17px;border:0;border-radius:10px;background:#564376;color:#fff;text-decoration:none;font:inherit;font-weight:750;cursor:pointer}.perfil-boton.secundario{border:1px solid #d8c9ea;background:#fff;color:#564376}.perfil-mensaje{padding:12px 14px;border-radius:10px;background:#e7f5ed;color:#236a42;font-weight:650}.perfil-mensaje.error{background:#fbeaec;color:#933442}@media(max-width:600px){.panel-menu-cuenta{position:fixed;top:72px;right:12px}.perfil-tarjeta{padding:18px}.perfil-acciones{flex-direction:column-reverse}.perfil-boton{width:100%}}


/* Ajuste visual del botón del menú de cuenta: mismo tratamiento que Cerrar sesión */
.boton-menu-cuenta {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #d8c9ea;
    border-radius: 8px;
    background: #fff;
    color: #564376;
    appearance: none;
    -webkit-appearance: none;
}
.boton-menu-cuenta:hover,
.boton-menu-cuenta:focus-visible {
    background: #eeeaf5;
    border-color: #9f88c2;
    color: #4a3678;
}
.boton-menu-cuenta .icono-menu-cuenta {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Dictado por voz */
.envoltura-dictado-voz {
    position: relative;
    width: 100%;
    min-width: 0;
}

.dictado-voz-destino {
    box-sizing: border-box;
    padding-right: 56px !important;
}

.boton-dictado-voz {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #d8c9ea;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #564376;
    box-shadow: 0 3px 10px rgba(47, 42, 90, .12);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.boton-dictado-voz:hover {
    border-color: #9f66cb;
    background: #f5effa;
    color: #40305d;
    transform: translateY(-1px);
}

.boton-dictado-voz:focus-visible {
    outline: 3px solid rgba(159, 102, 203, .28);
    outline-offset: 2px;
}

.boton-dictado-voz svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boton-dictado-voz.dictado-voz-activo {
    border-color: #b2385d;
    background: #fbeaf0;
    color: #b2385d;
    box-shadow: 0 0 0 4px rgba(178, 56, 93, .12);
    animation: pulso-dictado-voz 1.4s ease-in-out infinite;
}

@keyframes pulso-dictado-voz {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

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

.feedback-bocadillo .envoltura-dictado-voz {
    margin-top: 0;
}

.feedback-bocadillo .boton-dictado-voz {
    top: 7px;
    right: 7px;
    width: 34px;
    height: 34px;
}

.feedback-bocadillo .dictado-voz-destino {
    min-height: 100px;
    padding-right: 50px !important;
}

/* Separación de las acciones de la cabecera del perfil. */
.acciones-cabecera-aplicacion.acciones-perfil {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 600px) {
    .boton-dictado-voz {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }

    .dictado-voz-destino {
        padding-right: 52px !important;
    }

    .acciones-cabecera-aplicacion.acciones-perfil {
        gap: 9px;
    }
}

.estado-dictado-voz {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.estado-dictado-voz.dictado-voz-error {
    top: 54px;
    right: 8px;
    z-index: 8;
    width: min(290px, calc(100% - 16px));
    height: auto;
    margin: 0;
    padding: 9px 11px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 1px solid #e0b4c1;
    border-radius: 9px;
    background: #fff6f8;
    color: #84324c;
    box-shadow: 0 8px 18px rgba(47, 42, 90, .14);
    font-size: .82rem;
    line-height: 1.4;
}

/* ========================================================================== 
   v27 · Altura homogénea de las cajas «Texto revisado»
   ========================================================================== */

/*
 * Las tres pestañas parten de la misma altura y pueden crecer hasta el doble.
 * A partir de ese punto el contenido se desplaza dentro de la propia caja.
 */
#texto-inclusivo,
#texto-inclusivo-imagen,
#previsualizacion-texto-documento {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

@media (max-width: 900px) {
    #texto-inclusivo,
    #texto-inclusivo-imagen,
    #previsualizacion-texto-documento {
        min-height: 240px;
        max-height: 480px;
    }
}

@media (max-width: 380px) {
    #texto-inclusivo,
    #texto-inclusivo-imagen,
    #previsualizacion-texto-documento {
        min-height: 200px;
        max-height: 400px;
    }
}


/* v28 · Confirmación accesible y homogénea para recortes por cuota */
.eq-dialogo-cuota {
    width: min(520px, calc(100vw - 32px));
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: #2f2a5a;
    box-shadow: 0 22px 60px rgba(47, 42, 90, .28);
}
.eq-dialogo-cuota::backdrop {
    background: rgba(29, 25, 55, .58);
    backdrop-filter: blur(2px);
}
.eq-dialogo-cuota-contenido {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: 24px;
}
.eq-dialogo-cuota-icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f1eafb;
    color: #564376;
}
.eq-dialogo-cuota-icono svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.eq-dialogo-cuota-textos h2 {
    margin: 0 0 8px;
    font-size: 1.18rem;
    color: #2f2a5a;
}
.eq-dialogo-cuota-textos p {
    margin: 0;
    line-height: 1.55;
}
.eq-dialogo-cuota-resumen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 12px;
}
.eq-dialogo-cuota-resumen > div {
    padding: 12px;
    border: 1px solid #ddd2eb;
    border-radius: 12px;
    background: #faf8fc;
}
.eq-dialogo-cuota-resumen dt {
    margin-bottom: 4px;
    font-size: .8rem;
    color: #6a6173;
}
.eq-dialogo-cuota-resumen dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #404690;
}
.eq-dialogo-cuota-nota {
    font-size: .9rem;
    color: #655d6f;
}
.eq-dialogo-cuota-acciones {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}
.eq-dialogo-cuota-acciones button {
    min-height: 42px;
}
.eq-dialogo-cuota-fallback {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
}
@media (max-width: 560px) {
    .eq-dialogo-cuota-contenido {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .eq-dialogo-cuota-icono {
        width: 42px;
        height: 42px;
    }
    .eq-dialogo-cuota-resumen {
        grid-template-columns: 1fr;
    }
    .eq-dialogo-cuota-acciones {
        grid-column: auto;
        flex-direction: column-reverse;
    }
    .eq-dialogo-cuota-acciones button {
        width: 100%;
    }
}

/* ========================================================================== 
   v31 · Lectura en voz alta de los textos revisados
   ========================================================================== */
.envoltura-lectura-voz {
    position: relative;
    width: 100%;
    min-width: 0;
}

.envoltura-lectura-voz .caja-resultado {
    width: 100%;
}

.lectura-voz-destino {
    box-sizing: border-box;
    padding-right: 58px !important;
}

.boton-lectura-voz {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #d8c9ea;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #564376;
    box-shadow: 0 3px 10px rgba(47, 42, 90, .12);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.boton-lectura-voz[hidden] {
    display: none !important;
}

.boton-lectura-voz:hover {
    border-color: #9f66cb;
    background: #f5effa;
    color: #40305d;
    transform: translateY(-1px);
}

.boton-lectura-voz:focus-visible {
    outline: 3px solid rgba(159, 102, 203, .28);
    outline-offset: 2px;
}

.boton-lectura-voz svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boton-lectura-voz svg path:first-child {
    fill: currentColor;
    stroke: currentColor;
}

.boton-lectura-voz.lectura-voz-activa {
    border-color: #9f66cb;
    background: #eee6f8;
    color: #4a3678;
    box-shadow: 0 0 0 4px rgba(159, 102, 203, .14);
}

.boton-lectura-voz.lectura-voz-activa svg rect {
    fill: currentColor;
    stroke: currentColor;
}

.estado-lectura-voz {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.estado-lectura-voz.lectura-voz-error {
    top: 54px;
    right: 8px;
    z-index: 9;
    width: min(310px, calc(100% - 16px));
    height: auto;
    margin: 0;
    padding: 9px 11px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 1px solid #e0b4c1;
    border-radius: 9px;
    background: #fff6f8;
    color: #84324c;
    box-shadow: 0 8px 18px rgba(47, 42, 90, .14);
    font-size: .82rem;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .boton-lectura-voz {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }

    .lectura-voz-destino {
        padding-right: 52px !important;
    }
}

/* ========================================================================== 
   v35 · Controles inferiores de dictado, lectura y copia
   ========================================================================== */
.envoltura-caja-texto-controles {
    position: relative;
    width: 100%;
    min-width: 0;
}

.envoltura-caja-texto-controles .caja-texto {
    width: 100%;
    transition: padding-bottom .18s ease;
}

/* El texto original se comporta como los resultados: crece hasta el límite y después muestra scroll. */
#texto-original {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.boton-dictado-voz[hidden] {
    display: none !important;
}

.envoltura-caja-texto-controles .dictado-voz-destino,
.envoltura-caja-texto-controles .lectura-voz-destino {
    padding-right: 18px !important;
}

.envoltura-caja-texto-controles:has(.boton-dictado-voz:not([hidden])) .caja-texto,
.envoltura-caja-texto-controles:has(.boton-lectura-voz:not([hidden])) .caja-texto,
.envoltura-caja-texto-controles:has(.boton-copiar-flotante:not(.oculto)) .caja-texto {
    padding-bottom: 64px !important;
}

.boton-dictado-voz.posicion-inferior-izquierda,
.boton-lectura-voz.posicion-inferior-izquierda {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 10px;
}

/* Cuando la caja ofrece dictado y lectura, el altavoz se coloca a continuación del micrófono. */
.envoltura-caja-texto-controles:has(.boton-dictado-voz:not([hidden]))
.boton-lectura-voz.posicion-inferior-izquierda {
    left: 56px;
}

.boton-copiar-flotante {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(47, 42, 90, .12);
}

.boton-copiar-flotante .icono-copiar {
    display: inline-flex;
}

@media (max-width: 900px) {
    #texto-original {
        min-height: 240px;
        max-height: 480px;
    }
}

@media (max-width: 600px) {
    .boton-dictado-voz.posicion-inferior-izquierda,
    .boton-lectura-voz.posicion-inferior-izquierda,
    .boton-copiar-flotante {
        bottom: 8px;
        width: 36px;
        height: 36px;
    }

    .boton-dictado-voz.posicion-inferior-izquierda,
    .boton-lectura-voz.posicion-inferior-izquierda {
        left: 8px;
    }

    .envoltura-caja-texto-controles:has(.boton-dictado-voz:not([hidden]))
    .boton-lectura-voz.posicion-inferior-izquierda {
        left: 51px;
    }

    .boton-copiar-flotante {
        right: 8px;
    }
}

@media (max-width: 380px) {
    #texto-original {
        min-height: 200px;
        max-height: 400px;
    }
}

/* ========================================================================== 
   v37 · Dictado permanente y eliminación directa del texto original
   ========================================================================== */
.boton-eliminar-texto-original {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 8;
}

.boton-eliminar-texto-original[hidden] {
    display: none !important;
}

.envoltura-caja-texto-controles:has(.boton-eliminar-texto-original:not([hidden])) #texto-original {
    padding-right: 56px !important;
}

@media (max-width: 600px) {
    .boton-eliminar-texto-original {
        top: 7px;
        right: 7px;
    }
}

@media (max-width: 600px) {
    .etiqueta-aparicion-fragmento {
        margin-left: 18px;
        font-size: 16px;
    }
}

/* v59 · Acceso público, registro verificado e indicador compacto de cuota */
.acciones-acceso-invitado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.boton-acceso-cabecera {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 11px;
    box-sizing: border-box;
    border: 1px solid #d8c9ea;
    border-radius: 8px;
    background: #fff;
    color: #564376;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(86, 67, 118, .08);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.boton-acceso-cabecera.registro {
    border-color: #d9bdd0;
    color: #a43d67;
}

.boton-acceso-cabecera:hover,
.boton-acceso-cabecera:focus-visible {
    background: #f8f5fc;
    border-color: #9f88c2;
    color: #4a3678;
    transform: translateY(-1px);
}

.boton-acceso-cabecera.registro:hover,
.boton-acceso-cabecera.registro:focus-visible {
    border-color: #c94f7c;
    background: #fdf4f8;
    color: #9d3159;
}

.boton-acceso-cabecera svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.estado-cuota-cabecera {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    max-width: 210px;
    padding: 7px 10px;
    box-sizing: border-box;
    border: 1px solid rgba(64, 70, 144, .22);
    border-radius: 999px;
    background: #fbf9fc;
    color: #4c3c73;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
}

.estado-cuota-cabecera svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.estado-cuota-cabecera[data-state="error"] {
    color: #7a707f;
    border-color: #ddd5e2;
}

.registro-publico-contenedor {
    width: min(720px, calc(100% - 32px));
    margin-top: 22px;
}

.registro-publico-contenedor .perfil-cabecera p {
    max-width: 630px;
    line-height: 1.55;
}

.aceptacion-registro-perfil {
    margin-top: 2px;
    padding: 12px 13px;
    border: 1px solid #e2d9e8;
    border-radius: 10px;
    background: #fbf9fc;
}

.registro-acceso-existente,
.registro-texto-confirmacion {
    margin: 20px 0 0;
    color: #6d6574;
    text-align: center;
    line-height: 1.55;
}

.registro-acceso-existente a,
.registro-texto-confirmacion a,
.registro-confirmacion-login a {
    color: #4a3678;
    font-weight: 400;
}

.registro-confirmacion-login {
    margin-top: 5px;
    font-size: 12.5px;
}

.registro-confirmacion-acciones {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.perfil-mensaje.aviso {
    background: #fff7e8;
    color: #7b5314;
}

@media (max-width: 900px) {
    .boton-acceso-cabecera {
        padding-inline: 9px;
    }

    .estado-cuota-cabecera {
        max-width: 175px;
    }
}

@media (max-width: 680px) {
    .cabecera-aplicacion {
        gap: 8px;
    }

    .logo-principal {
        width: 100px;
        height: auto;
        margin-left: -2px;
    }

    .acciones-cabecera-aplicacion {
        gap: 5px;
    }

    .acciones-acceso-invitado {
        gap: 4px;
    }

    .boton-acceso-cabecera {
        width: 34px;
        height: 36px;
        min-height: 36px;
        padding: 0;
    }

    .boton-acceso-cabecera span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .estado-cuota-cabecera {
        width: 54px;
        height: 36px;
        min-height: 36px;
        max-width: 54px;
        padding: 0 5px;
        gap: 3px;
        overflow: hidden;
        font-size: 10.5px;
    }

    .estado-cuota-cabecera svg {
        display: none;
    }

    .estado-cuota-cabecera span {
        max-width: 44px;
        overflow: hidden;
        text-overflow: clip;
    }

    .estado-cuota-cabecera span::first-line {
        line-height: 1;
    }

    .registro-confirmacion-acciones {
        flex-direction: column;
    }

    .registro-confirmacion-acciones .perfil-boton {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .logo-principal {
        width: 94px;
    }

    .estado-cuota-cabecera {
        width: 48px;
        max-width: 48px;
        font-size: 10px;
    }
}

@media (max-width: 680px) {
    .estado-cuota-cabecera span {
        display: none;
    }

    .estado-cuota-cabecera::after {
        content: attr(data-short);
        display: block;
        max-width: 44px;
        overflow: hidden;
        font-variant-numeric: tabular-nums;
        text-align: center;
        white-space: nowrap;
    }
}

@media (max-width: 840px) and (min-width: 681px) {
    .boton-acceso-cabecera {
        width: 38px;
        height: 38px;
        padding: 0;
    }

    .boton-acceso-cabecera span,
    .estado-cuota-cabecera span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .estado-cuota-cabecera {
        width: 76px;
        max-width: 76px;
    }

    .estado-cuota-cabecera::after {
        content: attr(data-short);
        display: block;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
}


/* ==========================================================================
   v60 · Pie completo en la pantalla de acceso
   ========================================================================== */
.pagina-login {
    flex-direction: column;
    gap: 0;
}

.pagina-login .contenedor-login {
    flex: 0 0 auto;
}

.pagina-login .pie-pagina-legal {
    width: min(100%, 1100px);
    margin-top: 28px;
    padding-inline: 16px;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .pagina-login {
        justify-content: flex-start;
        padding: 16px;
    }

    .pagina-login .pie-pagina-legal {
        margin-top: 22px;
        padding-inline: 4px;
    }
}


/* v60 · Identificación accesible de campos obligatorios en perfil y registro. */
.leyenda-campos-obligatorios {
    margin: -8px 0 16px;
    color: #6d6574;
    font-size: 0.84rem;
    line-height: 1.45;
}

.marca-campo-obligatorio {
    margin-left: 2px;
    color: #b23a62;
    font-weight: 800;
}

.etiqueta-campo-opcional {
    margin-left: 4px;
    color: #756d7c;
    font-size: 0.82rem;
    font-weight: 400;
}

.aceptacion-registro .marca-campo-obligatorio {
    margin-left: 0;
    margin-right: 3px;
}