.navbar-fixed-top.atlas {
    background-color: #7F4224;
}

.navbar-static-top.menu-product.atlas {
    background-color: #353535;
}

.nav.navbar-nav.no-overflow-y.atlas > li > a:hover {
    background-color: transparent;
    color: #7F4224 !important;
}

.nav.navbar-nav.no-overflow-y.atlas > li > a.active {
    background-color: transparent;
    -webkit-box-shadow: inset 0px -5px 0px 0px #7F4224;
    -moz-box-shadow: inset 0px -5px 0px 0px #7F4224;
    box-shadow: inset 0px -5px 0px 0px #7F4224;
    color: #7F4224 !important;
}

/*******************Color*******************/
/*orange*/
.atlas .orange {
    color: #EF6C00;
}

/*grey dark*/
.atlas .grey-dark {
    color: #898989;
}
/********************************************/

/*******************Button*******************/
/*orange*/
.atlas .btn-orange {
    border-radius: 2px;
    padding: 5px 20px 5px 20px;
    border: none;
    height: 35px;
    display: inline-block;
    font-family: 'Roboto-Regular';
    font-size: 16px;
    font-weight: 500;
    background-color: #EF6C00;
    color: white
}
/********************************************/

/*******************Label********************/
/*orange 14px bold*/
.atlas .label-orange-14-bold {
    font-family: 'Roboto-Medium';
    font-size: 14px;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 8px;
    font-weight: bold;
    color: #EF6C00;
}

/*grey 12px bold*/
.atlas .label-grey-12-bold {
    font-family: 'Roboto-Medium';
    font-size: 12px;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 8px;
    font-weight: bold;
    color: #898989;
}

/*grey 12px*/
.atlas .label-grey-12 {
    font-family: 'Roboto-Light';
    font-size: 12px;
    font-weight: 800;
    color: #898989;
    background: transparent;
}

/*grey light 14px bold*/
.atlas .label-grey-light-14-bold {
    font-family: 'Roboto-Medium';
    font-size: 14px;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 8px;
    font-weight: bold;
    color: #898989;
}

/*grey dark 14px*/
.atlas .label-grey-dark-14 {
    font-family: 'Roboto-Light';
    font-size: 14px;
    font-weight: 800;
    color: #898989;
    background: transparent;
}

/*grey light 16px*/
.atlas .label-grey-light-16 {
    font-family: 'Roboto-Light';
    font-size: 16px;
    font-weight: 800;
    color: #898989;
    background: transparent;
}

/*black 14px bold*/
.atlas .label-black-14-bold {
    font-family: 'Roboto-Light';
    font-size: 14px;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 8px;
    font-weight: bold;
    color: black;
}
/********************************************/

/*******************Table********************/
/*grey light*/
.atlas .table-tr-grey-light {
    background-color: #EBEBEB !important;
}

/*white light*/
.atlas .table-tr-white {
    background-color: white;
}
/********************************************/

/*Color en los focos de form control*/
.atlas .form-control:focus {
    border-color: #EF6C00;
    -moz-box-shadow: 0 0 8px rgba(239, 108, 0, .6);
    -webkit-box-shadow: 0 0 8px rgba(239, 108, 0, .6);
    box-shadow: 0 0 8px rgba(239, 108, 0, .6);
}


.atlas .checkbox-container {
    color: #EF6C00;
    position: relative;
}

    .atlas .checkbox-container p {
        padding: 0;
        margin: 1.5em 0;
    }

    .atlas .checkbox-container input[type="checkbox"] {
        display: none;
    }

    .atlas .checkbox-container label {
        color: black;
        cursor: pointer;
        font-family: Roboto-Regular;
    }

    .atlas .checkbox-container input[type="checkbox"] + label {
        border: initial !important;
        padding: 0;
    }

        .atlas .checkbox-container input[type="checkbox"] + label::before {
            background-color: white;
            border: 1px solid #BEBEBE;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            content: "\00a0";
            display: inline-block;
            height: 17px;
            margin-right: 5px;
            padding: 0;
            vertical-align: top;
            width: 17px;
        }

    .atlas .checkbox-container input[type="checkbox"]:hover + label::before,
    .atlas .checkbox-container input[type="checkbox"]:checked + label::before {
        border: 1px solid #EF6C00;
    }

    .atlas .checkbox-container input[type="checkbox"]:checked + label::after {
        background-color: transparent;
        border: 2px solid #EF6C00;
        border-right: 0px;
        border-top: 0px;
        content: "\00a0";
        left: 4px;
        height: 5px;
        position: absolute;
        top: 5px;
        transform: rotate(-45deg);
        width: 10px;
    }

.atlas .btn-equivalencia-cross {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 17px;
}

.close-dinamic-table{
    border-right: 1px solid #b6b6b7;
}

.check-registros-activos-total{
    float: right;
}

/*****************************************************/
/* VistaInstanciaParametro - Inicio */
    /* Table.jsx */
    .VistaInstanciaParametroTableScroll {
        display: block;
        overflow-x: auto;
    }

/* VistaInstanciaParametro - Fin */
.contenedor-boton-aceptar-cancelar{
    background: #F5F5F5;
    position: fixed;
    z-index: 10;
    bottom: 0px;
    padding: 16px;
    border-top: 1px solid #B7B7B7;
    max-width: 984px;
    min-width: 984px;
    margin-left: 15px;
}

.btn-orange {
    border-radius: 2px;
    padding: 5px 20px 5px 20px;
    border: none;
    height: 35px;
    display: inline-block;
    font-family: 'Roboto-Regular';
    font-size: 16px;
    font-weight: 500;
    background-color: #EF6C00;
    color: white
}

.btn-orange:hover {
    background-color: #db5800;
}

.nivelarBtnCancelarGuardar {
    margin-top: -4px;
} 

.nivelar-alert-danger {
    margin-right: 0px;
    margin-left: 0px;
}

.tooltip {
  max-width: 500px;
  word-wrap: break-word;
}

.tooltip-inner {
  text-align: left;
}

/* NuevaInstanciaParametro - Estilos checkboxes (AD17-1464) */
.checkbox-container > label::after {
    content: '';
    width: 10px;
    height: 5px;
    position: absolute;
    top: 4px;
    left: 3px;
    border: 2px solid #EF6C00;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    transform: rotate(-45deg);
}

.checkbox-container > label:hover {
    border: 1px solid #EF6C00;
}

.checkbox-nuevaInstancia {
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #FFFFFF;
    border-radius: 2px;
    margin-left: 15px;
    margin-top: 4px;
    border: 1px solid #D8D8D8;
}

.span-nuevaInstancia {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    margin-left: 10px;
    font-family: FiraSans-Light;
    font-weight: 600;
}

.atlas input[type=checkbox]:checked + label {
    border: 1px solid #EF6C00;
}

.atlas .default-checkbox > label::after {
    content: '';
    width: 10px;
    height: 5px;
    position: absolute;
    top: 4px;
    left: 3px;
    border: 2px solid #EF6C00;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    transform: rotate(-45deg);
}

.atlas .default-checkbox > label:hover {
    border: 1px solid #EF6C00;
}

.contenedorCheckboxActivo {
    float: left;
    margin-right: 5px;
    margin-top: 2px;
}

.contenedorNuevaInstanciaActivo {
    margin-bottom: 30px;
}

.contenedorCheckboxRegistrosVigentes {
    float: left;
    margin-right: 5px;
    margin-top: 3px;
}

.labelPropiedadesNuevaInstanciaParametro {
    font-family: FiraSans-Light;
}

.btn-link-atlas {
    color: #EF6C00;
}

.btn-link-atlas:hover {
    color: #db5800;
}

.contenedorSeparadorNuevaInstanciaParametro {
    height: 50px;
}

.form-control:focus {
    border-color: #EF6C00;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #EF6C00;
}

.inputPageNumber {
    height: 35px;
    font-family: 'Roboto-Regular';
    font-size: 16px;
    width: 18%;
    display: inline;
    padding: 0;
    padding-left: 5px;
}

.inputPageNumber:focus {
    border-color: #EF6C00;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #EF6C00;
}

.btnEquivalenciaAtlas{
    margin-top: 10px;
}

.containerEquivalenciaAtlas {
    margin-top: 31px;
}

/* Filtros Atlas */

.filtrosAtlasContainer {
    height: 200px;
    width: 1000px;
}

.filtrosAtlasWid {
    width: 1000px;
}

.VistaInstanciaParametro-Filtros-Contenedor {
    float: left;
    width: 250px;
}

.VistaInstanciaParametro-Filtros-Criterio-Busqueda-Boton {
    display: flex;
}

.VistaInstanciaParametro-Filtros-Criterio-Busqueda-Label {
    width: 168px;
}

.VistaInstanciaParametro-Filtros-Height-Boton {
    height: 34px !important;
    background-color: #EF6C00;
    cursor: pointer;
}

.VistaInstanciaParametro-Filtros-Height-Boton:hover {
    background-color: #db5800;
}

.VistaInstanciaParametro-Filtros-Linea {
    background-color: #d4d4d4;
    float: left;
    height: 344px;
    margin: 0;
    width: 2px;
    margin: 0 20px 20px 0;
}

.VistaInstanciaParametro-Input-Marign-Top {
    margin-top: 20px;
}

.VistaInstanciaParametro-Filtros-Marign-Top {
    margin-top: 20px;
}

.VistaInstanciaParametro-Marign-Top {
    margin-top: 33px;
}

.VistaInstanciaParametro-Marign-Bottom {
    margin-bottom: 30px;
}

.VistaInstanciaParametro-Marign-Bottom-Sin-Opciones {
    margin-bottom: 65px;
}

.VistaInstanciaParametro-Criterio-Busqueda {
    margin-bottom: 18px;
}

.VistaInstanciaParametro-Filtros-Div-ToolTip {
    width: 170px;
}

.VistaInstanciaParametro-Filtros-Height {
    height: 32px !important;
}

.VistaInstanciaParametro-Filtros-Check-Marign-Top {
    margin-top: 74px;
}

.VistaInstanciaParametro-Filtros-Margin-Bottom {
    margin-bottom: 48px !important;
}

.VistaInstanciaParametro-Filtros-Valor-Busqueda-Marign-Top {
    margin-top: 65px;
}

.VistaInstanciaParametro-Filtros-Boton-Ver-Marign-Top {
    margin-top: -27px;
}

.VistaInstanciaParametro-Filtros-Boton-Ver-Float {
    float: right;
    margin-right: -160px;
    margin-top: 3px
}

.VistaInstanciaParametro-Filtros-Valor-Busqueda-Marign-Right {
    margin-right: 4px;
}

.VistaInstanciaParametro-Filtros-Marign-Bottom {
    margin-bottom: 20px;
}

.VistaInstanciaParametro-Filtros-Marign-Top {
    margin-top: 15px;
}

.VistaInstanciaParametro-Filtros-Sin-Check-Marign-Bottom {
    margin-bottom: 47px;
}

.VistaInstanciaParametro-Filtros-Contenedor-Check-Flex {
    display: flex;
    width: 275px;
    margin-left: -10px;
    margin-bottom: 31px;
}

.VistaInstanciaParametro-Filtros-Contenedor-Check {
    display: grid;
    margin-top: 80px;
}

.VistaInstanciaParametro-Filtros-Background {
    background: #F5F6F8;
    padding: 10px;
    width: 72px;
    border-radius: 2px;
}

.VistaInstanciaParametro-Filtros-Label-Cabecera {
    font-family: 'Roboto-Regular';
    font-size: 16px;
    font-weight: 600;
    color: #606060;
    background: transparent;
    margin-bottom: 12px;
}

.VistaInstanciaParametro-Filtros-Label-Radio{
    margin-left: 10px;
    display: block;
}

.VistaInstanciaParametro-Filtros-Label {
    font-family: FiraSans-Light;
}

/*INICIO RADIOS*/
.container-radio-atlas input[type=radio] {
    display: none;
}

.container-radio-atlas input[type="radio"] + label {
    cursor: pointer;
}

    .container-radio-atlas input[type="radio"] + label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 17px;
        height: 17px;
        left: 0;
        border: 1px solid #cccccc;
        border-radius: 50%;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out;
        transition: border 0.15s ease-in-out;
    }

    .container-radio-atlas input[type="radio"] + label::after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 11px;
        height: 11px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background-color: #EF6C00;
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        transform: scale(0, 0);
        -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    }

.container-radio-atlas input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

.container-radio-atlas input[type="radio"]:checked + label::before {
    border: 1px solid #EF6C00;
    background: #FFF;
}

.container-radio-atlas input[type="radio"]:hover + label::before {
    border: 1px solid #EF6C00;
    background: #FFF;
    cursor: pointer;
}

.VistaInstanciaParametro-SinResultados {
    font-family: 'FiraSans-ExtraLight';
    font-size: 18px;
    font-weight: 600;
    color: #555;
}

.VistaInstanciaParametro-Filtros-Limpiar-Filtro {
    background-color: transparent;
    color: black;
    cursor: pointer;
    margin-left: -40px;
    margin-top: 9px;
}

.btn-group-Borrar-Filtro {
    position: relative;
    width: 10%;
}

.VistaInstanciaParametro-Titulo-SoloLectura {
    font-family: 'FiraSans-ExtraLight';
    font-size: 20px;
    font-weight: 600;
    color: #a09a9f;
}

.NuevaInstanciaParametro-DeshabilitarComponente-SoloLectura {
    pointer-events: none;
    background-color: #D8D8D8;
}

.NuevaInstanciaParametro-DeshabilitarCheckbox-SoloLectura {
    pointer-events: none;
}

.NuevaInstanciaParametro-DeshabilitarCheckbox-SoloLectura-BackgroundColor {
    background-color: #D8D8D8;
}

.NuevaInstanciaParametro-DivContainer-Checkbox-ValorDefault {
    margin-top: 40px;
    width: 20%;
}

.NuevaInstanciaParametro-Div-Checkbox-ValorDefault {
    float: left;
}

.NuevaInstanciaParametro-Label-Checkbox-ValorDefault {
    font-family: FiraSans-Light;
    font-size: 14px;
    font-weight: 600;
    margin-left: 5px;
}

.NuevaInstanciaParametro-alert-danger {
    border: 1px solid red !important;
}

.NuevaInstanciaParametro-DivEquivalencias-labelError {
    font-weight: 100;
    margin-top: 5px;
}

.atlas_seccionGrilla__registro:hover {
    color:#EF6C00;
}

.atlas_seccionGrilla_normalFontWeight {
    font-weight: normal;
}

.atlas_seccionGrilla__registroCabecera--columnaActiva {
    color: #EF6C00 !important; 
    font-family: 'Roboto-Medium';
    text-align: left;
}

.atlas_seccionGrilla__registro--registroGris {
    background-color: #ebebeb; 
}

.atlas_seccionGrilla__registro--registroBlanco {
    background-color: #ffffff; 
}

.atlas_seccionGrilla__registroIconoInactivo {
    background-image: url("../images/icono-Inactivo-Habilitado.svg");
    height: 18px;
    position: absolute;
    width: 18px;
}

.atlas_seccionGrilla__registroIconoInactivo:hover {
    background-image: url("../images/atlas-icono-Inactivo-Habilitado.svg");
    height: 18px;
    position: absolute;
    width: 18px;
}

.atlas_seccionGrilla__registroIconoInactivo_desplegable {
    background-image: url("../images/atlas-icono-Inactivo-Habilitado.svg");
    height: 18px;
    position: absolute;
    width: 18px;
}

    .mover-izquierda {
        margin-left: -41px; 
        margin-top: 0px;
    }

.seccionGrilla__registroCabeceraTrianguloUpActivo {
    background-image: url("../images/icon-trianguloUpActivo.svg");
}

    .seccionGrilla__registroCabeceraTrianguloUp--descendente {
        transform: rotate(180deg);
    }

.atlas_seccionGrilla__registroCabeceraTrianguloUpActivo {
    background-image: url(../../../images/atlas-icon-triangleUpActivo.svg);
}

    .atlas_seccionGrilla__registroCabeceraTrianguloUp--descendente {
        transform: rotate(180deg);
    }

.atlas_seccionGrilla__registroCabeceraTrianguloUp {
    background-image: url("../images/atlas-icon-triangleUpActivo.svg");
    height: 5px;
    margin-left: 5px;
    margin-top: 8px;
    position: absolute;
    width: 12px;
}

.atlas_seccionGrilla__registro:hover .atlas-text {
    color: #EF6C00 !important; 
}

.atlas_seccionGrilla__registro {
    cursor: pointer !important;
}

.atlas-text {
    transition: color 0.3s; 
}

.tableroPointer {
    cursor: pointer;
    font-weight: 100;
}

.atlas_seccionGrilla__registroCabecera {
        color: #141414;
        font-family: 'Roboto-Medium';
        text-align: left;
    }
.atlas_Modo_Desplegable_Link{
        vertical-align:middle !important; 
}

.atlas_entidadInstanciaHeader {
        color: #141414;
        font-family: 'Roboto-Medium';
        text-align: left;
        font-weight: normal;
}

.agregar-equivalencia-btn {
    border-radius: 2px;
    padding: 5px 20px;
    border: 2px solid #EF6C00; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 35px;
    display: inline-flex; 
    align-items: center; 
    font-family: 'Roboto-Regular';
    font-size: 16px;
    font-weight: 500;
    background-color: white; 
    color: #EF6C00; 
    transition: box-shadow 0.3s; 
    text-decoration: none; 
}

.agregar-equivalencia-btn:before {
    content: "+"; 
    margin-right: 5px; 
    font-weight: bold; 
    font-size: 18px; 
}

.agregar-equivalencia-btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    text-decoration: none; 
}

.atlas__boton--deshabilitado {
    background-color: #D8D8D8;
}

.atlas__boton--deshabilitado:hover {
    background-color: #c4c4c4;
}

/* GestionAccesoParametros */

.GestionAccesoParametros-agente-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.GestionAccesoParametros-combo-wrapper {
    position: relative;
    min-width: 280px;
    max-width: 400px;
    flex: 1;
}

.GestionAccesoParametros-combo-input-wrapper {
    position: relative;
}

.GestionAccesoParametros-combo-input {
    padding-right: 28px;
}

.GestionAccesoParametros-combo-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 10px;
    pointer-events: none;
}

.GestionAccesoParametros-combo-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.GestionAccesoParametros-combo-option {
    padding: 8px 12px;
    cursor: pointer;
    background-color: white;
    border-bottom: 1px solid #f5f5f5;
}

.GestionAccesoParametros-combo-option--selected {
    background-color: #f0f0f0;
}

.GestionAccesoParametros-combo-sin-resultados {
    padding: 8px 12px;
    color: #888;
}

.GestionAccesoParametros-radio-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    white-space: nowrap;
}

.GestionAccesoParametros-busqueda-toolbar {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.GestionAccesoParametros-busqueda-input {
    max-width: 300px;
}

.GestionAccesoParametros-busqueda-botones {
    display: flex;
    gap: 8px;
}

.GestionAccesoParametros-grilla {
    max-height: 400px;
    overflow-y: auto;
    border-top: 1px solid #ddd;
}

.GestionAccesoParametros-grilla-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

.GestionAccesoParametros-grilla-sin-resultados {
    padding: 12px;
    color: #888;
}

.GestionAccesoParametros-badge {
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 11px;
    color: white;
    user-select: none;
    display: inline-block;
    min-width: 90px;
    text-align: center;
}

.GestionAccesoParametros-badge--habilitado {
    background-color: #4CAF50;
}

.GestionAccesoParametros-badge--inhabilitado {
    background-color: #e53935;
}

.GestionAccesoParametros-badge--heredado {
    background-color: #1E88E5;
}

.GestionAccesoParametros-badge--clickable {
    cursor: pointer;
}

.GestionAccesoParametros-footer {
    border-top: 1px solid #ddd;
    background-color: #f5f5f5;
    margin: 16px -15px 0;
    padding: 12px 15px 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.GestionAccesoParametros-footer-botones {
    display: flex;
    gap: 12px;
}

/*****************************************************/
/* ModalAuditoria - Inicio */

/* Ocho columnas en una sola grilla: necesita mas ancho que un modal comun. */
.ModalAuditoria-dialog {
    width: 1200px;
    max-width: 96%;
}

/* `.modal-header` de Portico fija `height: 100px` para todos los modales de la plataforma, y para un
   encabezado de una sola linea de 20px eso es el doble de lo necesario. Se pisa SOLO en este modal: tocar
   la regla global cambiaria todos los modales de todos los productos. */
.ModalAuditoria-dialog .modal-header {
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Alto fijo del cuerpo: con alto automatico el modal se encogia de golpe cuando la pagina traia pocos
   eventos, y los botones y el paginado se movian de lugar. El alto alcanza para los 10 eventos de una
   pagina completa; el overflow-y solo entra en juego cuando se despliega el detalle de algun evento. */
.ModalAuditoria-body {
    /* 10 renglones de 37px + encabezado + el padding del cuerpo: medido, entra justo sin scrollbar. */
    height: 440px;
    overflow-y: auto;
}

/* El scroll horizontal, si hace falta, va en este contenedor y NO en la tabla: ponerlo en la tabla obliga
   a hacer thead y tbody display:table, y ahi cada uno calcula sus propios anchos y las columnas se
   desalinean de sus encabezados. */
.ModalAuditoria-tabla-contenedor {
    overflow-x: auto;
}

.ModalAuditoria-tabla {
    width: 100%;
    margin-bottom: 0;
}

/* OJO con la especificidad: Bootstrap define `.table > tbody > tr > td { vertical-align: top }`, que le
   gana a un `.ModalAuditoria-tabla td`. Por eso los selectores repiten la ruta completa. */
.table.ModalAuditoria-tabla > thead > tr > th,
.table.ModalAuditoria-tabla > tbody > tr > td {
    white-space: nowrap;
    /* Centra verticalmente todo el renglon. */
    vertical-align: middle;
}

/* La columna del chevron no lleva encabezado: se le fija el ancho para que no se lo reparta el resto. */
.table.ModalAuditoria-tabla > thead > tr > th.ModalAuditoria-columna-desplegable,
.table.ModalAuditoria-tabla > tbody > tr > td.ModalAuditoria-columna-desplegable {
    width: 30px;
    padding-right: 0;
}

/* El renglon padre y su detalle son dos <tr>: se los pinta igual para que se lean como un solo bloque.
   Por eso la tabla ya no usa `table-striped`: el rayado alternado le tocaba al detalle y cortaba el par. */
.table.ModalAuditoria-tabla > tbody > tr.ModalAuditoria-fila--desplegada > td,
.table.ModalAuditoria-tabla > tbody > tr.ModalAuditoria-detalle-fila > td {
    background-color: #f7f7f7;
}

.table.ModalAuditoria-tabla > tbody > tr.ModalAuditoria-detalle-fila > td {
    border-top: 0;
    padding-top: 0;
}

/* Los campos afectados van en dos pares "nombre / valor" por renglon, para aprovechar el ancho del modal y
   que el detalle no empuje tanto el alto.
   Es una grilla y no flex a proposito: `max-content` hace que la columna de nombres mida exactamente lo que
   mide el nombre mas largo, con lo cual los nombres arrancan a la izquierda Y los valores quedan
   encolumnados, sin fijarle un ancho a ojo. Con un ancho fijo habia que elegir: o los nombres alineados a
   la derecha pegados al valor pero flotando hacia el centro, o alineados a la izquierda con el valor a
   media cuadra de distancia. */
.ModalAuditoria-detalle {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    align-items: baseline;
    column-gap: 8px;
    row-gap: 6px;
    /* Sangria a la altura de la columna Accion: deja claro que el detalle pertenece al renglon de arriba. */
    padding: 4px 24px 8px 30px;
    white-space: normal;
}

.atlas .ModalAuditoria-detalle-campo {
    text-align: left;
    font-family: 'Roboto-Light';
    font-size: 13px;
    font-weight: 800;
    color: #898989;
}

.atlas .ModalAuditoria-detalle-campo:after {
    content: ':';
}

/* Bloque de equivalencia dentro del detalle de la operacion. Va con barra lateral y fondo propio para que
   se lea distinto de los campos de la instancia sin sacarlo de la operacion a la que pertenece. */
.ModalAuditoria-equivalencia {
    margin: 0 24px 8px 30px;
    padding: 6px 0 6px 12px;
    border-left: 3px solid #7a5ea8;
    background-color: #f0edf5;
}

.ModalAuditoria-equivalencia-titulo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 2px;
}

.atlas .ModalAuditoria-equivalencia-marca {
    font-family: 'Roboto-Light';
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7a5ea8;
}

.atlas .ModalAuditoria-equivalencia-alta {
    border-radius: 2px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
    color: #ffffff;
    background-color: #4c9a51;
}

.atlas .ModalAuditoria-equivalencia-propiedad {
    font-family: 'Roboto-Light';
    font-size: 12px;
    color: #898989;
}

/* Dentro del bloque la sangria ya la da el bloque: se anula la del detalle de la instancia. */
.ModalAuditoria-detalle--equivalencia {
    padding-left: 0;
    padding-right: 0;
}

.atlas .ModalAuditoria-detalle-valor {
    font-family: 'Roboto-Light';
    font-size: 13px;
    font-weight: bold;
    color: #000000;
    word-break: break-word;
    /* Un valor puede traer saltos de linea propios (el generador de Action no los escapa y ahora llegan
       completos): se respetan, si no el dato se leeria corrido. */
    white-space: pre-line;
}

/* Tipografia de la grilla. Se define acá en lugar de reusar las clases `.label-*` del modulo porque esas
   son inline-block con margin-bottom: dentro de una celda agrandan el renglon y dejan el texto por debajo
   del centro, y la celda deja de estar realmente centrada. */
.atlas .table.ModalAuditoria-tabla > thead > tr > th {
    font-family: 'Roboto-Light';
    font-size: 12px;
    font-weight: 800;
    color: #898989;
}

.atlas .table.ModalAuditoria-tabla > tbody > tr > td {
    font-family: 'Roboto-Light';
    font-size: 14px;
    font-weight: 800;
    color: #898989;
}

.ModalAuditoria-operacion {
    display: inline-block;
    border-radius: 2px;
    padding: 0 8px;
    color: #ffffff;
    font-size: 12px;
    background-color: #7a7a7a;
    /* El badge tiene que quedar a la misma altura que el texto de las otras columnas. Se le da el mismo
       line-height que la celda (20px) para que su caja mida igual que un label y se apoye en la misma
       linea base. Con `vertical-align: middle` no alcanza: eso alinea al centro de la altura de la x,
       no al centro de la linea, y dejaba el badge unos pixeles mas arriba. */
    line-height: 20px;
}

.ModalAuditoria-operacion--alta {
    background-color: #4c9a51;
}

.ModalAuditoria-operacion--baja {
    background-color: #c0392b;
}

.ModalAuditoria-operacion--modificacion {
    background-color: #e28413;
}

/* El modal muestra 10 eventos por pagina y se navega con el paginado. */
.ModalAuditoria-paginado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid #ddd;
    padding: 12px 15px;
}

.ModalAuditoria-paginado-controles {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* `align-items: center` centra la CAJA del label, y las clases `.label-*` del modulo traen margin-bottom:
   con ese margen adentro de la caja el texto queda por encima del centro real. Se anula el margen y ademas
   se le da el line-height del combo, que es el elemento mas alto del renglon. */
.ModalAuditoria-paginado label,
.ModalAuditoria-paginado .btn-link {
    margin-bottom: 0;
    line-height: 34px;
}

/* Deshabilitado: se apaga el naranja al gris de texto del modulo (#898989, el mismo `grey-dark` que usan
   los labels) y no responde al mouse. No se usa opacity, que dejaba el texto casi invisible sobre blanco.
   Portico tiene un token propio para deshabilitado (#B5B5B5 en .btn-cta:disabled y .btn-secondary:disabled)
   pero es mas claro todavia, asi que no sirve para un link sobre fondo blanco.
   El onClick tampoco se engancha en el JSX: el pointer-events es solo para el cursor y la seleccion. */
.ModalAuditoria-paginado-boton--deshabilitado,
.atlas .ModalAuditoria-paginado-boton--deshabilitado,
.atlas .ModalAuditoria-paginado-boton--deshabilitado:hover {
    color: #898989;
    cursor: default;
    pointer-events: none;
}

.ModalAuditoria-paginado-combo {
    width: auto;
    min-width: 64px;
    display: inline-block;
}

.ModalAuditoria-footer-botones {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* `btn-orange` no tiene estilo para :disabled, asi que "Descargar Excel" se veia naranja e invitaba a
   apretarlo cuando la instancia no tiene auditoria (esta deshabilitado y no pasaba nada). Se usan los
   mismos colores que Portico define para deshabilitado en .btn-cta:disabled y .btn-secondary:disabled. */
.ModalAuditoria-footer-botones button:disabled,
.atlas .ModalAuditoria-footer-botones button:disabled {
    background-color: #F2F2F2;
    color: #B5B5B5;
    cursor: default;
    pointer-events: none;
}

/* ModalAuditoria - Fin */