/* Sistema de estilos dinámico compartido: panel admin (EasyAdmin) + páginas públicas. */

:root {
    --kx-transition-fast: 150ms cubic-bezier(.4, 0, .2, 1);
    --kx-transition: 220ms cubic-bezier(.4, 0, .2, 1);
    --kx-transition-slow: 380ms cubic-bezier(.16, 1, .3, 1);
    --kx-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
    --kx-shadow-md: 0 10px 26px rgba(15, 23, 42, .14);
    --kx-shadow-lg: 0 22px 48px rgba(15, 23, 42, .22);
    --kx-primary: #7c3aed;
    --kx-primary-2: #6d28d9;
    --kx-accent: #06b6d4;
    --kx-gradient-brand: linear-gradient(135deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%);
    --kx-gradient-accent: linear-gradient(135deg, #7c3aed, #06b6d4);
    --kx-gradient-mesh:
        radial-gradient(60% 50% at 15% 10%, rgba(124, 58, 237, .35), transparent 60%),
        radial-gradient(50% 45% at 85% 15%, rgba(6, 182, 212, .28), transparent 60%),
        radial-gradient(55% 50% at 50% 100%, rgba(124, 58, 237, .22), transparent 60%);
}

@keyframes kx-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes kx-pop-in {
    from { opacity: 0; transform: scale(.94) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes kx-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .45); }
    70% { box-shadow: 0 0 0 16px rgba(124, 58, 237, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
@keyframes kx-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes kx-spin {
    to { transform: rotate(360deg); }
}
@keyframes kx-bounce-in {
    0% { opacity: 0; transform: scale(.5); }
    60% { opacity: 1; transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ---------- Utilidades genéricas reutilizables ---------- */
.kx-animate-in { animation: kx-fade-up .5s cubic-bezier(.16, 1, .3, 1) both; }
.kx-pop-in { animation: kx-pop-in .4s cubic-bezier(.16, 1, .3, 1) both; }
.kx-bounce-in { animation: kx-bounce-in .5s cubic-bezier(.16, 1, .3, 1) both; }
.kx-d1 { animation-delay: .04s; } .kx-d2 { animation-delay: .08s; }
.kx-d3 { animation-delay: .12s; } .kx-d4 { animation-delay: .16s; }
.kx-d5 { animation-delay: .20s; } .kx-d6 { animation-delay: .24s; }
.kx-d7 { animation-delay: .28s; } .kx-d8 { animation-delay: .32s; }

.kx-card { transition: transform var(--kx-transition), box-shadow var(--kx-transition); }
.kx-card:hover { transform: translateY(-4px); box-shadow: var(--kx-shadow-md); }

.kx-btn {
    transition: transform var(--kx-transition-fast), box-shadow var(--kx-transition-fast), filter var(--kx-transition-fast);
}
.kx-btn:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: var(--kx-shadow-md); }
.kx-btn:active { transform: translateY(0) scale(.97); filter: brightness(.97); }

.kx-pulse { animation: kx-pulse-ring 2s infinite; }

.kx-skeleton {
    background: linear-gradient(90deg, rgba(148,163,184,.18) 25%, rgba(148,163,184,.32) 37%, rgba(148,163,184,.18) 63%);
    background-size: 400% 100%;
    animation: kx-shimmer 1.4s ease infinite;
}

.kx-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    display: inline-block;
    animation: kx-spin .8s linear infinite;
    vertical-align: middle;
}

/* ---------- Panel EasyAdmin: hace dinámico todo el CRUD generado ---------- */
.content-wrapper { animation: kx-fade-up .4s cubic-bezier(.16, 1, .3, 1) both; }

.ea-sidebar-item-link {
    transition: background-color var(--kx-transition-fast), padding-left var(--kx-transition-fast), color var(--kx-transition-fast);
    border-radius: 8px;
}
.ea-sidebar-item-link:hover { background-color: rgba(124, 58, 237, .09); padding-left: 6px; }

table.datagrid tbody tr { transition: background-color var(--kx-transition-fast); }
table.datagrid tbody tr:hover { background-color: rgba(124, 58, 237, .045); }

.btn, a.btn, button.btn {
    transition: transform var(--kx-transition-fast), box-shadow var(--kx-transition-fast), filter var(--kx-transition-fast);
}
.btn:hover, a.btn:hover, button.btn:hover { transform: translateY(-1px); }
.btn:active, a.btn:active, button.btn:active { transform: translateY(0) scale(.98); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--kx-shadow-sm); }

.badge { transition: transform var(--kx-transition-fast); }

.form-widget input:not([type=checkbox]):not([type=radio]),
.form-widget select,
.form-widget textarea {
    transition: border-color var(--kx-transition-fast), box-shadow var(--kx-transition-fast);
}
.form-widget input:not([type=checkbox]):not([type=radio]):focus,
.form-widget select:focus,
.form-widget textarea:focus {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
}

.user-avatar { transition: transform var(--kx-transition-fast); }
.user-details:hover .user-avatar { transform: scale(1.06); }

/* ---------- Pulido profesional: marca, jerarquía, iconografía ---------- */

/* Título de página con acento de marca */
.content-header-title .title {
    position: relative;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Item activo del menú lateral: acento en degradado + barra lateral */
.ea-sidebar-item.is-active > .ea-sidebar-item-link {
    background: linear-gradient(90deg, rgba(124, 58, 237, .14), rgba(124, 58, 237, .03));
    position: relative;
    font-weight: 600;
}
.ea-sidebar-item.is-active > .ea-sidebar-item-link::before {
    content: '';
    position: absolute;
    left: -1px; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--kx-gradient-brand);
}
.ea-sidebar-item.is-active > .ea-sidebar-item-link .ea-sidebar-item-icon { color: var(--kx-primary); }

/* Botones primarios: degradado de marca con brillo al pasar el mouse */
.btn.btn-primary, a.btn.btn-primary, .action-new {
    background: var(--kx-gradient-brand);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(124, 58, 237, .28);
}
.btn.btn-primary:hover, a.btn.btn-primary:hover, .action-new:hover {
    box-shadow: 0 6px 18px rgba(124, 58, 237, .38);
}

/* Insignia circular con degradado, para iconos destacados (stat cards, cabeceras de sección) */
.kx-icon-badge {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--kx-gradient-brand);
    color: #fff; font-size: 1.15rem;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .3);
    flex-shrink: 0;
}
.kx-icon-badge.kx-icon-badge-outline {
    background: rgba(124, 58, 237, .1);
    color: var(--kx-primary);
    box-shadow: none;
}

/* Etiqueta pequeña tipo "eyebrow" con punto de color */
.kx-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: #64748b;
}
.kx-eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--kx-gradient-brand);
}

/* Punto de estado (pendiente/activo) con pulso opcional */
.kx-status-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; margin-right: .4rem; vertical-align: middle;
}
.kx-status-dot.kx-pulse { animation: kx-pulse-ring 1.8s infinite; }

/* Estado vacío pulido */
.kx-empty {
    text-align: center; padding: 3rem 1.5rem; color: #94a3b8;
}
.kx-empty .kx-empty-icon {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
    background: rgba(124, 58, 237, .08); color: var(--kx-primary);
}
.kx-empty .kx-empty-title { font-weight: 700; color: #334155; font-size: .95rem; margin-bottom: .25rem; }
.kx-empty .kx-empty-text { font-size: .85rem; }

/* Malla de degradado decorativa para fondos hero (login, estación) */
.kx-mesh-bg { position: relative; isolation: isolate; }
.kx-mesh-bg::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--kx-gradient-mesh);
}

/* Scrollbar refinada (WebKit) */
.logs-box::-webkit-scrollbar, .ea-sidebar-content::-webkit-scrollbar { width: 8px; }
.logs-box::-webkit-scrollbar-track { background: transparent; }
.logs-box::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .35); border-radius: 999px;
}
.logs-box::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .55); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}