/* ============================================================
   🎨 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%);
}

/* ============================================================
   🌙 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;
}

/* ============================================================
   🌍 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);
}

/* ============================================================
   ⚠️ 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; }