/* ==============================================  */
/* TEMA NEGRO PERSONALIZADO - ALIVAL S.A ALI-PROD  */
/* ==============================================  */

/* === SKIN-BLACK - CUSTOM THEME === HARRY AGREDO  */

/* Barra lateral */
.fixed-sidebar .navbar-static-side {
    background-color: #2c2c2c !important;
}

/* Encabezado de navegación */
.fixed-sidebar .navbar-static-top,
.navbar-header .navbar-brand {
    background-color: #2c2c2c !important;
    color: #fff !important;
}

/* Elemento del logo */
.fixed-sidebar .nav-header .logo-element {
    color: #fff !important;
    background-color: transparent !important;
}

/* Enlaces principales */
.fixed-sidebar .nav > li > a {
    color: #fff !important;
}

    .fixed-sidebar .nav > li.active > a,
    .fixed-sidebar .nav > li > a:hover {
        background-color: #444 !important;
        color: #fff !important;
    }

/* Submenús */
.fixed-sidebar .nav-second-level > li > a {
    color: #ddd !important;
}

    .fixed-sidebar .nav-second-level > li > a:hover {
        background-color: #444 !important;
        color: #fff !important;
    }

/* Hover elegante en navegación */
.nav-second-level li a:hover,
.nav > li > a:hover {
    color: #fff !important;
    background-color: #444 !important;
}

/* Botón negro personalizado */
.btn.btn-black {
    background-color: #2c2c2c !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

    .btn.btn-black:hover {
        background-color: #444 !important;
        color: #fff !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

/* Dropdown perfil */
.nav-header .profile-element,
.nav-header .dropdown-menu {
    background-color: transparent !important;
    color: #fff !important;
}

/* Fondo general */
body.skin-black {
    background-color: #2c2c2c;
}

/* Botón minimizar */
.navbar .navbar-header .navbar-minimalize.btn-primary {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #ddd;
}

    .navbar .navbar-header .navbar-minimalize.btn-primary:hover {
        background-color: #f1f1f1 !important;
        color: #000 !important;
        border: 1px solid #bbb;
    }

/* Fuerza total del fondo del nav-header */
body.skin-black .fixed-sidebar .nav-header,
body.skin-black .nav-header {
    background-color: #2c2c2c !important;
    background-image: none !important;
    border: none !important;
    padding: 8px !important;
    text-align: center !important;
    box-shadow: none !important;
}

    /* Ajustes visuales para imagen del perfil/logo */
    .fixed-sidebar .nav-header .profile-element,
    .fixed-sidebar .nav-header .profile-element span {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: block;
        width: 100%;
        text-align: center;
    }

        /* Imagen del logo */
        .fixed-sidebar .nav-header .profile-element img {
            width: 80%; /* Puedes usar 150px si prefieres tamaño fijo */
            height: auto;
            object-fit: contain; /* <-- Ajuste sin deformar */
            display: inline-block;
            border-radius: 0 !important;
            background-color: transparent !important;
            border: none !important;
            padding: 0 !important;
            box-shadow: none !important;
        }

/* Menú activo */
.nav > li.active,
.nav > li.active > a {
    background: none !important;
    background-color: #444 !important;
    color: #fff !important;
    border-left: none !important;
}

/* Fondo transparente en wrapper y cajas */
.wrapper-content {
    background-color: transparent !important;
}

.ibox {
    background-color: transparent !important;
    border: none !important;
}

/* Contenedor formulario */
.form-container {
    background-color: #f8f8f8;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Imagen dentro de formularios u otras secciones */
.format-image-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 5px;
}

    .format-image-container img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }


/* Fondo del contenido (más claro que los paneles) */
body.dark-mode #page-wrapper,
body.dark-mode .wrapper-content {
    background-color: #6c7488 !important; /* más claro que #5a6276 */
    color: #e0e0e0;
}

/* Tarjetas o paneles (más suaves) */
body.dark-mode .ibox,
body.dark-mode .ibox-content {
    background-color: #5a6276 !important; /* antes: #444c5e */
    color: #e0e0e0;
}

/* Títulos de paneles sin reborde claro */
body.dark-mode .ibox-title {
    background-color: #c8cdd6 !important;
    color: #000000 !important;
    border: none !important; /* Elimina todos los bordes */
    box-shadow: none !important; /* Por si acaso hay sombra */
}

/* Enlaces */
body.dark-mode a {
    color: #1ab394 !important;
}

/* Inputs, selects, textareas, etc. */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #6a7286 !important; /* antes: #555d70 */
    color: #ffffff !important;
    border-color: #888 !important;
}

/* Etiquetas y texto estático */
body.dark-mode label,
body.dark-mode .form-control-static,
body.dark-mode .control-label {
    color: #eaeaea !important;
}

/* Transición suave */
body,
.wrapper-content,
.ibox,
input,
select,
textarea,
.ibox-title {
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Solo cambia .white-bg dentro del #page-wrapper, y no en otros lados como el header */
    body.dark-mode #page-wrapper .white-bg:not(.top-navigation):not(.navbar) {
        background-color: #4a5266 !important;
        color: #e0e0e0 !important;
    }

    /* Evita bordes blancos innecesarios */
    body.dark-mode #page-wrapper .white-bg:not(.top-navigation):not(.navbar) {
        border-color: #5a6276 !important;
    }

    body.dark-mode input[readonly],
    body.dark-mode textarea[readonly] {
        background-color: #3b3f4a !important;
        color: #b0b0b0 !important;
        border-color: #666 !important;
        cursor: not-allowed !important;
        font-style: italic;
    }

    body.dark-mode .footer,
    body.dark-mode #footer {
        background-color: #5a6276 !important; /* mismo color que los paneles principales */
        color: #e0e0e0 !important; /* texto visible */
        border-top: 1px solid #777 !important; /* opcional para separar visualmente */
    }

/* Notificaciones - asegurar visibilidad en ambos modos */
.dropdown-alerts .text-theme-aware {
    color: #333 !important; /* Color oscuro para modo claro */
    padding: 5px;
    border-radius: 3px;
}

body.dark-mode .dropdown-alerts .text-theme-aware {
    color: #fff !important; /* Color claro para modo oscuro */
    background-color: transparent !important;
}

/* Estilo específico para el mensaje de "No tienes notificaciones" */
.dropdown-alerts li.divider + li .text-theme-aware {
    font-weight: bold;
    display: block;
    padding: 10px;
}

/* Fondo del menú de notificaciones */
.dropdown-alerts {
    background-color: #fff !important;
    color: #333 !important;
}

body.dark-mode .dropdown-alerts {
    background-color: #5a6276 !important;
    color: #e0e0e0 !important;
}


.ibox-title {
    background-color: #4f4f4f !important; /* O usa #4f4f4f si prefieres más claro */
    color: #ffffff !important; /* Para que el texto resalte */
    font-weight: bold;
    font-size: 15px;
    border-radius: 2px 2px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #000 !important; /* Fondo negro */
    border-color: #000 !important;
    color: #fff !important; /* Texto blanco para contraste */
}

input.form-control.input-sm,
select.form-control.input-sm {
    font-size: 11px !important;
    padding: 3px 8px !important;
    height: 28px !important;
}

/* Corrección visual para controles deshabilitados */
select[disabled],
input[disabled],
textarea[disabled],
.aspNetDisabled {
    font-size: 13px !important;
    color: #676a6c !important;
    background-color: #f5f5f5 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Unificar tamaño de fuente en todos los controles ASP.NET */
input.form-control,
select.form-control,
textarea.form-control,
.aspNetDisabled {
    font-size: 11px !important;
}

/* Espaciado entre campos cuando se apilan (pantallas pequeñas) */
@media (max-width: 991px) {
    .btn-responsive {
        width: 100% !important;
        margin-bottom: 30px; /* Espacio entre botones */
    }

    .ibox .row .col-md-2,
    .ibox .row .col-md-3 {
        margin-bottom: 10px;
    }
}


/* Espaciado personalizado entre botones en formularios */
.btn-spacing {
    margin-right: 15px !important;
    margin-bottom: 8px !important; /* útil si se apilan en dispositivos pequeños */
}

/* ========== FLATPICKR MODO OSCURO SOLO PARA .skin-black ========== */
.skin-black .flatpickr-calendar {
    background-color: #2f2f2f;
    color: #f0f0f0;
    border: 1px solid #444;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.skin-black .flatpickr-months .flatpickr-month {
    background-color: #1e1e1e;
    color: #ffffff;
}

.skin-black .flatpickr-prev-month,
.skin-black .flatpickr-next-month {
    color: #fff;
}

    .skin-black .flatpickr-prev-month:hover,
    .skin-black .flatpickr-next-month:hover {
        background-color: #333;
    }

.skin-black .flatpickr-day,
.skin-black .flatpickr-hour,
.skin-black .flatpickr-minute {
    background-color: #2f2f2f;
    color: #f0f0f0;
}

    .skin-black .flatpickr-day.selected,
    .skin-black .flatpickr-time input:focus {
        background-color: #111;
        color: #fff;
        border-color: #444;
    }

    .skin-black .flatpickr-day:hover {
        background-color: #444;
    }

.skin-black .flatpickr-time {
    background-color: #2f2f2f !important;
    border-top: 1px solid #444 !important;
}

    .skin-black .flatpickr-time input {
        background-color: #2f2f2f !important;
        color: #f0f0f0 !important;
        border: none !important;
        font-weight: bold;
    }

    .skin-black .flatpickr-time .flatpickr-time-separator {
        color: #ccc !important;
    }

    .skin-black .flatpickr-time input:focus,
    .skin-black .flatpickr-time input:hover {
        background-color: #111 !important;
        color: #fff !important;
        outline: none;
        box-shadow: 0 0 4px #000 inset;
        border-radius: 3px;
    }

    .skin-black .flatpickr-time .numInput.flatpickr-minute:focus,
    .skin-black .flatpickr-time .numInput.flatpickr-hour:focus {
        background-color: #1a1a1a !important;
        color: #00d8ff !important;
    }

.skin-black .flatpickr-am-pm {
    background-color: #2f2f2f;
    color: #f0f0f0;
}

    .skin-black .flatpickr-am-pm:hover {
        background-color: #555;
    }

.textbox-with-icon {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .textbox-with-icon input {
        padding-right: 30px; /* espacio para el ícono */
    }

    .textbox-with-icon .icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa;
        font-size: 14px;
        pointer-events: none;
    }

.centered-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px; /* Puedes ajustar este valor según necesites */
}


/* Estilo principal del contenedor de SweetAlert2 */
.swal2-popup {
    background-color: #2c2c2c !important; /* fondo oscuro igual que sidebar */
    color: #f1f1f1 !important; /* texto claro */
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    padding: 25px 30px !important;
    width: 100% !important;
    max-width: 400px !important; /* ancho más cómodo */
}

/* Título y contenido */
.swal2-title,
.swal2-html-container {
    color: #e0e0e0 !important;
    font-weight: 600;
}

/* Icono animado (éxito, info, etc.) */
.swal2-icon.swal2-success .swal2-success-ring {
    border: 4px solid #4a90e2 !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #4a90e2 !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: #e74c3c !important;
}

.swal2-icon.swal2-warning {
    border-color: #f1c40f !important;
    color: #f1c40f !important;
}

.swal2-icon.swal2-info {
    border-color: #3498db !important;
    color: #3498db !important;
}

/* Botón de confirmación */
.swal2-confirm {
    background-color: #4a90e2 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 10px 24px !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.6) !important;
    transition: background-color 0.3s ease;
}

    /* Hover confirmación */
    .swal2-confirm:hover {
        background-color: #357ABD !important;
    }

/* Botón de cancelación */
.swal2-cancel {
    background-color: #444 !important;
    color: #ddd !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 10px 24px !important;
    margin-left: 10px !important;
    font-weight: 600;
    box-shadow: none !important;
    transition: background-color 0.3s ease;
}

    /* Hover cancelación */
    .swal2-cancel:hover {
        background-color: #555 !important;
    }

    /* Enfocado */
    .swal2-confirm:focus,
    .swal2-cancel:focus {
        outline: none !important;
        box-shadow: 0 0 8px rgba(74, 144, 226, 0.7) !important;
    }

/* ======== MODO CLARO (cuando body no tiene clase dark-mode) ======== */

.gridview-inspinia {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px; /* Coincide con input-sm */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #f3f3f4;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: none; /* Quitamos borde externo */
}

    /* ENCABEZADOS */
    .gridview-inspinia th {
        background-color: #585858;
        color: #ffffff;
        padding: 6px 8px;
        text-align: center;
        font-weight: 500;
        font-size: 11px;
        text-transform: uppercase;
        border: none; /* Eliminamos bordes blancos */
    }

        /* Redondeo solo arriba */
        .gridview-inspinia th:first-child {
            border-top-left-radius: 8px;
        }

        .gridview-inspinia th:last-child {
            border-top-right-radius: 8px;
        }

    /* CELDAS */
    .gridview-inspinia td {
        padding: 6px 8px;
        font-size: 11px;
        background-color: #ffffff;
        text-align: center;
        vertical-align: middle;
        border: none; /* Quitamos bordes verticales */
        border-bottom: 1px solid #e7eaec; /* Solo línea divisoria horizontal */
        white-space: nowrap; /* <- Scroll horizontal en moviles si hay muchas columnas */
    }

    /* Alternancia de filas */
    .gridview-inspinia tr:nth-child(even) td {
        background-color: #f9f9f9;
    }

    /* Hover */
    .gridview-inspinia tr:hover td {
        background-color: #e0e0e0;
        transition: background-color 0.2s ease-in-out;
    }

    /* Bordes redondeados inferiores */
    .gridview-inspinia tr:last-child td:first-child {
        border-bottom-left-radius: 8px;
    }

    .gridview-inspinia tr:last-child td:last-child {
        border-bottom-right-radius: 8px;
    }

    /* PAGINADOR */
    .gridview-inspinia .pager {
        background-color: #f3f3f4;
        color: #333;
        padding: 8px;
        text-align: center;
        border-top: 1px solid #e7eaec;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

        .gridview-inspinia .pager a {
            color: #1ab394;
            margin: 0 6px;
            text-decoration: none;
            font-weight: bold;
        }

            .gridview-inspinia .pager a:hover {
                text-decoration: underline;
            }


/* Modo oscuro para GridView */

/* Fondo general y texto */
.dark-mode .gridview-inspinia {
    background-color: #1c1c1c !important; /* fondo oscuro base */
    color: #c8cdd6 !important; /* texto general claro con tu color */
    box-shadow: 0 1px 4px rgba(255,255,255,0.05);
}

    /* Encabezados en gris claro con texto negro */
    .dark-mode .gridview-inspinia th {
        background-color: #c8cdd6 !important; /* fondo con tu color */
        color: #000000 !important; /* texto negro */
        padding: 6px 8px;
        text-align: center;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        border: none;
    }

    /* Celdas en fondo oscuro medio */
    .dark-mode .gridview-inspinia td {
        background-color: #2b2b2b !important;
        color: #c8cdd6 !important;
        border-bottom: 1px solid #444;
        white-space: nowrap; /* <- Scroll horizontal en moviles si hay muchas columnas */
    }

    /* Alternancia de filas en tono oscuro ligeramente diferente */
    .dark-mode .gridview-inspinia tr:nth-child(even) td {
        background-color: #252525 !important;
    }

    /* Hover más claro para filas */
    .dark-mode .gridview-inspinia tr:hover td {
        background-color: #3a3a3a !important;
        transition: background-color 0.2s ease-in-out;
    }

    /* Bordes redondeados inferiores (mantener iguales) */
    .dark-mode .gridview-inspinia tr:last-child td:first-child {
        border-bottom-left-radius: 8px;
    }

    .dark-mode .gridview-inspinia tr:last-child td:last-child {
        border-bottom-right-radius: 8px;
    }

    /* Paginador en modo oscuro con fondo oscuro */
    .dark-mode .gridview-inspinia .pager {
        background-color: #1c1c1c !important;
        color: #c8cdd6 !important;
        border-top: 1px solid #444;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

        .dark-mode .gridview-inspinia .pager a {
            color: #66d9ef !important; /* azul claro elegante */
            font-weight: bold;
        }

            .dark-mode .gridview-inspinia .pager a:hover {
                text-decoration: underline;
            }


/* Estilos solo para modo oscuro */
.dark-mode .my-modal-content {
    background-color: #1c1c1c;
    color: #ddd;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.dark-mode .my-modal-header {
    background-color: #2a2a2a;
    color: #c8cdd6;
    border-bottom: 1px solid #444;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.dark-mode .my-modal-body {
    background-color: #1e1e1e;
    color: #ddd;
}

.dark-mode .my-modal-btn {
    background-color: #2a2a2a;
    color: #fff;
    border: none;
    font-weight: bold;
    padding: 8px 18px;
    border-radius: 6px;
}

    .dark-mode .my-modal-btn:hover {
        background-color: #444;
        color: #c8cdd6;
    }

.dark-mode .modal-header .fa {
    margin-right: 6px;
    color: #c8cdd6;
}

/* Estilos por defecto (modo claro) */
.my-modal-content {
    background-color: #fff;
    color: #333;
    border-radius: 8px;
}

.my-modal-header {
    background-color: #f5f5f5;
    color: #222;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.my-modal-body {
    background-color: #fff;
    color: #333;
}

.my-modal-btn {
    background-color: #e7e7e7;
    color: #333;
    border: 1px solid #ccc;
    font-weight: bold;
    padding: 8px 18px;
    border-radius: 6px;
}

    .my-modal-btn:hover {
        background-color: #d5d5d5;
        color: #000;
    }

/* Botón de cerrar (la "X") en modo claro */
.modal-header .close {
    color: #000;
    opacity: 0.8;
}

/* Estilo alternativo solo en modo oscuro si necesitas refinar aún más */
.dark-mode .btn-black {
    background-color: #1b1b1b !important;
    border-color: #333 !important;
    color: #c8cdd6 !important;
}

    .dark-mode .btn-black:hover {
        background-color: #2a2a2a !important;
        border-color: #444 !important;
        color: #fff !important;
    }

/* Encabezado en MODO CLARO (por defecto) */
.modal-header {
    background-color: #e0e0e0; /* gris claro más visible */
    color: #222222;
    border-bottom: 1px solid #ddd;
}

/* Encabezado en MODO OSCURO */
.dark-mode .modal-header {
    background-color: #1f1f1f;
    color: #c8cdd6 !important;
    border-bottom: 1px solid #444;
}

    /* Botón de cerrar (la "X") en modo oscuro — CORREGIDO */
    .dark-mode .modal-header .close {
        color: #c8cdd6 !important;
        opacity: 1 !important;
        font-weight: bold;
        text-shadow: none;
        transition: color 0.2s ease;
    }

        .dark-mode .modal-header .close:hover {
            color: #ffffff !important;
        }


.dark-mode .breadcrumb {
    background-color: transparent !important;
    padding: 0;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    color: #c8cdd6; /* Color de texto claro y suave */
    font-size: 13px;
    font-weight: normal;
}

    .dark-mode .breadcrumb > li + li:before {
        content: " / ";
        color: #666; /* Separador suave */
    }

    .dark-mode .breadcrumb a {
        color: #00d1c1; /* Puedes ajustar a tu color de enlace activo */
        text-decoration: none;
    }

        .dark-mode .breadcrumb a:hover {
            color: #66fff4;
            text-decoration: underline;
        }

.ibox {
    border-radius: 8px;
    overflow: hidden; /* Opcional, para que el contenido no se salga */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Opcional, para dar un poco más de elegancia */
}

.ibox-title {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #f3f3f4; /* Opcional, para destacar */
    padding: 10px 15px;
}

.ibox-content {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #ffffff;
}

.wrapper.border-bottom.white-bg {
    border-radius: 8px;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Opcional para elegancia */
    margin-bottom: 0px; /* Espacio extra debajo */
}

/* Personalizar checkbox (solo funciona parcialmente sin JS para estilos más avanzados) */
input[type="checkbox"] {
    accent-color: #888; /* Soporte moderno: Chrome, Edge, Firefox */
}

/* Estilo general (modo claro) */
.peso-card {
    background-color: #f9f9f9;
    padding: 16px 20px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
    margin-top: 8px;
    transition: all 0.3s ease-in-out;
}

    .peso-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }

    .peso-card label {
        font-weight: bold;
        color: #2f4050;
        margin-bottom: 6px;
        display: block;
    }

/* Estilo en modo oscuro */
body.dark-mode .peso-card {
    background-color: #495066; /* un poco más oscuro que #5a6276 */
    border: 1px solid #777; /* borde tenue */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

    body.dark-mode .peso-card:hover {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
    }

    body.dark-mode .peso-card label {
        color: #eaeaea;
    }