/**
 * ==============================================================================
 * NEON.CSS – TAILWIND CSS SPANS, BADGES & TAILPANEL DESIGN SYSTEM
 * Modern Enterprise UI inspired by Tailwind CSS / Tailwind UI / Flowbite
 * Vibrant Color Tints & Seamless Borderless Pill Design
 * ==============================================================================
 */

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

/* ==============================================================================
   1. CSS VARIABLES (Tailwind Color Palette & Spacing Tokens)
   ============================================================================== */
:root {
    /* Emerald / Green (Vibrant Soft Tint) */
    --tw-emerald-bg:       #d1fae5; /* emerald-100 */
    --tw-emerald-bg-hover: #a7f3d0; /* emerald-200 */
    --tw-emerald-text:     #065f46; /* emerald-800 */
    --tw-emerald-solid:    #10b981;

    /* Red / Rose (Vibrant Soft Tint) */
    --tw-red-bg:           #fee2e2; /* red-100 */
    --tw-red-bg-hover:     #fecaca; /* red-200 */
    --tw-red-text:         #991b1b; /* red-800 */
    --tw-red-solid:        #ef4444;

    /* Blue / Sky (Vibrant Soft Tint) */
    --tw-blue-bg:          #dbeafe; /* blue-100 */
    --tw-blue-bg-hover:    #bfdbfe; /* blue-200 */
    --tw-blue-text:        #1e40af; /* blue-800 */
    --tw-blue-solid:       #3b82f6;

    /* Sky / Cyan (Vibrant Soft Tint) */
    --tw-sky-bg:           #e0f2fe; /* sky-100 */
    --tw-sky-bg-hover:     #bae6fd; /* sky-200 */
    --tw-sky-text:         #075985; /* sky-800 */
    --tw-sky-solid:        #0284c7;

    /* Amber / Yellow (Vibrant Soft Tint) */
    --tw-amber-bg:         #fef3c7; /* amber-100 */
    --tw-amber-bg-hover:   #fde68a; /* amber-200 */
    --tw-amber-text:       #92400e; /* amber-800 */
    --tw-amber-solid:      #f59e0b;

    /* Indigo / Violet / Purple (Vibrant Soft Tint) */
    --tw-indigo-bg:        #e0e7ff; /* indigo-100 */
    --tw-indigo-bg-hover:  #c7d2fe; /* indigo-200 */
    --tw-indigo-text:      #3730a3; /* indigo-800 */
    --tw-indigo-solid:     #4f46e5;

    --tw-purple-bg:        #ede9fe; /* purple-100 */
    --tw-purple-bg-hover:  #ddd6fe; /* purple-200 */
    --tw-purple-text:      #5b21b6; /* purple-800 */
    --tw-purple-solid:     #9333ea;

    /* Orange (Vibrant Soft Tint) */
    --tw-orange-bg:        #ffedd5; /* orange-100 */
    --tw-orange-bg-hover:  #fed7aa; /* orange-200 */
    --tw-orange-text:      #9a3412; /* orange-800 */
    --tw-orange-solid:     #ea580c;

    /* Teal (Vibrant Soft Tint) */
    --tw-teal-bg:          #ccfbf1; /* teal-100 */
    --tw-teal-bg-hover:    #99f6e4; /* teal-200 */
    --tw-teal-text:        #115e59; /* teal-800 */
    --tw-teal-solid:       #0f766e;

    /* Slate / Gray (Neutro con Presencia) */
    --tw-slate-bg:         #e2e8f0; /* slate-200 */
    --tw-slate-bg-hover:   #cbd5e1; /* slate-300 */
    --tw-slate-text:       #334155; /* slate-700 */
    --tw-slate-solid:      #64748b;

    /* Dark Neutral */
    --tw-zinc-bg:          #334155;
    --tw-zinc-bg-hover:    #1e293b;
    --tw-zinc-text:        #f8fafc;
}

/* ==============================================================================
   2. TAILWIND CSS SPANS & BADGES (Core Architecture - Sin Borde Exterior)
   ============================================================================== */

/**
 * Base Badge / Span:
 * - Sin borde exterior (border: none !important).
 * - Sin sombras duras.
 * - Fondos tintados con color real (Tailwind 100).
 * - Tipografía nítida con peso medium/semibold (600).
 * - Alineación flexbox con altura y espaciado perfecto.
 */
.badge,
span.badge,
.badge-neon,
span.badge-neon,
.span-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    padding: 0.24rem 0.65rem !important;
    font-size: 0.74rem !important; /* ~11.8px */
    font-weight: 600 !important;   /* Semibold para excelente legibilidad */
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;

    border-radius: 0.375rem !important; /* rounded-md (6px) */
    border: none !important;            /* ¡SIN BORDE EXTERIOR! */
    outline: none !important;
    box-shadow: none !important;        /* Limpio y plano */

    user-select: none;
    cursor: default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition:
        background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover suave */
.badge:hover,
span.badge:hover,
.badge-neon:hover {
    transform: translateY(-0.5px);
    filter: brightness(0.97);
}

/* Badges interactivos (links, botones, editables) */
a.badge,
a.badge-neon,
button.badge,
.badge[role="button"],
.editable-price {
    cursor: pointer !important;
}

a.badge:hover,
button.badge:hover,
.editable-price:hover {
    text-decoration: none !important;
    transform: translateY(-1px);
    filter: brightness(0.95);
}

/* ==============================================================================
   3. TAILWIND COLOR PALETTES (Con Más Color y Cero Bordes)
   ============================================================================== */

/* --- EMERALD / GREEN (Activo, Entrada, Aceptado, Pagado, Ok, Compra) --- */
.badge-success,
.badge-neon.neon-green,
.badge.neon-green,
.neon-green,
.badge-emerald,
.badge-green,
.badge.bg-green,
.badge.bg-success {
    background-color: var(--tw-emerald-bg) !important;
    color: var(--tw-emerald-text) !important;
    border: none !important;
}

.badge-success:hover,
.badge-neon.neon-green:hover,
.badge.neon-green:hover {
    background-color: var(--tw-emerald-bg-hover) !important;
    color: #064e3b !important;
}

/* --- RED / ROSE (Inactivo, Salida, Anulado, Deuda, Stock Bajo, Error) --- */
.badge-danger,
.badge-neon.neon-red,
.badge.neon-red,
.neon-red,
.badge-rose,
.badge-red,
.badge.bg-red,
.badge.bg-danger {
    background-color: var(--tw-red-bg) !important;
    color: var(--tw-red-text) !important;
    border: none !important;
}

.badge-danger:hover,
.badge-neon.neon-red:hover,
.badge.neon-red:hover {
    background-color: var(--tw-red-bg-hover) !important;
    color: #7f1d1d !important;
}

/* --- BLUE / PRIMARY (Factura, En Proceso, General) --- */
.badge-primary,
.badge-neon.neon-blue,
.badge.neon-blue,
.neon-blue,
.badge-blue,
.badge.bg-blue,
.badge.bg-primary {
    background-color: var(--tw-blue-bg) !important;
    color: var(--tw-blue-text) !important;
    border: none !important;
}

.badge-primary:hover,
.badge-neon.neon-blue:hover,
.badge.neon-blue:hover {
    background-color: var(--tw-blue-bg-hover) !important;
    color: #1e3a8a !important;
}

/* --- SKY / CYAN / INFO (Boleta, Nota de Venta, Detalle, Info) --- */
.badge-info,
.badge-sky,
.badge-cyan,
.badge.bg-info,
.badge.bg-teal {
    background-color: var(--tw-sky-bg) !important;
    color: var(--tw-sky-text) !important;
    border: none !important;
}

.badge-info:hover,
.badge-sky:hover {
    background-color: var(--tw-sky-bg-hover) !important;
    color: #0c4a6e !important;
}

/* --- AMBER / YELLOW (En Espera, Pendiente, Crédito, Alerta) --- */
.badge-warning,
.badge-neon.neon-yellow,
.badge.neon-yellow,
.neon-yellow,
.badge-amber,
.badge-yellow,
.badge.bg-yellow,
.badge.bg-warning {
    background-color: var(--tw-amber-bg) !important;
    color: var(--tw-amber-text) !important;
    border: none !important;
}

.badge-warning:hover,
.badge-neon.neon-yellow:hover,
.badge.neon-yellow:hover {
    background-color: var(--tw-amber-bg-hover) !important;
    color: #78350f !important;
}

/* --- INDIGO / PURPLE (Especial, Servicio, Múltiple, VIP) --- */
.badge-neon.neon-purple,
.badge.neon-purple,
.neon-purple,
.badge-purple,
.badge-indigo,
.badge.bg-purple,
.badge.bg-indigo {
    background-color: var(--tw-indigo-bg) !important;
    color: var(--tw-indigo-text) !important;
    border: none !important;
}

.badge-neon.neon-purple:hover,
.badge.neon-purple:hover {
    background-color: var(--tw-indigo-bg-hover) !important;
    color: #312e81 !important;
}

/* --- ORANGE (Transferencia, Pago Mixto) --- */
.badge-orange,
.badge.bg-orange {
    background-color: var(--tw-orange-bg) !important;
    color: var(--tw-orange-text) !important;
    border: none !important;
}

.badge-orange:hover {
    background-color: var(--tw-orange-bg-hover) !important;
    color: #7c2d12 !important;
}

/* --- TEAL (Alternativo) --- */
.badge-teal,
.badge.bg-olive {
    background-color: var(--tw-teal-bg) !important;
    color: var(--tw-teal-text) !important;
    border: none !important;
}

.badge-teal:hover {
    background-color: var(--tw-teal-bg-hover) !important;
    color: #134e4a !important;
}

/* --- SLATE / GRAY / SECONDARY / LIGHT (Neutro, Deshabilitado, Etiquetas) --- */
.badge-secondary,
.badge-light,
.badge-neon.neon-gray,
.badge.neon-gray,
.neon-gray,
.badge-slate,
.badge-gray,
.badge.bg-secondary,
.badge.bg-gray {
    background-color: var(--tw-slate-bg) !important;
    color: var(--tw-slate-text) !important;
    border: none !important;
}

.badge-secondary:hover,
.badge-light:hover,
.badge-neon.neon-gray:hover {
    background-color: var(--tw-slate-bg-hover) !important;
    color: #0f172a !important;
}

/* --- DARK / ZINC (Contraste Alto) --- */
.badge-dark,
.badge.bg-dark {
    background-color: var(--tw-zinc-bg) !important;
    color: var(--tw-zinc-text) !important;
    border: none !important;
}

.badge-dark:hover {
    background-color: var(--tw-zinc-bg-hover) !important;
    color: #ffffff !important;
}

/* ==============================================================================
   4. TAILWIND SIZE MODIFIERS & SHAPES
   ============================================================================== */

/* Extra Small (XS) */
.badge-xs,
.badge-neon.xs,
.badge.sm-compact {
    font-size: 0.65rem !important; /* ~10.4px */
    padding: 0.15rem 0.45rem !important;
    border-radius: 0.3125rem !important;
    border: none !important;
}

/* Small (SM) */
.badge-sm,
.badge-neon.sm {
    font-size: 0.7rem !important; /* ~11.2px */
    padding: 0.18rem 0.55rem !important;
    border-radius: 0.35rem !important;
    border: none !important;
}

/* Large (LG) */
.badge-lg,
.badge-neon.lg {
    font-size: 0.8125rem !important; /* ~13px */
    padding: 0.35rem 0.85rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
}

/* Pill / Rounded-Full (Tailwind Badge Pill) */
.badge-pill,
.badge.badge-pill,
.badge-rounded,
.rounded-full.badge {
    border-radius: 9999px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    border: none !important;
}

.badge-pill.badge-sm,
.badge-pill.sm {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
}

.badge-pill.badge-lg,
.badge-pill.lg {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* ==============================================================================
   5. TAILWIND STATUS DOT (Puntos de Estado dentro de Spans)
   ============================================================================== */

/**
 * Indicator Dot:
 * <span class="badge badge-success"><span class="badge-dot"></span>Activo</span>
 */
.badge-dot,
.span-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background-color: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* Dot animado (pulsing dot) */
.badge-dot.pulse {
    box-shadow: 0 0 0 0 currentColor;
    animation: tw-badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes tw-badge-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.85);
    }
}

/* Automatic status dot with .has-dot */
.badge.has-dot::before,
.badge-with-dot::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background-color: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* ==============================================================================
   6. SOLID BADGE VARIANT (Opcional - Colores Plenos Tailwind)
   ============================================================================== */
.badge-solid.badge-success,
.badge.solid-green {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border: none !important;
}

.badge-solid.badge-danger,
.badge.solid-red {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border: none !important;
}

.badge-solid.badge-primary,
.badge.solid-blue {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
}

.badge-solid.badge-warning,
.badge.solid-yellow {
    background-color: #f59e0b !important;
    color: #ffffff !important;
    border: none !important;
}

/* ==============================================================================
   7. ESPECIALIDADES DEL SISTEMA (Stock, Precios Editables, Notificaciones)
   ============================================================================== */

/* Precios editables en inventario */
.editable-price {
    font-variant-numeric: tabular-nums;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: none !important;
}

.editable-price:hover {
    filter: brightness(0.92);
}

.editable-price:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--tw-blue-solid) !important;
}

/* Badge de Stock Bajo con suave pulsación de advertencia */
.badge-stock-low {
    animation: tw-stock-pulse 2.5s ease-in-out infinite;
}

@keyframes tw-stock-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Badge de notificación numérica (header, navbar, cards) */
.badge-notify,
.navbar-badge-custom {
    font-size: 0.675rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0.2rem 0.45rem !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
    min-width: 1.25rem;
    text-align: center;
    border: none !important;
}

/* Badge KPI en cuentas por cobrar / pagar */
.badge-kpi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 0.5rem;
    background-color: var(--tw-slate-bg);
    color: var(--tw-slate-text);
    border: none !important;
}

/* Badge contador de documentos en caja chica */
.badge-doc-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    background-color: var(--tw-blue-bg);
    color: var(--tw-blue-text);
    border: none !important;
}

/* Punto de estado en login / sidebar */
.badge-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: #10b981;
    box-shadow: 0 0 0 2px #ffffff, 0 0 6px rgba(16, 185, 129, 0.4);
    border: none !important;
}

/* ==============================================================================
   8. DARK MODE (Tailwind UI Dark Palette - Sin Bordes y con Color Nítido)
   ============================================================================== */
body.dark-mode .badge,
body.dark-mode span.badge,
body.dark-mode .badge-neon {
    border: none !important;
    box-shadow: none !important;
}

/* Dark Green */
body.dark-mode .badge-success,
body.dark-mode .badge-neon.neon-green,
body.dark-mode .badge.neon-green,
body.dark-mode .neon-green,
body.dark-mode .badge-emerald,
body.dark-mode .badge-green,
body.dark-mode .badge.bg-green,
body.dark-mode .badge.bg-success {
    background-color: rgba(16, 185, 129, 0.24) !important;
    color: #6ee7b7 !important; /* emerald-300 */
    border: none !important;
}

body.dark-mode .badge-success:hover,
body.dark-mode .badge-neon.neon-green:hover {
    background-color: rgba(16, 185, 129, 0.35) !important;
    color: #a7f3d0 !important;
}

/* Dark Red */
body.dark-mode .badge-danger,
body.dark-mode .badge-neon.neon-red,
body.dark-mode .badge.neon-red,
body.dark-mode .neon-red,
body.dark-mode .badge-rose,
body.dark-mode .badge-red,
body.dark-mode .badge.bg-red,
body.dark-mode .badge.bg-danger {
    background-color: rgba(239, 68, 68, 0.24) !important;
    color: #fca5a5 !important; /* red-300 */
    border: none !important;
}

body.dark-mode .badge-danger:hover,
body.dark-mode .badge-neon.neon-red:hover {
    background-color: rgba(239, 68, 68, 0.35) !important;
    color: #fecaca !important;
}

/* Dark Blue */
body.dark-mode .badge-primary,
body.dark-mode .badge-neon.neon-blue,
body.dark-mode .badge.neon-blue,
body.dark-mode .neon-blue,
body.dark-mode .badge-blue,
body.dark-mode .badge.bg-blue,
body.dark-mode .badge.bg-primary {
    background-color: rgba(59, 130, 246, 0.24) !important;
    color: #93c5fd !important; /* blue-300 */
    border: none !important;
}

body.dark-mode .badge-primary:hover,
body.dark-mode .badge-neon.neon-blue:hover {
    background-color: rgba(59, 130, 246, 0.35) !important;
    color: #bfdbfe !important;
}

/* Dark Sky / Cyan */
body.dark-mode .badge-info,
body.dark-mode .badge-sky,
body.dark-mode .badge-cyan,
body.dark-mode .badge.bg-info,
body.dark-mode .badge.bg-teal {
    background-color: rgba(14, 165, 233, 0.24) !important;
    color: #7dd3fc !important; /* sky-300 */
    border: none !important;
}

/* Dark Amber / Yellow */
body.dark-mode .badge-warning,
body.dark-mode .badge-neon.neon-yellow,
body.dark-mode .badge.neon-yellow,
body.dark-mode .neon-yellow,
body.dark-mode .badge-amber,
body.dark-mode .badge-yellow,
body.dark-mode .badge.bg-yellow,
body.dark-mode .badge.bg-warning {
    background-color: rgba(245, 158, 11, 0.24) !important;
    color: #fde047 !important; /* amber-300 */
    border: none !important;
}

/* Dark Indigo / Purple */
body.dark-mode .badge-neon.neon-purple,
body.dark-mode .badge.neon-purple,
body.dark-mode .neon-purple,
body.dark-mode .badge-purple,
body.dark-mode .badge-indigo,
body.dark-mode .badge.bg-purple,
body.dark-mode .badge.bg-indigo {
    background-color: rgba(99, 102, 241, 0.24) !important;
    color: #a5b4fc !important; /* indigo-300 */
    border: none !important;
}

/* Dark Slate / Gray */
body.dark-mode .badge-secondary,
body.dark-mode .badge-light,
body.dark-mode .badge-neon.neon-gray,
body.dark-mode .badge.neon-gray,
body.dark-mode .neon-gray,
body.dark-mode .badge-slate,
body.dark-mode .badge-gray,
body.dark-mode .badge.bg-secondary,
body.dark-mode .badge.bg-gray {
    background-color: rgba(148, 163, 184, 0.24) !important;
    color: #e2e8f0 !important; /* slate-200 */
    border: none !important;
}

/* Dark Dark */
body.dark-mode .badge-dark,
body.dark-mode .badge.bg-dark {
    background-color: #475569 !important;
    color: #f8fafc !important;
    border: none !important;
}

body.dark-mode .badge-kpi {
    background-color: rgba(51, 65, 85, 0.8);
    color: #f1f5f9;
    border: none !important;
}

body.dark-mode .badge-doc-count {
    background-color: rgba(59, 130, 246, 0.26);
    color: #bfdbfe;
    border: none !important;
}

/* ==============================================================================
   9. DATATABLE – TAILPANEL STYLE (Tailwind UI Enterprise Table)
   ============================================================================== */

.table-tailpanel {
    background-color: #ffffff;
    border-radius: 0.75rem; /* 12px */
    overflow: hidden;
    border: 1px solid #e2e8f0;
    font-size: 0.8125rem; /* 13px */
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}

/* Table Header */
.table-tailpanel thead th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.725rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
    padding: 0.75rem 0.85rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* Table Body */
.table-tailpanel tbody td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    border-top: none;
    vertical-align: middle;
    color: #334155;
    transition: background-color 0.15s ease;
}

/* Hover suave tipo Tailwind */
.table-tailpanel tbody tr:hover td {
    background-color: rgba(241, 245, 249, 0.6);
}

/* Última fila limpia */
.table-tailpanel tbody tr:last-child td {
    border-bottom: none;
}

/* Controles de DataTables */
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.85rem;
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    outline: none;
    transition: all 0.15s ease;
    background-color: #ffffff;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 0.85rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #334155 !important;
    margin: 0 2px;
    font-size: 0.775rem;
    font-weight: 500;
    padding: 0.35rem 0.7rem !important;
    transition: all 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent !important;
    border-color: #e2e8f0 !important;
}

.dataTables_info {
    font-size: 0.775rem;
    color: #64748b;
    margin-top: 0.85rem;
}

/* Botones Exportar (Excel, PDF, ColVis) */
.dt-buttons .btn {
    border-radius: 0.5rem !important;
    font-size: 0.775rem !important;
    font-weight: 500 !important;
    padding: 0.4rem 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
}

.dt-buttons .btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* DataTables Responsive (Móviles / Tablets) */
@media (max-width: 768px) {
    table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before {
        background-color: #2563eb;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 9999px;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
    }

    table.dataTable > tbody > tr.child {
        background: #f8fafc;
    }

    table.dataTable > tbody > tr.child td {
        padding: 0.65rem 0.85rem;
        font-size: 0.775rem;
        border: none;
    }

    table.dataTable > tbody > tr.child ul.dtr-details {
        width: 100%;
    }

    table.dataTable > tbody > tr.child ul.dtr-details li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.45rem 0;
        border-bottom: 1px dashed #e2e8f0;
    }

    table.dataTable > tbody > tr.child ul.dtr-details li:last-child {
        border-bottom: none;
    }

    table.dataTable > tbody > tr.child span.dtr-title {
        font-weight: 600;
        color: #334155;
    }
}

/* DataTables en Dark Mode */
body.dark-mode .table-tailpanel {
    background-color: #0f172a;
    border-color: #1e293b;
}

body.dark-mode .table-tailpanel thead th {
    background-color: #1e293b;
    color: #cbd5e1;
    border-color: #334155 !important;
}

body.dark-mode .table-tailpanel tbody td {
    color: #e2e8f0;
    border-color: #1e293b;
}

body.dark-mode .table-tailpanel tbody tr:hover td {
    background-color: rgba(51, 65, 85, 0.4);
}

body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .dt-buttons .btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .dt-buttons .btn:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode table.dataTable > tbody > tr.child {
    background: #1e293b;
}

body.dark-mode table.dataTable > tbody > tr.child span.dtr-title {
    color: #cbd5e1;
}

/* ==============================================================================
   10. MODAL TAILPANEL (Tailwind UI Modal System)
   ============================================================================== */

.modal-tailpanel .modal-content {
    border-radius: 1rem; /* 16px */
    border: 1px solid #e2e8f0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: #ffffff;
    overflow: hidden;
}

.modal-header-tailpanel {
    border-bottom: 1px solid #e2e8f0;
    padding: 1.15rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header-tailpanel .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.015em;
}

.close-tailpanel {
    font-size: 1.25rem;
    opacity: 0.5;
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    cursor: pointer;
}

.close-tailpanel:hover {
    opacity: 1;
    color: #0f172a;
    background-color: #f1f5f9;
    transform: rotate(90deg);
}

.modal-content-tailpanel .modal-body {
    padding: 1.5rem;
    background: #f8fafc;
}

.modal-content-tailpanel .form-control,
.modal-content-tailpanel .select2-container--default .select2-selection--single {
    border-radius: 0.625rem;
    border: 1px solid #cbd5e1;
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    transition: all 0.15s ease;
    background-color: #ffffff;
}

.modal-content-tailpanel .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.modal-content-tailpanel label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}

.modal-footer-tailpanel {
    border-top: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
    background: #ffffff;
}

.btn-save-tailpanel {
    padding: 0.6rem 1.25rem;
    border-radius: 0.625rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.imagen-hover {
    border-radius: 0.75rem;
    border: 2px dashed #cbd5e1;
    transition: all 0.25s ease;
}

.imagen-hover:hover {
    border-color: #3b82f6;
    transform: scale(1.015);
}

/* Modal Dark Mode */
body.dark-mode .modal-content-tailpanel .modal-content {
    background: #0f172a;
    border-color: #1e293b;
}

body.dark-mode .modal-header-tailpanel,
body.dark-mode .modal-footer-tailpanel {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .modal-header-tailpanel .modal-title {
    color: #f1f5f9;
}

body.dark-mode .modal-content-tailpanel .modal-body {
    background: #0f172a;
}

body.dark-mode .modal-content-tailpanel label {
    color: #cbd5e1;
}

body.dark-mode .modal-content-tailpanel .form-control {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

/* ==============================================================================
   11. TAILPANEL DASHBOARD CARDS (Tailwind Stat Widgets)
   ============================================================================== */

.tp-card {
    background: #ffffff;
    border-radius: 0.875rem; /* 14px */
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.tp-card-body {
    padding: 1.25rem;
}

.tp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.tp-card-title {
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tp-card-value {
    font-size: 1.625rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Icon containers */
.tp-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.tp-indigo { background: #e0e7ff; color: #3730a3; }
.tp-green  { background: #d1fae5; color: #065f46; }
.tp-blue   { background: #dbeafe; color: #1e40af; }
.tp-yellow { background: #fef3c7; color: #92400e; }
.tp-red    { background: #fee2e2; color: #991b1b; }
.tp-gray   { background: #e2e8f0; color: #334155; }

.tp-card-footer {
    border-top: 1px solid #f1f5f9;
    padding: 0.6rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tp-card-footer:hover {
    background: #f8fafc;
    color: #2563eb;
}

.tp-chart-card {
    padding: 1.25rem;
}

.tp-chart-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

/* ==============================================================================
   12. TAILPANEL SIDEBAR STYLE
   ============================================================================== */

.tailpanel-sidebar {
    background-color: #ffffff !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    border-right: 1px solid #e2e8f0;
}

.tailpanel-sidebar .brand-link {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
}

.tailpanel-sidebar .brand-text {
    color: #0f172a;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
}

.tailpanel-sidebar .user-panel {
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
}

.tailpanel-sidebar .user-panel .info a {
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 600;
}

.tailpanel-sidebar .nav-sidebar > .nav-item > .nav-link {
    color: #475569;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    margin: 2px 8px;
    transition: all 0.15s ease;
}

.tailpanel-sidebar .nav-link:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.tailpanel-sidebar .nav-link.active {
    background-color: #f1f5f9;
    color: #2563eb !important;
    font-weight: 600;
}

.tailpanel-sidebar .nav-link.active .nav-icon {
    color: #2563eb !important;
}

.tailpanel-sidebar .nav-treeview .nav-link {
    font-size: 0.8125rem;
    color: #64748b;
    padding-left: 2rem;
}

.tailpanel-sidebar .nav-treeview .nav-link:hover {
    color: #0f172a;
}

.tailpanel-sidebar .nav-icon {
    font-size: 1.15rem !important;
    color: #94a3b8;
    transition: color 0.15s ease;
}

.tailpanel-sidebar .nav-sidebar > .nav-item > .nav-link > .nav-icon {
    font-size: 1.15rem !important;
}

.tailpanel-sidebar .nav-treeview .nav-link > .nav-icon {
    font-size: 0.95rem !important;
}

.tailpanel-sidebar .right {
    color: #94a3b8;
}

/* Sidebar Collapsed */
.sidebar-collapse .tailpanel-sidebar .user-panel {
    justify-content: center;
    padding: 0.65rem 0;
}

.sidebar-collapse .tailpanel-sidebar .user-panel .image img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    min-height: 38px;
    object-fit: cover;
    border-radius: 9999px;
}

.sidebar-collapse .tailpanel-sidebar .user-panel .info {
    display: none;
}

/* ==============================================================================
   13. TOAST NOTIFICATIONS (Tailwind Floating Cards)
   ============================================================================== */

#toastContainer {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1060;
}

.toast-custom {
    min-width: 280px;
    margin-bottom: 12px;
    border-left: 4px solid #10b981 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    color: #1e293b;
    font-weight: 500;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    border: 1px solid #e2e8f0;
}

.toast-custom:hover {
    transform: translateX(-4px);
    opacity: 0.98;
}

.toast-custom .toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    border-bottom: none;
    padding: 0;
    background: transparent;
    color: #0f172a;
}

.toast-custom .toast-close {
    background: transparent;
    border: none;
    font-size: 0.875rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s ease;
}

.toast-custom .toast-close:hover {
    color: #1e293b;
}

.toast-warning {
    background-color: #f59e0b;
    color: #ffffff;
    font-weight: 600;
    border: none !important;
}