/* ============================================================
   🎨 app.css — Estilos globales RG Clouds
   🎯 Sistema de temas con CSS custom properties
   📱 Responsive + PWA ready
   ============================================================ */

/* ============================================================
   🎨 TEMAS — Variables CSS por tema
   📝 Cada tema define colores primarios y secundarios
   ============================================================ */

/* 🔵 RG Clouds — Paleta oficial del logo (por defecto) */
:root,
[data-theme="blue"] {
    --rg-primary: #0B8AD9;
    --rg-primary-hover: #0977BE;
    --rg-primary-light: #dff0fb;
    --rg-primary-dark: #065A8C;
    --rg-primary-rgb: 11, 138, 217;
    --rg-gradient: linear-gradient(135deg, #043b5c 0%, #0B8AD9 50%, #47b0f0 100%);
    --rg-gradient-soft: linear-gradient(135deg, #edf7fd 0%, #dff0fb 100%);
}

/* 🟢 Esmeralda */
[data-theme="emerald"] {
    --rg-primary: #10b981;
    --rg-primary-hover: #059669;
    --rg-primary-light: #d1fae5;
    --rg-primary-dark: #047857;
    --rg-primary-rgb: 16, 185, 129;
    --rg-gradient: linear-gradient(135deg, #064e3b 0%, #10b981 50%, #34d399 100%);
    --rg-gradient-soft: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

/* 🟣 Violeta */
[data-theme="violet"] {
    --rg-primary: #8b5cf6;
    --rg-primary-hover: #7c3aed;
    --rg-primary-light: #ede9fe;
    --rg-primary-dark: #6d28d9;
    --rg-primary-rgb: 139, 92, 246;
    --rg-gradient: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 50%, #a78bfa 100%);
    --rg-gradient-soft: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

/* 🔴 Rosa */
[data-theme="rose"] {
    --rg-primary: #f43f5e;
    --rg-primary-hover: #e11d48;
    --rg-primary-light: #ffe4e6;
    --rg-primary-dark: #be123c;
    --rg-primary-rgb: 244, 63, 94;
    --rg-gradient: linear-gradient(135deg, #881337 0%, #f43f5e 50%, #fb7185 100%);
    --rg-gradient-soft: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
}

/* 🟡 Ambar */
[data-theme="amber"] {
    --rg-primary: #f59e0b;
    --rg-primary-hover: #d97706;
    --rg-primary-light: #fef3c7;
    --rg-primary-dark: #b45309;
    --rg-primary-rgb: 245, 158, 11;
    --rg-gradient: linear-gradient(135deg, #78350f 0%, #f59e0b 50%, #fbbf24 100%);
    --rg-gradient-soft: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

/* ⚫ Grafito */
[data-theme="slate"] {
    --rg-primary: #64748b;
    --rg-primary-hover: #475569;
    --rg-primary-light: #e2e8f0;
    --rg-primary-dark: #334155;
    --rg-primary-rgb: 100, 116, 139;
    --rg-gradient: linear-gradient(135deg, #0f172a 0%, #475569 50%, #94a3b8 100%);
    --rg-gradient-soft: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* 🟦 Índigo */
[data-theme="indigo"] {
    --rg-primary: #4f46e5;
    --rg-primary-hover: #4338ca;
    --rg-primary-light: #e0e7ff;
    --rg-primary-dark: #3730a3;
    --rg-primary-rgb: 79, 70, 229;
    --rg-gradient: linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #818cf8 100%);
    --rg-gradient-soft: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}

/* 🟦 Cielo */
[data-theme="sky"] {
    --rg-primary: #0ea5e9;
    --rg-primary-hover: #0284c7;
    --rg-primary-light: #e0f2fe;
    --rg-primary-dark: #036aa1;
    --rg-primary-rgb: 14, 165, 233;
    --rg-gradient: linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 50%, #38bdf8 100%);
    --rg-gradient-soft: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

/* 🟦 Cyan */
[data-theme="cyan"] {
    --rg-primary: #06b6d4;
    --rg-primary-hover: #0891b2;
    --rg-primary-light: #cffafe;
    --rg-primary-dark: #0e7490;
    --rg-primary-rgb: 6, 182, 212;
    --rg-gradient: linear-gradient(135deg, #155e75 0%, #06b6d4 50%, #22d3ee 100%);
    --rg-gradient-soft: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
}

/* 🟢 Teal */
[data-theme="teal"] {
    --rg-primary: #14b8a6;
    --rg-primary-hover: #0d9488;
    --rg-primary-light: #ccfbf1;
    --rg-primary-dark: #115e59;
    --rg-primary-rgb: 20, 184, 166;
    --rg-gradient: linear-gradient(135deg, #134e4a 0%, #14b8a6 50%, #2dd4bf 100%);
    --rg-gradient-soft: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
}

/* 🟢 Lima */
[data-theme="lime"] {
    --rg-primary: #84cc16;
    --rg-primary-hover: #65a30d;
    --rg-primary-light: #ecfccb;
    --rg-primary-dark: #4d7c0f;
    --rg-primary-rgb: 132, 204, 22;
    --rg-gradient: linear-gradient(135deg, #365314 0%, #84cc16 50%, #a3e635 100%);
    --rg-gradient-soft: linear-gradient(135deg, #f7fee7 0%, #ecfccb 100%);
}

/* 🟠 Naranja */
[data-theme="orange"] {
    --rg-primary: #f97316;
    --rg-primary-hover: #ea580c;
    --rg-primary-light: #ffedd5;
    --rg-primary-dark: #9a3412;
    --rg-primary-rgb: 249, 115, 22;
    --rg-gradient: linear-gradient(135deg, #7c2d12 0%, #f97316 50%, #fb923c 100%);
    --rg-gradient-soft: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

/* 🔴 Rojo */
[data-theme="red"] {
    --rg-primary: #ef4444;
    --rg-primary-hover: #dc2626;
    --rg-primary-light: #fee2e2;
    --rg-primary-dark: #991b1b;
    --rg-primary-rgb: 239, 68, 68;
    --rg-gradient: linear-gradient(135deg, #7f1d1d 0%, #ef4444 50%, #f87171 100%);
    --rg-gradient-soft: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

/* 💗 Magenta */
[data-theme="pink"] {
    --rg-primary: #ec4899;
    --rg-primary-hover: #db2777;
    --rg-primary-light: #fce7f3;
    --rg-primary-dark: #9d174d;
    --rg-primary-rgb: 236, 72, 153;
    --rg-gradient: linear-gradient(135deg, #831843 0%, #ec4899 50%, #f472b6 100%);
    --rg-gradient-soft: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
}

/* 🟣 Fucsia */
[data-theme="fuchsia"] {
    --rg-primary: #d946ef;
    --rg-primary-hover: #c026d3;
    --rg-primary-light: #fae8ff;
    --rg-primary-dark: #86198f;
    --rg-primary-rgb: 217, 70, 239;
    --rg-gradient: linear-gradient(135deg, #701a75 0%, #d946ef 50%, #e879f9 100%);
    --rg-gradient-soft: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
}

/* ============================================================
   🌙 MODO OSCURO — Variables CSS para dark mode
   ============================================================ */

:root,
[data-mode="light"] {
    --rg-accent: var(--rg-primary, #0B8AD9);
    --rg-bg-page: #f4f6fa;
    --rg-bg-card: #ffffff;
    --rg-bg-sidebar: #ffffff;
    --rg-bg-header: rgba(255, 255, 255, 0.92);
    --rg-bg-input: #ffffff;
    --rg-bg-hover: #f8fafc;
    --rg-bg-subtle: #f1f5f9;
    --rg-bg-footer: #fafbfc;
    --rg-border: #eef0f4;
    --rg-border-light: #f1f5f9;
    --rg-text-primary: #1e293b;
    --rg-text-secondary: #475569;
    --rg-text-muted: #64748b;
    --rg-text-faint: #94a3b8;
    --rg-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --rg-shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --rg-shadow-sidebar: 2px 0 12px rgba(0,0,0,0.04);
    /* ── Tokens semánticos de estado ── */
    --rg-success: #16a34a;
    --rg-warning: #d97706;
    --rg-danger:  #dc2626;
    --rg-info:    #0284c7;
}

[data-mode="dark"] {
    --rg-bg-page: #0f1117;
    --rg-bg-card: #1a1d27;
    --rg-bg-sidebar: #13151d;
    --rg-bg-header: rgba(19, 21, 29, 0.92);
    --rg-bg-input: #1a1d27;
    --rg-bg-hover: #1e2130;
    --rg-bg-subtle: #161822;
    --rg-bg-footer: #111318;
    --rg-border: #252837;
    --rg-border-light: #1e2130;
    --rg-text-primary: #e8eaf0;
    --rg-text-secondary: #b0b8c8;
    --rg-text-muted: #7e879a;
    --rg-text-faint: #555e72;
    --rg-shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --rg-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --rg-shadow-sidebar: 2px 0 12px rgba(0,0,0,0.2);
    --rg-gradient-soft: linear-gradient(135deg, rgba(var(--rg-primary-rgb), 0.15), rgba(var(--rg-primary-rgb), 0.05));
    /* ── Tokens semánticos de estado (variantes claras para oscuro) ── */
    --rg-success: #22c55e;
    --rg-warning: #f59e0b;
    --rg-danger:  #f87171;
    --rg-info:    #38bdf8;
}

/* ============================================================
   🎨 MODO "FULL" — Tema teñe TODA la interfaz
   Aplicado al <html> con data-theme-mode="full".
   Las superficies y bordes adoptan tintes derivados del primario.
   data-theme-mode="minimal" (default) usa los tokens base.
   ============================================================ */
[data-theme-mode="full"][data-mode="light"] {
    --rg-bg-page:    rgba(var(--rg-primary-rgb), 0.035);
    --rg-bg-hover:   rgba(var(--rg-primary-rgb), 0.07);
    --rg-bg-subtle:  rgba(var(--rg-primary-rgb), 0.05);
    --rg-bg-sidebar: #ffffff;
    --rg-border:     rgba(var(--rg-primary-rgb), 0.16);
    --rg-border-light: rgba(var(--rg-primary-rgb), 0.10);
}

[data-theme-mode="full"][data-mode="dark"] {
    --rg-bg-page:    color-mix(in srgb, var(--rg-primary) 8%, #0d0f15);
    --rg-bg-card:    color-mix(in srgb, var(--rg-primary) 4%, #161922);
    --rg-bg-sidebar: color-mix(in srgb, var(--rg-primary) 5%, #11131a);
    --rg-bg-header:  color-mix(in srgb, var(--rg-primary) 6%, rgba(17, 19, 26, 0.92));
    --rg-bg-input:   color-mix(in srgb, var(--rg-primary) 3%, #161922);
    --rg-bg-hover:   rgba(var(--rg-primary-rgb), 0.14);
    --rg-bg-subtle:  rgba(var(--rg-primary-rgb), 0.07);
    --rg-bg-footer:  color-mix(in srgb, var(--rg-primary) 4%, #0e1016);
    --rg-border:     rgba(var(--rg-primary-rgb), 0.22);
    --rg-border-light: rgba(var(--rg-primary-rgb), 0.12);
}

/* Fallback para navegadores que no soportan color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    [data-theme-mode="full"][data-mode="dark"] {
        --rg-bg-page:    #0f1117;
        --rg-bg-card:    #1a1d27;
        --rg-bg-sidebar: #13151d;
        --rg-bg-hover:   rgba(var(--rg-primary-rgb), 0.18);
        --rg-bg-subtle:  rgba(var(--rg-primary-rgb), 0.08);
    }
}

/* ============================================================
   🌍 BASE — Reset y estilos globales
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--rg-bg-page, #f8fafc);
    color: var(--rg-text-primary, #1e293b);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================================
   🔘 Botones con tema
   ============================================================ */

.btn-rg-primary {
    background: var(--rg-primary);
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.btn-rg-primary:hover:not(:disabled) {
    background: var(--rg-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--rg-primary-rgb), 0.4);
}

.btn-rg-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-rg-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-rg-outline {
    background: transparent;
    border: 2px solid var(--rg-primary);
    color: var(--rg-primary);
    padding: 0.625rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-rg-outline:hover {
    background: var(--rg-primary);
    color: white;
}

/* ============================================================
   📝 Inputs con tema
   ============================================================ */

.rg-input-group {
    position: relative;
    margin-bottom: 1.25rem;
}

.rg-input-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.375rem;
}

.rg-input {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-left: 2.75rem;
    border: 2px solid var(--rg-border, #e2e8f0);
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: var(--rg-bg-input, white);
    color: var(--rg-text-primary, #1e293b);
    outline: none;
}

.rg-input:focus {
    border-color: var(--rg-primary);
    box-shadow: 0 0 0 3px rgba(var(--rg-primary-rgb), 0.15);
}

.rg-input::placeholder {
    color: #94a3b8;
}

.rg-input-icon {
    position: absolute;
    left: 1rem;
    top: 2.35rem;
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.2s;
}

.rg-input:focus ~ .rg-input-icon,
.rg-input-group:focus-within .rg-input-icon {
    color: var(--rg-primary);
}

/* ============================================================
   📅 Date inputs — Dark mode global fix
   Sin esto el navegador deja el ícono del calendario invisible
   ============================================================ */

input[type="date"],
input[type="month"],
input[type="time"] {
    color-scheme: light;
}

[data-mode="dark"] input[type="date"],
[data-mode="dark"] input[type="month"],
[data-mode="dark"] input[type="time"] {
    color-scheme: dark;
    background: rgba(37, 99, 235, 0.12);
    color: #93c5fd;
    border-color: rgba(37, 99, 235, 0.45);
}

[data-mode="dark"] input[type="date"]:focus,
[data-mode="dark"] input[type="month"]:focus,
[data-mode="dark"] input[type="time"]:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    outline: none;
}

[data-mode="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-mode="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-mode="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.65) sepia(1) saturate(3) hue-rotate(185deg);
    cursor: pointer;
    opacity: 0.85;
}

/* ============================================================
   ⚠️ Alertas
   ============================================================ */

.rg-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    animation: rg-shake 0.4s ease;
}

@keyframes rg-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ============================================================
   🔍 CRUD Search Button — botón lupa en barra de búsqueda
   Aplica globalmente a todos los formularios CRUD.
   El usuario puede buscar presionando Enter O haciendo click aquí.
   ============================================================ */
.crud-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s;
    color: var(--rg-text-muted, #94a3b8);
}
.crud-search-btn:hover {
    color: var(--rg-primary, #0B8AD9);
}
.crud-search-btn i {
    font-size: 0.9rem;
}

/* ============================================================
   🔄 Spinner de carga
   ============================================================ */

.rg-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: rg-spin 0.7s linear infinite;
}

@keyframes rg-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   🎭 Animaciones
   ============================================================ */

.rg-fade-in {
    animation: rg-fadeIn 0.4s ease-out;
}

.rg-slide-up {
    animation: rg-slideUp 0.5s ease-out;
}

.rg-slide-right {
    animation: rg-slideRight 0.4s ease-out;
}

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

@keyframes rg-slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rg-slideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   🔒 Blazor error boundary
   ============================================================ */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error."
}

/* ============================================================
   📱 Responsive utilities
   ============================================================ */

@media (max-width: 576px) {
    .rg-input { font-size: 16px; } /* Evitar zoom en iOS */
}

/* ============================================================
   🎬 Empresa Switch Overlay — DOM nativo (no Blazor)
   Se muestra durante el cambio de empresa para tapar el flicker
   del forceLoad. Vive en el DOM directamente, controlado por JS,
   por lo que NO se pierde durante el reload.
   ============================================================ */

#esw-root {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(30, 41, 59, 0.65) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

#esw-root.esw-active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

#esw-root.esw-leaving {
    opacity: 0;
}

[data-mode="dark"] #esw-root {
    background: linear-gradient(135deg, rgba(2, 6, 23, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
}

#esw-root .esw-card {
    background: var(--rg-bg-card, #ffffff);
    color: var(--rg-text-primary, #1e293b);
    border: 1px solid var(--rg-border, #e2e8f0);
    border-radius: 18px;
    padding: 2.5rem 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.10);
    min-width: 360px;
    max-width: 90vw;
    text-align: center;
    transform: scale(0.92) translateY(12px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#esw-root.esw-active .esw-card {
    transform: scale(1) translateY(0);
}

#esw-root.esw-leaving .esw-card {
    transform: scale(0.96) translateY(-6px);
}

[data-mode="dark"] #esw-root .esw-card {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
}

#esw-root .esw-icon-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#esw-root .esw-icon {
    font-size: 2.5rem;
    color: var(--rg-accent, #4f46e5);
    z-index: 2;
    animation: esw-icon-bounce 2.4s ease-in-out infinite;
}

#esw-root .esw-icon-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--rg-accent, #4f46e5);
    opacity: 0.18;
    z-index: 1;
    animation: esw-pulse 1.8s ease-out infinite;
}

[data-mode="dark"] #esw-root .esw-icon-pulse { opacity: 0.28; }

#esw-root .esw-title {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rg-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#esw-root .esw-empresa {
    margin: 0 0 1.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--rg-text-primary, #1e293b);
    line-height: 1.3;
    word-break: break-word;
}

#esw-root .esw-progress {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--rg-border, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1rem;
}

[data-mode="dark"] #esw-root .esw-progress { background: rgba(148, 163, 184, 0.18); }

#esw-root .esw-progress-bar {
    position: absolute;
    inset: 0;
    width: 35%;
    background: linear-gradient(90deg, transparent 0%, var(--rg-accent, #4f46e5) 50%, transparent 100%);
    border-radius: inherit;
    animation: esw-progress-slide 1.2s ease-in-out infinite;
}

#esw-root .esw-stage {
    margin: 0;
    font-size: 0.82rem;
    color: var(--rg-text-secondary, #475569);
    min-height: 1.2em;
    transition: opacity 0.2s;
}

[data-mode="dark"] #esw-root .esw-stage { color: var(--rg-text-secondary, #94a3b8); }

@keyframes esw-pulse {
    0%   { transform: scale(0.85); opacity: 0.45; }
    70%  { transform: scale(1.4);  opacity: 0;    }
    100% { transform: scale(1.4);  opacity: 0;    }
}

@keyframes esw-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@keyframes esw-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(285%); }
}

@media (max-width: 480px) {
    #esw-root .esw-card { padding: 2rem 1.5rem; min-width: 280px; }
    #esw-root .esw-empresa { font-size: 1.15rem; }
    #esw-root .esw-icon-wrap { width: 60px; height: 60px; }
    #esw-root .esw-icon { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    #esw-root,
    #esw-root .esw-card,
    #esw-root .esw-icon,
    #esw-root .esw-icon-pulse,
    #esw-root .esw-progress-bar { animation: none !important; transition: none !important; }
}

/* ============================================================
   🔌 BLAZOR RECONNECT MODAL — Personalizado RG Clouds (es-DO)
   Reemplaza el cuadro por defecto "Rejoining the server…"
   ============================================================ */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

/* Blazor agrega esta clase cuando pierde la conexión */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

/* Secciones — solo visible la que corresponde al estado actual */
.rg-rcn-state             { display: none; width: 100%; justify-content: center; }
.components-reconnect-show     .rg-rcn-reconnecting { display: flex; }
.components-reconnect-failed   .rg-rcn-failed       { display: flex; }
.components-reconnect-rejected .rg-rcn-rejected     { display: flex; }

/* Tarjeta */
.rg-rcn-card {
    background: var(--rg-bg-card);
    color: var(--rg-text-primary);
    border: 1px solid var(--rg-border);
    border-radius: 1.1rem;
    padding: 2rem 2.2rem;
    text-align: center;
    max-width: 360px;
    width: 92%;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
    animation: rcn-scale-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rcn-scale-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1);    }
}

/* Logo / Ícono */
.rg-rcn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
}
.rg-rcn-icon-spin  { background: rgba(11, 138, 217, 0.12); color: var(--rg-primary); }
.rg-rcn-icon-fail  { background: rgba(239, 68, 68, 0.12);  color: var(--rg-danger);  }

/* Spinner dentro del ícono */
.rg-rcn-spinner {
    display: block;
    width: 34px;
    height: 34px;
    border: 3.5px solid rgba(11, 138, 217, 0.2);
    border-top-color: var(--rg-primary);
    border-radius: 50%;
    animation: rcn-spin 0.85s linear infinite;
}
@keyframes rcn-spin { to { transform: rotate(360deg); } }

/* Marca */
.rg-rcn-brand {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rg-primary);
    margin-bottom: 0.15rem;
}

/* Título */
.rg-rcn-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rg-text-primary);
    margin: 0 0 0.45rem;
}

/* Subtítulo */
.rg-rcn-msg {
    font-size: 0.82rem;
    color: var(--rg-text-secondary);
    margin: 0 0 1.3rem;
    line-height: 1.55;
}

/* Botón acción */
.rg-rcn-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.52rem 1.35rem;
    background: var(--rg-primary);
    color: #fff !important;
    border: none;
    border-radius: 0.55rem;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: filter 0.15s, transform 0.1s;
    box-shadow: 0 2px 10px rgba(11, 138, 217, 0.35);
}
.rg-rcn-btn:hover  { filter: brightness(1.1); transform: translateY(-1px); }
.rg-rcn-btn:active { transform: translateY(0); }

/* Tema oscuro — la tarjeta ya usa tokens, pero sombra reforzada */
[data-mode="dark"] .rg-rcn-card {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   📐 UTILIDADES DE ALINEACIÓN — REGLA GLOBAL
   Blazor CSS isolation añade [b-xxxxx] a los selectores de
   componente, lo que hace que `.crud-table th` tenga mayor
   especificidad que `.text-right`. Este bloque en app.css
   (sin scoping) usa `!important` para garantizar la alineación
   correcta en TODAS las tablas de la aplicación, sin excepción.
   REGLA: columnas numéricas (montos, cantidades, %) → derecha
          columnas de texto (nombres, descripciones) → izquierda
   ============================================================ */

/* Headers de tabla */
th.text-right  { text-align: right  !important; }
th.text-left   { text-align: left   !important; }
th.text-center { text-align: center !important; }

/* Celdas de datos */
td.text-right  { text-align: right  !important; }
td.text-left   { text-align: left   !important; }
td.text-center { text-align: center !important; }

/* Variante combinada para cuando la clase va en el <th> dentro de .crud-table */
.crud-table th.text-right,
.crud-table td.text-right  { text-align: right  !important; }
.crud-table th.text-left,
.crud-table td.text-left   { text-align: left   !important; }
.crud-table th.text-center,
.crud-table td.text-center { text-align: center !important; }

/* ============================================================
   Quill 2.x — Overrides para tokens RG + dark mode
   ============================================================ */
.ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid var(--rg-border) !important;
    background: var(--rg-bg-subtle);
    padding: 0.4rem 0.5rem;
}
.ql-container.ql-snow {
    border: none !important;
    font-family: inherit;
    font-size: 0.9rem;
    background: var(--rg-bg-input);
    color: var(--rg-text-primary);
}
.ql-editor {
    min-height: 200px;
    color: var(--rg-text-primary);
}
.ql-editor.ql-blank::before {
    color: var(--rg-text-muted);
    font-style: italic;
}
.ql-snow .ql-stroke { stroke: var(--rg-text-secondary); }
.ql-snow .ql-fill   { fill: var(--rg-text-secondary); }
.ql-snow .ql-picker { color: var(--rg-text-secondary); }
.ql-snow .ql-picker-options {
    background: var(--rg-bg-card);
    border-color: var(--rg-border) !important;
    color: var(--rg-text-primary);
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke { stroke: var(--rg-accent); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill { fill: var(--rg-accent); }
.ql-snow .ql-tooltip {
    background: var(--rg-bg-card);
    color: var(--rg-text-primary);
    border-color: var(--rg-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ql-snow .ql-tooltip input[type=text] {
    background: var(--rg-bg-input);
    border-color: var(--rg-border);
    color: var(--rg-text-primary);
}

/* ── Botón de ayuda circular — ESTÁNDAR GLOBAL ──────────────────────────── */
/* Uso: <button class="btn-help-circle" @onclick="() => _showHelp = true" title="Ayuda">?</button> */
/* Posición: siempre DENTRO del <h1 class="crud-title"> u otra clase de título  */
.btn-help-circle,
.btn-help-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(37,99,235,0.55);
    background: rgba(37,99,235,0.09);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 0.45rem;
    line-height: 1;
    padding: 0;
    transition: all 0.18s ease;
    flex-shrink: 0;
    font-family: inherit;
}
.btn-help-circle:hover,
.btn-help-inline:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(37,99,235,0.4);
}
[data-mode="dark"] .btn-help-circle,
[data-mode="dark"] .btn-help-inline {
    border-color: rgba(147,197,253,0.55);
    background: rgba(37,99,235,0.14);
    color: #93c5fd;
}
[data-mode="dark"] .btn-help-circle:hover,
[data-mode="dark"] .btn-help-inline:hover {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(29,78,216,0.5);
}

/* ============================================================
   🔒 Inputs numéricos — ocultar spinners (REGLA GLOBAL)
   Los botones up/down de <input type="number"> permiten incrementar
   el valor con un clic o con scroll accidental. En pantallas de PAGOS
   esto causa errores. Se ocultan globalmente; el anti-scroll y el
   bloqueo de flechas ↑/↓ están en app.js.
   ============================================================ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================================================
   Campo requerido / inválido — resaltado estándar GLOBAL
   Cuando una validación falla, el formulario marca el campo con
   la clase `field-invalid` para que el usuario lo identifique de
   inmediato sin buscar. Se limpia al volver a escribir.
   ============================================================ */
input.field-invalid,
select.field-invalid,
textarea.field-invalid,
.field-invalid input,
.field-invalid select,
.field-invalid textarea {
    border-color: var(--rg-danger, #dc2626) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
    background-color: rgba(220, 38, 38, 0.05) !important;
    animation: fieldShake 0.3s ease-in-out;
}
[data-mode="dark"] input.field-invalid,
[data-mode="dark"] select.field-invalid,
[data-mode="dark"] textarea.field-invalid,
[data-mode="dark"] .field-invalid input,
[data-mode="dark"] .field-invalid select,
[data-mode="dark"] .field-invalid textarea {
    background-color: rgba(220, 38, 38, 0.12) !important;
}
@keyframes fieldShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}
/* Label asociado al campo inválido */
.field-invalid-label,
label.field-invalid-label {
    color: var(--rg-danger, #dc2626) !important;
    font-weight: 700 !important;
}

/* ============================================================
   Lookup inputs compartidos (CuentaContableInput, ClienteInput,
   CentroCostoInput) — estilos GLOBALES para que los 3 componentes
   compartan la misma apariencia sin duplicar CSS scoped.
   ============================================================ */
.cci-wrap { display: flex; align-items: stretch; width: 100%; }
.cci-input {
    flex: 1; min-width: 0;
    padding: 0.45rem 0.6rem; font-size: 0.85rem;
    color: var(--rg-text-primary, #1e293b);
    background: var(--rg-bg-input, #fff);
    border: 1px solid var(--rg-border, #e2e8f0); border-right: none;
    border-radius: 0.375rem 0 0 0.375rem;
    outline: none; transition: border-color 0.12s, box-shadow 0.12s;
}
.cci-input:focus { border-color: var(--rg-primary, #1a3a5c); box-shadow: 0 0 0 3px rgba(26,58,92,0.12); }
.cci-btn {
    flex-shrink: 0; width: 2.25rem;
    border: 1px solid var(--rg-border, #e2e8f0);
    border-radius: 0 0.375rem 0.375rem 0;
    background: var(--rg-bg-subtle, #f8fafc);
    color: var(--rg-primary, #1a3a5c);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem; transition: background 0.12s, color 0.12s;
}
.cci-btn:hover { background: var(--rg-primary, #1a3a5c); color: #fff; }
[data-mode="dark"] .cci-btn { color: #93c5fd; }
[data-mode="dark"] .cci-btn:hover { background: var(--rg-accent, #2563eb); color: #fff; }
.cci-wrap.cci-disabled { opacity: 0.55; }
.cci-disabled .cci-input, .cci-disabled .cci-btn { cursor: not-allowed; pointer-events: none; }

/* ── Lookup inputs v2: autocomplete inline + hint ──────────── */
.cci-wrap { flex-direction: column; align-items: stretch; gap: 0.15rem; }
.cci-field { display: flex; align-items: stretch; width: 100%; position: relative; }
.cci-field .cci-input { border-radius: 0.375rem 0 0 0.375rem; }
.cci-input.cci-err { border-color: var(--rg-danger, #dc2626); }
.cci-spin {
    flex-shrink: 0; width: 2.25rem;
    border: 1px solid var(--rg-border, #e2e8f0); border-radius: 0 0.375rem 0.375rem 0;
    background: var(--rg-bg-subtle, #f8fafc); color: var(--rg-text-muted, #94a3b8);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
/* Dropdown de sugerencias */
.cci-drop {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 1200;
    background: var(--rg-bg-card, #fff);
    border: 1px solid var(--rg-border, #e2e8f0); border-radius: 0.4rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    max-height: 260px; overflow-y: auto;
}
.cci-drop-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.8rem;
    border-bottom: 1px solid var(--rg-border-light, #f1f5f9);
}
.cci-drop-item:last-child { border-bottom: none; }
.cci-drop-item:hover, .cci-drop-item.active { background: var(--rg-bg-hover, #f1f5f9); }
.cci-drop-code { font-family: 'Cascadia Code','Consolas',monospace; font-weight: 700; color: var(--rg-primary, #1a3a5c); flex-shrink: 0; }
[data-mode="dark"] .cci-drop-code { color: #93c5fd; }
.cci-drop-desc { flex: 1; color: var(--rg-text-primary, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cci-drop-tag { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 1rem; background: var(--rg-bg-subtle,#f1f5f9); color: var(--rg-text-muted,#64748b); }
.cci-drop-tag.deb { background: rgba(22,163,74,0.15); color: #16a34a; }
.cci-drop-tag.cre { background: rgba(37,99,235,0.15); color: #2563eb; }
[data-mode="dark"] .cci-drop-tag.deb { color: #4ade80; }
[data-mode="dark"] .cci-drop-tag.cre { color: #93c5fd; }
/* Hint debajo */
.cci-hint { font-size: 0.68rem; color: var(--rg-success, #16a34a); padding-left: 0.15rem; }
.cci-hint.err { color: var(--rg-danger, #dc2626); }
[data-mode="dark"] .cci-hint { color: #4ade80; }
[data-mode="dark"] .cci-hint.err { color: #fca5a5; }

/* ── Lookup inputs v3: sin lupa + anti-pestañeo ─────────────── */
/* Input solo (sin botón al lado) — bordes redondeados completos */
.cci-input.solo { border-right: 1px solid var(--rg-border, #e2e8f0); border-radius: 0.375rem; padding-right: 2rem; }
/* Spinner absoluto dentro del input — NO cambia el ancho/layout */
.cci-spin-abs {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    color: var(--rg-text-muted, #94a3b8); font-size: 0.8rem; pointer-events: none;
}
/* Hint SIEMPRE presente con altura fija → el formulario NO se mueve al escribir */
.cci-hint {
    display: block;
    min-height: 0.95rem;
    line-height: 0.95rem;
    margin-top: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}