/* ObradoiroTesoreria — estilos propios. Todo lo demas viene de Bootstrap 5.3. */

/* Colores en un solo sitio: cuando llegue el logo del club se ajustan aqui y nada mas. */
:root {
    --obr-lateral-fondo: #10233f;
    --obr-lateral-texto: #dfe7f3;
    --obr-lateral-activo: #1d3a63;
    --obr-acento: #0d6efd;
    --obr-ancho-lateral: 250px;

    /* Gris del menu para lo secundario (rotulos de seccion, entradas apagadas): 6,7:1 sobre el
       azul oscuro. El #6b7b92 anterior se quedaba en 3,7:1 y no llegaba al AA que pide la WCAG. */
    --obr-lateral-suave: #9aabc4;

    /* Gris de los textos secundarios sobre fondo claro: 6,1:1 sobre blanco y 5,6:1 sobre el gris
       de la pagina. El #6c757d anterior pasaba sobre blanco por los pelos (4,7:1) pero NO sobre
       los fondos grises de las tarjetas y de la matriz (4,3:1). */
    --obr-texto-secundario: #5c636a;

    /* Menu plegado: cabe el icono centrado y nada mas. */
    --obr-ancho-lateral-fino: 4rem;
}

body {
    min-height: 100vh;
}

/*
 * Paleta de contenido al nivel AA de la WCAG.
 *
 * Sobre el gris de la pagina (#f5f6f8) los colores de Bootstrap se quedaban por debajo de los
 * 4,5:1 que pide el AA: el azul de los enlaces en 4,16:1, el gris en 4,34:1, el rojo y el verde
 * en 4,19:1. Se bajan al tono mas cercano que llega, que resulta ser el que Bootstrap ya usa para
 * el :hover de cada color, asi que no se inventa ninguno:
 *
 *   azul   #0d6efd -> #0b5ed7   4,16:1 -> 5,40:1
 *   gris   #6c757d -> #5c636a   4,34:1 -> 5,63:1
 *   rojo   #dc3545 -> #bb2d3b   4,19:1 -> 5,47:1
 *   verde  #198754 -> #157347   4,19:1 -> 5,43:1
 *
 * La barra lateral NO entra aqui: --obr-acento sigue siendo el azul vivo, que sobre el azul
 * oscuro ya se lee de sobra y es la identidad de la casa.
 */
:root {
    --bs-primary: #0b5ed7;
    --bs-primary-rgb: 11, 94, 215;
    --bs-secondary: #5c636a;
    --bs-secondary-rgb: 92, 99, 106;
    --bs-danger: #bb2d3b;
    --bs-danger-rgb: 187, 45, 59;
    --bs-success: #157347;
    --bs-success-rgb: 21, 115, 71;

    --bs-link-color: #0b5ed7;
    --bs-link-color-rgb: 11, 94, 215;
    --bs-link-hover-color: #08429a;
    --bs-link-hover-color-rgb: 8, 66, 154;
}

/*
 * Los botones de contorno llevan el color escrito a mano en su propia regla, no en una variable
 * global, asi que cambiar --bs-primary y compania no les llega. Se les pone aqui el mismo tono
 * que al resto, incluido el relleno del :hover, para que el boton no cambie de color al pasar.
 */
.btn-outline-primary {
    --bs-btn-color: #0b5ed7;
    --bs-btn-border-color: #0b5ed7;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0b5ed7;
    --bs-btn-active-bg: #0b5ed7;
    --bs-btn-active-border-color: #0b5ed7;
}

.btn-outline-secondary {
    --bs-btn-color: #5c636a;
    --bs-btn-border-color: #5c636a;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #5c636a;
    --bs-btn-active-bg: #5c636a;
    --bs-btn-active-border-color: #5c636a;
}

.btn-outline-danger {
    --bs-btn-color: #bb2d3b;
    --bs-btn-border-color: #bb2d3b;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #bb2d3b;
    --bs-btn-active-bg: #bb2d3b;
    --bs-btn-active-border-color: #bb2d3b;
}

.btn-outline-success {
    --bs-btn-color: #157347;
    --bs-btn-border-color: #157347;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #157347;
    --bs-btn-active-bg: #157347;
    --bs-btn-active-border-color: #157347;
}

/*
 * Ambar legible. El #ffc107 de Bootstrap da 1,6:1 sobre blanco: el numero grande de la tarjeta
 * "En camino" y el boton "Desactivar" no habia forma de leerlos. Se cambia SOLO el color de la
 * letra (redefiniendo la variable dentro de la propia regla); los fondos ambar de las insignias
 * y el punto del semaforo siguen siendo el ambar vivo de Bootstrap, que ahi si se lee.
 */
.text-warning {
    --bs-warning-rgb: 138, 93, 0;
}

.btn-outline-warning {
    --bs-btn-color: #8a5d00;
    --bs-btn-border-color: #8a5d00;
    --bs-btn-hover-border-color: #8a5d00;
}

/* ------------------------------------------------------------------ */
/* Barra lateral                                                       */
/* ------------------------------------------------------------------ */

/*
 * El fondo lleva !important a proposito. A partir de 992 px Bootstrap le pone a .offcanvas-lg
 * "background-color: transparent !important", porque da por hecho que el cajon solo tiene fondo
 * propio mientras esta desplegado en movil. Como la barra usa esa clase para ser cajon en movil y
 * columna fija en escritorio, se llevaba el transparent tambien en escritorio: la barra salia
 * BLANCA y el menu (gris claro) se quedaba en 1,5:1, practicamente invisible. Un !important solo
 * se gana con otro !important, asi que va aqui.
 */
.obr-lateral {
    width: var(--obr-ancho-lateral);
    background-color: var(--obr-lateral-fondo) !important;
    color: var(--obr-lateral-texto);
    transition: width .15s ease-in-out;
}

.obr-marca {
    color: #fff;
    text-decoration: none;
    line-height: 1.15;
}

    .obr-marca:hover {
        color: #fff;
    }

.obr-marca-texto {
    display: flex;
    flex-direction: column;
}

.obr-marca-nombre {
    font-weight: 700;
    letter-spacing: .04em;
}

.obr-marca-sufijo {
    font-size: .75rem;
    color: var(--obr-lateral-texto);
}

/* Logo del club (wwwroot/img/logo.png, 120x120, sacado de obradoirocab.gal) */
.obr-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.obr-logo-acceso {
    width: 96px;
    height: 96px;
}

.obr-menu .nav-link {
    color: var(--obr-lateral-texto);
    border-radius: .375rem;
    padding: .55rem .75rem;
    margin-bottom: .15rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}

    .obr-menu .nav-link:hover {
        background-color: var(--obr-lateral-activo);
        color: #fff;
    }

    .obr-menu .nav-link.active {
        background-color: var(--obr-acento);
        color: #fff;
    }

    .obr-menu .nav-link.disabled {
        color: var(--obr-lateral-suave);
        opacity: 1;
    }

    .obr-menu .nav-link i {
        font-size: 1.05rem;
        width: 1.25rem;
        text-align: center;
        flex-shrink: 0;
    }

.obr-menu-etiqueta {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--obr-lateral-suave);
    padding: 0 .75rem;
    margin: 1rem 0 .35rem;
}

.obr-pendiente {
    font-size: .65rem;
    margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* Barra superior y contenido                                          */
/* ------------------------------------------------------------------ */

.obr-superior {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
}

/*
 * El min-width: 0 es la linea que evita que la pagina entera se vaya a lo ancho.
 *
 * Este div es hijo de un .d-flex, y un hijo de flex nace con min-width: auto, que significa "no me
 * encojas por debajo de lo que mide mi contenido". Las tablas anchas llevan celdas con nowrap
 * (importes, fechas, acciones), asi que ese minimo era enorme: el hueco crecia hasta 1.576 px y
 * arrastraba la pagina. De paso, ni los .table-responsive que ya existian ni el Responsive de
 * DataTables llegaban a entrar nunca, porque tambien creian que habia sitio de sobra.
 */
.obr-contenido {
    background-color: #f5f6f8;
    min-height: 100vh;
    min-width: 0;
}

.obr-selector select {
    min-width: 9rem;
}

/* ------------------------------------------------------------------ */
/* Tarjetas de la pagina de inicio                                     */
/* ------------------------------------------------------------------ */

.obr-tarjeta-valor {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
}

.obr-tarjeta-vacia .obr-tarjeta-valor {
    color: #868f96;
}

.obr-tarjeta-icono {
    font-size: 1.6rem;
    opacity: .35;
}

/* ------------------------------------------------------------------ */
/* Acceso                                                              */
/* ------------------------------------------------------------------ */

.obr-acceso {
    min-height: 100vh;
    background-color: var(--obr-lateral-fondo);
}

.obr-acceso-caja {
    width: 100%;
    max-width: 24rem;
}

/* Importes: alineados a la derecha en todas las tablas. */
.obr-importe {
    text-align: right;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Submenu de la barra lateral (Ingresos: Convenios / Facturas...)      */
/* ------------------------------------------------------------------ */

.obr-menu .obr-submenu {
    list-style: none;
    padding-left: 1.85rem;
    margin: .1rem 0 .25rem;
}

    .obr-menu .obr-submenu .nav-link {
        font-size: .875rem;
        padding: .35rem .6rem;
    }

.obr-menu .obr-desplegable::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: bootstrap-icons;
    font-size: .7rem;
    margin-left: auto;
    transition: transform .15s ease-in-out;
}

.obr-menu .obr-desplegable[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Titulo del submenu: solo se ve cuando el menu esta plegado y el submenu sale flotando. */
.obr-submenu-titulo {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Barra lateral plegada (solo escritorio; en movil manda el offcanvas) */
/* ------------------------------------------------------------------ */

/*
 * Plegada, la barra deja solo los iconos. El nombre de cada entrada lo dice un tooltip (lo engancha
 * sitio.js al plegar y lo quita al desplegar, para que desplegada no haya tooltips que repitan lo
 * que ya pone al lado), y los desplegables salen en un menu flotante a la derecha al pasar por
 * encima o al pulsar.
 *
 * La clase va en <html> y la pone un script en linea del <head>: si esperase a sitio.js, la barra
 * se pintaria ancha y daria un salto al cargar.
 */
.obr-plegar {
    color: var(--obr-lateral-texto);
    background: none;
    border: 0;
    border-radius: .375rem;
    padding: .25rem .4rem;
    line-height: 1;
}

    .obr-plegar:hover,
    .obr-plegar:focus-visible {
        color: #fff;
        background-color: var(--obr-lateral-activo);
    }

@media (min-width: 992px) {

    html.obr-menu-fino .obr-lateral {
        width: var(--obr-ancho-lateral-fino);
        /* El p-3 de la plantilla es una utilidad de Bootstrap, y esas llevan !important. */
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    /* El nombre de la aplicacion, los rotulos de las entradas y la flecha de los desplegables. */
    html.obr-menu-fino .obr-marca-texto,
    html.obr-menu-fino .obr-menu-texto,
    html.obr-menu-fino .obr-menu .obr-desplegable::after {
        display: none;
    }

    html.obr-menu-fino .obr-cabecera-lateral {
        flex-direction: column;
        gap: .5rem;
    }

    html.obr-menu-fino .obr-menu .nav-link {
        justify-content: center;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    /* El rotulo "Administracion" se queda en un filete: separa igual y no ocupa. */
    html.obr-menu-fino .obr-menu-etiqueta {
        border-top: 1px solid rgba(255, 255, 255, .18);
        margin: .85rem .35rem .45rem;
        padding: 0;
    }

    /* Submenu flotante. El .nav-item es el que manda sobre donde se coloca. */
    html.obr-menu-fino .obr-menu > .nav-item {
        position: relative;
    }

    /*
     * El flotante se esconde con visibility y no con display, para poder darle un retardo al
     * cerrarse: display no se puede animar ni retrasar, y sin retardo el menu desaparecia en
     * cuanto el raton salia de la columna, antes de llegar a el (encargo 11, punto 3).
     */
    html.obr-menu-fino .obr-menu > .nav-item > .collapse,
    html.obr-menu-fino .obr-menu > .nav-item > .collapsing {
        display: block;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 1035;
        min-width: 14rem;
        margin-left: .35rem;
        padding: .5rem;
        border-radius: .5rem;
        background-color: var(--obr-lateral-fondo);
        box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
        height: auto;

        /* Al salir: 250 ms de gracia antes de esconderlo. Al entrar, instantaneo. */
        transition: opacity .12s ease-in-out, visibility 0s linear .25s;
    }

        /*
         * Puente invisible que tapa el hueco de margin-left. Sin el hay 5,6 px en los que el raton
         * no esta ni sobre el icono ni sobre el menu, y ahi se perdia el :hover.
         */
        html.obr-menu-fino .obr-menu > .nav-item > .collapse::before {
            content: "";
            position: absolute;
            top: 0;
            right: 100%;
            width: .5rem;
            height: 100%;
        }

    /*
     * Tres formas de que se vea: pasar por encima, haberlo abierto (con el ratón o con
     * Enter/Espacio, que es lo que marca sitio.js con .obr-flotante-abierto) y tener el foco DENTRO
     * del propio flotante, para que al tabular por sus entradas no se cierre.
     *
     * El :focus-within va en el flotante y NO en el <li>: el <li> contiene tambien al icono, asi
     * que con el foco puesto en el icono el menu se quedaba abierto para siempre y Escape no podia
     * cerrarlo.
     */
    html.obr-menu-fino .obr-menu > .nav-item:hover > .collapse,
    html.obr-menu-fino .obr-menu > .nav-item.obr-flotante-abierto > .collapse,
    html.obr-menu-fino .obr-menu > .nav-item > .collapse:focus-within {
        visibility: visible;
        opacity: 1;
        transition: opacity .12s ease-in-out, visibility 0s;
    }

    html.obr-menu-fino .obr-submenu-titulo {
        display: block;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--obr-lateral-suave);
        padding: .15rem .6rem .35rem;
    }

    /* Dentro del flotante el texto vuelve, que es justo para lo que esta. */
    html.obr-menu-fino .obr-submenu {
        padding-left: 0;
    }

        html.obr-menu-fino .obr-submenu .obr-menu-texto {
            display: inline;
        }

        html.obr-menu-fino .obr-submenu .nav-link {
            justify-content: flex-start;
        }
}

/* ------------------------------------------------------------------ */
/* Insignias de estado de documento (EstadoService)                     */
/* ------------------------------------------------------------------ */

.obr-estado {
    white-space: nowrap;
    font-weight: 500;
}

/* Anulado: gris oscuro y tachado, para que se lea "esto ya no vale". */
.obr-estado-anulado {
    text-decoration: line-through;
}

/* Sin importe: gris claro, distinto del gris con cuerpo de Pendiente. */
.obr-estado-sin-importe {
    background-color: #e9ecef;
    color: var(--obr-texto-secundario);
    border: 1px solid #ced4da;
}

/* ------------------------------------------------------------------ */
/* Semaforo de convenios (DECISIONES 4)                                */
/* ------------------------------------------------------------------ */

.obr-semaforo {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    vertical-align: -1px;
}

.obr-semaforo-rojo {
    background-color: #dc3545;
}

.obr-semaforo-ambar {
    background-color: #ffc107;
}

.obr-semaforo-verde {
    background-color: #198754;
}

/* Tarjetas contador del listado de convenios: son botones de filtro. */
.obr-contador {
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background-color: #fff;
    padding: .65rem .9rem;
    text-align: left;
    min-width: 8.5rem;
    transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}

    .obr-contador:hover {
        border-color: var(--obr-acento);
        box-shadow: 0 .125rem .35rem rgba(16, 35, 63, .12);
    }

    .obr-contador.activo {
        border-color: var(--obr-acento);
        box-shadow: inset 0 0 0 1px var(--obr-acento);
    }

.obr-contador-valor {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.obr-contador-etiqueta {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--obr-texto-secundario);
}

/* ------------------------------------------------------------------ */
/* Fichas: cabecera, cifras grandes e historico                        */
/* ------------------------------------------------------------------ */

.obr-ficha-titulo {
    line-height: 1.2;
}

.obr-cifra {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.obr-cifra-etiqueta {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--obr-texto-secundario);
}

/* Linea de tiempo del historico de firma. */
.obr-historico {
    list-style: none;
    margin: 0;
    padding-left: 1.1rem;
    border-left: 2px solid #dee2e6;
}

.obr-historico-punto {
    position: relative;
    padding-bottom: 1rem;
}

    .obr-historico-punto:last-child {
        padding-bottom: 0;
    }

    .obr-historico-punto::before {
        content: "";
        position: absolute;
        left: -1.48rem;
        top: .35rem;
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        background-color: #adb5bd;
        border: 2px solid #fff;
    }

    .obr-historico-punto:first-child::before {
        background-color: var(--obr-acento);
    }

/* Filtros sobre las tablas: visibles, no escondidos en un desplegable. */
.obr-filtros {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: .75rem .9rem;
}

/* ------------------------------------------------------------------ */
/* Zona de arrastrar y soltar ficheros (adjuntos del convenio)          */
/* ------------------------------------------------------------------ */

/*
 * Es un <button> y no un <div>: asi se llega con el tabulador y se abre con Enter o con la barra
 * espaciadora sin inventar nada. Se le quita el aspecto de boton y se le pone el de zona.
 */
.obr-soltar {
    background-color: #fbfcfd;
    border: 2px dashed #adb5bd;
    border-radius: .5rem;
    color: var(--obr-texto-secundario);
    padding: 1.25rem 1rem;
    text-align: center;
    line-height: 1.35;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

    .obr-soltar:hover,
    .obr-soltar:focus-visible {
        border-color: var(--bs-primary);
        background-color: #f2f7ff;
        color: var(--bs-primary);
    }

    /* Mientras se arrastra algo por encima: que se note que ahi se suelta. */
    .obr-soltar.obr-soltar-encima {
        border-color: var(--bs-primary);
        border-style: solid;
        background-color: #e7f1ff;
        color: var(--bs-primary);
    }

    .obr-soltar:disabled {
        opacity: .65;
    }

.obr-soltar-icono {
    font-size: 1.75rem;
    display: block;
    margin-bottom: .35rem;
}

/* Una linea por fichero mientras sube. */
.obr-subida + .obr-subida {
    margin-top: .5rem;
}

.obr-subida .progress {
    height: .5rem;
}

.obr-subida-nombre {
    word-break: break-all;
    margin-right: .5rem;
}

/* Ayuda contextual: el icono ? que explica una regla que no se ve. */
.obr-ayuda {
    color: var(--obr-texto-secundario);
    cursor: help;
}

/* Pie de tabla con los totales de lo filtrado. */
.obr-total-pie {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/*
 * Aire debajo de los mandos de DataTables (buscador, botones, "Mostrar N registros").
 *
 * El anillo de foco de Bootstrap se pinta 4 px por fuera de la caja, con box-shadow, asi que no
 * ocupa sitio: la cabecera de la tabla, que viene despues en el html, se pintaba encima y cortaba
 * el borde azul por abajo. Va aqui, en un solo sitio, para los quince listados.
 */
.dt-container .dt-search,
.dt-container .dt-length,
.dt-container .dt-buttons {
    margin-bottom: .5rem;
}

/* ------------------------------------------------------------------ */
/* Matriz de previsión por meses (sustituye a la hoja de cálculo)       */
/* ------------------------------------------------------------------ */

.obr-matriz {
    font-size: .8125rem;
}

    .obr-matriz th,
    .obr-matriz td {
        padding: .25rem .35rem;
        vertical-align: middle;
    }

/* La primera columna se queda quieta al desplazarse a lo ancho. */
.obr-matriz-categoria {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
    min-width: 11rem;
    white-space: nowrap;
    font-weight: 500;
}

.obr-matriz thead .obr-matriz-categoria,
.obr-matriz tfoot .obr-matriz-categoria {
    background-color: #f5f6f8;
}

.obr-matriz-mes {
    text-align: right;
    white-space: nowrap;
    min-width: 6.5rem;
    background-color: #f5f6f8;
}

.obr-matriz-total {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    background-color: #f5f6f8;
}

/* Columna del mes en curso: un tinte, para no perderse en doce columnas iguales. */
.obr-matriz-actual {
    background-color: #eaf1fd;
}

.obr-matriz-celda {
    min-width: 6.5rem;
}

.obr-matriz-importe {
    text-align: right;
    padding: .15rem .3rem;
    height: auto;
}

/* Celda con un cambio sin guardar. */
.obr-matriz-tocada {
    border-color: #ffc107;
    box-shadow: inset 0 0 0 1px #ffc107;
}

.obr-matriz-pie {
    display: flex;
    gap: .35rem;
    align-items: center;
    justify-content: flex-end;
    min-height: 1.1rem;
    font-size: .6875rem;
    line-height: 1.1;
}

.obr-matriz-recurrente {
    color: var(--obr-texto-secundario);
    white-space: nowrap;
    cursor: help;
}

.obr-matriz-real {
    color: #0a58ca;
    white-space: nowrap;
    cursor: help;
}

/* Lo real ya cubre lo previsto: esa celda no aportará nada a tesorería. */
.obr-matriz-cubierta {
    color: var(--obr-texto-secundario);
    text-decoration: line-through;
}

.obr-matriz-nota {
    color: #7a5c03;
    cursor: pointer;
}

.obr-matriz-leyenda-actual {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    vertical-align: -2px;
    border: 1px solid #dee2e6;
    background-color: #eaf1fd;
}

/* ------------------------------------------------------------------ */
/* Registro de eventos e historial de las fichas (encargo 8)            */
/* ------------------------------------------------------------------ */

/* La columna "Qué" es la que de verdad se lee: se le deja todo el ancho. */
.obr-eventos td {
    vertical-align: middle;
}

/* La fila del detalle no se pinta como una fila más: no tiene borde ni hover. */
.obr-fila-detalle,
.obr-fila-detalle:hover > * {
    --bs-table-accent-bg: transparent;
    background-color: transparent;
    box-shadow: none;
}

/* El desglose, con el mismo gris de fondo en la pantalla y en la ficha. */
.obr-detalle {
    background-color: #f8f9fa;
    border-left: 3px solid #dee2e6;
}

.obr-detalle-evento {
    max-width: 48rem;
    margin-bottom: 0;
}

.obr-detalle-evento thead th {
    font-size: .8rem;
    font-weight: 500;
    color: var(--obr-texto-secundario);
    text-transform: uppercase;
}

.obr-detalle-lineas li,
.obr-detalle-notas {
    font-size: .9rem;
}

/* Historial de una ficha: una línea por evento, separadas con un filete suave. */
.obr-historial-linea {
    padding: .5rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.obr-historial-linea:last-child {
    border-bottom: 0;
}

.obr-historial-linea:first-child {
    padding-top: 0;
}