/*
 * Piel propia de RecuPro (research R17). Los tokens salen de docs/05-interfaz-gespro.md §2 (medidos sobre GesPro, a escala
 * 100 %: las capturas estaban a ~150 %); nada de softnix. Los comprueba tests/RecuPro.Web.Tests/PielTokensTests.cs (SC-009).
 * Reglas:
 *   - todos los colores y medidas van en variables de :root; fuera de :root no hay colores literales;
 *   - sin estilos en línea en los componentes: la CSP solo admite hojas de 'self';
 *   - sin @media ni anidamiento (el test lee las reglas una a una).
 */

:root {
    /* --- docs/05 §2: Letra --- Segoe UI 9 pt (del sistema; sin fuentes descargadas); barra lateral en seminegrita;
       títulos de diálogo Segoe UI 20 pt negrita en #005EB8. */
    --rp-letra: "Segoe UI", system-ui, -apple-system, sans-serif;
    --rp-letra-tamano: 9pt;
    --rp-barra-lateral-peso: 600;
    --rp-titulo-dialogo-tamano: 20pt;
    --rp-titulo-dialogo-peso: 700;
    --rp-titulo-dialogo-color: #005EB8;

    /* --- docs/05 §2: colores del armazón --- */
    --rp-fondo-menu: #D9E9FF;
    --rp-ribbon-banda: #C1D9F1;
    --rp-ribbon-banda-texto: #4D71AF;
    --rp-barra-lateral-cabecera-inicio: #BBDAFF;
    --rp-barra-lateral-cabecera-fin: #3891CD;
    --rp-arbol-texto: #0969BE;
    --rp-arbol-seleccion: #E3EFFF;
    --rp-arbol-seleccion-texto: #6EAC20;
    --rp-grupo-inactivo-inicio: #E3EFFF;
    --rp-grupo-inactivo-fin: #C4DDFF;
    --rp-grupo-activo-inicio: #EFF7E1;
    --rp-grupo-activo-fin: #C6DF95;
    --rp-grupo-activo-borde: #BCDA87;
    --rp-pestana-activa-inicio: #DFEEC4;
    --rp-pestana-activa-fin: #DAEBB9;
    --rp-barra-estado-fondo: #F0F0F0;

    /* --- docs/05 §2: rejilla (llega en B2) --- */
    --rp-rejilla-cabecera: #E9F2D7;
    --rp-rejilla-glifo-orden: #005EB8;
    --rp-columna-ordenada: #DDEEFF;
    --rp-fila-seleccionada: #0078D4;
    --rp-fila-seleccionada-texto: #FFFFFF;
    --rp-lineas-rejilla: #D9D9D9;

    /* --- docs/05 §2: ficha (llega en B2) --- */
    --rp-barra-ficha: #DCE9F8;
    --rp-ficha-cabecera-inicio: #FFFFFF;
    --rp-ficha-cabecera-medio: #E5EFFA;
    --rp-ficha-cabecera-fin: #CADFF4;
    --rp-ficha-pestanas-franja: #C7DDF3;
    --rp-ficha-pestana-activa: #F9F9F9;
    --rp-ficha-pestana-inactiva: #F3F3F3;
    --rp-campo-solo-lectura: #E3E3E3;
    --rp-campo-obligatorio: #FFFFE1;
    --rp-foco: #0067C0;
    --rp-borde-paneles: #7E8EDD;
    --rp-etiqueta: #005EB8;
    --rp-texto-activo: #083772;

    /* --- docs/05 §2: medidas --- botones de la barra 50-60 x 67 px; zona de barras 127 px; barra lateral 225 px (30 px
       plegada); barra de estado 25 px; fila de rejilla ~20 px. */
    --rp-boton-barra-ancho-min: 50px;
    --rp-boton-barra-ancho-max: 60px;
    --rp-boton-barra-alto: 67px;
    --rp-zona-barras-alto: 127px;
    --rp-barra-lateral-ancho: 225px;
    --rp-barra-lateral-plegada: 30px;
    --rp-barra-estado-alto: 25px;
    --rp-fila-rejilla-alto: 20px;

    /* --- Propios de RecuPro (no medidos en GesPro): reparto de la zona de barras, lienzo, deshabilitados y avisos --- */
    --rp-menu-alto: 22px;
    --rp-ribbon-banda-alto: 18px;
    --rp-barra-lateral-cabecera-alto: 26px;
    --rp-grupo-grande-alto: 30px;
    --rp-pestanas-alto: 24px;
    --rp-lienzo-fondo: #FFFFFF;
    --rp-panel-fondo: #FFFFFF;
    --rp-deshabilitado-texto: #8A8A8A;
    --rp-sombra: rgba(0, 0, 0, 0.18);
    --rp-velo: rgba(8, 55, 114, 0.25);
    --rp-aviso-entorno-fondo: #FFF4CE;
    --rp-aviso-entorno-texto: #5C4400;
    --rp-aviso-entorno-borde: #E8C66B;
    --rp-aviso-fondo: #FDE7E9;
    --rp-aviso-texto: #8A1F11;
}

/* ------------------------------------------------------------------ Armazón (SH-01, 02, 03, 05, 07) */

.rp-armazon {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--rp-lienzo-fondo);
    color: var(--rp-texto-activo);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
}

.rp-zona-barras {
    flex: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: var(--rp-zona-barras-alto);
    background: var(--rp-fondo-menu);
    border-bottom: 1px solid var(--rp-ribbon-banda);
}

/* --- Menú clásico --- */

.rp-menu-clasico {
    position: relative;
    z-index: 20;
    flex: none;
    height: var(--rp-menu-alto);
    background: var(--rp-fondo-menu);
}

.rp-menu-barra {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0 2px;
    list-style: none;
}

.rp-menu-item {
    position: relative;
}

.rp-menu-titulo {
    box-sizing: border-box;
    height: var(--rp-menu-alto);
    padding: 0 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--rp-texto-activo);
    font: inherit;
    cursor: default;
}

.rp-menu-item:hover > .rp-menu-titulo,
.rp-menu-item:focus-within > .rp-menu-titulo {
    border-color: var(--rp-ribbon-banda);
    background: var(--rp-arbol-seleccion);
}

.rp-menu-desplegable {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 18em;
    margin: 0;
    padding: 2px;
    list-style: none;
    border: 1px solid var(--rp-borde-paneles);
    background: var(--rp-panel-fondo);
    box-shadow: 2px 2px 4px var(--rp-sombra);
}

.rp-menu-item:hover > .rp-menu-desplegable,
.rp-menu-item:focus-within > .rp-menu-desplegable {
    display: block;
}

.rp-menu-desplegable .rp-opcion {
    display: flex;
    justify-content: space-between;
    gap: 2em;
    box-sizing: border-box;
    width: 100%;
    padding: 3px 10px 3px 24px;
    border: 0;
    background: transparent;
    color: var(--rp-texto-activo);
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.rp-menu-hijo .rp-opcion {
    padding-left: 40px;
}

.rp-menu-cabecera {
    padding: 3px 10px 3px 24px;
    color: var(--rp-etiqueta);
    font-weight: var(--rp-barra-lateral-peso);
}

.rp-menu-separador {
    margin: 2px 0;
    border-top: 1px solid var(--rp-lineas-rejilla);
}

.rp-menu-desplegable a.rp-opcion:hover,
.rp-menu-desplegable button.rp-opcion:hover,
.rp-menu-desplegable a.rp-opcion:focus,
.rp-menu-desplegable button.rp-opcion:focus {
    outline: none;
    background: var(--rp-arbol-seleccion);
}

/* --- Opciones deshabilitadas (FR-031): en gris, con «Llegará más adelante» donde el menú pone los atajos --- */

.rp-opcion.rp-deshabilitada {
    color: var(--rp-deshabilitado-texto);
    cursor: default;
}

.rp-indicacion {
    color: var(--rp-deshabilitado-texto);
    font-style: italic;
}

/* --- Ribbon --- */

.rp-ribbon {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: 3px;
    min-height: 0;
    padding: 3px 4px 2px;
    overflow: hidden;
    background: var(--rp-fondo-menu);
}

.rp-ribbon-grupo {
    flex: none;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rp-ribbon-banda);
    border-radius: 3px;
}

.rp-ribbon-botones {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 0 3px;
}

.rp-ribbon-formulario {
    display: contents;
}

.rp-ribbon-rotulo {
    flex: none;
    height: var(--rp-ribbon-banda-alto);
    padding: 0 6px;
    background: var(--rp-ribbon-banda);
    color: var(--rp-ribbon-banda-texto);
    line-height: var(--rp-ribbon-banda-alto);
    text-align: center;
    white-space: nowrap;
}

.rp-boton-barra {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    box-sizing: border-box;
    min-width: var(--rp-boton-barra-ancho-min);
    max-width: var(--rp-boton-barra-ancho-max);
    height: var(--rp-boton-barra-alto);
    padding: 4px 2px 2px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--rp-texto-activo);
    font: inherit;
    line-height: 1.15;
    text-align: center;
}

.rp-boton-barra:enabled:hover,
.rp-boton-barra:enabled:focus {
    outline: none;
    border-color: var(--rp-borde-paneles);
    background: var(--rp-arbol-seleccion);
}

.rp-boton-barra:disabled {
    color: var(--rp-deshabilitado-texto);
    cursor: default;
}

.rp-boton-barra:disabled .rp-icono-barra {
    opacity: 0.45;
    filter: grayscale(1);
}

.rp-icono-barra {
    flex: none;
    width: 32px;
    height: 32px;
}

/* --- Cuerpo: barra de opciones y zona de trabajo --- */

.rp-cuerpo {
    flex: 1;
    display: flex;
    min-height: 0;
}

.rp-barra-opciones {
    flex: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--rp-barra-lateral-ancho);
    border-right: 1px solid var(--rp-borde-paneles);
    background: var(--rp-panel-fondo);
    font-weight: var(--rp-barra-lateral-peso);
}

.rp-barra-opciones.rp-plegada {
    width: var(--rp-barra-lateral-plegada);
}

.rp-barra-opciones-cabecera {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--rp-barra-lateral-cabecera-alto);
    padding: 0 2px 0 8px;
    background: linear-gradient(var(--rp-barra-lateral-cabecera-inicio), var(--rp-barra-lateral-cabecera-fin));
    color: var(--rp-texto-activo);
    font-weight: var(--rp-titulo-dialogo-peso);
}

.rp-plegada .rp-barra-opciones-cabecera {
    justify-content: center;
    padding: 0;
}

.rp-barra-opciones-titulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-plegar {
    margin-left: auto;
    padding: 0 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--rp-texto-activo);
    font: inherit;
    font-weight: var(--rp-titulo-dialogo-peso);
    cursor: pointer;
}

.rp-plegada .rp-plegar {
    margin: 0;
}

.rp-plegar:hover,
.rp-plegar:focus {
    outline: none;
    border-color: var(--rp-borde-paneles);
    background: var(--rp-arbol-seleccion);
}

.rp-arbol-zona {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px 0;
}

.rp-arbol,
.rp-nodo-hijos {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--rp-arbol-texto);
}

.rp-nodo-fila {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: var(--rp-fila-rejilla-alto);
    padding: 0 6px;
}

.rp-icono-nodo {
    flex: none;
    width: 16px;
    height: 16px;
}

.rp-nodo-rotulo {
    color: var(--rp-arbol-texto);
}

.rp-nodo-hijos {
    padding-left: 27px;
    font-weight: normal;
}

.rp-arbol .rp-opcion {
    display: block;
    padding: 1px 4px;
    color: var(--rp-arbol-texto);
    line-height: calc(var(--rp-fila-rejilla-alto) - 2px);
    text-decoration: none;
}

/* En el árbol, lo deshabilitado conserva el azul de GesPro, apagado (en los menús va en gris, como en Windows). */
.rp-arbol .rp-opcion.rp-deshabilitada {
    color: var(--rp-arbol-texto);
    opacity: 0.6;
    cursor: default;
}

.rp-arbol a.rp-opcion:hover,
.rp-arbol a.rp-opcion:focus,
.rp-arbol .rp-opcion.rp-seleccionada {
    outline: none;
    background: var(--rp-arbol-seleccion);
    color: var(--rp-arbol-seleccion-texto);
}

.rp-arbol-vacio {
    margin: 8px;
    color: var(--rp-deshabilitado-texto);
    font-weight: normal;
}

.rp-grupos-grandes {
    flex: none;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rp-borde-paneles);
}

.rp-grupo-grande {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--rp-grupo-grande-alto);
    padding: 0 8px;
    border: 0;
    border-bottom: 1px solid var(--rp-grupo-inactivo-fin);
    background: linear-gradient(var(--rp-grupo-inactivo-inicio), var(--rp-grupo-inactivo-fin));
    color: var(--rp-texto-activo);
    font: inherit;
    font-weight: var(--rp-barra-lateral-peso);
    text-align: left;
    cursor: pointer;
}

.rp-grupo-grande.rp-activo {
    border-bottom-color: var(--rp-grupo-activo-borde);
    background: linear-gradient(var(--rp-grupo-activo-inicio), var(--rp-grupo-activo-fin));
}

.rp-grupo-grande:hover,
.rp-grupo-grande:focus {
    outline: 1px solid var(--rp-grupo-activo-borde);
    outline-offset: -1px;
}

.rp-icono-grupo {
    flex: none;
    width: 24px;
    height: 24px;
}

.rp-fila-iconos {
    flex: none;
    height: var(--rp-grupo-grande-alto);
    background: linear-gradient(var(--rp-grupo-inactivo-inicio), var(--rp-grupo-inactivo-fin));
}

.rp-trabajo {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --- Pestañas de listas --- */

.rp-pestanas {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    box-sizing: border-box;
    height: var(--rp-pestanas-alto);
    padding: 0 4px;
    border-bottom: 1px solid var(--rp-ribbon-banda);
    background: var(--rp-fondo-menu);
}

.rp-pestana {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: calc(var(--rp-pestanas-alto) - 3px);
    padding: 0 8px;
    border: 1px solid var(--rp-ribbon-banda);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background: var(--rp-panel-fondo);
}

.rp-pestana.rp-activa {
    background: linear-gradient(var(--rp-pestana-activa-inicio), var(--rp-pestana-activa-fin));
}

.rp-pestana-cerrar {
    color: var(--rp-texto-activo);
    text-decoration: none;
}

.rp-pestana-cerrar:hover,
.rp-pestana-cerrar:focus {
    color: var(--rp-aviso-texto);
}

.rp-lienzo {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 1em 1.5em;
    background: var(--rp-lienzo-fondo);
}

.rp-lienzo-vacio {
    color: var(--rp-deshabilitado-texto);
}

/* --- Barra de estado --- */

.rp-barra-estado {
    flex: none;
    box-sizing: border-box;
    height: var(--rp-barra-estado-alto);
    display: flex;
    align-items: center;
    gap: 1.5em;
    padding: 0 8px;
    background: var(--rp-barra-estado-fondo);
    border-top: 1px solid var(--rp-lineas-rejilla);
    color: var(--rp-texto-activo);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
    white-space: nowrap;
    overflow: hidden;
}

.rp-barra-estado-rotulo {
    color: var(--rp-etiqueta);
}

.rp-barra-estado-aviso {
    color: var(--rp-aviso-texto);
    font-weight: 600;
}

/* --- Aviso de entorno (FR-012) --- */

.rp-aviso-entorno {
    flex: none;
    box-sizing: border-box;
    padding: 3px 8px;
    background: var(--rp-aviso-entorno-fondo);
    border-bottom: 1px solid var(--rp-aviso-entorno-borde);
    color: var(--rp-aviso-entorno-texto);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
    font-weight: 600;
    text-align: center;
}

/* ------------------------------------------------------------------ Diálogos (popover nativo: Esc y clic fuera cierran) */

.rp-dialogo {
    box-sizing: border-box;
    width: 34em;
    max-width: 92vw;
    padding: 0;
    border: 1px solid var(--rp-borde-paneles);
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
    box-shadow: 3px 3px 8px var(--rp-sombra);
}

.rp-dialogo::backdrop {
    background: var(--rp-velo);
}

.rp-dialogo-cuerpo {
    padding: 1em 1.5em 0.5em;
}

.rp-dialogo-titulo {
    margin: 0 0 0.5em;
    color: var(--rp-titulo-dialogo-color);
    font-family: var(--rp-letra);
    font-size: var(--rp-titulo-dialogo-tamano);
    font-weight: var(--rp-titulo-dialogo-peso);
}

.rp-dialogo-datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 1em;
    margin: 0.75em 0;
}

.rp-dialogo-datos dt {
    color: var(--rp-etiqueta);
}

.rp-dialogo-datos dd {
    margin: 0;
}

.rp-dialogo-pie {
    display: flex;
    justify-content: flex-end;
    padding: 6px 1.5em;
    border-top: 1px solid var(--rp-borde-paneles);
    background: var(--rp-barra-ficha);
}

.rp-dialogo-pie button {
    min-width: 7em;
    padding: 3px 12px;
    font: inherit;
}

/* ------------------------------------------------------------------ Avisos del circuito (sin el <style> de Blazor) */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background: var(--rp-velo);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.rp-reconexion-caja {
    max-width: 30em;
    padding: 1em 1.5em;
    border: 1px solid var(--rp-borde-paneles);
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
    box-shadow: 3px 3px 8px var(--rp-sombra);
}

.rp-reconexion-intentando,
.rp-reconexion-fallida,
.rp-reconexion-rechazada {
    display: none;
    margin: 0;
}

#components-reconnect-modal.components-reconnect-show .rp-reconexion-intentando,
#components-reconnect-modal.components-reconnect-retrying .rp-reconexion-intentando,
#components-reconnect-modal.components-reconnect-failed .rp-reconexion-fallida,
#components-reconnect-modal.components-reconnect-paused .rp-reconexion-fallida,
#components-reconnect-modal.components-reconnect-resume-failed .rp-reconexion-fallida,
#components-reconnect-modal.components-reconnect-rejected .rp-reconexion-rechazada {
    display: block;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--rp-barra-estado-alto);
    z-index: 1000;
    padding: 6px 12px;
    background: var(--rp-aviso-fondo);
    color: var(--rp-aviso-texto);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
    font-weight: 600;
}

/* ================================================================== B2: listas, fichas y documentos (research R7, R9)
 * Mismas reglas que arriba: colores y medidas en variables de :root (aquí, un segundo bloque :root con las propias de B2),
 * sin colores literales fuera de :root, sin @media ni anidamiento y sin estilos en línea en los componentes. Los tokens de
 * la rejilla y de la ficha (docs/05 §2) ya están en el primer bloque. Las clases de las RTF van en piel-rtf.css.
 */

:root {
    /* --- Propios de RecuPro (B2; no medidos en GesPro) --- */
    --rp-rejilla-relleno: 2px;
    --rp-rejilla-asa-ancho: 6px;
    --rp-rejilla-pie-alto: 24px;
    --rp-casilla-lado: 11px;
    --rp-boton-alto: 21px;
    --rp-campo-alto: 20px;
    --rp-campo-rotulo-ancho: 9em;
    --rp-ficha-ancho: 780px;
    --rp-ficha-alto: 540px;
    --rp-ficha-ancho-min: 320px;
    --rp-ficha-alto-min: 200px;
    --rp-ficha-titulo-alto: 26px;
    --rp-ficha-cascada: 24px;
    --rp-boton-ficha-ancho: 58px;
    --rp-boton-ventana-lado: 22px;
    --rp-dialogo-arriba: 10vh;
    --rp-dialogo-alto-max: 80vh;
    --rp-capa-ficha: 10;
    --rp-capa-velo: 1000;
    --rp-capa-dialogo: 1001;
    --rp-rtf-alto-min: 8em;
}

/* --- El lienzo contiene las ventanas de ficha: posición relativa y su propia pila (que no tapen los menús) --- */

.rp-lienzo {
    position: relative;
    z-index: 0;
}

/* --- Botones pequeños comunes (panel de filtro, diálogos, pie de la rejilla) --- */

.rp-boton {
    box-sizing: border-box;
    min-height: var(--rp-boton-alto);
    padding: 1px 10px;
    border: 1px solid var(--rp-borde-paneles);
    border-radius: 2px;
    background: var(--rp-barra-ficha);
    color: var(--rp-texto-activo);
    font: inherit;
    cursor: default;
}

.rp-boton:enabled:hover,
.rp-boton:enabled:focus {
    outline: 1px solid var(--rp-foco);
    outline-offset: -1px;
    background: var(--rp-arbol-seleccion);
}

.rp-boton:disabled {
    color: var(--rp-deshabilitado-texto);
}

.rp-hueco {
    flex: 1;
}

/* ------------------------------------------------------------------ Rejilla (SH-14) */

.rp-rejilla {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--rp-lineas-rejilla);
    background: var(--rp-panel-fondo);
}

.rp-rejilla-zona {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.rp-rejilla-tabla {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--rp-texto-activo);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
}

.rp-rejilla-tabla col.rp-col-ordenada {
    background: var(--rp-columna-ordenada);
}

.rp-rejilla-tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
    height: var(--rp-fila-rejilla-alto);
    padding: 0;
    border-right: 1px solid var(--rp-lineas-rejilla);
    border-bottom: 1px solid var(--rp-lineas-rejilla);
    background: var(--rp-rejilla-cabecera);
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
}

.rp-rejilla-cabecera {
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    width: 100%;
    height: var(--rp-fila-rejilla-alto);
    padding: 0 var(--rp-rejilla-relleno);
    border: 0;
    background: transparent;
    color: var(--rp-texto-activo);
    font: inherit;
    text-align: inherit;
    cursor: default;
}

.rp-rejilla-tabla th.rp-alinear-derecha .rp-rejilla-cabecera {
    justify-content: flex-end;
}

.rp-rejilla-tabla th.rp-alinear-centro .rp-rejilla-cabecera {
    justify-content: center;
}

button.rp-rejilla-cabecera:hover,
button.rp-rejilla-cabecera:focus {
    outline: 1px solid var(--rp-foco);
    outline-offset: -1px;
}

.rp-rejilla-rotulo {
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-rejilla-orden {
    flex: none;
    color: var(--rp-rejilla-glifo-orden);
    font-size: 0.8em;
}

.rp-rejilla-tabla th[aria-sort="ascending"] .rp-rejilla-orden::after {
    content: "\25B2";
}

.rp-rejilla-tabla th[aria-sort="descending"] .rp-rejilla-orden::after {
    content: "\25BC";
}

.rp-rejilla-asa {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--rp-rejilla-asa-ancho);
    cursor: col-resize;
    touch-action: none;
}

.rp-rejilla-asa:hover,
.rp-rejilla-asa.rp-arrastrando {
    background: var(--rp-borde-paneles);
}

.rp-rejilla-tabla tbody tr {
    height: var(--rp-fila-rejilla-alto);
    cursor: default;
}

.rp-rejilla-tabla td {
    box-sizing: border-box;
    height: var(--rp-fila-rejilla-alto);
    padding: 0 var(--rp-rejilla-relleno);
    overflow: hidden;
    border-right: 1px solid var(--rp-lineas-rejilla);
    border-bottom: 1px solid var(--rp-lineas-rejilla);
    line-height: calc(var(--rp-fila-rejilla-alto) - 1px);
    text-overflow: clip;
    white-space: nowrap;
}

.rp-rejilla-tabla tbody tr.rp-fila-seleccionada {
    background: var(--rp-fila-seleccionada);
    color: var(--rp-fila-seleccionada-texto);
}

.rp-rejilla-tabla tbody tr:focus {
    outline: 1px dotted var(--rp-texto-activo);
    outline-offset: -2px;
}

.rp-rejilla-tabla tbody tr.rp-fila-seleccionada:focus {
    outline-color: var(--rp-fila-seleccionada-texto);
}

.rp-alinear-derecha {
    text-align: right;
}

.rp-alinear-centro {
    text-align: center;
}

/* --- Casillas de solo lectura (rejilla y ficha) --- */

.rp-casilla {
    display: inline-block;
    box-sizing: border-box;
    width: var(--rp-casilla-lado);
    height: var(--rp-casilla-lado);
    border: 1px solid var(--rp-deshabilitado-texto);
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
    font-size: var(--rp-casilla-lado);
    line-height: calc(var(--rp-casilla-lado) - 2px);
    text-align: center;
    vertical-align: middle;
}

.rp-casilla-marcada::after {
    content: "\2713";
}

/* --- Pie de estado y «50 más» --- */

.rp-rejilla-pie {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: var(--rp-rejilla-pie-alto);
    padding: 1px 6px;
    border-top: 1px solid var(--rp-lineas-rejilla);
    background: var(--rp-barra-estado-fondo);
    color: var(--rp-texto-activo);
}

.rp-rejilla-estado {
    margin-left: auto;
    white-space: nowrap;
}

.rp-rejilla-aviso {
    color: var(--rp-aviso-texto);
    font-weight: 600;
}

/* --- Menú contextual de la fila (popover nativo: Esc y clic fuera lo cierran; lo coloca el módulo JS) --- */

.rp-menu-contextual {
    position: fixed;
    inset: auto;
    min-width: 11em;
    margin: 0;
    padding: 2px;
    border: 1px solid var(--rp-borde-paneles);
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
    box-shadow: 2px 2px 4px var(--rp-sombra);
}

.rp-menu-contextual-opcion {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 3px 16px 3px 24px;
    border: 0;
    background: transparent;
    color: var(--rp-texto-activo);
    font: inherit;
    text-align: left;
    white-space: nowrap;
}

.rp-menu-contextual-opcion:hover,
.rp-menu-contextual-opcion:focus {
    outline: none;
    background: var(--rp-arbol-seleccion);
}

/* ------------------------------------------------------------------ Panel de filtro (SH-09 a SH-11) */

.rp-filtro {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 4px;
    padding: 4px 6px;
    border: 1px solid var(--rp-ribbon-banda);
    background: var(--rp-fondo-menu);
    color: var(--rp-texto-activo);
}

.rp-filtro-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.rp-filtro-rotulo {
    color: var(--rp-etiqueta);
}

.rp-filtro select,
.rp-filtro input[type="search"],
.rp-filtro input[type="date"] {
    box-sizing: border-box;
    height: var(--rp-campo-alto);
    border: 1px solid var(--rp-lineas-rejilla);
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
    font: inherit;
}

.rp-filtro-texto {
    width: 16em;
}

.rp-filtro-separador {
    color: var(--rp-ribbon-banda-texto);
}

.rp-filtro-casilla {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.rp-filtro-condiciones {
    color: var(--rp-etiqueta);
}

.rp-filtro-aviso {
    margin: 0;
    color: var(--rp-aviso-texto);
}

/* ------------------------------------------------------------------ Diálogos propios (Condiciones, Campos, Buscar) */

.rp-velo-dialogo {
    position: fixed;
    inset: 0;
    z-index: var(--rp-capa-velo);
    background: var(--rp-velo);
}

.rp-dialogo-propio {
    position: fixed;
    top: var(--rp-dialogo-arriba);
    left: 50%;
    z-index: var(--rp-capa-dialogo);
    display: flex;
    flex-direction: column;
    max-height: var(--rp-dialogo-alto-max);
    transform: translateX(-50%);
}

.rp-dialogo-propio:focus {
    outline: none;
}

.rp-dialogo-propio .rp-dialogo-cuerpo {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.rp-dialogo-cabecera {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.6em 0.75em 0 1.5em;
}

.rp-dialogo-cabecera .rp-dialogo-titulo {
    flex: 1;
    margin: 0;
}

.rp-dialogo-propio .rp-dialogo-pie {
    flex: none;
    gap: 6px;
}

.rp-dialogo-aviso {
    margin: 0.5em 0 0;
    color: var(--rp-aviso-texto);
}

.rp-dialogo-condiciones {
    width: 54em;
}

.rp-dialogo-campos {
    width: 46em;
}

.rp-dialogo-buscar {
    width: 50em;
}

/* --- Condiciones --- */

.rp-condiciones-grupo {
    margin: 0 0 4px;
    padding: 2px 6px 6px;
    border: 1px solid var(--rp-borde-paneles);
}

.rp-condiciones-union {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    color: var(--rp-etiqueta);
}

.rp-condiciones-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rp-condicion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.rp-condiciones-subgrupo {
    padding: 2px 0 2px 16px;
}

.rp-condicion .rp-condicion-valor {
    width: 9em;
}

.rp-condicion-y {
    color: var(--rp-etiqueta);
}

.rp-condiciones-acciones {
    display: flex;
    gap: 4px;
    padding-top: 3px;
}

.rp-condiciones-grupo select,
.rp-condiciones-grupo input {
    box-sizing: border-box;
    height: var(--rp-campo-alto);
    border: 1px solid var(--rp-lineas-rejilla);
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
    font: inherit;
}

/* --- Campos --- */

.rp-campos {
    display: grid;
    grid-template-columns: 1fr max-content 1fr max-content;
    align-items: start;
    gap: 8px;
}

.rp-campos-lista {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    color: var(--rp-etiqueta);
}

.rp-campos-select {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--rp-lineas-rejilla);
    color: var(--rp-texto-activo);
    font: inherit;
}

.rp-campos-botones {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 1.4em;
    color: var(--rp-etiqueta);
}

.rp-campos-ancho {
    box-sizing: border-box;
    width: 6em;
    height: var(--rp-campo-alto);
    font: inherit;
}

.rp-icono-boton {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

/* --- Buscar --- */

.rp-buscar-campos {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 3px 1em;
}

.rp-buscar-acciones {
    display: flex;
    justify-content: flex-end;
    padding-top: 6px;
}

.rp-buscar-resultados {
    display: flex;
    flex-direction: column;
    height: 16em;
    margin: 0 1.5em 0.5em;
}

/* ------------------------------------------------------------------ Ventana de ficha (SH-06, SH-18) */

.rp-ficha {
    position: absolute;
    top: var(--rp-ficha-cascada);
    left: var(--rp-ficha-cascada);
    z-index: var(--rp-capa-ficha);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--rp-ficha-ancho);
    height: var(--rp-ficha-alto);
    min-width: var(--rp-ficha-ancho-min);
    min-height: var(--rp-ficha-alto-min);
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    resize: both;
    border: 1px solid var(--rp-borde-paneles);
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
    box-shadow: 3px 3px 8px var(--rp-sombra);
}

.rp-ficha:focus {
    outline: 1px solid var(--rp-foco);
}

.rp-ficha.rp-ficha-maximizada {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    resize: none;
    box-shadow: none;
}

.rp-ficha-titulo {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: var(--rp-ficha-titulo-alto);
    padding: 0 3px 0 8px;
    border-bottom: 1px solid var(--rp-borde-paneles);
    background: linear-gradient(var(--rp-ficha-cabecera-inicio), var(--rp-ficha-cabecera-medio), var(--rp-ficha-cabecera-fin));
    cursor: move;
    touch-action: none;
    user-select: none;
}

.rp-ficha-maximizada .rp-ficha-titulo {
    cursor: default;
}

.rp-ficha-titulo-texto {
    flex: 1;
    margin: 0;
    overflow: hidden;
    color: var(--rp-texto-activo);
    font-size: var(--rp-letra-tamano);
    font-weight: var(--rp-titulo-dialogo-peso);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-ficha-titulo-botones {
    flex: none;
    display: flex;
    gap: 1px;
}

.rp-boton-ventana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--rp-boton-ventana-lado);
    height: var(--rp-boton-ventana-lado);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    cursor: default;
}

.rp-boton-ventana:hover,
.rp-boton-ventana:focus {
    outline: none;
    border-color: var(--rp-borde-paneles);
    background: var(--rp-arbol-seleccion);
}

.rp-icono-ventana {
    width: 16px;
    height: 16px;
}

.rp-ficha-barra {
    flex: none;
    display: flex;
    align-items: stretch;
    gap: 1px;
    padding: 2px 4px;
    border-bottom: 1px solid var(--rp-ficha-pestanas-franja);
    background: var(--rp-barra-ficha);
}

.rp-boton-ficha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    box-sizing: border-box;
    min-width: var(--rp-boton-ficha-ancho);
    padding: 2px 3px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--rp-texto-activo);
    font: inherit;
    cursor: default;
}

.rp-boton-ficha:enabled:hover,
.rp-boton-ficha:enabled:focus {
    outline: none;
    border-color: var(--rp-borde-paneles);
    background: var(--rp-arbol-seleccion);
}

.rp-boton-ficha:disabled {
    color: var(--rp-deshabilitado-texto);
}

.rp-boton-ficha:disabled .rp-icono-ficha {
    opacity: 0.45;
    filter: grayscale(1);
}

.rp-icono-ficha {
    width: 24px;
    height: 24px;
}

.rp-ficha-solo-lectura {
    align-self: center;
    margin-left: auto;
    padding: 1px 8px;
    border: 1px solid var(--rp-borde-paneles);
    border-radius: 2px;
    background: var(--rp-campo-solo-lectura);
    color: var(--rp-texto-activo);
    font-weight: 600;
    white-space: nowrap;
}

.rp-ficha-aviso {
    flex: none;
    padding: 3px 8px;
    border-bottom: 1px solid var(--rp-aviso-texto);
    background: var(--rp-aviso-fondo);
    color: var(--rp-aviso-texto);
    font-weight: 600;
}

.rp-ficha-cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: 4px;
}

/* --- Pestañas de la ficha --- */

.rp-ficha-pestanas {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rp-ficha-pestanas-franja {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1px;
    padding: 2px 4px 0;
    background: var(--rp-ficha-pestanas-franja);
}

.rp-ficha-pestana {
    box-sizing: border-box;
    padding: 2px 10px;
    border: 1px solid var(--rp-borde-paneles);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background: var(--rp-ficha-pestana-inactiva);
    color: var(--rp-texto-activo);
    font: inherit;
    cursor: default;
}

.rp-ficha-pestana.rp-activa {
    background: var(--rp-ficha-pestana-activa);
    font-weight: 600;
}

.rp-ficha-pestana:focus {
    outline: 1px dotted var(--rp-foco);
    outline-offset: -3px;
}

.rp-ficha-pestanas-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--rp-ficha-pestanas-franja);
    border-top: 0;
    background: var(--rp-ficha-pestana-activa);
}

.rp-subpestanas .rp-ficha-pestanas-franja {
    background: var(--rp-ficha-pestana-activa);
}

.rp-subpestanas .rp-ficha-pestana {
    padding: 1px 8px;
}

/* --- Grupos y datos de la ficha --- */

.rp-ficha-grupo {
    margin: 0;
    padding: 4px 8px 6px;
    border: 1px solid var(--rp-borde-paneles);
    background: var(--rp-panel-fondo);
}

.rp-ficha-grupo-rotulo {
    padding: 0 4px;
    color: var(--rp-etiqueta);
    font-weight: 600;
}

.rp-ficha-campos {
    display: grid;
    grid-template-columns: var(--rp-campo-rotulo-ancho) 1fr max-content;
    align-items: center;
    gap: 3px 6px;
}

.rp-campo {
    display: contents;
}

.rp-campo-rotulo {
    grid-column: 1;
    color: var(--rp-etiqueta);
    white-space: nowrap;
}

.rp-campo-valor {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--rp-campo-alto);
    padding: 0 3px;
    border: 1px solid var(--rp-lineas-rejilla);
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
    font: inherit;
}

.rp-ficha-campos .rp-campo-valor,
.rp-ficha-campos .rp-casilla {
    grid-column: 2;
}

.rp-campo-valor:focus {
    outline: none;
    border-bottom-color: var(--rp-foco);
}

.rp-campo-numero {
    text-align: right;
}

.rp-campo-memo {
    height: auto;
    resize: vertical;
}

.rp-campo-valor.rp-campo-gris {
    background: var(--rp-campo-solo-lectura);
}

.rp-campo-ir {
    grid-column: 3;
    min-width: var(--rp-boton-ventana-lado);
    height: var(--rp-campo-alto);
    padding: 0 4px;
    border: 1px solid var(--rp-borde-paneles);
    border-radius: 2px;
    background: var(--rp-barra-ficha);
    color: var(--rp-etiqueta);
    font: inherit;
    font-size: 1.3em;
    line-height: 1;
    cursor: default;
}

.rp-campo-ir:hover,
.rp-campo-ir:focus {
    outline: 1px solid var(--rp-foco);
    outline-offset: -1px;
}

/* --- Bloque gris del cliente o proveedor --- */

.rp-bloque-gris {
    margin-top: 4px;
    padding: 2px 4px;
    border: 1px solid var(--rp-lineas-rejilla);
    background: var(--rp-campo-solo-lectura);
    color: var(--rp-texto-activo);
}

.rp-bloque-linea {
    min-height: calc(var(--rp-campo-alto) - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-negrita {
    font-weight: 700;
}

/* --- RTF: caja blanca con desplazamiento; la letra y el formato de dentro los pone piel-rtf.css (.rp-rtf) --- */

.rp-vista-rtf {
    flex: 1;
    box-sizing: border-box;
    min-height: var(--rp-rtf-alto-min);
    overflow: auto;
    padding: 4px 6px;
    border: 1px solid var(--rp-lineas-rejilla);
    background: var(--rp-panel-fondo);
    color: var(--rp-texto-activo);
    font-family: var(--rp-letra);
    font-size: var(--rp-letra-tamano);
}

.rp-vista-rtf:focus {
    outline: 1px solid var(--rp-foco);
    outline-offset: -1px;
}

/* ------------------------------------------------------------------ Documento (SH-22) */

.rp-documento {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.rp-documento-cabecera {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
}

.rp-documento-caja {
    flex: 1 1 14em;
    min-width: 0;
}

.rp-documento-lineas {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rp-documento-pie {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 10px;
    padding: 4px 8px;
    background: var(--rp-ficha-pestanas-franja);
}

.rp-documento-importe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rp-documento-importe .rp-campo-valor {
    width: 7.5em;
}

.rp-documento-total .rp-campo-valor {
    font-weight: 700;
}

.rp-documento-divisa {
    color: var(--rp-etiqueta);
    font-weight: 700;
}

/* --- Contenedor de una lista (panel de filtro + rejilla) para quien la integre: llena el lienzo y la rejilla se desplaza
 *     dentro, no el lienzo (así las ventanas de ficha, en posición absoluta en el lienzo, no se mueven con las filas). --- */

.rp-lista {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
}

/* --- B2 en el armazón: opciones del árbol que abren una lista sin navegar (botones), pestañas de listas que se eligen
 *     con un clic en su rótulo y se cierran con su ✕ (botones, no enlaces) --- */

.rp-arbol button.rp-opcion {
    box-sizing: border-box;
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: default;
}

.rp-arbol button.rp-opcion:hover,
.rp-arbol button.rp-opcion:focus {
    outline: none;
    background: var(--rp-arbol-seleccion);
}

.rp-pestana-elegir,
button.rp-pestana-cerrar {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: default;
}

.rp-pestana-elegir {
    color: inherit;
}

.rp-pestana-elegir:focus,
button.rp-pestana-cerrar:focus {
    outline: 1px dotted var(--rp-foco);
}

/* B2 (validación): en las cajas de la cabecera del documento, el rótulo ocupa lo que necesita y el valor deja sitio
   para una fecha o un código entero (dd/mm/aaaa, 6 cifras), sin cortarlos. */
.rp-documento-caja {
    flex: 1 1 17em;
}

.rp-documento-caja .rp-ficha-campos {
    grid-template-columns: max-content minmax(7em, 1fr) max-content;
}

/* ================================================================== B3: ficha editable (research R19; contracts/interfaz.md)
 * Mismas reglas: colores y medidas en variables de :root (un tercer bloque, solo con las propias de B3), sin colores
 * literales fuera de :root, sin @media ni anidamiento y sin estilos en línea. Los colores de campo (SH-19) son los tokens de
 * docs/05 §2 que ya estaban: blanco el editable, gris #E3E3E3 el de solo lectura y el desactivado, amarillo #FFFFE1 el
 * requerido vacío y el foco subrayado en #0067C0; el error usa el rojo de los avisos de B1.
 */

:root {
    /* --- Propios de RecuPro (B3; no medidos en GesPro) --- */
    --rp-campo-nota-tamano: 0.92em;
    --rp-ficha-separador-ancho: 1px;
    --rp-dialogo-confirmar-ancho: 30em;
    --rp-dialogo-avisos-ancho: 38em;
    --rp-dialogo-fila-ancho: 42em;
    --rp-nota-entrada-alto-min: 4.5em;
    --rp-subrejilla-alto-min: 7em;
}

/* --- Barra de la ficha con escritura (SH-18): separadores entre grupos e indicador «Guardando…» --- */

.rp-ficha-separador {
    flex: none;
    width: var(--rp-ficha-separador-ancho);
    margin: 4px 3px;
    background: var(--rp-borde-paneles);
}

.rp-ficha-guardando {
    align-self: center;
    margin-left: auto;
    padding: 1px 8px;
    border: 1px solid var(--rp-aviso-entorno-borde);
    border-radius: 2px;
    background: var(--rp-aviso-entorno-fondo);
    color: var(--rp-aviso-entorno-texto);
    font-weight: 600;
    white-space: nowrap;
}

/* --- Campos editables (SH-19): blanco, gris, desactivado, requerido vacío, error y foco --- */

.rp-campo-valor.rp-campo-edicion {
    background: var(--rp-panel-fondo);
}

.rp-campo-valor.rp-campo-requerido-vacio {
    background: var(--rp-campo-obligatorio);
}

.rp-campo-valor:disabled {
    color: var(--rp-deshabilitado-texto);
}

.rp-campo-valor.rp-campo-error {
    border-color: var(--rp-aviso-texto);
}

.rp-campo-valor.rp-campo-edicion:focus {
    outline: none;
    border-bottom-color: var(--rp-foco);
    box-shadow: inset 0 -1px 0 var(--rp-foco);
}

select.rp-campo-valor {
    padding: 0 1px;
}

.rp-casilla-edicion {
    justify-self: start;
    margin: 0;
    accent-color: var(--rp-foco);
}

.rp-ficha-campos .rp-casilla-edicion {
    grid-column: 2;
}

.rp-casilla-edicion:focus {
    outline: 1px solid var(--rp-foco);
    outline-offset: 1px;
}

/* Lo que sale debajo de un campo, en su columna: el error, los avisos y el motivo de que no se edite. */

.rp-campo-nota {
    font-size: var(--rp-campo-nota-tamano);
}

.rp-ficha-campos .rp-campo-nota {
    grid-column: 2 / -1;
}

.rp-campo-nota-error {
    color: var(--rp-aviso-texto);
    font-weight: 600;
}

.rp-campo-nota-aviso {
    padding: 0 3px;
    border-left: 3px solid var(--rp-aviso-entorno-borde);
    background: var(--rp-aviso-entorno-fondo);
    color: var(--rp-aviso-entorno-texto);
}

.rp-campo-nota-motivo {
    color: var(--rp-texto-activo);
    font-style: italic;
}

/* --- Campo de búsqueda (SH-20): el ▾ va donde el ▸ de B2; el menú es el contextual de la rejilla --- */

.rp-campo-menu {
    font-size: 1em;
}

/* --- Diálogos propios de la ficha (SH-21): confirmaciones, avisos y filas de las subrejillas --- */

.rp-trampa-foco {
    position: fixed;
    width: 0;
    height: 0;
    overflow: hidden;
    outline: none;
}

.rp-dialogo-confirmar {
    width: var(--rp-dialogo-confirmar-ancho);
}

.rp-dialogo-avisos {
    width: var(--rp-dialogo-avisos-ancho);
}

.rp-dialogo-fila {
    width: var(--rp-dialogo-fila-ancho);
}

.rp-dialogo-mensaje {
    margin: 0 0 0.5em;
}

.rp-avisos-lista {
    margin: 0 0 0.5em;
    padding-left: 1.4em;
}

.rp-avisos-aviso {
    padding: 2px 0;
}

.rp-avisos-campo {
    color: var(--rp-etiqueta);
    font-weight: 600;
}

/* --- «Añadir nota»: la nota de B2, la entrada pendiente y la caja --- */

.rp-editor-nota {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.rp-nota-pendiente {
    flex: none;
    padding: 3px 6px;
    border: 1px dashed var(--rp-aviso-entorno-borde);
    background: var(--rp-aviso-entorno-fondo);
    color: var(--rp-texto-activo);
}

.rp-nota-pendiente-cabecera {
    color: var(--rp-aviso-entorno-texto);
    font-weight: 600;
}

.rp-nota-pendiente-texto {
    margin: 2px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rp-nota-anadir {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp-nota-entrada {
    min-height: var(--rp-nota-entrada-alto-min);
}

/* --- Subrejillas editables (direcciones de envío y contactos) --- */

.rp-subrejilla {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: var(--rp-subrejilla-alto-min);
}

.rp-subrejilla-barra {
    flex: none;
    display: flex;
    gap: 4px;
}

.rp-subrejilla-nota {
    flex: none;
    margin: 0;
    color: var(--rp-aviso-entorno-texto);
    font-size: var(--rp-campo-nota-tamano);
}

/* --- B3 (T041): la ficha editable en el espacio de trabajo (RecuPro.Web): la lista «Revisa: …», los avisos de conflicto y de
 * bloqueo con su botón, los botones del IBAN y la subrejilla dentro de su pestaña --- */

.rp-ficha-errores {
    flex: none;
    margin: 0 0 4px;
    padding: 3px 8px;
    border: 1px solid var(--rp-aviso-texto);
    background: var(--rp-aviso-fondo);
    color: var(--rp-aviso-texto);
}

.rp-ficha-errores-titulo {
    font-weight: 600;
}

.rp-ficha-errores-lista {
    margin: 2px 0 0;
    padding-left: 1.4em;
}

.rp-ficha-fallo {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 3px 8px;
    border: 1px solid var(--rp-aviso-texto);
    background: var(--rp-aviso-fondo);
    color: var(--rp-aviso-texto);
    font-weight: 600;
}

.rp-campo-iban-acciones {
    grid-column: 3;
    display: flex;
    gap: 4px;
}

.rp-ficha-subrejilla {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ================================================================== B4: documento editable (research R27; contracts/interfaz.md de B4)
 * Mismas reglas: colores y medidas en variables de :root (un cuarto bloque, solo con las propias de B4), sin colores
 * literales fuera de :root, sin @media ni anidamiento y sin estilos en línea. Las líneas pendientes llevan el símbolo y el
 * texto en su primera columna (el color solo acompaña); la vista previa del pie y los avisos usan el amarillo de los avisos
 * de B1 y B3.
 */

:root {
    /* --- Propios de RecuPro (B4; no medidos en GesPro) --- */
    --rp-linea-nueva: #E8F4DC;
    --rp-linea-cambiada: #FFF4CE;
    --rp-linea-borrada-texto: #8A8A8A;
    --rp-editor-linea-fondo: #F4F8FD;
    --rp-editor-referencia-ancho: 11em;
    --rp-editor-almacen-ancho: 9em;
    --rp-editor-numero-ancho: 6em;
    --rp-editor-precio-ancho: 7.5em;
    --rp-editor-iva-ancho: 5.5em;
    --rp-editor-fecha-ancho: 9em;
    --rp-editor-texto-ancho-min: 20em;
    --rp-boton-generar-ancho-max: 80px;
    --rp-dialogo-generar-ancho: 40em;
    --rp-documento-lineas-alto-min: 9em;
}

/* --- Barra del documento (SH-18): «Generar Documentos» en dos renglones, como los demás botones --- */

.rp-boton-generar {
    max-width: var(--rp-boton-generar-ancho-max);
}

/* --- Documento editable (SH-22): el motivo de solo lectura, los avisos, el editor bajo la rejilla y el pie en vista previa --- */

.rp-documento-motivo {
    flex: none;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid var(--rp-borde-paneles);
    background: var(--rp-campo-solo-lectura);
    color: var(--rp-texto-activo);
    font-weight: 600;
}

.rp-documento-avisos {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rp-documento-aviso {
    padding: 1px 6px;
    border-left: 3px solid var(--rp-aviso-entorno-borde);
    background: var(--rp-aviso-entorno-fondo);
    color: var(--rp-aviso-entorno-texto);
}

.rp-documento-editor {
    flex: none;
}

/* En una ventana baja, las líneas no se encogen hasta desaparecer bajo el editor: el panel se desplaza (validación B4). */
.rp-documento-editable .rp-documento-lineas {
    flex-shrink: 0;
    min-height: var(--rp-documento-lineas-alto-min);
}

.rp-documento-pie-previa {
    border-top: 1px dashed var(--rp-aviso-entorno-borde);
    background: var(--rp-aviso-entorno-fondo);
}

.rp-documento-previa {
    margin-right: auto;
    color: var(--rp-aviso-entorno-texto);
    font-weight: 600;
}

.rp-documento-previa-nota {
    color: var(--rp-aviso-entorno-texto);
    font-style: italic;
}

/* --- Rejilla de líneas pendientes: barra, marcas y nota --- */

.rp-lineas-pendientes {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: var(--rp-subrejilla-alto-min);
}

.rp-lineas-barra {
    flex: none;
    display: flex;
    gap: 4px;
}

.rp-boton-con-icono {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.rp-lineas-nota {
    flex: none;
    margin: 0;
    color: var(--rp-aviso-entorno-texto);
    font-size: var(--rp-campo-nota-tamano);
}

.rp-rejilla-tabla tbody tr.rp-linea-nueva:not(.rp-fila-seleccionada) {
    background: var(--rp-linea-nueva);
}

.rp-rejilla-tabla tbody tr.rp-linea-cambiada:not(.rp-fila-seleccionada) {
    background: var(--rp-linea-cambiada);
}

.rp-rejilla-tabla tbody tr.rp-linea-borrada {
    text-decoration: line-through;
}

.rp-rejilla-tabla tbody tr.rp-linea-borrada:not(.rp-fila-seleccionada) {
    color: var(--rp-linea-borrada-texto);
}

.rp-rejilla-tabla tbody tr.rp-linea-origen {
    font-style: italic;
}

.rp-rejilla-tabla tbody tr.rp-linea-en-editor {
    outline: 1px dashed var(--rp-foco);
    outline-offset: -1px;
}

/* --- Editor de línea (SH-23): cada campo es una celda con el rótulo encima; las celdas se reparten en dos filas --- */

.rp-editor-linea {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    margin: 0;
    padding: 2px 6px 4px;
    border: 1px solid var(--rp-borde-paneles);
    background: var(--rp-editor-linea-fondo);
}

.rp-editor-linea-rotulo {
    padding: 0 4px;
    color: var(--rp-etiqueta);
    font-weight: 600;
}

.rp-editor-linea-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3px 6px;
}

.rp-editor-linea-celda {
    flex: 0 0 var(--rp-editor-numero-ancho);
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-content: start;
    gap: 1px 2px;
    min-width: 0;
}

.rp-editor-linea-celda .rp-campo-rotulo {
    grid-column: 1 / -1;
}

.rp-editor-linea-celda .rp-campo-valor {
    grid-column: 1;
}

.rp-editor-linea-celda .rp-campo-ir {
    grid-column: 2;
}

.rp-editor-linea-celda .rp-campo-nota {
    grid-column: 1 / -1;
}

.rp-editor-linea-referencia {
    flex-basis: var(--rp-editor-referencia-ancho);
}

.rp-editor-linea-almacen {
    flex-basis: var(--rp-editor-almacen-ancho);
}

.rp-editor-linea-precio,
.rp-editor-linea-importe {
    flex-basis: var(--rp-editor-precio-ancho);
}

.rp-editor-linea-iva {
    flex-basis: var(--rp-editor-iva-ancho);
}

.rp-editor-linea-fecha {
    flex-basis: var(--rp-editor-fecha-ancho);
}

.rp-editor-linea-texto {
    flex: 1 1 var(--rp-editor-texto-ancho-min);
}

.rp-editor-linea-acciones {
    align-self: flex-end;
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.rp-editor-linea-motivo,
.rp-editor-linea-estado {
    margin: 0;
}

.rp-editor-linea-estado {
    color: var(--rp-aviso-entorno-texto);
    font-size: var(--rp-campo-nota-tamano);
}

.rp-editor-linea-avisos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rp-editor-linea-aviso {
    padding: 0 3px;
    border-left: 3px solid var(--rp-aviso-entorno-borde);
    background: var(--rp-aviso-entorno-fondo);
    color: var(--rp-aviso-entorno-texto);
    font-size: var(--rp-campo-nota-tamano);
}

.rp-editor-linea-confirmar {
    margin-left: 4px;
    font-weight: 600;
}

/* --- Generar Documentos (SH-24): destinos con su motivo, campos del destino, líneas del espejo y resumen --- */

.rp-dialogo-generar {
    width: var(--rp-dialogo-generar-ancho);
}

.rp-generar-destinos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 0.75em;
}

.rp-generar-rotulo {
    color: var(--rp-etiqueta);
    font-weight: 600;
    text-align: left;
}

.rp-generar-destino {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-items: center;
    gap: 4px;
}

.rp-generar-opcion {
    margin: 0;
    accent-color: var(--rp-foco);
}

.rp-generar-opcion:focus {
    outline: 1px solid var(--rp-foco);
    outline-offset: 1px;
}

.rp-generar-no-disponible .rp-generar-destino-rotulo {
    color: var(--rp-deshabilitado-texto);
}

.rp-generar-motivo {
    color: var(--rp-texto-activo);
    font-size: var(--rp-campo-nota-tamano);
    font-style: italic;
}

.rp-generar-campos {
    margin: 0 0 0.5em;
}

.rp-generar-lineas {
    width: 100%;
    margin: 0 0 0.5em;
    border-collapse: collapse;
}

.rp-generar-lineas th,
.rp-generar-lineas td {
    padding: 1px 4px;
    border-bottom: 1px solid var(--rp-lineas-rejilla);
}

.rp-generar-lineas th {
    background: var(--rp-rejilla-cabecera);
    font-weight: normal;
}

.rp-generar-lineas .rp-campo-valor {
    width: var(--rp-editor-numero-ancho);
}

.rp-generar-resumen {
    margin: 0 0 0.5em;
    font-weight: 600;
}

.rp-generar-estado {
    margin: 0;
    color: var(--rp-aviso-entorno-texto);
}

/* ================================================================== B5: tesorería (research R26; contracts/interfaz.md de B5)
 * Mismas reglas: colores y medidas en variables de :root (un quinto bloque, solo con las propias de B5), sin colores
 * literales fuera de :root, sin @media ni anidamiento y sin estilos en línea. Lo elegido y lo desmarcado se dice con su
 * casilla y con texto (los motivos, el resumen); el color solo acompaña. Reutiliza los rótulos y el estado de Generar
 * Documentos (rp-generar-rotulo, rp-generar-estado), las casillas y los campos de B3.
 */

:root {
    /* --- Propios de RecuPro (B5; no medidos en GesPro) --- */
    --rp-boton-tarea-ancho-max: 84px;
    --rp-dialogo-selector-ancho: 64em;
    --rp-dialogo-remesa-ancho: 60em;
    --rp-selector-importe-ancho: 7.5em;
    --rp-selector-concepto-ancho-max: 18em;
    --rp-remesa-filtros-columna: 22em;
    --rp-remesa-caducada-opacidad: 0.5;
}

/* --- Barra de la ficha (SH-18): las tareas, en dos renglones como Generar Documentos --- */

.rp-boton-tarea {
    max-width: var(--rp-boton-tarea-ancho-max);
}

/* --- Texto solo para el lector de pantalla (cabeceras de las casillas, títulos de las tablas anidadas) --- */

.rp-solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Selector de vencimientos (SH-25): casilla, datos, importe a asignar y total al pie --- */

.rp-dialogo-selector {
    width: var(--rp-dialogo-selector-ancho);
}

.rp-selector-tabla,
.rp-remesa-tabla {
    width: 100%;
    margin: 0 0 0.5em;
    border-collapse: collapse;
}

.rp-selector-tabla th,
.rp-selector-tabla td,
.rp-remesa-tabla th,
.rp-remesa-tabla td {
    padding: 1px 4px;
    border-bottom: 1px solid var(--rp-lineas-rejilla);
    vertical-align: middle;
}

.rp-selector-tabla th,
.rp-remesa-tabla th {
    background: var(--rp-rejilla-cabecera);
    font-weight: normal;
    text-align: left;
}

.rp-selector-tabla th.rp-alinear-derecha,
.rp-remesa-tabla th.rp-alinear-derecha {
    text-align: right;
}

.rp-selector-casilla {
    width: 1.6em;
    text-align: center;
}

.rp-selector-tabla .rp-campo-valor {
    width: var(--rp-selector-importe-ancho);
}

.rp-selector-tabla .rp-campo-nota {
    display: block;
    text-align: left;
}

.rp-selector-concepto {
    max-width: var(--rp-selector-concepto-ancho-max);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-selector-elegida {
    background: var(--rp-arbol-seleccion);
}

.rp-selector-no-elegible {
    color: var(--rp-deshabilitado-texto);
}

.rp-selector-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.rp-selector-total,
.rp-selector-limite,
.rp-selector-estado,
.rp-selector-vacio {
    margin: 0;
}

.rp-selector-total {
    font-weight: 600;
}

/* --- Nueva remesa (SH-26): filtros en dos columnas, formas de cobro, buscar y la vista previa --- */

.rp-dialogo-remesa {
    width: var(--rp-dialogo-remesa-ancho);
}

.rp-remesa-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 16px;
    margin: 0 0 0.5em;
}

.rp-remesa-filtros > .rp-ficha-campos {
    flex: 1 1 var(--rp-remesa-filtros-columna);
    align-content: start;
}

.rp-remesa-formas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 12px;
    margin: 0 0 0.5em;
    padding: 2px 8px 4px;
    border: 1px solid var(--rp-borde-paneles);
}

.rp-remesa-forma {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rp-remesa-formas .rp-campo-nota {
    flex-basis: 100%;
}

.rp-remesa-buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0.5em;
}

.rp-remesa-caducada-aviso {
    margin: 0 0 0.25em;
    padding: 1px 6px;
    border-left: 3px solid var(--rp-aviso-entorno-borde);
    background: var(--rp-aviso-entorno-fondo);
    color: var(--rp-aviso-entorno-texto);
    font-weight: 600;
}

.rp-remesa-previa {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rp-remesa-caducada {
    opacity: var(--rp-remesa-caducada-opacidad);
}

.rp-remesa-resumen {
    margin: 0;
    font-weight: 600;
}

.rp-remesa-vacia {
    margin: 0;
    font-style: italic;
}

.rp-remesa-desmarcada {
    color: var(--rp-deshabilitado-texto);
}

.rp-remesa-desplegar {
    min-width: 2em;
    padding: 0 4px;
}

.rp-remesa-detalle[hidden] {
    display: none;
}

.rp-remesa-detalle > td {
    padding: 0 0 4px;
}

.rp-remesa-vencimientos {
    margin: 0;
}

.rp-remesa-motivo {
    color: var(--rp-texto-activo);
    font-style: italic;
}