body {
	font-size: 16px;
	font-family: 'Ubuntu', sans-serif;
}

.seccion-seammon {
	margin-top: 1em;
}

.img-logo-seammon {
	width: 80px;
}

.btn-nav-semmon {
	background-color: #021780;
	border-right: 2px solid #fafafa;
	color: #fafafa;
	font-size: 1em;
}

.alert-danger {
    font-weight: bolder;
    color: #d63411;
}

.simmon-slogan {
    padding-top: 5em;
    text-align: center;
    color: #021780;
    font-size: 2em;
}

.btn-entrar {
    background: #021780; 
    color: #fafafa;
}

.btn-entrar:hover {
        background: #DEEB6C;
        color: #021780;
}

.header-logeo {
    background: #F1F1F1; 
    color: #000;
}

.margenes {
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.cabecera-tabla {
    background: #021780;
    color: #fafafa;
    font-size:13px;
    font-weight: normal;
}

.vertical-alignment-helper {
    display: table;
    height: 100%;
    max-height: 500px;
    pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
    /* se agrego esta linea para centrar horizontalmente */
    margin-left: auto;
    margin-right: auto;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    padding-top: 20px;
    pointer-events: none;
    max-height: 500px;
}

.modal {
    overflow: auto !important;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;  
    max-width:700px;    
}

.modal-body {
    max-height: 500px;
    min-width: 300px;
    overflow-y: auto;
    overflow-x: auto;
}

.modal-headre-error {
    background: #2c3e50;
    color: #fff;
}

.hideGridColumn
    {
        display:none;
    }

.contenido {
    font-size: 13px;
    font-weight: normal;
}

.content-box-gray {
    overflow: hidden;
    border: 1px solid #bdbdbd;
    border-radius: 8px;
}

.margenes-titulo {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    padding-left: 0px;
    padding-right: 0px;
}
.cabecera-pagina {
    padding-bottom: 5px;
    padding-top: 5px;
    background: rgb(241, 241, 241);
    border-bottom: 1px solid #eee;
    padding-left: 1%;
    margin-top: 0px;
    margin-left: 20px;
}

.letra {
    font-size: 12px; 
    font-weight: 100;
}


.fondo-contenido {
    background: #F1F1F1;
    display: flex;
    justify-content: flex-end; /* Alinea los elementos al final del contenedor (a la derecha) */
    margin-left: -20px !important;
}

.footer-login {
    padding: 0px;
    border-top: 1px solid #e5e5e5;
}

.titulo-login {
    font-weight: 400;
    text-align: left;
    margin: 0px 10px;
}

.box-control {
    border: 1px solid #fafafa;
}

.dropdown-semmon {
    background-color: #021780;
    width: 100%;
}

.dropdown-semmon>li>a {
    color: #fafafa;
    font-size: 1.65rem;
    border-bottom: 2px solid #fafafa;
}

fieldset {
    padding: .35em .625em .4em;
    margin: 1px;
    border: 1px solid silver;    
}
legend {
    padding: 0;
    border: 0;
    margin-bottom: auto;
    width: auto;
    font-size: 12px;
    color: #1B00E6;
    font-weight: 500;
}

.paginacionGridOld
{
  /*padding: 105px;*/
  letter-spacing:1em
}

.paginacionGrid table 
{
    float: right;
}

.paginacionGridOld
{
  /*padding: 105px;*/
  letter-spacing:1em
}

.paginacionGrid span
{
  padding: 5px;
  border: solid 1px #d8d8d7;
  text-decoration: none;
  white-space: nowrap;
  background: #d8d8d7;
  border: solid 1px #000000;
  border-radius: 3px;
}

.paginacionGrid a, 
.pagination a:visited
{
  text-decoration: none;
  padding: 6px;
  white-space: nowrap;
  background: #ececec;
  border: solid 1px #000000;
  border-radius: 3px;
}
.paginacionGrid a:hover, 
.paginacionGrid a:active
{
  padding: 5px;
  border: solid 1px #b2b2b0;
  text-decoration: none;
  white-space: nowrap;
  background: #b2b2b0;
}


.print-title {
    font-size: 11px;
    font-weight: 600;
}

.print-subtitle {
    font-size: 8px;
}

.print-content {
    font-size: 9px;
}

.print-negrita {
    font-weight: 600;
}

#table-operacion td.number {
    text-align: right;
    padding-right: .15em;
}

.form-group-span {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    /*gap: 10px;  Espacio entre los elementos */
}

.form-group {
    margin-right: -15px !important;
    margin-left: -5px !important;
}

.column-group {
    margin-right: -1px !important;
    margin-left: -1px !important;
}

@media (min-width: 992px) {
    .modal-lg {
        width: 1000px !important;
    }
}

.fixed-table-body .card-view .title {
    min-width: 20% !important;
}

/* agregamos estils de index */

.compra {
    color: #36711c;
    font-weight: bold;
}

.venta {
    color: #015c9e;
    font-weight: bold;
    border-bottom: 2px solid black; /* Línea debajo de la fila */
}

.variacion {
    color: #000;
    font-weight: bold;
    text-align: center;
}


.negativo {
    color: #ea4335;
    font-weight: bold;
    border-bottom: 2px solid black; /* Línea debajo de la fila */
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table-no-border th, .table-no-border td {
    border: none !important;
}

.table th, .table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.text-right {
    text-align: right;
    padding-right: 5px !important;
}

.custom-addon {
    background-color: #DEEB6C; /* Color de fondo amarillo */
    color: black; /* Color del texto (puedes cambiarlo si lo prefieres) */
    text-align: center; /* Alinea el texto al centro */
}

.custom-titulo {
    color: black; /* Color del texto (puedes cambiarlo si lo prefieres) */
    text-align: center; /* Alinea el texto al centro */
}

#toast {
    visibility: hidden;
    min-width: 180px;
    margin-left: -90px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 10px 16px;
    position: fixed;
    z-index: 9999;
    bottom: 30px;
    left: 50%;
    font-size: 14px;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
}

#toast.show {
    visibility: visible;
    opacity: 1;
}

.importe_derecha {
    padding-right: 10px !important;
    text-align: right !important;
}

.importe_total_derecha {
    padding-right: 10px !important;
    text-align: right !important;
    font-weight: bold;
}

.numero_total_derecha {
    text-align: center !important;
    font-weight: bold !important;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 10px !important;
}
.navbar {
    min-height: 30px !important;
    margin-bottom: 5px !important;
}

.navbar-nav > li > a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.bto-rebuscar {
    height: 28px;
    width: 42px;
    padding: 3px 10px 3px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #ccc;
    color: #333;
    background-color: #fff;
    touch-action: manipulation;
    cursor: pointer;
}

.contenedor-flex {
    display: flex;
    justify-content: flex-end; /* Alinea los elementos al final del contenedor (a la derecha) */
    margin-left: -20px !important;
}

.logo-atinsoft {
    max-height: 80px;
}


.chart-box {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 10px;
    text-align: center;
    max-width: 100%;
    overflow: auto;
}

.chart-box-marco {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 0px;
    text-align: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden
}

.titulo-grafico {
    font-family: Arial;
    font-weight: bold;
    font-size: 12px;
    margin: 10px 0px;
    padding: 0px 0px 10px 0px;
    text-align: center;
    color: #000;
}

/* --- Variables de Color (Se mantienen) --- */
:root {
    --dash-primary-color: #004D9D;
    --dash-accent-color: #007BFF;
    --dash-background-soft: #f8f9fa;
    --dash-border-soft: #e0e0e0;
    --dash-texto-key: #343a40;
    --dash-danger-color: #DC3545;
    --dash-success-color: #28A745;
}

/* ------------------------------------------- */
/* 2. Estilos del GridView (Clase dashboard-table) */
/* ------------------------------------------- */

.dashboard-table {
    border: none !important;
    /* ... (otros estilos base se mantienen) ... */
}

    /* Estilos de la Cabecera (Header) */
    .dashboard-table .cabecera-tabla {
        background-color: var(--dash-primary-color);
        color: #004D9D !important;
        height: 30px;
        line-height: 30px;
    }

.dashboard-table .cabecera-tabla th {
    background-color: var(--dash-primary-color);
    color: white;
    font-size: 0.9em;
    padding: 5px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid var(--dash-accent-color);
}


    /* 3. Estilos de las Filas de Datos */

    .dashboard-table .dashboard-data-row td {
        padding: 8px 8px;
        border-right: none !important;
        border-left: none !important;
        border-bottom: 1px solid var(--dash-border-soft);
        font-size: 0.9em;
    }

    /* Efecto cebra se mantiene */
    .dashboard-table tr:nth-child(even) {
        background-color: var(--dash-background-soft);
    }

    .dashboard-table tr:nth-child(odd) {
        background-color: #ffffff;
    }

    /* Destacar textos clave (Capital Total) */
    .dashboard-table td.text-right.letra:nth-last-child(2) {
        font-size: 1em;
        color: var(--dash-texto-key);
        font-weight: 600;
    }


    /* ------------------------------------------- */
    /* 4. Estilos de la Fila de Totales (FOOTER Creado Manualmente) */
    /* ------------------------------------------- */

    /* Estilo para la fila completa del Footer */
    .dashboard-table tfoot tr {
        /* La fila de totales agregada manualmente se convierte en <tfoot> */
        background-color: #e9ecef !important; /* Fondo gris suave */
        border-top: 3px double var(--dash-primary-color); /* Separador doble */
        font-weight: bold;
    }

    .dashboard-table tfoot td {
        padding: 8px 8px;
        border: none;
        border-right: none !important;
        border-left: none !important;
    }

    /* Estilo para la celda específica que contiene el importe total */
    .dashboard-table .importe_total_derecha {
        font-size: 1.1em;
        color: var(--dash-primary-color); /* Color azul primario */
        font-weight: bold;
        text-align: right;
    }

    /* Opción alternativa 1: Si usa la clase de fila de la cabecera/pie por defecto (menos probable) */
    /* .dashboard-table tr[rowType="Footer"] { ... } */

    /* Opción alternativa 2: Usando la nueva clase que aplicaste en C# */
    .dashboard-table .total-row {
        background-color: #e9ecef !important;
        border-top: 3px double var(--dash-primary-color);
        font-weight: bold;
    }

        .dashboard-table .total-row td {
            padding: 8px 8px;
            border: none;
        }

    /* ------------------------------------------- */
    /* Estilo de la Fila Seleccionada */
    /* ------------------------------------------- */

    /* Clase por defecto de ASP.NET para la fila seleccionada */
    .dashboard-table tr.GridViewSelectRow {
        background-color: #d1ecf1 !important; /* Azul claro para destacar */
        border-left: 5px solid var(--dash-accent-color); /* Barra de acento lateral */
        font-weight: bold; /* Opcional: hace el texto negrita */
        transition: background-color 0.2s;
    }

    /* ------------------------------------------- */
    /* Efecto Hover (al pasar el ratón) */
    /* ------------------------------------------- */

    /* Aplica un efecto suave al pasar el ratón */
    .dashboard-table tr:not(.cabecera-tabla):not(.total-row):hover {
        background-color: #e9ecef !important; /* Gris aún más claro que el cebra */
        opacity: 0.95;
    }

    /* ------------------------------------------- */
    /* Estilo de la Fila Seleccionada */
    /* ------------------------------------------- */

    /* Clase por defecto de ASP.NET para la fila seleccionada */
    .table tr.GridViewSelectRow {
        background-color: #d1ecf1 !important; /* Azul claro para destacar */
        border-left: 5px solid var(--dash-accent-color); /* Barra de acento lateral */
        font-weight: bold; /* Opcional: hace el texto negrita */
        transition: background-color 0.2s;
    }

    /* ------------------------------------------- */
    /* Efecto Hover (al pasar el ratón) */
    /* ------------------------------------------- */

    /* Aplica un efecto suave al pasar el ratón */
    .table tr:not(.cabecera-tabla):not(.total-row):hover {
        background-color: #e9ecef !important; /* Gris aún más claro que el cebra */
        opacity: 0.95;
    }