.loaderu {
    width: 80px;
    height: 80px;
}

    .loaderu hr {
        border: 0;
        margin: 0;
        width: 30px !important;
        height: 30px !important;
        opacity: 1 !important;
        position: absolute;
        border-radius: 50%;
        animation: spin 2s ease infinite;
    }

    .loaderu :first-child {
        background: #01c0ff;
        animation-delay: -1.5s;
    }

    .loaderu :nth-child(2) {
        background: #fd6550;
        animation-delay: -1s;
    }

    .loaderu :nth-child(3) {
        background: #55df68;
        animation-delay: -0.5s;
    }

    .loaderu :last-child {
        background: #fcd819;
    }

@keyframes spin {
    0%, 100% {
        transform: translate(0);
    }

    25% {
        transform: translate(160%);
    }

    50% {
        transform: translate(160%, 160%);
    }

    75% {
        transform: translate(0, 160%);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DINAUP BADGES - v6 (Soft pastel filled badges)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ BASE ═══════════ */
.badge,
.badge-type {
    display: inline-flex;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* ═══════════ SEMANTIC BADGES ═══════════ */

.badge-success {
    color: #166534;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.15);
}

.badge-danger {
    color: #b91c1c;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.15);
}

.badge-warning {
    color: #92400e;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.15);
}

.badge-info {
    color: #0369a1;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    box-shadow: 0 1px 2px rgba(14, 165, 233, 0.15);
}

.badge-primary {
    color: #1d4ed8;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.15);
}

.badge-secondary {
    color: #475569;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: 0 1px 2px rgba(100, 116, 139, 0.1);
}

.badge-default,
.badge-type.e0, .badge.e0 {
    color: #64748b;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 1px 2px rgba(100, 116, 139, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PALETA DE COLORES (sincronizada outline/filled)

   e1/e11  = Slate    #475569
   e2/e12  = Orange   #f97316
   e3/e13  = Yellow   #facc15
   e4/e14  = Lime     #84cc16
   e5/e15  = Sky      #0ea5e9
   e6/e16  = Violet   #a78bfa
   e7/e17  = Pink     #ec4899
   e8/e18  = Gray     #94a3b8
   e9/e19  = Cyan     #06b6d4
   e10/e20 = Red      #ef4444
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   OUTLINE STYLES (e1-e10) - Para TIPOS (factura, operacion, categoria)
   ═══════════════════════════════════════════════════════════════════════════ */

/* e1 - Slate */
.badge-type.e1, .badge.e1 {
    color: #334155;
    border: 1.5px solid #475569;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(71, 85, 105, 0.1);
}

/* e2 - Orange */
.badge-type.e2, .badge.e2 {
    color: #c2410c;
    border: 1.5px solid #f97316;
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
    box-shadow: 0 1px 2px rgba(249, 115, 22, 0.12);
}

/* e3 - Yellow */
.badge-type.e3, .badge.e3 {
    color: #a16207;
    border: 1.5px solid #facc15;
    background: linear-gradient(135deg, #ffffff 0%, #fefce8 100%);
    box-shadow: 0 1px 2px rgba(250, 204, 21, 0.15);
}

/* e4 - Lime */
.badge-type.e4, .badge.e4 {
    color: #4d7c0f;
    border: 1.5px solid #84cc16;
    background: linear-gradient(135deg, #ffffff 0%, #f7fee7 100%);
    box-shadow: 0 1px 2px rgba(132, 204, 22, 0.12);
}

/* e5 - Sky */
.badge-type.e5, .badge.e5 {
    color: #0369a1;
    border: 1.5px solid #0ea5e9;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    box-shadow: 0 1px 2px rgba(14, 165, 233, 0.12);
}

/* e6 - Violet */
.badge-type.e6, .badge.e6 {
    color: #6d28d9;
    border: 1.5px solid #a78bfa;
    background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
    box-shadow: 0 1px 2px rgba(167, 139, 250, 0.12);
}

/* e7 - Pink */
.badge-type.e7, .badge.e7 {
    color: #be185d;
    border: 1.5px solid #ec4899;
    background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
    box-shadow: 0 1px 2px rgba(236, 72, 153, 0.12);
}

/* e8 - Gray */
.badge-type.e8, .badge.e8 {
    color: #475569;
    border: 1.5px solid #94a3b8;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(148, 163, 184, 0.12);
}

/* e9 - Cyan */
.badge-type.e9, .badge.e9 {
    color: #0e7490;
    border: 1.5px solid #06b6d4;
    background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%);
    box-shadow: 0 1px 2px rgba(6, 182, 212, 0.12);
}

/* e10 - Red */
.badge-type.e10, .badge.e10 {
    color: #b91c1c;
    border: 1.5px solid #ef4444;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILLED STYLES (e11-e20) - Para ESTADOS (pendiente, pagado, cancelado)
   Estilo suave pastel: fondo claro + texto oscuro (misma linea que badge-success)
   ═══════════════════════════════════════════════════════════════════════════ */

/* e11 - Slate filled */
.badge.e11 {
    color: #334155;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: 0 1px 2px rgba(71, 85, 105, 0.15);
}

/* e12 - Orange filled */
.badge.e12 {
    color: #9a3412;
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    box-shadow: 0 1px 2px rgba(249, 115, 22, 0.15);
}

/* e13 - Yellow filled */
.badge.e13 {
    color: #854d0e;
    background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%);
    box-shadow: 0 1px 2px rgba(250, 204, 21, 0.15);
}

/* e14 - Lime filled */
.badge.e14 {
    color: #3f6212;
    background: linear-gradient(135deg, #f7fee7 0%, #d9f99d 100%);
    box-shadow: 0 1px 2px rgba(132, 204, 22, 0.15);
}

/* e15 - Sky filled */
.badge.e15 {
    color: #075985;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    box-shadow: 0 1px 2px rgba(14, 165, 233, 0.15);
}

/* e16 - Violet filled */
.badge.e16 {
    color: #5b21b6;
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    box-shadow: 0 1px 2px rgba(139, 92, 246, 0.15);
}

/* e17 - Pink filled */
.badge.e17 {
    color: #9d174d;
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    box-shadow: 0 1px 2px rgba(236, 72, 153, 0.15);
}

/* e18 - Gray filled */
.badge.e18 {
    color: #374151;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    box-shadow: 0 1px 2px rgba(107, 114, 128, 0.12);
}

/* e19 - Cyan filled */
.badge.e19 {
    color: #155e75;
    background: linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%);
    box-shadow: 0 1px 2px rgba(6, 182, 212, 0.15);
}

/* e20 - Red filled */
.badge.e20 {
    color: #991b1b;
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.15);
}

/* ═══════════ HOVER STATES ═══════════ */
.badge:hover,
.badge-type:hover {
    filter: brightness(0.97);
    transition: filter 0.15s ease;
}

/* ═══════════ TAMANOS ALTERNATIVOS ═══════════ */
.badge-sm,
.badge-type-sm {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 16px;
}

.badge-lg,
.badge-type-lg {
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 24px;
}

/* ═══════════ CARD TITLE + CARD BODY ═══════════ */
/* When compact title is followed by DnzCardBody, the background contrast acts as separator — border is redundant */
header:has(+ .dnz-card-body) {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ═══════════ AUTOFADE ═══════════ */
.autofade {
    animation: autofade-in 0.25s ease-out;
}

@keyframes autofade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════ DnzImageEditor ═══════════ */
.dnz-imged { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.dnz-imged-toolbar { display:flex; align-items:center; padding:4px 8px; background:var(--rz-base-100); border-bottom:1px solid var(--rz-base-300); min-height:36px; flex-shrink:0; }
.dnz-imged-sep { width:1px; height:20px; background:var(--rz-base-300); margin:0 4px; flex-shrink:0; }
.dnz-imged-body { display:flex; flex:1; overflow:hidden; }
.dnz-imged-canvas-area { flex:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:var(--rz-base-50); }
.dnz-imged-dropzone { display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px; border:1.5px dashed var(--rz-base-300); border-radius:8px; cursor:pointer; transition:all .15s; text-align:center; }
.dnz-imged-dropzone:hover { border-color:var(--rz-primary); background:rgba(52,129,229,.06); }
.dnz-imged-canvas-wrap { position:relative; max-width:calc(100% - 16px); max-height:calc(100% - 16px); }
.dnz-imged-canvas-wrap canvas { display:block; max-width:100%; max-height:100%; border-radius:3px; box-shadow:0 4px 20px rgba(0,0,0,.15); }
.dnz-imged-scan-overlay { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; border-radius:3px; }
.dnz-imged-scan-line { position:absolute; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent 0%, rgba(52,129,229,.85) 30%, rgba(100,170,255,1) 50%, rgba(52,129,229,.85) 70%, transparent 100%); box-shadow:0 0 12px 4px rgba(52,129,229,.5), 0 0 30px 8px rgba(52,129,229,.2); animation:dnz-scan 1.6s ease-in-out infinite; }
@keyframes dnz-scan { 0% { top:0; } 50% { top:100%; } 100% { top:0; } }
.dnz-imged-crop-ov { position:absolute; inset:0; display:none; cursor:crosshair; }
.dnz-imged-crop-ov.active { display:block; }
.dnz-imged-crop-sel { position:absolute; border:1.5px solid var(--rz-primary); box-shadow:0 0 0 9999px rgba(0,0,0,.4); display:none; }
.dnz-imged-crop-sel.vis { display:block; }
.dnz-imged-crop-h { position:absolute; width:8px; height:8px; background:var(--rz-primary); border:1.5px solid #fff; border-radius:1px; }
.dnz-imged-crop-h.tl { top:-4px; left:-4px; cursor:nw-resize; }
.dnz-imged-crop-h.tr { top:-4px; right:-4px; cursor:ne-resize; }
.dnz-imged-crop-h.bl { bottom:-4px; left:-4px; cursor:sw-resize; }
.dnz-imged-crop-h.br { bottom:-4px; right:-4px; cursor:se-resize; }
.dnz-imged-crop-dim { position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font:500 10px/1 monospace; color:var(--rz-primary); background:rgba(0,0,0,.6); padding:2px 6px; border-radius:3px; white-space:nowrap; }
.dnz-imged-crop-bar { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; padding:5px 8px; background:var(--rz-base-100); border:1px solid var(--rz-base-300); border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.15); z-index:10; }
.dnz-imged-side-panel { width:200px; background:var(--rz-base-100); border-left:1px solid var(--rz-base-300); flex-shrink:0; overflow-y:auto; }
.dnz-imged-footer { display:flex; align-items:center; padding:4px 10px; background:var(--rz-base-100); border-top:1px solid var(--rz-base-300); font:10px/1 monospace; color:var(--rz-text-tertiary-color); min-height:24px; flex-shrink:0; }