/* ==========================================================================
   Rio Claro - estilos de la aplicacion
   Se carga DESPUES de AdminLTE y Bootstrap: lo de aqui manda.
   El verde corporativo (#00aa5a) es el color primario de toda la interfaz.
   ========================================================================== */

:root {
    /* --- verde corporativo y su escala ---
       El verde se usa como ACENTO (botones, estado activo, foco), no como
       superficie: grandes areas de verde saturado cansan la vista en jornadas
       largas. Los fondos son neutros con un punto de verde, casi imperceptible. */
    --rc-verde-900: #0a4a2d;
    --rc-verde-800: #0f6337;
    --rc-verde-700: #127d45;
    --rc-verde:     #00aa5a;   /* el de la marca: se reserva para acciones */
    --rc-verde-400: #4cbd88;
    --rc-verde-200: #bfe3d1;
    --rc-verde-100: #e4f2ea;
    --rc-verde-50:  #f4f9f6;

    /* --- neutros ---
       Ni blanco puro ni gris azulado frio: un gris calido baja el brillo y
       el contraste extremo, que es lo que fatiga. */
    --rc-texto:     #2b3338;
    --rc-suave:     #6e7a80;
    --rc-borde:     #e4e7e5;
    --rc-fondo:     #f6f7f6;
    --rc-panel:     #ffffff;

    /* --- semanticos --- */
    --rc-ok:        #1c7c4c;
    --rc-aviso:     #b7791f;
    --rc-error:     #c0362c;
    --rc-info:      #2b6cb0;

    --rc-radio:     8px;
    --rc-sombra:    0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --rc-sombra-md: 0 4px 12px rgba(16, 24, 40, .08);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body,
.wrapper {
    /* tipografia del sistema: no depende de Google Fonts ni de internet */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: var(--rc-texto);
    background-color: var(--rc-fondo);
    /* 15px y algo mas de interlineado: a 14px con poco aire, leer listados
       durante horas cansa. Tambien suaviza el trazo en pantallas normales. */
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.content-wrapper {
    background-color: var(--rc-fondo);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--rc-texto);
    font-weight: 600;
}

a {
    color: var(--rc-verde-700);
}

a:hover {
    color: var(--rc-verde-900);
}

/* Foco visible y coherente en toda la aplicacion */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--rc-verde);
    outline-offset: 2px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */

/* Verde profundo y plano, no el brillante de marca: es una franja que el usuario
   tiene delante todo el dia. El degradado vibrante cansaba. */
.main-header.navbar {
    background: var(--rc-verde-800);
    border-bottom: 0;
    box-shadow: 0 1px 3px rgba(10, 74, 45, .18);
    min-height: 56px;
}

.main-header .nav-link {
    color: rgba(255, 255, 255, .88) !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.main-header .nav-link:hover {
    color: #fff !important;
}

.rc-usuario {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 .35rem;
}

.rc-usuario-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex: 0 0 auto;
}

.rc-usuario-datos {
    line-height: 1.2;
    text-align: right;
}

.rc-usuario-nombre {
    font-weight: 600;
    color: #fff;
    font-size: .85rem;
}

.rc-usuario-rol {
    font-size: .72rem;
    color: rgba(255, 255, 255, .75);
}

.main-header .dropdown-menu {
    border: 1px solid var(--rc-borde);
    border-radius: var(--rc-radio);
    box-shadow: var(--rc-sombra-md);
    padding: .35rem 0;
}

.main-header .dropdown-item {
    padding: .5rem 1rem;
    font-size: .875rem;
    color: var(--rc-texto);
}

.main-header .dropdown-item:hover {
    background: var(--rc-verde-50);
    color: var(--rc-verde-800);
}

.main-header .dropdown-item i {
    width: 18px;
    color: var(--rc-suave);
}

.rc-salir .nav-link {
    color: rgba(255, 255, 255, .88) !important;
}

.rc-salir .nav-link:hover {
    color: #fff !important;
    background: rgba(0, 0, 0, .12);
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Botones ocupados: bloquean el doble clic mientras algo esta corriendo
   -------------------------------------------------------------------------- */

.btn.rc-ocupado {
    pointer-events: none;
    opacity: .75;
    cursor: progress;
}

.btn.rc-ocupado > i {
    display: none;
}

.btn.rc-ocupado::before {
    content: "";
    width: .9em;
    height: .9em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: rc-girar .6s linear infinite;
    flex: 0 0 auto;
}

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

/* Velo con mensaje para las esperas largas (informes grandes) */
.rc-velo {
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 51, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.rc-velo-caja {
    background: var(--rc-panel);
    border-radius: var(--rc-radio);
    padding: 1.5rem 2rem;
    text-align: center;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
    max-width: 320px;
}

.rc-velo-rueda {
    width: 34px;
    height: 34px;
    border: 3px solid var(--rc-verde-100);
    border-top-color: var(--rc-verde);
    border-radius: 50%;
    margin: 0 auto .9rem;
    animation: rc-girar .7s linear infinite;
}

.rc-velo-caja p {
    margin: 0;
    font-size: .9rem;
    color: var(--rc-texto);
    font-weight: 500;
}

.rc-velo-caja small {
    display: block;
    margin-top: .3rem;
    color: var(--rc-suave);
    font-size: .78rem;
}

/* --------------------------------------------------------------------------
   Menu lateral
   -------------------------------------------------------------------------- */

.main-sidebar {
    background-color: var(--rc-panel) !important;
    border-right: 1px solid var(--rc-borde);
    box-shadow: none !important;
}

.rc-marca {
    display: block;
    padding: 1rem 1rem .75rem;
    border-bottom: 1px solid var(--rc-borde);
    text-align: center;
}

.rc-marca img {
    max-width: 78%;
    height: auto;
}

.sidebar {
    padding: .75rem .6rem;
}

.rc-menu-titulo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rc-suave);
    padding: .9rem .75rem .35rem;
}

/* Un solo estilo para todos los items: el color marca DONDE ESTAS,
   no adorna. Antes cada item iba en verde solido y no se distinguia
   la pantalla activa. */
.nav-sidebar .nav-link {
    color: var(--rc-texto) !important;
    background: transparent !important;
    border-radius: 6px;
    padding: .6rem .75rem;
    margin-bottom: 2px;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: background-color .12s ease, color .12s ease;
}

.nav-sidebar .nav-link .nav-icon {
    color: var(--rc-suave) !important;
    width: 1.4rem;
    font-size: .95rem;
    margin-right: .25rem;
    text-align: center;
    transition: color .12s ease;
}

.nav-sidebar .nav-link p {
    font-size: .875rem;   /* uniforme: antes algunos items iban a 11px */
    margin: 0;
}

.nav-sidebar .nav-link:hover {
    background: var(--rc-verde-50) !important;
    color: var(--rc-verde-800) !important;
}

.nav-sidebar .nav-link:hover .nav-icon {
    color: var(--rc-verde-700) !important;
}

.nav-sidebar .nav-link.active {
    background: var(--rc-verde) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 170, 90, .35);
}

.nav-sidebar .nav-link.active .nav-icon {
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Cabecera de pagina
   -------------------------------------------------------------------------- */

.content-header {
    padding: 1.25rem 1rem .25rem;
}

.rc-titulo-pagina {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.rc-titulo-pagina i {
    color: var(--rc-verde);
    font-size: 1.1rem;
}

.rc-subtitulo {
    color: var(--rc-suave);
    font-size: .875rem;
    margin: .2rem 0 0;
}

.breadcrumb {
    background: transparent;
    padding: .35rem 0;
    margin: 0;
    font-size: .82rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--rc-borde);
}

.breadcrumb-item.active {
    color: var(--rc-suave);
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.card {
    border: 1px solid var(--rc-borde);
    border-radius: var(--rc-radio);
    box-shadow: var(--rc-sombra);
    margin-bottom: 1.25rem;
}

.card-header {
    background: var(--rc-panel);
    border-bottom: 1px solid var(--rc-borde);
    border-radius: var(--rc-radio) var(--rc-radio) 0 0 !important;
    padding: .9rem 1.25rem;
}

.card-title {
    font-size: .975rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.card-title i {
    color: var(--rc-verde);
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: #fafbfa;
    border-top: 1px solid var(--rc-borde);
    border-radius: 0 0 var(--rc-radio) var(--rc-radio);
}

/* Cifras del tablero */
.rc-cifra {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--rc-panel);
    border: 1px solid var(--rc-borde);
    border-left: 3px solid var(--rc-verde);
    border-radius: var(--rc-radio);
    box-shadow: var(--rc-sombra);
    padding: 1rem 1.1rem;
    height: 100%;
}

.rc-cifra-icono {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--rc-verde-100);
    color: var(--rc-verde-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.rc-cifra-valor {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rc-texto);
}

.rc-cifra-texto {
    display: block;
    font-size: .78rem;
    color: var(--rc-suave);
}

/* Cifra que ademas es un enlace */
.rc-cifra-enlace {
    text-decoration: none !important;
    transition: transform .12s ease, box-shadow .12s ease;
}

.rc-cifra-enlace:hover {
    transform: translateY(-2px);
    box-shadow: var(--rc-sombra-md);
}

/* Cifra que pide atencion (lo que esta pendiente de repartir) */
.rc-cifra-aviso {
    border-left-color: var(--rc-aviso);
}

.rc-cifra-aviso .rc-cifra-icono {
    background: #fff6e5;
    color: var(--rc-aviso);
}

/* --------------------------------------------------------------------------
   select2: desplegables con buscador y etiquetas
   -------------------------------------------------------------------------- */

.select2-container--bootstrap4 .select2-selection {
    border-color: var(--rc-borde);
    border-radius: 6px;
    min-height: 38px;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--rc-verde);
    box-shadow: 0 0 0 3px rgba(0, 170, 90, .12);
}

/* Las etiquetas de lo escogido, en verde claro */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background: var(--rc-verde-100);
    border: 1px solid var(--rc-verde-200);
    color: var(--rc-verde-900);
    border-radius: 999px;
    padding: .1rem .55rem;
    margin: .2rem .25rem .2rem 0;
    font-size: .8rem;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--rc-verde-800);
    margin-right: .35rem;
    font-weight: 700;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--rc-error);
}

/* La opcion sobre la que esta el cursor */
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background: var(--rc-verde);
    color: #fff;
}

.select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
    background: var(--rc-verde-50);
    color: var(--rc-verde-900);
}

.select2-container--bootstrap4 .select2-dropdown {
    border-color: var(--rc-verde-200);
    border-radius: 8px;
    box-shadow: var(--rc-sombra-md);
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    border-color: var(--rc-borde);
    border-radius: 6px;
    padding: .35rem .55rem;
}

.select2-container--bootstrap4 .select2-selection__placeholder {
    color: #a3adb9;
}

/* Tarjetas de acceso del inicio */
.rc-acceso {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.15rem;
    height: 100%;
    background: var(--rc-panel);
    border: 1px solid var(--rc-borde);
    border-radius: var(--rc-radio);
    box-shadow: var(--rc-sombra);
    color: var(--rc-texto);
    text-decoration: none !important;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.rc-acceso:hover {
    transform: translateY(-2px);
    box-shadow: var(--rc-sombra-md);
    border-color: var(--rc-verde-200);
    color: var(--rc-texto);
}

.rc-acceso-icono {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--rc-verde-100);
    color: var(--rc-verde-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.rc-acceso h3 {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 .2rem;
}

.rc-acceso p {
    font-size: .82rem;
    color: var(--rc-suave);
    margin: 0;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

/* mystyle.css forzaba color blanco en TODOS los botones, incluidos los claros,
   que quedaban ilegibles. Aqui cada variante lleva su color de texto. */
.btn {
    border-radius: 6px;
    font-weight: 500;
    font-size: .875rem;
    padding: .45rem .95rem;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background-color .12s ease, border-color .12s ease;
}

.btn i {
    font-size: .85em;
}

.btn-primary,
.btn-success {
    background-color: var(--rc-verde);
    border-color: var(--rc-verde);
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--rc-verde-700);
    border-color: var(--rc-verde-700);
    color: #fff !important;
}

.btn-outline-primary,
.btn-outline-success {
    background: transparent;
    border-color: var(--rc-verde);
    color: var(--rc-verde-700) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
    background: var(--rc-verde);
    color: #fff !important;
}

.btn-secondary,
.btn-default,
.btn-light {
    background-color: var(--rc-panel);
    border-color: var(--rc-borde);
    color: var(--rc-texto) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-light:hover {
    background-color: var(--rc-fondo);
    border-color: #cfd6de;
    color: var(--rc-texto) !important;
}

.btn-danger {
    background-color: var(--rc-error);
    border-color: var(--rc-error);
    color: #fff !important;
}

.btn-danger:hover {
    background-color: #a32c24;
    border-color: #a32c24;
}

.btn-info {
    background-color: var(--rc-info);
    border-color: var(--rc-info);
    color: #fff !important;
}

.btn-warning {
    background-color: var(--rc-aviso);
    border-color: var(--rc-aviso);
    color: #fff !important;
}

.btn-sm {
    padding: .3rem .6rem;
    font-size: .8rem;
}

.btn-flat,
.bnt-flat {
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.table {
    font-size: .85rem;
    margin-bottom: 0;
}

/* Encabezado neutro: una tabla ancha con la cabecera teñida de verde y en
   mayusculas satura la vista. El color se reserva para lo accionable. */
.table thead th {
    background: #f0f2f1;
    color: var(--rc-texto);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--rc-borde) !important;
    border-top: 0 !important;
    padding: .7rem .6rem;
    white-space: nowrap;
    vertical-align: middle;
}

.table tbody td {
    padding: .6rem;
    vertical-align: middle;
    border-color: #eef0ef !important;
}

/* Filas alternas suaves: ayudan a seguir la linea sin recargar */
.table tbody tr:nth-child(even) {
    background-color: #fafbfa;
}

.table tbody tr:hover {
    background-color: var(--rc-verde-50);
}

.table-responsive,
.dataTables_wrapper {
    border-radius: var(--rc-radio);
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--rc-borde);
    border-radius: 6px;
    padding: .3rem .55rem;
    font-size: .85rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--rc-verde);
    outline: none;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: .82rem;
    color: var(--rc-suave);
    padding-top: .5rem;
}

/* Paginado: se alinea a la derecha y no se desborda en pantallas chicas */
.dataTables_wrapper .dataTables_paginate {
    padding-top: .6rem;
    float: none;
    text-align: right;
}

.dataTables_wrapper .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
    gap: 2px;
}

.page-link {
    color: var(--rc-verde-700);
    border-color: var(--rc-borde);
    font-size: .85rem;
    padding: .35rem .7rem;
    border-radius: 6px;
}

.page-item.active .page-link {
    background-color: var(--rc-verde);
    border-color: var(--rc-verde);
    color: #fff;
}

.page-item.disabled .page-link {
    color: #b6c2cf;
    background: var(--rc-fondo);
    border-color: var(--rc-borde);
}

.page-link:hover {
    background-color: var(--rc-verde-50);
    color: var(--rc-verde-900);
    border-color: var(--rc-verde-200);
}

/* Con scroll horizontal, cada fila en una sola linea: si el texto se parte, las
   filas crecen a cinco lineas de alto y la tabla se vuelve ilegible. */
.dataTables_scrollBody table td,
.dataTables_scrollHead table th {
    white-space: nowrap;
}

/* Los nombres de empresa muy largos se recortan con puntos suspensivos; el
   contenido completo sigue estando al pasar el raton por encima. */
.dataTables_scrollBody table td {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La tabla con scroll horizontal no debe empujar el paginado */
.dataTables_scroll {
    margin-bottom: .5rem;
}

.dataTables_scrollBody {
    border-bottom: 1px solid var(--rc-borde);
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_info {
        text-align: center;
        float: none;
    }

    .dataTables_wrapper .pagination {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

label {
    font-weight: 500;
    font-size: .82rem;
    color: var(--rc-texto);
    margin-bottom: .3rem;
}

.form-control,
.custom-select {
    border: 1px solid var(--rc-borde);
    border-radius: 6px;
    font-size: .875rem;
    padding: .45rem .7rem;
    height: auto;
    color: var(--rc-texto);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--rc-verde);
    box-shadow: 0 0 0 3px rgba(0, 170, 90, .12);
}

.form-control::placeholder {
    color: #a3adb9;
}

.input-group-text {
    background: #f2f4f3;
    border: 1px solid var(--rc-borde);
    border-radius: 6px;
    color: var(--rc-suave);
    font-size: .85rem;
}

.custom-file-label {
    border-radius: 6px;
    border-color: var(--rc-borde);
    font-size: .875rem;
}

.custom-file-label::after {
    background: var(--rc-verde);
    color: #fff;
    border-radius: 0 6px 6px 0;
}

/* --------------------------------------------------------------------------
   Etiquetas de estado
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    font-size: .72rem;
    padding: .35em .65em;
    border-radius: 999px;
    letter-spacing: .01em;
}

.badge-success, .badge-primary {
    background-color: var(--rc-verde-100);
    color: var(--rc-verde-900);
}

.badge-danger {
    background-color: #fdecea;
    color: var(--rc-error);
}

.badge-warning {
    background-color: #fff6e5;
    color: var(--rc-aviso);
}

.badge-info {
    background-color: #e8f1fb;
    color: var(--rc-info);
}

.badge-secondary {
    background-color: #eef1f4;
    color: var(--rc-suave);
}

/* --------------------------------------------------------------------------
   Modales
   -------------------------------------------------------------------------- */

.modal-content {
    border: 0;
    border-radius: var(--rc-radio);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    overflow: hidden;
}

.modal-header {
    background-color: var(--rc-verde) !important;
    color: #fff;
    border-bottom: 0;
    padding: .9rem 1.25rem;
}

.modal-header .modal-title {
    font-size: 1rem;
    font-weight: 600;
}

.modal-header .close {
    color: #fff;
    opacity: .85;
    text-shadow: none;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--rc-borde);
    padding: .9rem 1.25rem;
}

/* --------------------------------------------------------------------------
   Archivos de la factura
   -------------------------------------------------------------------------- */

.rc-archivos .list-group-item {
    border-color: var(--rc-borde);
    padding: .7rem 1rem;
    font-size: .875rem;
}

.rc-archivos .list-group-item:hover {
    background: var(--rc-verde-50);
}

.rc-archivo-nombre {
    display: flex;
    align-items: center;
    gap: .6rem;
    word-break: break-all;
}

.rc-archivo-nombre i {
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.rc-archivo-acciones {
    display: flex;
    gap: .4rem;
    flex: 0 0 auto;
    margin-left: 1rem;
}

/* Visor de PDF: la cabecera va en verde como el resto de modales */
#modalPdf .modal-header {
    align-items: center;
}

#modalPdf .modal-header .btn-light {
    background: rgba(255, 255, 255, .92);
    border-color: transparent;
    color: var(--rc-verde-900) !important;
}

#modalPdf .modal-header .btn-light:hover {
    background: #fff;
}

#modalPdf .modal-body {
    background: #525659;   /* el gris del visor de PDF, evita el flash blanco */
}

@media (max-width: 767.98px) {
    .rc-archivos .list-group-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .6rem;
    }

    .rc-archivo-acciones {
        margin-left: 0;
    }

    #modalPdf iframe {
        height: 62vh !important;
    }
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.main-footer {
    background: var(--rc-panel);
    border-top: 1px solid var(--rc-borde);
    color: var(--rc-suave);
    font-size: .78rem;
    padding: .9rem 1rem;
}

/* --------------------------------------------------------------------------
   Pantalla de acceso
   Dos paneles: a la izquierda quien es la empresa y que es este sistema; a la
   derecha el formulario. En movil se apilan y el panel de marca se reduce.
   -------------------------------------------------------------------------- */

.rc-acceso-pantalla {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 1rem;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 170, 90, .07), transparent 45%),
        radial-gradient(circle at 88% 82%, rgba(15, 99, 55, .06), transparent 45%),
        var(--rc-fondo);
}

.rc-acceso-caja {
    display: flex;
    width: 100%;
    max-width: 860px;
    background: var(--rc-panel);
    border: 1px solid var(--rc-borde);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(43, 51, 56, .10);
    overflow: hidden;
}

/* --- panel de marca --- */
.rc-acceso-marca {
    flex: 0 0 46%;
    background: linear-gradient(160deg, var(--rc-verde-900) 0%, var(--rc-verde-800) 60%, var(--rc-verde-700) 100%);
    color: #fff;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
}

.rc-acceso-logo {
    width: 132px;
    max-width: 60%;
    background: #fff;
    border-radius: 8px;
    padding: .5rem .6rem;
    margin-bottom: 1.5rem;
}

.rc-acceso-marca h1 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.rc-acceso-lema {
    color: rgba(255, 255, 255, .82);
    font-size: .92rem;
    margin: .15rem 0 0;
}

.rc-acceso-separador {
    width: 42px;
    height: 3px;
    background: rgba(255, 255, 255, .45);
    border-radius: 2px;
    margin: 1.5rem 0;
}

.rc-acceso-marca h2 {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 .9rem;
}

.rc-acceso-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .88);
}

.rc-acceso-lista li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
}

.rc-acceso-lista i {
    width: 18px;
    color: var(--rc-verde-400);
    font-size: .85rem;
}

.rc-acceso-nota {
    margin: auto 0 0;
    padding-top: 1.5rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    line-height: 1.5;
}

.rc-acceso-nota i {
    margin-right: .3rem;
}

/* --- formulario --- */
.rc-acceso-form {
    flex: 1 1 auto;
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rc-acceso-form h2 {
    font-size: 1.3rem;
    margin: 0;
}

.rc-acceso-sub {
    color: var(--rc-suave);
    font-size: .875rem;
    margin: .2rem 0 1.5rem;
}

.rc-acceso-form label {
    font-size: .82rem;
    font-weight: 600;
}

/* campo con icono a la izquierda */
.rc-campo {
    position: relative;
}

.rc-campo > i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rc-suave);
    font-size: .85rem;
    pointer-events: none;
}

.rc-campo .form-control {
    padding-left: 2.4rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.rc-campo .form-control[type=password],
.rc-campo .form-control[type=text]#id_password {
    padding-right: 2.6rem;
}

.rc-ver-clave {
    position: absolute;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--rc-suave);
    padding: .35rem .6rem;
    cursor: pointer;
    border-radius: 6px;
}

.rc-ver-clave:hover {
    color: var(--rc-verde-700);
    background: var(--rc-verde-50);
}

.rc-mayusculas {
    display: none;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--rc-aviso);
    margin: .4rem 0 0;
}

.rc-acceso-error {
    display: flex;
    gap: .6rem;
    background: #fdecea;
    border: 1px solid #f5c6c2;
    color: var(--rc-error);
    border-radius: 8px;
    padding: .7rem .9rem;
    font-size: .85rem;
    margin-bottom: 1.1rem;
}

.rc-acceso-boton {
    padding: .65rem;
    font-size: .95rem;
    justify-content: center;
    margin-top: .35rem;
}

.rc-acceso-olvido {
    text-align: center;
    font-size: .82rem;
    color: var(--rc-suave);
    margin: 1.1rem 0 0;
}

.rc-acceso-pie {
    margin: 1.25rem 0 0;
    font-size: .78rem;
    color: var(--rc-suave);
}

@media (max-width: 767.98px) {
    .rc-acceso-caja {
        flex-direction: column;
        max-width: 420px;
    }

    .rc-acceso-marca {
        flex: none;
        padding: 1.75rem 1.5rem;
    }

    /* en pantalla pequeña el detalle sobra: se deja el logo y el nombre del sistema */
    .rc-acceso-lista,
    .rc-acceso-nota,
    .rc-acceso-separador,
    .rc-acceso-marca h2,
    .rc-acceso-lema {
        display: none;
    }

    .rc-acceso-marca h1 {
        font-size: 1.05rem;
    }

    .rc-acceso-logo {
        width: 108px;
        margin-bottom: 1rem;
    }

    .rc-acceso-form {
        padding: 1.75rem 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Login (pantallas de recuperar y cambiar contraseña, que usan .login-box)
   -------------------------------------------------------------------------- */

/* Antes era una pantalla completa de verde saturado en degradado: demasiada
   intensidad para lo primero que ve el usuario cada mañana. Ahora el fondo es
   neutro y el verde aparece solo en el filo superior de la tarjeta y el boton. */
.login-page {
    background: var(--rc-fondo);
    min-height: 100vh;
    align-items: center;
}

.login-box {
    width: 400px;
    max-width: 94%;
}

.login-box .card {
    border: 1px solid var(--rc-borde);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(43, 51, 56, .07);
    overflow: hidden;
    position: relative;
}

.login-box .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rc-verde);
}

.login-box .card-body {
    padding: 2rem 1.9rem;
}

.rc-login-marca {
    text-align: center;
    margin-bottom: 1.25rem;
}

.rc-login-marca img {
    max-width: 190px;
    height: auto;
}

.login-box-msg {
    color: var(--rc-suave);
    font-size: .875rem;
    padding: 0 0 1.1rem;
}

.login-box .btn-primary {
    padding: .6rem;
    font-size: .925rem;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Pantalla de informes
   -------------------------------------------------------------------------- */

.rc-informe {
    background: var(--rc-panel);
    border: 1px solid var(--rc-borde);
    border-left: 3px solid var(--rc-verde);
    border-radius: var(--rc-radio);
    padding: 1.25rem 1.25rem .5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--rc-sombra);
}

.rc-informe-ayuda {
    font-size: .85rem;
    color: var(--rc-suave);
    margin: 0 0 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    line-height: 1.5;
}

.rc-informe-ayuda i {
    margin-top: .15rem;
    color: var(--rc-verde-700);
}

.rc-informe .form-control,
.rc-informe .select2-container--bootstrap4 .select2-selection {
    background: var(--rc-panel);
}

.rc-formato-fecha {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: .7rem .9rem;
    background: var(--rc-verde-50);
    border: 1px solid var(--rc-verde-200);
    border-radius: 8px;
    font-size: .82rem;
    color: var(--rc-verde-900);
    line-height: 1.5;
}

.rc-formato-fecha i {
    margin-top: .15rem;
    color: var(--rc-verde-700);
}

.rc-formato-fecha code {
    background: #fff;
    border: 1px solid var(--rc-verde-200);
    border-radius: 4px;
    padding: 0 .3rem;
    color: var(--rc-verde-900);
}

.rc-informe-acciones {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .35rem 0 1rem;
}

.rc-informe-resultado {
    font-size: .85rem;
    color: var(--rc-suave);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.rc-informe-resultado i {
    color: var(--rc-verde);
}

/* Calendario (daterangepicker) en verde */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--rc-verde);
    border-color: var(--rc-verde);
}

.daterangepicker td.in-range {
    background-color: var(--rc-verde-100);
    color: var(--rc-verde-900);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--rc-verde-100);
}

.daterangepicker .btn-primary {
    background-color: var(--rc-verde);
    border-color: var(--rc-verde);
}

.daterangepicker td.off,
.daterangepicker td.disabled {
    color: #c4ccd4;
    text-decoration: line-through;
}

/* Botones de descarga de DataTables */
.dt-buttons .btn,
.dt-button {
    background: var(--rc-panel) !important;
    border: 1px solid var(--rc-borde) !important;
    color: var(--rc-verde-800) !important;
    border-radius: 6px !important;
    font-size: .8rem !important;
    padding: .35rem .8rem !important;
    margin-right: .35rem;
}

.dt-buttons .btn:hover,
.dt-button:hover {
    background: var(--rc-verde-50) !important;
    border-color: var(--rc-verde-200) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .content-header {
        padding: 1rem .75rem .25rem;
    }

    .rc-titulo-pagina {
        font-size: 1.15rem;
    }

    .card-body {
        padding: 1rem;
    }

    .rc-usuario-datos {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Ficha de la factura (pantalla de detalle / cambiar estado)

   Era una lista de 27 <input readonly> identicos. Ahora: una cabecera con lo
   que se necesita para decidir (factura, proveedor, total, etapa y estado) y
   el resto agrupado en bloques.
   -------------------------------------------------------------------------- */

.rc-ficha {
    /* deja sitio para la barra de acciones fija */
    padding-bottom: 5rem;
}

.rc-ficha-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    background: var(--rc-verde-50);
    border: 1px solid var(--rc-verde-200);
    border-radius: 10px;
}

.rc-ficha-etiqueta {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rc-verde-800);
}

.rc-ficha-identidad h2 {
    margin: .15rem 0 .35rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rc-texto);
    word-break: break-all;
}

.rc-ficha-proveedor {
    margin: 0 0 .6rem;
    font-size: .95rem;
    color: var(--rc-texto);
}

.rc-ficha-proveedor span {
    margin-left: .5rem;
    font-size: .85rem;
    color: var(--rc-suave);
}

.rc-ficha-marcas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.rc-ficha-marcas > span {
    padding: .2rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 999px;
}

.rc-marca-etapa {
    color: #fff;
    background: var(--rc-verde-800);
}

.rc-marca-estado {
    color: var(--rc-verde-900);
    background: #fff;
    border: 1px solid var(--rc-verde-200);
}

.rc-marca-carpeta {
    color: var(--rc-suave);
    background: #fff;
    border: 1px solid var(--rc-borde);
    font-weight: 500;
}

.rc-ficha-total {
    text-align: right;
    margin-left: auto;
}

.rc-ficha-total span {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rc-suave);
}

.rc-ficha-total strong {
    display: block;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rc-verde-800);
    /* cifras de ancho fijo: las columnas de pesos quedan alineadas */
    font-variant-numeric: tabular-nums;
}

.rc-ficha-total small {
    color: var(--rc-suave);
    font-size: .8rem;
}

.rc-ficha-cuerpo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.rc-ficha-ancho {
    grid-column: 1 / -1;
}

.rc-ficha-bloque {
    padding: 1rem 1.15rem;
    background: var(--rc-panel);
    border: 1px solid var(--rc-borde);
    border-radius: 10px;
}

.rc-ficha-bloque h3 {
    margin: 0 0 .75rem;
    padding-bottom: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rc-suave);
    border-bottom: 1px solid var(--rc-borde);
}

.rc-ficha-bloque dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .45rem 1rem;
    margin: 0;
}

.rc-ficha-bloque dt {
    font-weight: 500;
    color: var(--rc-suave);
    font-size: .88rem;
}

.rc-ficha-bloque dd {
    margin: 0;
    text-align: right;
    color: var(--rc-texto);
    font-size: .92rem;
    word-break: break-word;
}

.rc-cifras dd {
    font-variant-numeric: tabular-nums;
}

.rc-cifras .rc-total {
    padding-top: .5rem;
    margin-top: .25rem;
    border-top: 1px solid var(--rc-borde);
    font-weight: 700;
    color: var(--rc-verde-800);
}

.rc-copiable {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
}

.rc-copiable + .rc-copiable {
    border-top: 1px solid var(--rc-borde);
}

.rc-copiable label {
    flex: 0 0 5.5rem;
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rc-suave);
}

.rc-copiable code {
    flex: 1 1 auto;
    min-width: 0;
    padding: .35rem .6rem;
    font-size: .82rem;
    color: var(--rc-texto);
    background: var(--rc-fondo);
    border: 1px solid var(--rc-borde);
    border-radius: 6px;
    /* cadenas largas (CUFE, URL): se cortan con puntos, no rompen la caja */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-texto-largo {
    max-height: 11rem;
    overflow-y: auto;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--rc-texto);
    white-space: pre-wrap;
    word-break: break-word;
}

.rc-ficha-acciones {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1.5rem;
    background: var(--rc-panel);
    border-top: 1px solid var(--rc-borde);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}

/* la barra arranca despues del menu lateral para no taparlo */
body:not(.sidebar-collapse) .rc-ficha-acciones {
    left: 250px;
}

@media (max-width: 1199.98px) {
    .rc-ficha-cuerpo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .rc-ficha-cuerpo {
        grid-template-columns: 1fr;
    }

    .rc-ficha-total {
        margin-left: 0;
        text-align: left;
    }

    body:not(.sidebar-collapse) .rc-ficha-acciones {
        left: 0;
    }
}

/* Zona para pegar/escoger la imagen del soporte, dentro del modal de estado */
.rc-soporte {
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    background: var(--rc-fondo);
    border: 2px dashed var(--rc-borde);
    border-radius: 10px;
    transition: border-color .15s, background .15s;
}

.rc-soporte:hover {
    background: var(--rc-verde-50);
    border-color: var(--rc-verde-400);
}

.rc-soporte img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    margin: 0 auto;
    border-radius: 6px;
}

.rc-soporte p {
    margin: .65rem 0 0;
    font-size: .85rem;
    color: var(--rc-suave);
}

.rc-soporte kbd {
    padding: .1rem .35rem;
    font-size: .78rem;
    color: var(--rc-texto);
    background: #fff;
    border: 1px solid var(--rc-borde);
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--rc-borde);
}

/* --------------------------------------------------------------------------
   Valores que se pueden copiar con un clic

   En la ficha de la factura casi todo se termina pegando en otro lado, asi que
   el dato mismo es el boton. El icono aparece al pasar por encima para no
   ensuciar la lectura.
   -------------------------------------------------------------------------- */

[data-rc-copiable] {
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    /* sitio para el icono, para que al aparecer no mueva el texto */
    padding-right: 1.25rem;
    transition: background .15s;
}

[data-rc-copiable]::after {
    content: "\f0c5";               /* far fa-copy */
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .75em;
    color: var(--rc-suave);
    opacity: 0;
    transition: opacity .15s;
}

[data-rc-copiable]:hover {
    background: var(--rc-verde-50);
}

[data-rc-copiable]:hover::after {
    opacity: .7;
}

/* mientras dura el aviso: tilde en vez del icono y una burbuja "Copiado" */
[data-rc-copiable].rc-copiado {
    background: var(--rc-verde-100);
}

[data-rc-copiable].rc-copiado::after {
    content: "\f00c";               /* fas fa-check */
    font-weight: 900;
    color: var(--rc-verde-700);
    opacity: 1;
}

[data-rc-copiable].rc-copiado::before {
    content: "Copiado";
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: .25rem;
    padding: .15rem .45rem;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
    background: var(--rc-verde-800);
    border-radius: 4px;
    z-index: 5;
}

/* en la cabecera el fondo ya es verde claro: se resalta al reves */
.rc-ficha-cabecera [data-rc-copiable]:hover {
    background: #fff;
}

/* --------------------------------------------------------------------------
   Pestaña "Datos de Xml"

   Eran barras azules a todo lo ancho con el nombre UBL crudo. Ahora cada
   sección dice qué es, cuántos campos trae, y se puede buscar en todas.
   -------------------------------------------------------------------------- */

.rc-xml-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.rc-xml-buscador {
    position: relative;
    flex: 1 1 320px;
}

.rc-xml-buscador i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rc-suave);
    pointer-events: none;
}

.rc-xml-buscador .form-control {
    padding-left: 2.3rem;
}

.rc-xml-botones {
    display: flex;
    gap: .4rem;
}

.rc-xml-vacio {
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    font-size: .88rem;
    color: var(--rc-suave);
    background: var(--rc-fondo);
    border: 1px dashed var(--rc-borde);
    border-radius: 8px;
}

.rc-xml-seccion {
    margin-bottom: .5rem;
    background: var(--rc-panel);
    border: 1px solid var(--rc-borde);
    border-radius: 8px;
    overflow: hidden;
}

.rc-xml-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .7rem 1rem;
    text-align: left;
    color: var(--rc-texto);
    background: var(--rc-fondo);
    border: 0;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}

.rc-xml-titulo:hover {
    background: var(--rc-verde-50);
}

.rc-xml-nombre {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: .95rem;
}

.rc-xml-nombre code {
    margin-left: .5rem;
    padding: .1rem .35rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--rc-suave);
    background: #fff;
    border: 1px solid var(--rc-borde);
    border-radius: 4px;
}

.rc-xml-cuenta {
    min-width: 1.6rem;
    padding: .1rem .45rem;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    color: var(--rc-verde-800);
    background: var(--rc-verde-100);
    border-radius: 999px;
}

.rc-xml-titulo .fa-chevron-down {
    font-size: .8rem;
    color: var(--rc-suave);
    transition: transform .15s;
}

.rc-xml-titulo[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.rc-xml-datos {
    margin: 0;
    padding: .25rem 1rem .5rem;
}

.rc-xml-fila {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--rc-borde);
}

.rc-xml-fila:last-child {
    border-bottom: 0;
}

.rc-xml-fila dt {
    font-weight: 500;
    font-size: .85rem;
    color: var(--rc-suave);
    word-break: break-word;
}

.rc-xml-fila dd {
    margin: 0;
    font-size: .88rem;
    color: var(--rc-texto);
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Pestaña "Histórico": línea de tiempo
   -------------------------------------------------------------------------- */

.rc-historico-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .9rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rc-borde);
}

.rc-historico-cabecera h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rc-texto);
}

.rc-historico-cabecera p {
    margin: .15rem 0 0;
    font-size: .87rem;
    color: var(--rc-suave);
}

.rc-linea {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 2.75rem;
}

/* el hilo vertical que une los pasos */
.rc-linea::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: var(--rc-borde);
}

.rc-linea-paso {
    position: relative;
    margin-bottom: 1rem;
}

.rc-linea-marca {
    position: absolute;
    left: -2.75rem;
    top: .35rem;
    width: 2.15rem;
    height: 2.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--rc-verde-700);
    border: 3px solid var(--rc-panel);
    border-radius: 50%;
}

.rc-linea-caja {
    padding: .8rem 1rem;
    background: var(--rc-panel);
    border: 1px solid var(--rc-borde);
    border-radius: 8px;
}

.rc-linea-arriba {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.rc-linea-arriba strong {
    font-size: .95rem;
    color: var(--rc-texto);
}

.rc-linea-arriba time {
    font-size: .82rem;
    color: var(--rc-suave);
}

.rc-linea-marcas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.rc-linea-marcas > span {
    padding: .15rem .55rem;
    font-size: .76rem;
    font-weight: 600;
    border-radius: 999px;
}

.rc-linea-nota {
    margin: .6rem 0 0;
    padding-top: .6rem;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--rc-texto);
    border-top: 1px solid var(--rc-borde);
    white-space: pre-wrap;
}

.rc-linea-vacio {
    padding: 1.25rem;
    text-align: center;
    color: var(--rc-suave);
}

/* botón de copiar dentro del título de un bloque */
.rc-ficha-bloque h3 .rc-copiar-bloque {
    float: right;
    margin-top: -.25rem;
    font-size: .72rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Al imprimir el histórico sale solo el histórico */
@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .content-header,
    .nav-pills,
    .rc-ficha-acciones,
    .rc-historico-cabecera .btn {
        display: none !important;
    }

    .content-wrapper,
    .card {
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* --------------------------------------------------------------------------
   Formularios agrupados en secciones (crear/editar usuario)
   -------------------------------------------------------------------------- */

.rc-seccion-ayuda {
    margin: -.25rem 0 1rem;
    font-size: .87rem;
    color: var(--rc-suave);
}

.rc-obligatorio {
    margin-left: .15rem;
    color: #c0362c;
    font-weight: 700;
}

.rc-formulario .card {
    margin-bottom: 1rem;
}

.rc-formulario-acciones {
    display: flex;
    gap: .5rem;
    padding: .9rem 1.1rem;
    background: var(--rc-panel);
    border: 1px solid var(--rc-borde);
    border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Modal de crear/editar proveedor
   -------------------------------------------------------------------------- */

.rc-modal-ancho {
    max-width: 900px;
}

.rc-modal-seccion + .rc-modal-seccion {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rc-borde);
}

.rc-modal-seccion > h6 {
    margin: 0 0 .75rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rc-suave);
}

/* el NIT y su dígito son un solo dato: se muestran pegados */
.rc-nit-grupo {
    display: flex;
    gap: .4rem;
    align-items: flex-start;
}

.rc-nit-grupo > :first-child {
    flex: 1 1 auto;
}

.rc-nit-grupo > :last-child {
    flex: 0 0 5rem;
}

.rc-nit-guion {
    align-self: center;
    padding-top: .35rem;
    color: var(--rc-suave);
}

/* El camino dentro del XML, encima del nombre del campo: distingue los varios
   "ID" y "CompanyID" que trae un mismo documento. */
.rc-xml-ruta {
    display: block;
    font-size: .72rem;
    line-height: 1.35;
    color: var(--rc-verde-700);
    word-break: break-word;
}

.rc-xml-fila dt {
    line-height: 1.35;
}

/* valores largos (firmas, URLs, base64) no deben estirar la columna */
.rc-xml-fila dd {
    max-height: 6.5rem;
    overflow-y: auto;
}

/* atributos del campo (moneda, schemeName...) pegados al valor */
.rc-xml-atributo {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .35rem;
    font-size: .72rem;
    color: var(--rc-suave);
    background: var(--rc-fondo);
    border: 1px solid var(--rc-borde);
    border-radius: 4px;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Aviso del emisor: si ya existe como proveedor o hay que crearlo
   -------------------------------------------------------------------------- */

.rc-emisor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1.25rem;
    padding: .7rem .9rem;
    font-size: .88rem;
    border: 1px solid;
    border-radius: 8px;
}

.rc-emisor > div {
    flex: 1 1 260px;
}

.rc-emisor > i {
    font-size: 1.1rem;
}

.rc-emisor-ok {
    color: var(--rc-verde-900);
    background: var(--rc-verde-50);
    border-color: var(--rc-verde-200);
}

.rc-emisor-falta {
    color: #9a6700;
    background: #fff8e1;
    border-color: #f0d795;
}

.rc-emisor-aviso {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    font-size: .74rem;
    font-weight: 600;
    color: #9a6700;
    background: #fff;
    border: 1px solid #f0d795;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Diccionario de datos del XML: qué es cada campo y qué dice cada código
   -------------------------------------------------------------------------- */

.rc-xml-glosa {
    display: block;
    margin-top: .1rem;
    font-size: .76rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--rc-suave);
}

/* el icono es la ayuda corta al pasar el mouse; en pantallas anchas la glosa
   ya se lee entera, asi que ahi el icono sobra */
.rc-ayuda {
    font-size: .75rem;
    color: var(--rc-verde-400);
    cursor: help;
}

.rc-xml-significado {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--rc-verde-800);
    background: var(--rc-verde-100);
    border-radius: 4px;
}

@media (min-width: 992px) {
    .rc-ayuda {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .rc-xml-glosa {
        display: none;
    }
}