/* ===============================
   ODIN tech ERP — custom.css
   Paleta de marca
   Primary:   #6A1B9A (Deep Orchid)
   Secondary: #C2185B (Fuchsia)
   Dark bg:   #1A1A2E (Cosmic Depth)
   Cyan:      #00E5FF
   =============================== */

/* Fuente */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

p, span, a, button, input, label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* ===============================
   SKIN-BLACK OVERRIDES
   Neutraliza lo que el skin black
   pisa innecesariamente
   =============================== */

/* Badges y labels — skin black los pone grises */
.label-primary, .badge-primary { background-color: #6A1B9A !important; }
.label-success, .badge-success { background-color: #27ae60 !important; }
.label-info,    .badge-info    { background-color: #6A1B9A !important; }
.label-warning, .badge-warning { background-color: #FF5722 !important; }
.label-danger,  .badge-danger  { background-color: #C2185B !important; }

/* Progress bars */
.progress-bar              { background: linear-gradient(90deg, #6A1B9A, #C2185B) !important; }
.progress-bar-success      { background: #27ae60 !important; }
.progress-bar-warning      { background: #FF5722 !important; }
.progress-bar-danger       { background: #C2185B !important; }

/* Links globales */
a { color: #6A1B9A; }
a:hover { color: #C2185B; }

/* Select / inputs focus */
.form-control:focus {
    border-color: #6A1B9A !important;
    box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.12) !important;
}

/* Checkbox y radio con marca */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: #6A1B9A;
}

/* Skin black pone el body en gris oscuro — override */
.skin-black .wrapper,
.skin-black .main-sidebar,
.skin-black .left-side {
    background-color: #1A1A2E !important;
}

/* ===============================
   SIDEBAR
   =============================== */

#sidebarItemExpanded {
    background-color: #1A1A2E;
    box-shadow: none !important;
    border-right: 1px solid rgba(106, 27, 154, 0.3);
}

#sidebarCollapsed {
    background-color: #1A1A2E;
    color: #ffffff;
    border-right: 1px solid rgba(106, 27, 154, 0.3);
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
}

/* Links del menú */
.sidebar-menu a {
    color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.18s ease;
    border-left: 3px solid transparent !important;
}

/* Item activo */
.sidebar-menu .active > a {
    background: linear-gradient(90deg, rgba(106,27,154,0.5), rgba(194,24,91,0.25)) !important;
    color: #ffffff !important;
    border-left: 3px solid #C2185B !important;
    font-weight: 700;
}

/* Hover */
.sidebar-menu a:hover {
    background: rgba(106, 27, 154, 0.25) !important;
    color: #ffffff !important;
    border-left: 3px solid #C2185B !important;
}

/* Íconos en item activo con cian */
.sidebar-menu .active > a i {
    color: #00E5FF !important;
}

/* ===============================
   NAVBAR / HEADER
   =============================== */

.navbar-static-top {
    background-color: #1A1A2E !important;
    border-bottom: 1px solid rgba(106, 27, 154, 0.4) !important;
    z-index: 820 !important;
}

.main-header {
    background-color: #1A1A2E !important;
    border-bottom: 1px solid rgba(106, 27, 154, 0.4) !important;
    z-index: 820 !important;
}

/* Título en el header */
.main-header .logo {
    background-color: #1A1A2E !important;
    border-right: 1px solid rgba(106, 27, 154, 0.3) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

.main-header .navbar {
    background-color: #1A1A2E !important;
}

/* Iconos del header */
.main-header .navbar .nav > li > a {
    color: rgba(255, 255, 255, 0.65) !important;
}
.main-header .navbar .nav > li > a:hover {
    color: #ffffff !important;
    background: rgba(106, 27, 154, 0.3) !important;
}

.sidebar-toggle {
    background-color: #1A1A2E !important;
    color: rgba(255, 255, 255, 0.65) !important;
    z-index: 821 !important;
}
.sidebar-toggle:hover {
    background: rgba(106, 27, 154, 0.3) !important;
    color: #ffffff !important;
}

/* ===============================
   SIDEBAR MOBILE
   =============================== */

@media (max-width: 767px) {
    .main-sidebar {
        top: 0 !important;
    }
    .main-sidebar .sidebar {
        padding-top: 55px !important;
    }
}

/* ===============================
   BODY / CONTENT
   =============================== */

.content-wrapper {
    background-color: #f8f9fc !important;
}

/* ===============================
   BOX HEADERS
   =============================== */

.box.box-custom > .box-header {
    background: linear-gradient(135deg, #6A1B9A, #C2185B) !important;
    color: white !important;
}

/* ===============================
   VALUEBOX MODERNO
   =============================== */

.valuebox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;

    background: #ffffff;
    padding: 20px 22px;

    border-radius: 16px;
    border: 1px solid #ececec;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);

    transition: all 0.2s ease;
    overflow: hidden;
}

.valuebox:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(106, 27, 154, 0.12);
}

/* Barra superior gradiente de marca */
.valuebox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #6A1B9A, #C2185B);
}

.valuebox-icon {
    font-size: 24px;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(106, 27, 154, 0.1);
    color: #6A1B9A;
}

.valuebox-content {
    display: flex;
    flex-direction: column;
}

.valuebox-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: #1A1A2E;
}

.valuebox-label {
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #888;
    font-weight: 500;
}

.valuebox-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* ===============================
   PAYMENT CARD
   =============================== */

.payment-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    border: 1px solid #f0f0f0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    min-width: 0;
    box-sizing: border-box;
    word-break: break-word;
    overflow: hidden;
}
.payment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(106, 27, 154, 0.1);
}
.payment-title {
    font-size: 10px;
    font-weight: 700;
    color: #6A1B9A;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}
.payment-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.payment-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: #888;
}
.payment-amount {
    font-size: 11px;
    font-weight: 700;
    color: #1A1A2E;
}

/* ===============================
   AVATAR / FOTO DE PERFIL
   =============================== */

.circular-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid rgba(106, 27, 154, 0.4);
    box-shadow: 0 4px 12px rgba(106, 27, 154, 0.2);
    transition: transform 0.2s ease-in-out;
}

.circular-image:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* ===============================
   DASHBOARD — Layout
   =============================== */

.dash-tab {
    margin-top: 15px;
}

.dash-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #6A1B9A;
    border-bottom: 2px solid #6A1B9A;
    width: fit-content;
    padding-bottom: 3px;
    margin-bottom: 14px;
}

.dash-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 1.25rem;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 1.25rem;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

.dash-cards-grid > *,
.dash-kpi-grid > * {
    min-width: 0;
    box-sizing: border-box;
}

.dash-period-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.dash-period-input {
    min-width: 180px;
    max-width: 250px;
    flex: 1;
}

.dash-period-label {
    color: #888;
    font-size: 13px;
}

.dash-btn-row {
    margin-top: 10px;
}

/* ===============================
   COMPONENTES REUTILIZABLES
   =============================== */

.card-panel {
    border: 1px solid #e8e8e8;
    padding: 14px;
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
}

.card-panel-mb {
    margin-bottom: 14px;
}

.col-divider {
    border-right: 1px solid #e0e0e0;
    padding-right: 10px;
    box-shadow: 4px 0 6px rgba(0, 0, 0, 0.05);
    margin-left: 15px;
}

.overflow-panel {
    max-height: 300px;
    overflow-y: auto;
}

/* ===============================
   DROPDOWN CUSTOM
   =============================== */

#MyDropDown {
    width: 80%;
    height: 40px;
    margin-bottom: 10px;
    text-align: left;
}

/* ===============================
   EVENTO CARD
   =============================== */

.evento-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: 420px;
}

.evento-header {
    margin-bottom: 18px;
}

.evento-label {
    font-size: 13px;
    font-weight: 600;
    color: #6A1B9A;
    margin-bottom: 6px;
}

.evento-summary {
    margin-bottom: 20px;
}

.resumen-text {
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
}

.resumen-text strong {
    font-size: 22px;
    font-weight: 800;
    color: #1A1A2E;
}

.event-progress-bar {
    width: 100%;
    height: 10px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.event-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6A1B9A, #C2185B);
    border-radius: 10px;
    transition: width 0.4s ease;
}

.event-progress-percent {
    font-size: 13px;
    font-weight: 600;
    color: #1A1A2E;
}

.evento-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.break-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
}

.break-row strong {
    font-size: 15px;
    font-weight: 600;
    color: #1A1A2E;
}

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

@media (max-width: 768px) {

    .dash-cards-grid,
    .dash-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .dash-period-input {
        max-width: 100%;
        min-width: 0;
    }

    .col-sm-3, .col-sm-4, .col-sm-6 {
        width: 100% !important;
        float: none !important;
    }

    .content-wrapper,
    .tab-content,
    .dash-tab {
        overflow-x: hidden !important;
    }

    .nav-tabs {
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .evento-card {
        max-width: 100%;
    }

    .valuebox {
        padding: 16px;
    }

    .valuebox-value {
        font-size: 22px;
    }
}

/* ===============================
   BOTONES — Paleta corporativa
   =============================== */

/* Selectize touch-friendly (mínimo 44px) */
.selectize-input {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

/* Tabla carro — scroll horizontal en móvil */
#carro_compra_actual_wrapper {
    overflow-x: auto !important;
}

/* Base compartida */
.btn {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.3px;
}

/* Default — ghost púrpura */
.btn-default {
    background: transparent !important;
    color: #6A1B9A !important;
    border: 1.5px solid #6A1B9A !important;
    box-shadow: none !important;
}
.btn-default:hover,
.btn-default:focus {
    background: rgba(106, 27, 154, 0.08) !important;
    color: #6A1B9A !important;
    border-color: #6A1B9A !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(106, 27, 154, 0.15) !important;
}

/* Primary — gradiente de marca */
.btn-primary {
    background: linear-gradient(135deg, #6A1B9A, #C2185B) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(194, 24, 91, 0.3) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(106, 27, 154, 0.4) !important;
    color: white !important;
}

/* Success — verde esmeralda */
.btn-success {
    background: linear-gradient(135deg, #1e8449, #27ae60) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3) !important;
}
.btn-success:hover,
.btn-success:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(39, 174, 96, 0.4) !important;
    color: white !important;
}

/* Info — púrpura sólido */
.btn-info {
    background: #6A1B9A !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(106, 27, 154, 0.3) !important;
}
.btn-info:hover,
.btn-info:focus {
    background: #7B1FA2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(106, 27, 154, 0.4) !important;
    color: white !important;
}

/* Warning — naranja corporativo */
.btn-warning {
    background: linear-gradient(135deg, #e64a19, #FF5722) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3) !important;
}
.btn-warning:hover,
.btn-warning:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(255, 87, 34, 0.4) !important;
    color: white !important;
}

/* Danger — fuchsia */
.btn-danger {
    background: linear-gradient(135deg, #ad1457, #C2185B) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(194, 24, 91, 0.3) !important;
}
.btn-danger:hover,
.btn-danger:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(194, 24, 91, 0.4) !important;
    color: white !important;
}

/* Orange — redirige a gradiente marca */
.btn-orange {
    background: linear-gradient(135deg, #6A1B9A, #C2185B) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(194, 24, 91, 0.3) !important;
    transition: all 0.2s !important;
}
.btn-orange:hover,
.btn-orange:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(106, 27, 154, 0.4) !important;
    color: white !important;
}

/* ===============================
   MODALES — Estilo profesional
   =============================== */

/* Contenedor principal */
.modal-content {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Header */
.modal-header {
    background: linear-gradient(135deg, #1A1A2E 0%, #2d1b4e 100%) !important;
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(90deg, #6A1B9A, #C2185B) 1 !important;
    padding: 18px 22px !important;
}

.modal-title {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.4px;
}

/* Botón cerrar (×) */
.modal-header .close {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    font-size: 20px !important;
    text-shadow: none !important;
    transition: color 0.2s !important;
}
.modal-header .close:hover {
    color: #ffffff !important;
}

/* Body */
.modal-body {
    background: #ffffff !important;
    padding: 22px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #212121 !important;
}

/* Footer */
.modal-footer {
    background: #f8f9fc !important;
    border-top: 1px solid #ececec !important;
    padding: 14px 22px !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    border-radius: 0 0 16px 16px !important;
}

/* Backdrop más oscuro */
.modal-backdrop {
    background-color: #1A1A2E !important;
}
.modal-backdrop.in {
    opacity: 0.6 !important;
}

/* Labels dentro de modales */
.modal-body label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #6A1B9A !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

/* Inputs dentro de modales */
.modal-body .form-control {
    border-radius: 8px !important;
    border: 1.5px solid #e0e0e0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #1A1A2E !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
}
.modal-body .form-control:focus {
    border-color: #6A1B9A !important;
    box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.1) !important;
}

/* Separadores dentro de modales */
.modal-body hr {
    border-color: #f0f0f0 !important;
    margin: 14px 0 !important;
}

/* ===============================
   TABLAS — Headers globales
   =============================== */

/* Solo primera fila del thead (columnas) — fondo dark */
table.dataTable thead tr:first-child th,
table.dataTable thead tr:first-child td {
    background: linear-gradient(135deg, #1A1A2E 0%, #2d1b4e 100%) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #6A1B9A !important;
    padding: 10px 12px !important;
}

/* Segunda fila del thead (filtros "All") — fondo claro */
table.dataTable thead tr:nth-child(2) th,
table.dataTable thead tr:nth-child(2) td {
    background: #f8f6fc !important;
    padding: 6px 8px !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Inputs de filtro dentro del thead */
table.dataTable thead tr:nth-child(2) input {
    background: #ffffff !important;
    color: #1A1A2E !important;
    border: 1.5px solid #d0c4e8 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
table.dataTable thead tr:nth-child(2) input:focus {
    border-color: #6A1B9A !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(106,27,154,0.12) !important;
}

/* Ícono de ordenamiento */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    color: #C2185B !important;
    opacity: 1 !important;
}

/* Celdas body — solo tipografía, sin tocar color ni background */
table.dataTable tbody td {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    border-color: #f0f0f0 !important;
}

/* Hover sutil — sin !important para que formatStyle gane */
table.dataTable tbody tr:hover td {
    background-color: rgba(106, 27, 154, 0.05);
}

/* Borde de la tabla */
table.dataTable {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #ececec !important;
}

/* Footer DT (paginación) */
/* ── Paginación DT — estilo completo con contraste ── */

/* Botones inactivos: fondo lila claro, texto púrpura oscuro */
.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span {
    background-color: #f4f0f9 !important;
    color: #4a1a6e !important;
    border-color: rgba(106, 27, 154, 0.2) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Hover: fondo púrpura suave, texto púrpura */
.dataTables_wrapper .pagination > li > a:hover,
.dataTables_wrapper .pagination > li > span:hover {
    background-color: rgba(106, 27, 154, 0.15) !important;
    color: #6A1B9A !important;
    border-color: rgba(106, 27, 154, 0.4) !important;
}

/* Activo: gradiente oscuro, texto blanco */
.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > span,
.dataTables_wrapper .pagination > .active > a:focus,
.dataTables_wrapper .pagination > .active > a:hover,
.dataTables_wrapper .pagination > .active > span:focus,
.dataTables_wrapper .pagination > .active > span:hover {
    background: linear-gradient(135deg, #6A1B9A, #C2185B) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Deshabilitados: fondo transparente, texto gris */
.dataTables_wrapper .pagination > .disabled > a,
.dataTables_wrapper .pagination > .disabled > span,
.dataTables_wrapper .pagination > .disabled > a:hover,
.dataTables_wrapper .pagination > .disabled > span:hover {
    background-color: transparent !important;
    color: #999 !important;
    border-color: #e0e0e0 !important;
    cursor: default !important;
}

/* Texto info "Mostrando X de Y" */
.dataTables_wrapper .dataTables_info {
    color: #555 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding-top: 10px !important;
}

/* Selector de filas "Mostrar X entradas" */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: #555 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 6px !important;
    color: #1A1A2E !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
}

/* ===============================
   BOXES — Contenedores de gráficos
   =============================== */

/* Box general */
.box {
    border-radius: 14px !important;
    border: 1px solid #ececec !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}

/* Header de todos los boxes */
.box .box-header {
    background: linear-gradient(135deg, #1A1A2E 0%, #2d1b4e 100%) !important;
    padding: 12px 16px !important;
    border-bottom: 3px solid #6A1B9A !important;
}

.box .box-header .box-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #ffffff !important;
    letter-spacing: 0.4px !important;
}

/* Botones de colapsar/expandir en box */
.box .box-header .btn {
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 2px 6px !important;
}
.box .box-header .btn:hover {
    color: #ffffff !important;
}

/* Body del box */
.box .box-body {
    background: #ffffff !important;
    padding: 14px !important;
}

/* Box colapsado */
.box.collapsed-box .box-header {
    border-radius: 14px !important;
    border-image: none !important;
}

/* ===============================
   RESPONSIVE — Módulo Pedidos + Modales
   =============================== */

/* Modales: scroll vertical en pantallas pequeñas */
.modal-body {
    max-height: 75vh;
    overflow-y: auto;
}

/* Red de mesas visNetwork: soporte touch */
.vis-network {
    touch-action: pan-x pan-y !important;
}
#mesas_servir {
    touch-action: pan-x pan-y !important;
}

@media (max-width: 767px) {

    /* Modales: sin márgenes laterales en móvil */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
    .modal-content {
        border-radius: 12px !important;
    }
    .modal-body {
        padding: 14px !important;
        max-height: 65vh !important;
    }
    .modal-header {
        padding: 12px 14px !important;
    }
    .modal-title {
        font-size: 13px !important;
    }
    .modal-footer {
        padding: 10px 14px !important;
    }
    .modal-footer .btn {
        width: 100% !important;
        margin-bottom: 6px !important;
    }

    /* Botones mínimo touch-friendly (44px) */
    .btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    /* Pedidos: tabla Llevar ocupa ancho completo */
    #pedidoTable_llevar_wrapper {
        overflow-x: auto !important;
    }

    /* Red de mesas: altura reducida en móvil */
    #mesas_servir {
        height: 260px !important;
        min-height: 260px !important;
    }

    /* Panel de carro: inputs apilados en móvil */
    #panel_carro .selectize-input,
    #panel_carro .form-control {
        font-size: 14px !important;
    }

    /* Tabs de pedidos: scroll horizontal */
    .nav-tabs > li > a {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* DataTables: info + paginación en columna */
    .dataTables_info,
    .dataTables_paginate {
        text-align: center !important;
        float: none !important;
        display: block !important;
    }
}


/* ===============================
   MÓDULO PEDIDOS — Cards
   =============================== */

.ped-card-toolbar .btn {
    padding: 4px 8px !important;
    min-height: 30px !important;
    font-size: 12px !important;
}

/* Switch Cuenta — quitar margen por defecto del contenedor shiny */
.ped-card-toolbar .shiny-input-container {
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Indicadores en toolbar oscuro — no pisar los spans con color inline del porcentaje */
.ped-indicator-box .shiny-html-output {
    font-size: 11px;
    line-height: 1.4;
}

/* Input cantidad — más grande en tablet/mobile */
@media (max-width: 991px) {
    #cantidad_pedido {
        font-size: 22px !important;
        height: 54px !important;
        text-align: center !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        letter-spacing: 2px;
    }
}

@media (max-width: 767px) {
    .ped-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .ped-card-toolbar {
        width: 100%;
    }
    .ped-card-toolbar .btn {
        min-height: 38px !important;
    }
}


/* ===============================
   MÓDULO GENERAR ORDEN — Cards
   =============================== */

.go-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    margin-bottom: 14px;
    overflow: visible;
}

.go-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 14px 14px 0 0;
}

.go-header-orden {
    background: linear-gradient(135deg, #1A1A2E 0%, #3a1060 100%);
    border-bottom: 3px solid #6A1B9A;
}

.go-header-carro {
    background: linear-gradient(135deg, #1A1A2E 0%, #1a3050 100%);
    border-bottom: 3px solid #C2185B;
}

.go-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.go-body {
    padding: 16px;
}

.go-body-table {
    padding: 12px;
}

/* Toggle App Delivery */
.go-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f6fc;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    border: 1px solid #ede7f6;
}

.go-toggle-row .shiny-input-container {
    margin-bottom: 0 !important;
}

/* Etiquetas de sección */
.go-section-label {
    font-size: 10px;
    font-weight: 700;
    color: #6A1B9A;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding-bottom: 5px;
    margin-bottom: 8px;
    border-bottom: 2px solid #EDE7F6;
    display: block;
}

/* Fila cantidad + botón agregar */
.go-qty-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 10px;
}

.go-qty-input {
    flex: 1;
    min-width: 0;
}

.go-qty-btn {
    padding-bottom: 2px;
    flex-shrink: 0;
}

.go-field-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #6A1B9A !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    display: block;
    margin-bottom: 4px;
}

/* Fila switch promociones */
.go-switch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.go-switch-row .shiny-input-container {
    margin-bottom: 0 !important;
}

.go-switch-label {
    font-size: 11px;
    font-weight: 600;
    color: #444;
}

/* Botón comprar en header oscuro */
.go-header-carro .btn {
    padding: 5px 12px !important;
    min-height: 32px !important;
    font-size: 12px !important;
}

/* Responsive */
@media (max-width: 767px) {
    .go-qty-row {
        flex-direction: column;
        align-items: stretch;
    }
    .go-qty-btn {
        width: 100%;
    }
    .go-qty-btn .btn {
        width: 100% !important;
    }
    .go-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .go-header-carro .btn {
        width: 100% !important;
    }
}


/* ===============================
   PANEL CLIENTE WALKIN — Ficha
   =============================== */

.go-cliente-section {
    margin-bottom: 10px;
}

.go-cliente-ficha {
    background: #f8f4ff;
    border: 1px solid #d1c4e9;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 6px;
}

.go-cliente-nombre {
    font-size: 13px;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 2px 0;
}

.go-cliente-segmento {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.seg-nuevo    { background: #e3f2fd; color: #1565C0; }
.seg-frecuente { background: #e8f5e9; color: #2E7D32; }
.seg-vip      { background: #fff8e1; color: #F57F17; }
.seg-dormido  { background: #fce4ec; color: #c62828; }

.go-cliente-divider {
    border: none;
    border-top: 1px solid #d1c4e9;
    margin: 6px 0;
}

.go-cliente-label {
    font-size: 9px;
    font-weight: 700;
    color: #6A1B9A;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
}

.go-cliente-top3 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.go-cliente-top3-item {
    font-size: 11px;
    background: #ede7f6;
    color: #4527A0;
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 600;
}

.go-cliente-notas-text {
    font-size: 12px;
    color: #444;
    font-style: italic;
    margin: 0;
}

.go-cliente-notas-vacia {
    font-size: 11px;
    color: #aaa;
    margin: 0;
}

.go-cliente-cupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    background: #fff8e1;
    border: 1px dashed #F9A825;
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 4px;
}

.go-cliente-cupon-code {
    font-size: 12px;
    font-weight: 700;
    color: #E65100;
    letter-spacing: 1px;
}

.go-cliente-cupon .btn {
    padding: 3px 10px !important;
    font-size: 11px !important;
    min-height: 26px !important;
}

@media (max-width: 767px) {
    .go-cliente-ficha {
        padding: 8px 10px;
    }
    .go-cliente-cupon {
        flex-direction: column;
        align-items: flex-start;
    }
    .go-cliente-cupon .btn {
        width: 100% !important;
    }
    .go-cliente-top3 {
        gap: 3px;
    }
}

/* ===============================
   MÓDULO CAMPAÑAS — KPIs + preview
   =============================== */

.camp-kpi {
    background: #f8f4ff;
    border: 1px solid #d1c4e9;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    margin-bottom: 12px;
}
.camp-kpi-val {
    font-size: 26px;
    font-weight: bold;
    color: #1A1A2E;
    margin: 0 0 2px;
    line-height: 1.1;
}
.camp-kpi-lbl {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
}
.camp-kpi-nuevo    { border-color: #1565C0; background: #e3f0ff; }
.camp-kpi-nuevo    .camp-kpi-val { color: #1565C0; }
.camp-kpi-frecuente{ border-color: #2E7D32; background: #e8f5e9; }
.camp-kpi-frecuente .camp-kpi-val { color: #2E7D32; }
.camp-kpi-vip      { border-color: #6A1B9A; background: #f3e5f5; }
.camp-kpi-vip      .camp-kpi-val { color: #6A1B9A; }
.camp-kpi-dormido  { border-color: #78909C; background: #eceff1; }
.camp-kpi-dormido  .camp-kpi-val { color: #78909C; }

.camp-desc-preview {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #5d4037;
    margin-top: 6px;
}

@media (max-width: 767px) {
    .camp-kpi { padding: 10px 6px; }
    .camp-kpi-val { font-size: 20px; }
}

/* ===============================
   PANEL PRECIOS — Grid botones
   =============================== */

.price-btn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.price-btn-grid .btn,
.price-btn-grid > * {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
}

@media (max-width: 767px) {
    .price-btn-grid .btn,
    .price-btn-grid > * {
        flex: 1 1 100%;
    }
}

/* ===============================
   ODIN PRICING CARDS
   Modal comparación de planes
   =============================== */

.odin-pricing-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 0;
}

.odin-pricing-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 14px;
    padding: 28px 18px 20px;
    text-align: center;
    transition: border-color .2s, box-shadow .2s;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.odin-pricing-card:hover {
    border-color: #b39ddb;
    box-shadow: 0 4px 18px rgba(106,27,154,.10);
}
.odin-pricing-card.plan-pro {
    border-color: #6A1B9A;
    box-shadow: 0 4px 22px rgba(106,27,154,.18);
}
.odin-pricing-card.plan-selected {
    border-color: #1565C0 !important;
    box-shadow: 0 4px 24px rgba(21,101,192,.22) !important;
}
.odin-pricing-card.plan-selected .btn-seleccionar-plan {
    background: #1565C0 !important;
    color: #fff !important;
    border-color: #1565C0 !important;
}

.odin-plan-badge-rec {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #6A1B9A, #C2185B);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 16px;
    border-radius: 20px;
    letter-spacing: .8px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(106,27,154,.3);
}

.odin-plan-nombre {
    font-size: 21px;
    font-weight: 800;
    color: #1A1A2E;
    margin: 8px 0 4px;
}
.odin-plan-precio {
    font-size: 13px;
    color: #888;
    margin-bottom: 18px;
    line-height: 1.5;
    min-height: 38px;
}

.odin-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    text-align: left;
    font-size: 12.5px;
    flex: 1;
}
.odin-plan-features li {
    padding: 6px 2px;
    border-bottom: 1px solid #f3f3f3;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}
.odin-plan-features li:last-child { border-bottom: none; }
.feat-si { color: #27ae60; flex-shrink: 0; }
.feat-no { color: #d5d5d5; flex-shrink: 0; }
.feat-label-no { color: #bbb; }

.btn-seleccionar-plan {
    width: 100%;
    margin-top: auto;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 0 !important;
    transition: all .15s;
}
.plan-pro .btn-seleccionar-plan {
    background: #6A1B9A !important;
    color: #fff !important;
    border-color: #6A1B9A !important;
}
.plan-pro .btn-seleccionar-plan:hover {
    background: #4a148c !important;
    border-color: #4a148c !important;
}

.odin-addons-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 14px 20px;
    margin-top: 18px;
    border: 1px solid #ececec;
}
.odin-addons-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
}
.odin-addons-section .checkbox label {
    font-size: 13px;
    color: #444;
    font-weight: 500;
}

.odin-plan-summary {
    background: #e8f5e9;
    border-left: 4px solid #27ae60;
    border-radius: 6px;
    padding: 12px 18px;
    margin-top: 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.odin-plan-summary-info {
    color: #2e7d32;
    font-weight: 600;
}
.odin-plan-summary-addons {
    color: #555;
    font-size: 12px;
    margin-top: 3px;
    font-weight: 400;
}

.pricing-ciclo-toggle {
    text-align: center;
    margin-bottom: 22px;
}
.pricing-ciclo-toggle .radio-inline {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    padding: 6px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    margin: 0 4px;
    cursor: pointer;
    transition: all .15s;
}
.pricing-ciclo-toggle .radio-inline input[type=radio] {
    margin-right: 6px;
}

@media (max-width: 767px) {
    .odin-pricing-row { flex-direction: column; }
    .odin-pricing-card { min-width: 100%; }
}