/* ============================================
   TEMA NEGRO ELEGANTE - Dark Theme
   ============================================

   Tema oscuro con botones negros, letras blancas,
   checkboxes y selects con estilo negro
*/

/* ============================================
   BOTONES - Negro con letras blancas
   ============================================ */

/* Botones primarios - Negro elegante */
.btn-primary {
    background-color: #2c2c2c !important;
    background-image: none !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #1a1a1a !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Botones success - Negro con toque verde */
.btn-success {
    background-color: #2c2c2c !important;
    background-image: none !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #1a1a1a !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Botones info - Negro */
.btn-info {
    background-color: #2c2c2c !important;
    background-image: none !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #1a1a1a !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Botones warning - Negro con texto blanco */
.btn-warning {
    background-color: #2c2c2c !important;
    background-image: none !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #1a1a1a !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Botones danger - Negro */
.btn-danger {
    background-color: #2c2c2c !important;
    background-image: none !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #1a1a1a !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Botones default - Negro */
.btn-default {
    background-color: #2c2c2c !important;
    background-image: none !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: #1a1a1a !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Todos los botones .btn */
.btn {
    background-color: #2c2c2c !important;
    background-image: none !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

.btn:hover,
.btn:focus,
.btn:active {
    background-color: #1a1a1a !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* ============================================
   CHECKBOXES Y RADIO BUTTONS - Negro
   ============================================ */

/* Radio buttons con estilo negro */
.radio-inline input[type="radio"] {
    border: 2px solid #2c2c2c !important;
    background-color: #fff !important;
}

.radio-inline input[type="radio"]:checked {
    background-color: #fff !important;
    border-color: #2c2c2c !important;
    box-shadow: inset 0 0 0 4px #2c2c2c !important;
}

.radio-inline input[type="radio"]:hover {
    border-color: #1a1a1a !important;
}

/* Checkboxes con estilo negro */
input[type="checkbox"]:not(.input-icheck) {
    border: 2px solid #2c2c2c !important;
    background-color: #fff !important;
}

input[type="checkbox"]:not(.input-icheck):checked {
    background-color: #2c2c2c !important;
    border-color: #2c2c2c !important;
}

/* Marca de verificación (checkmark) con color blanco */
input[type="checkbox"]:not(.input-icheck):checked::after {
    border-color: #ffffff !important;
}

input[type="checkbox"]:not(.input-icheck):hover {
    border-color: #1a1a1a !important;
}


.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
    background-color: #2c2c2c !important;
}

/* ============================================
   SELECT Y INPUTS - Estilo Negro
   ============================================ */

/* Select2 - Negro */
.select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid #2c2c2c !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #2c2c2c transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #2c2c2c transparent !important;
}

/* Select2 dropdown */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #e0e0e0 !important;
    color: #000 !important;
}

/* Select2 hover - texto negro */
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover,
.select2-container--default .select2-results__option[aria-selected]:hover {
    color: #000 !important;
}

.select2-container--default .select2-results__option:hover {
    background-color: #e0e0e0 !important;
    color: #000 !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f0f0f0 !important;
}

/* Select2 multiple */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #2c2c2c !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #2c2c2c !important;
    border: 1px solid #1a1a1a !important;
    color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important;
}

/* Form controls focus */
.form-control:focus {
    border-color: #2c2c2c !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(44, 44, 44, .6) !important;
}

/* ============================================
   ICONOS DEL HEADER
   ============================================ */

/* Iconos en el header - Negro */
.main-header .navbar .nav>li>a>.fa,
.main-header .navbar .nav>li>a>.glyphicon,
.main-header .navbar .nav>li>a>.ion {
    color: #2c2c2c !important;
}

.main-header .navbar .nav>li>a:hover>.fa,
.main-header .navbar .nav>li>a:hover>.glyphicon,
.main-header .navbar .nav>li>a:hover>.ion {
    color: #1a1a1a !important;
}

/* Logo e iconos del sidebar */
.main-sidebar {
    background-color: #2c2c2c !important;
}

.sidebar-menu>li>a {
    color: #fff !important;
}

.sidebar-menu>li>a>.fa,
.sidebar-menu>li>a>.glyphicon,
.sidebar-menu>li>a>.ion {
    color: #fff !important;
}

/* ============================================
   TABS Y NAVEGACIÓN - Negro
   ============================================ */

/* Tabs activas - Negro */
div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa {
    background: #2c2c2c !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #2c2c2c !important;
}

div.pos-tab-menu div.list-group>a .glyphicon,
div.pos-tab-menu div.list-group>a .fa {
    color: #2c2c2c !important;
}

/* Nav tabs */
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    background-color: #fff !important;
    border-color: #2c2c2c !important;
    border-bottom-color: transparent !important;
    color: #2c2c2c !important;
}

.nav-tabs>li>a:hover {
    border-color: #2c2c2c #2c2c2c #ddd !important;
}

/* ============================================
   DROPDOWN MENUS - Negro
   ============================================ */

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: #2c2c2c !important;
    color: #fff !important;
}

/* ============================================
   PAGINATION - Negro
   ============================================ */

.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>.active>a:focus,
.pagination>.active>span,
.pagination>.active>span:hover,
.pagination>.active>span:focus {
    background-color: #2c2c2c !important;
    border-color: #2c2c2c !important;
    color: #fff !important;
}

.pagination>li>a,
.pagination>li>span {
    color: #2c2c2c !important;
}

.pagination>li>a:hover,
.pagination>li>a:focus,
.pagination>li>span:hover,
.pagination>li>span:focus {
    background-color: #f0f0f0 !important;
    border-color: #ddd !important;
    color: #2c2c2c !important;
}

/* ============================================
   DRAG HANDLER Y OTROS ICONOS - Negro
   ============================================ */

.drag_handler_icon,
.drag_handler_icon:before,
.drag_handler_icon:after {
    background: #2c2c2c !important;
}

/* ============================================
   SCROLLBAR - Negro
   ============================================ */

::-webkit-scrollbar-thumb {
    background-color: #2c2c2c !important;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #1a1a1a !important;
}

/* ============================================
   ELEMENTOS ACTIVOS Y SELECCIONADOS - Negro
   ============================================ */

table.dataTable tbody>tr.selected {
    background-color: #2c2c2c !important;
    color: #fff !important;
}

table.dataTable tbody>tr.selected td {
    color: #fff !important;
}

/* ============================================
   BADGES Y LABELS - Negro
   ============================================ */

.badge-primary,
.label-primary {
    background-color: #2c2c2c !important;
}

.badge-success,
.label-success {
    background-color: #2c2c2c !important;
}

.badge-info,
.label-info {
    background-color: #2c2c2c !important;
}

.badge-warning,
.label-warning {
    background-color: #2c2c2c !important;
}

.badge-danger,
.label-danger {
    background-color: #2c2c2c !important;
}

/* ============================================
   INPUT GROUPS - Negro
   ============================================ */

.input-group-addon {
    background-color: #2c2c2c !important;
    border-color: #2c2c2c !important;
    color: #fff !important;
}

.input-group-btn>.btn {
    background-color: #2c2c2c !important;
    border-color: #2c2c2c !important;
    color: #fff !important;
}

/* ============================================
   PROGRESS BARS - Negro
   ============================================ */

.progress-bar {
    background-color: #2c2c2c !important;
}

/* ============================================
   ALERTS - Con bordes negros
   ============================================ */

.alert-success {
    border-color: #2c2c2c !important;
}

.alert-info {
    border-color: #2c2c2c !important;
}

.alert-warning {
    border-color: #2c2c2c !important;
}

.alert-danger {
    border-color: #2c2c2c !important;
}

/* ============================================
   DATEPICKER - Negro
   ============================================ */

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: #2c2c2c !important;
    background-image: none !important;
    color: #fff !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background-color: #f0f0f0 !important;
    border-color: #2c2c2c !important;
}

/* ============================================
   LINKS - Negro
   ============================================ */

a {
    color: #2c2c2c !important;
}

a:hover,
a:focus {
    color: #1a1a1a !important;
}

/* Excepciones - links que deben mantenerse blancos */
.btn a,
.sidebar-menu a,
.dropdown-menu a {
    /* Estos ya están manejados arriba */
}

/* ============================================
   MODAL BUTTONS - Negro
   ============================================ */

.modal-footer .btn {
    background-color: #2c2c2c !important;
    border-color: #2c2c2c !important;
    color: #fff !important;
}

/* ============================================
   TOGGLE SWITCHES - Negro
   ============================================ */

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
    background: #2c2c2c !important;
    color: #fff !important;
}