/* ============================================
   ESTILOS MODERNOS GLOBALES PARA TODO EL SISTEMA
   Solo cambios visuales - Sin tocar funcionalidad
   Mantiene Bootstrap 3.3.7 y AdminLTE originales
   NO TOCA EL CABEZOTE (main-header)
   ============================================ */

/* ============================================
   CAJAS (BOX) - Contenedores principales
   ============================================ */

.box {
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    /* Importante:
       Dejamos overflow visible para que los dropdowns, tooltips
       y menús de acciones (especialmente en la última fila de las tablas)
       no queden cortados por el borde de la caja. */
    overflow: visible;
    margin-bottom: 20px;
}

.box:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}

/* Bordes superiores de color para diferentes tipos de box */
.box-primary {
    border-top: 4px solid #667eea !important;
}

.box-success {
    border-top: 4px solid #11998e !important;
}

.box-warning {
    border-top: 4px solid #f5576c !important;
}

.box-danger {
    border-top: 4px solid #fa709a !important;
}

.box-info {
    border-top: 4px solid #667eea !important;
}

.box-default {
    border-top: 4px solid #95a5a6 !important;
}

/* Header de las cajas */
.box-header {
    background: transparent !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 15px 20px !important;
    border-radius: 16px 16px 0 0 !important;
}

.box-header.with-border {
    border-bottom: 1px solid #f0f0f0 !important;
}

.box-header .box-title {
    font-weight: 600;
    font-size: 18px;
    color: #2c3e50;
    margin: 0;
}

.box-body {
    padding: 20px !important;
}

.box-footer {
    background: #f8f9fa !important;
    border-top: 1px solid #f0f0f0 !important;
    padding: 15px 20px !important;
    border-radius: 0 0 16px 16px !important;
}

/* ============================================
   BOTONES
   ============================================ */

.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    color: #ffffff !important;
}

.btn-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(17, 153, 142, 0.3) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4) !important;
    color: #ffffff !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(245, 87, 108, 0.3) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4) !important;
    color: #ffffff !important;
}

.btn-danger {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(250, 112, 154, 0.3) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: linear-gradient(135deg, #fee140 0%, #fa709a 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(250, 112, 154, 0.4) !important;
    color: #ffffff !important;
}

.btn-info {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    color: #ffffff !important;
}

.btn-default {
    background: #ffffff !important;
    color: #2c3e50 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background: #f8f9fa !important;
    border-color: #667eea !important;
    color: #667eea !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

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

.btn-lg {
    padding: 12px 24px !important;
    font-size: 16px !important;
}

/* ============================================
   FORMULARIOS
   ============================================ */

.form-control {
    border-radius: 8px !important;
    border: 2px solid #e0e0e0 !important;
    padding: 10px 15px !important;
    transition: all 0.3s ease !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
}

/* SELECTS MÁS ALTOS - Mejor visibilidad */
select.form-control,
.form-control select,
select {
    min-height: 48px !important;
    height: 48px !important;
    padding: 14px 15px !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
}

/* Selects dentro de input-group también más altos */
.input-group select.form-control,
.input-group .form-control select {
    min-height: 48px !important;
    height: 48px !important;
    padding: 14px 15px !important;
}

.form-control:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f8f9fa !important;
    opacity: 0.7;
}

.input-group-addon {
    border-radius: 8px 0 0 8px !important;
    border: 2px solid #e0e0e0 !important;
    background-color: #f8f9fa !important;
    border-right: none !important;
}

.input-group .form-control:first-child {
    border-left: none !important;
}

.input-group .form-control:last-child {
    border-left: none !important;
}

.input-group-addon:last-child {
    border-left: none !important;
    border-right: 2px solid #e0e0e0 !important;
    border-radius: 0 8px 8px 0 !important;
}

.input-lg {
    padding: 14px 18px !important;
    font-size: 16px !important;
}

.input-sm {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

/* ============================================
   TABLAS
   ============================================ */

.table {
    border-radius: 8px !important;
    overflow: hidden;
}

.table-bordered {
    border: 1px solid #e0e0e0 !important;
}

.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 #e0e0e0 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f8f9fa !important;
}

.table > thead > tr > th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 12px 15px !important;
    text-align: center !important;
}

.table > tbody > tr > td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
}

.table > tbody > tr:hover {
    background-color: #f0f4ff !important;
    transition: background-color 0.2s ease !important;
}

/* ============================================
   MODALES
   ============================================ */

.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    padding: 20px 25px !important;
    border-radius: 16px 16px 0 0 !important;
}

.modal-header .close {
    color: #ffffff !important;
    opacity: 0.9;
    text-shadow: none !important;
    font-size: 28px !important;
}

.modal-header .close:hover {
    opacity: 1;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.modal-title {
    font-weight: 600 !important;
    font-size: 20px !important;
}

.modal-body {
    padding: 25px !important;
}

.modal-footer {
    border-top: 1px solid #f0f0f0 !important;
    padding: 15px 25px !important;
    background: #f8f9fa !important;
    border-radius: 0 0 16px 16px !important;
}

/* ============================================
   LABELS Y BADGES
   ============================================ */

.label {
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-weight: 500 !important;
    font-size: 11px !important;
}

.label-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.label-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}

.label-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.label-danger {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}

.label-info {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.badge {
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-weight: 500 !important;
}

/* ============================================
   ALERTAS
   ============================================ */

.alert {
    border-radius: 12px !important;
    border: none !important;
    padding: 15px 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.alert-success {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
    color: #2c3e50 !important;
    border-left: 4px solid #11998e !important;
}

.alert-info {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%) !important;
    color: #2c3e50 !important;
    border-left: 4px solid #667eea !important;
}

.alert-warning {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
    color: #2c3e50 !important;
    border-left: 4px solid #f5576c !important;
}

.alert-danger {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
    color: #2c3e50 !important;
    border-left: 4px solid #fa709a !important;
}

/* ============================================
   PANELES
   ============================================ */

.panel {
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    margin-bottom: 20px;
}

.panel-heading {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 15px 20px !important;
    border: none !important;
}

.panel-body {
    padding: 20px !important;
}

.panel-footer {
    background: #f8f9fa !important;
    border-top: 1px solid #f0f0f0 !important;
    border-radius: 0 0 16px 16px !important;
    padding: 15px 20px !important;
}

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

.nav-tabs {
    border-bottom: 2px solid #e0e0e0 !important;
}

.nav-tabs > li > a {
    border-radius: 8px 8px 0 0 !important;
    border: none !important;
    margin-right: 5px;
    color: #7f8c8d !important;
    transition: all 0.3s ease !important;
}

.nav-tabs > li > a:hover {
    background-color: #f8f9fa !important;
    border-color: transparent !important;
    color: #667eea !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

.nav-pills > li > a {
    border-radius: 8px !important;
    color: #7f8c8d !important;
    transition: all 0.3s ease !important;
}

.nav-pills > li > a:hover {
    background-color: #f8f9fa !important;
    color: #667eea !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

.breadcrumb > li > a {
    color: #667eea !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb > li > a:hover {
    color: #764ba2 !important;
}

.breadcrumb > .active {
    color: #7f8c8d !important;
}

/* ============================================
   CONTENT HEADER
   ============================================ */

.content-header {
    margin-bottom: 20px;
}

.content-header h1 {
    font-weight: 700;
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 5px;
}

.content-header h1 small {
    font-weight: 400;
    color: #7f8c8d;
    font-size: 18px;
}

/* ============================================
   INPUT GROUPS
   ============================================ */

.input-group {
    border-radius: 8px !important;
}

.input-group-btn .btn {
    border-radius: 0 8px 8px 0 !important;
}

/* ============================================
   CHECKBOXES Y RADIOS (iCheck)
   ============================================ */

.icheckbox_flat-blue,
.iradio_flat-blue {
    border-radius: 4px !important;
}

/* ============================================
   DATATABLES - RESPONSIVE GLOBAL
   ============================================ */

/* Wrapper responsive para todas las tablas */
.ventas-table-wrapper,
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 20px;
}

/* Asegurar que todas las tablas DataTables sean responsive */
.dataTables_wrapper {
    border-radius: 8px;
    /* Importante:
       Usamos overflow: visible para que los menús desplegables
       (por ejemplo, botones de acciones en la última fila)
       no queden cortados dentro del contenedor de la tabla. */
    overflow: visible;
    width: 100%;
}

/* Estilo base para TODAS las tablas DataTables del sistema */
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td {
    text-align: center;
    vertical-align: middle;
    padding: 6px 4px;
}

/* Espacio inferior extra para que los dropdowns de la última fila
   no queden pegados a la paginación ni al borde inferior */
table.dataTable {
    margin-bottom: 40px;
}

/* Centrar y elevar los dropdowns de acciones (incluyendo dropup) */
table.dataTable .btn-group.dropup .dropdown-menu,
table.dataTable .btn-group .dropdown-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Asegurar que los dropdowns (Acciones, etc.) queden siempre por encima
   de la paginación y de cualquier otro contenido dentro de las tablas */
.box .dropdown-menu,
.dataTables_wrapper .dropdown-menu {
    z-index: 1050 !important; /* similar a los modales de Bootstrap */
}

/* Tablas dentro de wrappers responsive */
.ventas-table-wrapper table,
.table-responsive-wrapper table {
    width: 100% !important;
    min-width: 600px;
}

/* Tablas dt-responsive */
table.dt-responsive {
    width: 100% !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .ventas-table-wrapper,
    .table-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    .ventas-table-wrapper table,
    .table-responsive-wrapper table,
    table.dt-responsive {
        min-width: 800px;
    }
    
    /* Ocultar columnas menos importantes en móviles */
    .dataTables_wrapper .dataTables_scrollHeadInner,
    .dataTables_wrapper .dataTables_scrollBody {
        overflow-x: auto;
    }
    
    /* Ajustar botones de DataTables en móviles */
    .dt-buttons {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .dt-button {
        margin: 2px !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: 8px !important;
    border: 2px solid #e0e0e0 !important;
    padding: 8px 12px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: 8px !important;
    border: 2px solid #e0e0e0 !important;
    padding: 6px 10px !important;
}

/* ============================================
   BOTONES DE ACCIONES - ICONOS INDIVIDUALES
   Sistema global para reemplazar dropdowns
   ============================================ */

/* Contenedor de acciones */
.acciones-ventas,
.acciones-tabla {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

/* Botones de acción individuales */
.acciones-ventas .btn-accion,
.acciones-tabla .btn-accion {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #555;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}

.acciones-ventas .btn-accion:hover,
.acciones-tabla .btn-accion:hover {
    background-color: #f0f0f0;
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
}

.acciones-ventas .btn-accion:active,
.acciones-tabla .btn-accion:active {
    transform: translateY(0);
}

.acciones-ventas .btn-accion.disabled,
.acciones-ventas .btn-accion[disabled],
.acciones-tabla .btn-accion.disabled,
.acciones-tabla .btn-accion[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Colores de botones */
.acciones-ventas .btn-accion.btn-primary,
.acciones-tabla .btn-accion.btn-primary {
    background-color: #667eea;
    border-color: #667eea;
    color: #fff;
}

.acciones-ventas .btn-accion.btn-primary:hover,
.acciones-tabla .btn-accion.btn-primary:hover {
    background-color: #5568d3;
    border-color: #5568d3;
    color: #fff;
}

.acciones-ventas .btn-accion.btn-danger,
.acciones-tabla .btn-accion.btn-danger {
    background-color: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

.acciones-ventas .btn-accion.btn-danger:hover,
.acciones-tabla .btn-accion.btn-danger:hover {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

.acciones-ventas .btn-accion.btn-success,
.acciones-tabla .btn-accion.btn-success {
    background-color: #2ecc71;
    border-color: #2ecc71;
    color: #fff;
}

.acciones-ventas .btn-accion.btn-success:hover,
.acciones-tabla .btn-accion.btn-success:hover {
    background-color: #27ae60;
    border-color: #27ae60;
    color: #fff;
}

.acciones-ventas .btn-accion.btn-warning,
.acciones-tabla .btn-accion.btn-warning {
    background-color: #f39c12;
    border-color: #f39c12;
    color: #fff;
}

.acciones-ventas .btn-accion.btn-warning:hover,
.acciones-tabla .btn-accion.btn-warning:hover {
    background-color: #e67e22;
    border-color: #e67e22;
    color: #fff;
}

.acciones-ventas .btn-accion.btn-info,
.acciones-tabla .btn-accion.btn-info {
    background-color: #3498db;
    border-color: #3498db;
    color: #fff;
}

.acciones-ventas .btn-accion.btn-info:hover,
.acciones-tabla .btn-accion.btn-info:hover {
    background-color: #2980b9;
    border-color: #2980b9;
    color: #fff;
}

/* Tooltips mejorados */
.acciones-ventas .btn-accion[data-toggle="tooltip"],
.acciones-tabla .btn-accion[data-toggle="tooltip"] {
    cursor: help;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .acciones-ventas,
    .acciones-tabla {
        gap: 3px;
    }
    
    .acciones-ventas .btn-accion,
    .acciones-tabla .btn-accion {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    margin: 0 2px !important;
    transition: all 0.3s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

/* ============================================
   PRODUCTOS LIST
   ============================================ */

.products-list .item {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 15px 0 !important;
    transition: background-color 0.2s ease !important;
}

.products-list .item:hover {
    background-color: #f8f9fa !important;
}

.products-list .item:last-child {
    border-bottom: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .box {
        border-radius: 12px !important;
    }
    
    .btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
    }
}

/* ============================================
   ANIMACIONES SUAVES
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.box,
.panel,
.modal-content {
    animation: fadeIn 0.3s ease-out;
}

/* ============================================
   EXCLUSIONES - NO TOCAR CABEZOTE
   ============================================ */

/* Asegurar que el cabezote no se modifique */
.main-header,
.main-header *,
.sidebar,
.sidebar * {
    /* Mantener estilos originales del cabezote */
}

/* ============================================
   UTILIDADES ADICIONALES
   ============================================ */

.text-primary {
    color: #667eea !important;
}

.text-success {
    color: #11998e !important;
}

.text-warning {
    color: #f5576c !important;
}

.text-danger {
    color: #fa709a !important;
}

.bg-primary {
    background-color: #667eea !important;
}

.bg-success {
    background-color: #11998e !important;
}

.bg-warning {
    background-color: #f5576c !important;
}

.bg-danger {
    background-color: #fa709a !important;
}