/* ============================================
   ESTILOS GLOBALES - NIYAGO
   ============================================ */

/* Cambiar barra superior */
.main-header .navbar {
    background-color: #f2923d !important;
}

/* Cambiar el logo (texto) */
.main-header .logo {
    background-color: #f2923d !important;
    color: white !important;
    font-weight: bold;
}

/* Cambiar sidebar */
.main-sidebar {
    background-color: #ffffff !important;
}

/* Cambiar active tab en sidebar */
.sidebar-menu > li.active > a {
    background-color: #080808 !important;
    color: white !important;
}

/* Cambiar infoBox y valueBox */
.info-box, .small-box {
    background-color: #f2923d !important;
    color: white !important;
}

.info-box-icon, .small-box .icon {
    background-color: #f2923d !important;
}

/* Cambiar box headers */
.box-header, .box-header h3, .box-header h2, .box-header h1 {
    background-color: #f2923d !important;
    color: white !important;
}

.box {
    background-color: white !important;
    color: black !important;
    border: 2px solid #ffffff !important;
}

/* Cambiar el color del botón de minimizar en los box */
.box-header .btn,
.box-header .btn-box-tool,
.box-header .btn.btn-box-tool,
.box-header .btn.btn-box-tool > i {
    color: white !important;
}

/* Cambiar el color del botón de minimizar al pasar el mouse */
.box-header .btn:hover,
.box-header .btn-box-tool:hover,
.box-header .btn.btn-box-tool:hover,
.box-header .btn.btn-box-tool > i:hover {
    color: #dddddd !important;
}

/* Cambiar color del botón de abrir/cerrar el sidebar */
.main-header .sidebar-toggle {
    color: white !important;
    background-color: #f2923d !important;
}

.main-header .sidebar-toggle:hover {
    color: #dddddd !important;
    background-color: #080808 !important;
}

/* Botones personalizados */
.box-naranja .btn,
.box-naranja .btn-default,
.box-naranja .download-btn {
    background-color: #f8cfa9 !important;
    color: black !important;
    border-color: #f8cfa9 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}

.box-naranja .btn:hover,
.box-naranja .btn-default:hover {
    background-color: #f6b76a !important;
    border-color: #f6b76a !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(1px);
}

/* Botón 3D */
.boton-3d {
    background-color: #080808 !important;
    color: white !important;
    border-color: #080808 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}

.boton-3d:hover {
    background-color: #8c8b8b !important;
    border-color: #8c8b8b !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(1px);
}

/* Small box */
.small-box {
    border-radius: 9px !important;
}

/* Ajusta el ancho y alineación de la columna de checkboxes */
th.col-chk, td.col-chk {
    width: 40px !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 2px !important;
}

/* Reduce altura de las filas */
table tr td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Elimina márgenes extra de prettyCheckbox */
.pretty {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* Columnas centradas */
th.col-center, td.col-center {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Columna archivo */
th.col-archivo, td.col-archivo {
    width: 300px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Columna descargar */
th.col-descargar, td.col-descargar {
    width: 120px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* ============================================
   CONTROL DE SCROLL Y LAYOUT
   ============================================ */

/* No scroll horizontal global */
html, body, .content-wrapper, .right-side {
    max-width: 100%;
    overflow-x: hidden;
}

/* Solo las cajas con clase .scroll-x tendrán scroll horizontal para tablas */
.box.scroll-x .box-body {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Títulos largos deben partir línea */
.box-header h1, .box-header h2, .box-header h3 {
    white-space: normal;
    word-break: break-word;
}

/* Botones: permitir salto de línea en texto largo */
.btn, .download-btn {
    white-space: normal;
}

/* Tablas DataTables: envolver texto y fijar layout */
table.dataTable {
    table-layout: fixed;
    width: 100% !important;
}

table.dataTable th, table.dataTable td {
    white-space: normal !important;
    word-wrap: break-word !important;
}


/* ============================================
   CLASES REUTILIZABLES
   ============================================ */

/* Botón ancho 40% */
.btn-width-40 {
    width: 40% !important;
}

/* Botón ancho 150px */
.btn-width-150 {
    width: 150px !important;
}

/* Botón ancho 200px */
.btn-width-200 {
    width: 200px !important;
}

/* Contenedor flex alineado a la derecha */
.flex-end-gap {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Contenedor flex centrado */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor flex espacio entre elementos */
.flex-between {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Caja beige con padding */
.box-beige {
    background-color: #fef5e7;
    padding: 20px;
    border-radius: 8px;
}

/* Caja beige con overflow */
.box-beige-scroll {
    background-color: #fef5e7;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
}

/* Bordes de separación */
.border-right-gray {
    border-right: 1px solid #dcdcdc;
    padding-right: 20px;
}

.border-left-gray {
    border-left: 1px solid #dcdcdc;
    padding-left: 40px;
}

.border-bottom-gray {
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 15px;
}

/* Iframe para PDFs */
.iframe-pdf {
    height: 600px;
    width: 100%;
}