/* Fix para problemas de layout comunes */

/* ============================================
   TAMAÑO DE FUENTE BASE - AdminLTE
   ============================================ */

/* Tamaño de fuente base de AdminLTE */
html {
    font-size: 14px !important;
}

body {
    font-size: 14px !important;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    line-height: 1.42857143 !important;
}

/* Prevenir scroll horizontal no deseado */
body,
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

* {
    max-width: 100vw;
}

.wrapper {
    overflow-x: hidden;
}

/* Asegurar que el overlay no cause problemas */
.overlay {
    display: none !important;
}

.overlay.show,
.overlay.active {
    display: block !important;
}

/* Fix para sidebar en vista móvil */
@media (max-width: 991px) {
    .sidebar-mini.sidebar-collapse .main-sidebar {
        transform: translateX(-230px);
    }
}

/* Asegurar que el contenido principal no se salga */
.content-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

/* Fix para tablas que se salen */
.table-responsive {
    overflow-x: auto;
}

/* Fix para gráficas de Highcharts */
.highcharts-container {
    max-width: 100%;
}

/* ============================================
   ESTILOS ADMINLTE - Fondo gris claro
   ============================================ */

/* Fondo gris claro del área principal (AdminLTE color) */
body {
    background-color: #ecf0f5 !important;
}

.content-wrapper,
main,
.wrapper {
    background-color: #ecf0f5 !important;
}

/* Mejorar cards del dashboard */
.box,
.info-box,
.small-box,
.panel {
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

/* Espaciado del contenido */
.content {
    padding: 15px;
    min-height: 250px;
}

.content-header {
    padding: 15px;
}

/* ============================================
   FIX DROPDOWNS - Ocultar cuando no están activos
   ============================================ */

/* Dropdowns de Bootstrap 3 - FORZAR que funcionen */
/* Bootstrap 3 muestra los dropdowns cuando el contenedor tiene .open */
/* Usar máxima especificidad y !important para asegurar que funcione */
table .btn-group.open>.dropdown-menu,
table .dropdown.open>.dropdown-menu,
.btn-group.open>.dropdown-menu,
.dropdown.open>.dropdown-menu,
.open>.dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegurar posicionamiento y z-index correcto en tablas */
table .btn-group {
    position: relative;
}

table .btn-group.open>.dropdown-menu {
    z-index: 1050 !important;
    position: absolute !important;
}

/* Fix específico para dropdown de notificaciones */
.navbar .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
}

/* ============================================
   ESTILOS ADMINLTE - Boxes y Paneles
   ============================================ */

/* Box header con borde inferior */
.box-header {
    padding: 10px;
    border-bottom: 1px solid #f4f4f4;
}

.box-header.with-border {
    border-bottom: 1px solid #f4f4f4;
}

.box-body {
    padding: 10px;
}

.box-footer {
    padding: 10px;
    border-top: 1px solid #f4f4f4;
}

/* Box coloreados */
.box.box-primary {
    border-top-color: #3c8dbc;
}

.box.box-info {
    border-top-color: #00c0ef;
}

.box.box-success {
    border-top-color: #00a65a;
}

.box.box-warning {
    border-top-color: #f39c12;
}

.box.box-danger {
    border-top-color: #dd4b39;
}

/* ============================================
   ESTILOS ADMINLTE - Botones
   ============================================ */

/* Asegurar que los botones tengan el tamaño correcto */
.btn {
    font-size: 14px !important;
    padding: 6px 12px !important;
    border-radius: 3px;
}

.btn-sm {
    font-size: 12px !important;
    padding: 5px 10px !important;
}

.btn-xs {
    font-size: 12px !important;
    padding: 1px 5px !important;
}

.btn-lg {
    font-size: 18px !important;
    padding: 10px 16px !important;
}

/* Colores de botones AdminLTE */
.btn-primary {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.btn-primary:hover {
    background-color: #333333 !important;
    border-color: #000000 !important;
}

.btn-success {
    background-color: #00a65a !important;
    border-color: #008d4c !important;
}

.btn-success:hover {
    background-color: #008d4c !important;
    border-color: #007e3d !important;
}

.btn-info {
    background-color: #00c0ef !important;
    border-color: #00acd6 !important;
}

.btn-info:hover {
    background-color: #00acd6 !important;
    border-color: #0097bc !important;
}

.btn-warning {
    background-color: #f39c12 !important;
    border-color: #e08e0b !important;
    color: #fff !important;
}

.btn-warning:hover {
    background-color: #e08e0b !important;
    border-color: #c87f0a !important;
}

.btn-danger {
    background-color: #dd4b39 !important;
    border-color: #d73925 !important;
}

.btn-danger:hover {
    background-color: #d73925 !important;
    border-color: #c23321 !important;
}

/* ============================================
   ESTILOS ADMINLTE - Tablas
   ============================================ */

/* Tablas con fondo blanco */
.table {
    background-color: #fff;
    font-size: 14px !important;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: 8px !important;
    font-size: 14px !important;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.table>thead>tr>th {
    font-weight: bold;
    border-bottom: 2px solid #ddd;
    vertical-align: bottom;
}

/* Tablas striped */
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

/* Tablas bordered */
.table-bordered {
    border: 1px solid #ddd;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
    border: 1px solid #ddd;
}

/* Hover en tablas */
.table-hover>tbody>tr:hover {
    background-color: #f5f5f5;
}

/* ============================================
   ESTILOS ADMINLTE - Form Controls
   ============================================ */

/* Inputs y selects */
.form-control {
    font-size: 14px !important;
    height: 34px !important;
    padding: 6px 12px !important;
    border-radius: 3px;
    border: 1px solid #d2d6de;
}

.form-control:focus {
    border-color: #3c8dbc;
    box-shadow: none;
}

/* Labels */
.control-label,
label {
    font-size: 14px !important;
    font-weight: normal;
    color: #333;
}

/* ============================================
   ESTILOS ADMINLTE - Small Box (Dashboard widgets)
   ============================================ */

.small-box {
    border-radius: 2px;
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.small-box>.inner {
    padding: 10px;
}

.small-box h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}

.small-box p {
    font-size: 15px;
}

.small-box .icon {
    transition: all .3s linear;
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0, 0, 0, 0.15);
}

.small-box:hover {
    text-decoration: none;
    color: #f9f9f9;
}

.small-box:hover .icon {
    font-size: 95px;
}

/* ============================================
   ESTILOS TW-DW-BTN - Unificar con btn de Bootstrap
   ============================================ */

/* Base: tw-dw-btn - negro con texto e iconos blancos */
.tw-dw-btn {
    display: inline-block;
    padding: 6px 12px !important;
    margin-bottom: 0;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    color: #fff !important;
    background-color: #000 !important;
    border-color: #000 !important;
    transition: all 0.2s ease-in-out;
}

.tw-dw-btn:hover,
.tw-dw-btn:focus {
    color: #fff !important;
    background-color: #333 !important;
    border-color: #333 !important;
    text-decoration: none;
}

.tw-dw-btn:active,
.tw-dw-btn.active {
    background-image: none;
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.tw-dw-btn:disabled,
.tw-dw-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    box-shadow: none;
}

/* Tamaños */
.tw-dw-btn-xs {
    padding: 1px 5px !important;
    font-size: 12px !important;
    line-height: 1.5;
    border-radius: 3px;
}

.tw-dw-btn-sm {
    padding: 5px 10px !important;
    font-size: 12px !important;
    line-height: 1.5;
    border-radius: 3px;
}

.tw-dw-btn-lg {
    padding: 10px 16px !important;
    font-size: 18px !important;
    line-height: 1.3333333;
    border-radius: 3px;
}

/* Colores - Primary (negro) */
.tw-dw-btn-primary,
.tw-dw-btn.tw-dw-btn-primary {
    color: #fff !important;
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.tw-dw-btn-primary:hover,
.tw-dw-btn-primary:focus,
.tw-dw-btn.tw-dw-btn-primary:hover,
.tw-dw-btn.tw-dw-btn-primary:focus {
    color: #fff !important;
    background-color: #333333 !important;
    border-color: #000000 !important;
}

/* Colores - Success (verde) */
.tw-dw-btn-success,
.tw-dw-btn.tw-dw-btn-success {
    color: #fff !important;
    background-color: #00a65a !important;
    border-color: #008d4c !important;
}

.tw-dw-btn-success:hover,
.tw-dw-btn-success:focus,
.tw-dw-btn.tw-dw-btn-success:hover,
.tw-dw-btn.tw-dw-btn-success:focus {
    color: #fff !important;
    background-color: #008d4c !important;
    border-color: #007e3d !important;
}

/* Colores - Info (azul claro) */
.tw-dw-btn-info,
.tw-dw-btn.tw-dw-btn-info {
    color: #fff !important;
    background-color: #00c0ef !important;
    border-color: #00acd6 !important;
}

.tw-dw-btn-info:hover,
.tw-dw-btn-info:focus,
.tw-dw-btn.tw-dw-btn-info:hover,
.tw-dw-btn.tw-dw-btn-info:focus {
    color: #fff !important;
    background-color: #00acd6 !important;
    border-color: #0097bc !important;
}

/* Colores - Warning (amarillo) */
.tw-dw-btn-warning,
.tw-dw-btn.tw-dw-btn-warning {
    color: #fff !important;
    background-color: #f39c12 !important;
    border-color: #e08e0b !important;
}

.tw-dw-btn-warning:hover,
.tw-dw-btn-warning:focus,
.tw-dw-btn.tw-dw-btn-warning:hover,
.tw-dw-btn.tw-dw-btn-warning:focus {
    color: #fff !important;
    background-color: #e08e0b !important;
    border-color: #c87f0a !important;
}

/* Colores - Danger/Error (rojo) */
.tw-dw-btn-danger,
.tw-dw-btn-error,
.tw-dw-btn.tw-dw-btn-danger,
.tw-dw-btn.tw-dw-btn-error {
    color: #fff !important;
    background-color: #dd4b39 !important;
    border-color: #d73925 !important;
}

.tw-dw-btn-danger:hover,
.tw-dw-btn-danger:focus,
.tw-dw-btn-error:hover,
.tw-dw-btn-error:focus,
.tw-dw-btn.tw-dw-btn-danger:hover,
.tw-dw-btn.tw-dw-btn-danger:focus,
.tw-dw-btn.tw-dw-btn-error:hover,
.tw-dw-btn.tw-dw-btn-error:focus {
    color: #fff !important;
    background-color: #d73925 !important;
    border-color: #c23321 !important;
}

/* Outline variants - deben verse como botones normales con borde */

.tw-dw-btn-outline.tw-dw-btn-primary {
    color: #000000 !important;
    background-color: transparent !important;
    border-color: #000000 !important;
}

.tw-dw-btn-outline.tw-dw-btn-primary:hover,
.tw-dw-btn-outline.tw-dw-btn-primary:focus {
    color: #fff !important;
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.tw-dw-btn-outline.tw-dw-btn-success {
    color: #00a65a !important;
    background-color: transparent !important;
    border-color: #00a65a !important;
}

.tw-dw-btn-outline.tw-dw-btn-success:hover,
.tw-dw-btn-outline.tw-dw-btn-success:focus {
    color: #fff !important;
    background-color: #00a65a !important;
    border-color: #00a65a !important;
}

.tw-dw-btn-outline.tw-dw-btn-info {
    color: #00c0ef !important;
    background-color: transparent !important;
    border-color: #00c0ef !important;
}

.tw-dw-btn-outline.tw-dw-btn-info:hover,
.tw-dw-btn-outline.tw-dw-btn-info:focus {
    color: #fff !important;
    background-color: #00c0ef !important;
    border-color: #00c0ef !important;
}

.tw-dw-btn-outline.tw-dw-btn-warning {
    color: #f39c12 !important;
    background-color: transparent !important;
    border-color: #f39c12 !important;
}

.tw-dw-btn-outline.tw-dw-btn-warning:hover,
.tw-dw-btn-outline.tw-dw-btn-warning:focus {
    color: #fff !important;
    background-color: #f39c12 !important;
    border-color: #f39c12 !important;
}

.tw-dw-btn-outline.tw-dw-btn-danger,
.tw-dw-btn-outline.tw-dw-btn-error {
    color: #dd4b39 !important;
    background-color: transparent !important;
    border-color: #dd4b39 !important;
}

.tw-dw-btn-outline.tw-dw-btn-danger:hover,
.tw-dw-btn-outline.tw-dw-btn-danger:focus,
.tw-dw-btn-outline.tw-dw-btn-error:hover,
.tw-dw-btn-outline.tw-dw-btn-error:focus {
    color: #fff !important;
    background-color: #dd4b39 !important;
    border-color: #dd4b39 !important;
}

/* ============================================
   FIX ICON + TEXT ALIGNMENT IN BUTTONS
   ============================================ */

/* Ensure icons and text are vertically aligned in flex buttons */
.tw-dw-btn svg,
.tw-dw-btn .icon {
    vertical-align: middle;
    flex-shrink: 0;
}

/* Ensure the flex container properly aligns items */
.tw-dw-btn.tw-flex {
    align-items: center !important;
}

/* Fix for any inline display issues */
.tw-dw-btn.tw-flex.tw-items-center {
    display: inline-flex !important;
    align-items: center !important;
}