/**
 * TIQUETES - Plantilla global Bootstrap 5
 * Sidebar, status badges, paginación, acciones. Sin borrar datos. Respeta roles.
 */
/* Sidebar layout */
.tq-layout { display: flex; min-height: 100vh; background: #f8f9fa; }
.tq-sidebar { width: 260px; min-width: 260px; background: #1a1a1a; color: #fff; flex-direction: column; display: flex; transition: width .2s ease, min-width .2s ease; }
.tq-sidebar .tq-logo { padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 0.6rem; }
.tq-sidebar .tq-logo img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; }
.tq-sidebar .tq-logo .tq-logo-text { font-size: 1.2rem; font-weight: 700; color: #fff; text-decoration: none; }
.tq-sidebar .tq-nav { flex: 1; padding: 1rem 0.75rem; }
.tq-sidebar .tq-nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; color: rgba(255,255,255,0.88); text-decoration: none; border-radius: 0.5rem; margin-bottom: 2px; transition: background .15s, color .15s; }
.tq-sidebar .tq-nav a:hover { background: #2c2c2c; color: #fff; }
.tq-sidebar .tq-nav a.active { background: #2c2c2c; color: #fff; font-weight: 500; }
.tq-sidebar .tq-nav a .tq-nav-icon { font-size: 1.25rem; width: 1.4rem; height: 1.4rem; display: inline-block; vertical-align: middle; }
.tq-sidebar .tq-badge { background: #0d6efd; color: #fff; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 10px; margin-left: auto; }
.tq-sidebar .tq-logout { padding: 1rem 0.75rem; border-top: 1px solid #2c2c2c; }
.tq-sidebar .tq-logout a { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; color: rgba(255,255,255,0.88); text-decoration: none; border-radius: 0.5rem; }
.tq-sidebar .tq-logout a:hover { background: #2c2c2c; color: #fff; }
.tq-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tq-topbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #fff; border-bottom: 1px solid #eee; flex-wrap: wrap; gap: 0.75rem; }
.tq-topbar .tq-page-title { margin: 0; font-size: 1.4rem; font-weight: 700; }
.tq-topbar .tq-user { display: flex; align-items: center; gap: 0.75rem; }
.tq-topbar .tq-user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tq-topbar .tq-user .tq-name { font-weight: 600; font-size: 0.95rem; display: block; }
.tq-topbar .tq-user .tq-role { font-size: 0.8rem; color: #6c757d; }
.tq-content { padding: 1.5rem; flex: 1; min-width: 0; }
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sidebar colapsado (icons-only) */
.tq-layout.tq-sidebar-collapsed .tq-sidebar { width: 72px; min-width: 72px; }
.tq-layout.tq-sidebar-collapsed .tq-logo-text { display: none; }
.tq-layout.tq-sidebar-collapsed .tq-nav a .tq-nav-label { display: none; }
.tq-layout.tq-sidebar-collapsed .tq-logout a .tq-nav-label { display: none; }
.tq-layout.tq-sidebar-collapsed .tq-nav a { justify-content: center; }
.tq-layout.tq-sidebar-collapsed .tq-logout a { justify-content: center; }

/* Status badges - estilo perfecto (Failed/Successful/Pending) */
.tq-status { display: inline-block; padding: 0.35rem 0.75rem; border-radius: 50rem; font-size: 0.8rem; font-weight: 500; border: none; }
.tq-status-open { background: #fff3cd; color: #856404; }
.tq-status-progress { background: #cfe2ff; color: #084298; }
.tq-status-closed { background: #d1e7dd; color: #0f5132; }
.tq-status-failed { background: #f8d7da; color: #842029; }
.tq-status-success { background: #d1e7dd; color: #0f5132; }
.tq-status-pending { background: #fff3cd; color: #856404; }

/* Action column - icono tres puntos (Bootstrap Icons) */
.tq-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; color: #6c757d; border-radius: 0.375rem; text-decoration: none; transition: background .15s, color .15s; }
.tq-action-btn:hover { background: #e9ecef; color: #212529; }
.tq-action-btn .bi { font-size: 1.2rem; }

/* Paginación estilo "Showing X of Y" */
.dataTables_wrapper .dataTables_info { padding-top: 1rem; font-size: 0.9rem; color: #6c757d; }
.dataTables_wrapper .dataTables_paginate { padding-top: 1rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { margin: 0 2px; padding: 0.4rem 0.75rem; border-radius: 0.375rem; border: 1px solid #dee2e6; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #e9ecef !important; border-color: #dee2e6 !important; color: #212529 !important; }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { font-size: 0.9rem; }

/* Tabla listado - bordes y espaciado */
.tq-table-wrap { background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden; }
.tq-table-wrap .table { margin-bottom: 0; }
.tq-table-wrap .table thead th { font-weight: 600; color: #495057; border-bottom: 1px solid #dee2e6; padding: 0.75rem 1rem; font-size: 0.85rem; }
.tq-table-wrap .table tbody td { padding: 0.75rem 1rem; vertical-align: middle; font-size: 0.9rem; }
.tq-table-wrap .table tbody tr:hover { background: #f8f9fa; }
/* Tabla estilo Transactions: solo líneas horizontales */
.tq-table-wrap .table thead th { border-top: none; border-left: none; border-right: none; }
.tq-table-wrap .table tbody td { border-left: none; border-right: none; }

/* Latest Updates - diseño tipo chat con botones */
.tq-latest-updates { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.tq-latest-card { background: #fff; border-radius: 0.5rem; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid #eee; display: flex; align-items: center; gap: 0.75rem; }
.tq-latest-card .tq-latest-value { font-size: 1.35rem; font-weight: 700; color: #0d6efd; }
.tq-latest-card .tq-latest-label { font-size: 0.85rem; color: #6c757d; }
.tq-latest-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.tq-latest-btns .btn { font-size: 0.85rem; }

/* Filtros listado tipo Transactions: Filter, Search, Download, Date range */
.tq-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 1rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tq-list-toolbar .tq-search-wrap { position: relative; flex: 1; min-width: 200px; }
.tq-list-toolbar .tq-search-wrap .form-control { padding-left: 2.5rem; }
.tq-list-toolbar .tq-search-wrap .iconify { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #6c757d; font-size: 1.1rem; }
.tq-list-toolbar .tq-date-wrap { display: flex; align-items: center; gap: 0.5rem; }
.tq-list-toolbar .tq-date-wrap .form-control { max-width: 140px; }
.tq-list-toolbar .btn-filter, .tq-list-toolbar .btn-download { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Paginación "Showing X of Y" + números */
.tq-pagination-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; background: #fff; border-top: 1px solid #eee; border-radius: 0 0 0.5rem 0.5rem; }
.tq-pagination-info { font-size: 0.9rem; color: #6c757d; }
.tq-pagination-btns { display: flex; align-items: center; gap: 0.25rem; }
.tq-pagination-btns .page-link { padding: 0.4rem 0.75rem; border-radius: 0.375rem; border: 1px solid #dee2e6; background: #fff; color: #212529; text-decoration: none; font-size: 0.9rem; }
.tq-pagination-btns .page-link:hover { background: #e9ecef; }
.tq-pagination-btns .page-link.active { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.tq-pagination-btns .page-link.disabled { pointer-events: none; opacity: 0.6; }

/* ── Footer ── */
.tq-footer {
    background: #F8F9FF;
    border-top: 1px solid #E0E4F4;
    padding: 0;
    margin-top: auto;
    position: relative;
}
.tq-footer::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #4F46E5 0%, #818CF8 50%, #C7D2FE 100%);
}
.tq-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.8rem;
}
.tq-footer-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6B7280;
    font-weight: 500;
}
.tq-footer-copy i {
    color: #4F46E5;
    font-size: 13px;
}
.tq-footer-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tq-footer-links a {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6B7280;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all .15s;
}
.tq-footer-links a:hover {
    color: #4F46E5;
    background: #EEF2FF;
    border-color: #C7D2FE;
}

/* Filtros listado (Filter, Search, fechas) */
.tq-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.tq-toolbar .form-control, .tq-toolbar .form-select { max-width: 180px; }

/* ════════════════════════════════════════════
   GLOBAL BADGES — status, priority, reply
════════════════════════════════════════════ */
.badge { display:inline-flex; align-items:center; padding:3px 10px;
    border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }

/* Status */
.badge-open     { background:#FEF9C3; color:#92400E; }
.badge-progress { background:#DBEAFE; color:#1E40AF; }
.badge-closed   { background:#DCFCE7; color:#166534; }

/* Priority */
.badge-urgent { background:#FEE2E2; color:#991B1B; }
.badge-high   { background:#FFEDD5; color:#9A3412; }
.badge-normal { background:#EFF6FF; color:#1E40AF; }
.badge-low    { background:#F0FDF4; color:#166534; }

/* Last reply */
.badge-agent    { background:#EDE9FE; color:#5B21B6; }
.badge-customer { background:#E0F2FE; color:#0369A1; }
.badge-none     { background:#F3F4F6; color:#6B7280; }

/* Action button shared */
.btn-open { display:inline-flex; align-items:center; gap:4px; padding:5px 10px;
    border-radius:7px; background:#EEF2FF; color:#4F46E5;
    border:1px solid #C7D2FE; font-size:11.5px; font-weight:600;
    text-decoration:none; transition:all .15s; }
.btn-open:hover { background:#E0E7FF; color:#4F46E5; }

/* ════════════════════════════════════════════
   GLOBAL PAGINATION — unified design
   .tk-foot / .tk-showing / .tk-pag / .pg
════════════════════════════════════════════ */
.tk-foot { display:flex; justify-content:space-between; align-items:center;
    padding:12px 20px; border-top:1px solid #E5E7EB; background:#F9FAFB;
    flex-wrap:wrap; gap:8px; }
.tk-showing { font-size:12.5px; color:#6B7280; }
.tk-showing strong { color:#111827; }
.tk-pag { display:flex; gap:3px; }
.pg { display:inline-flex; align-items:center; justify-content:center;
    min-width:34px; height:34px; padding:0 8px; border-radius:8px;
    border:1.5px solid #E5E7EB; background:#fff; font-size:13px;
    font-weight:500; color:#4B5563; text-decoration:none;
    transition:all .15s; cursor:pointer; }
.pg:hover:not(.pg-dis):not(.pg-on) { background:#EEF2FF; color:#4F46E5; border-color:#C7D2FE; }
.pg-on  { background:#4F46E5 !important; color:#fff !important; border-color:#4F46E5 !important; font-weight:700; pointer-events:none; }
.pg-dis { opacity:.35; pointer-events:none; cursor:default; }
.pg-dot { padding:0 4px; color:#9CA3AF; line-height:34px; font-size:13px; display:inline-block; }

/* ════════════════════════════════════════════
   RESPONSIVE SIDEBAR — off-canvas drawer
   Uses #tqSidebar ID for maximum specificity
════════════════════════════════════════════ */
.tq-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: none;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    color: #374151;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s;
}
.tq-hamburger:hover { background: #F3F4F6; }

#tqBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0,0,0,0);
    transition: background .3s;
    pointer-events: none;
}
#tqBackdrop.tq-open {
    display: block;
    background: rgba(0,0,0,.5);
    pointer-events: auto;
}

@media screen and (max-width: 1023px) {
    #tqSidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        min-width: 0 !important;
        z-index: 1050 !important;
        transform: translateX(-100%) !important;
        transition: transform .3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: none !important;
    }
    #tqSidebar.tq-open {
        transform: translateX(0) !important;
        box-shadow: 8px 0 40px rgba(0,0,0,.35) !important;
    }
    #tqSidebar .tq-logo-text { display: block !important; }
    #tqSidebar .tq-nav-label { display: block !important; }
    #tqSidebar .tq-nav a,
    #tqSidebar .tq-logout a { justify-content: flex-start !important; }

    #tqBackdrop { display: none; }
    #tqBackdrop.tq-open { display: block; }

    .tq-hamburger { display: flex !important; }

    .tq-main { width: 100% !important; min-width: 0 !important; }
    .tq-topbar { padding: .7rem 1rem !important; }
    .tq-content { padding: 1rem !important; }
    body { overflow-x: hidden; }
}

@media screen and (min-width: 1024px) {
    .tq-hamburger { display: none !important; }
    #tqBackdrop { display: none !important; }
}

.tk-table-wrap,
.tq-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 767px) {
    .tq-content { padding: .75rem !important; }
    .tk-top { padding: 12px 14px !important; }
    .tk-tabs { padding: 8px 12px !important; }
    .tk-foot { padding: 10px 14px !important; }
}

/* ══════════════════════════════════════════════════
   FIX: Bootstrap 5 .toast conflicts with Toastr
   Bootstrap forces opacity:0 + white bg on .toast —
   we override inside #toast-container only.
══════════════════════════════════════════════════ */
#toast-container { z-index: 99999 !important; }

#toast-container > .toast {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    padding: 14px 18px 14px 52px !important;
    width: 320px !important;
    max-width: 90vw !important;
    backdrop-filter: blur(8px);
}

/* Remove Bootstrap's opacity:0 rule for non-show toasts */
#toast-container > .toast:not(.showing):not(.show) {
    opacity: unset !important;
}

#toast-container > .toast:hover {
    opacity: 1 !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.3) !important;
    cursor: pointer;
}

/* Modern colored variants */
#toast-container > .toast-success {
    background-color: #059669 !important;
    background-image: none !important;
}
#toast-container > .toast-success::before {
    content: "✓";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    background: rgba(255,255,255,.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
    line-height: 24px; text-align: center;
}

#toast-container > .toast-error {
    background-color: #DC2626 !important;
    background-image: none !important;
}
#toast-container > .toast-error::before {
    content: "✕";
    position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px;
    background: rgba(255,255,255,.25); border-radius: 50%;
    font-size: 12px; font-weight: 700; color: #fff;
    line-height: 24px; text-align: center;
}

#toast-container > .toast-info {
    background-color: #2563EB !important;
    background-image: none !important;
}
#toast-container > .toast-info::before {
    content: "i";
    position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px;
    background: rgba(255,255,255,.25); border-radius: 50%;
    font-size: 13px; font-weight: 700; font-style: italic; color: #fff;
    line-height: 24px; text-align: center;
}

#toast-container > .toast-warning {
    background-color: #D97706 !important;
    background-image: none !important;
}
#toast-container > .toast-warning::before {
    content: "!";
    position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px;
    background: rgba(255,255,255,.25); border-radius: 50%;
    font-size: 14px; font-weight: 700; color: #fff;
    line-height: 24px; text-align: center;
}