/**
 * Vibro Shared CSS
 *
 * Tokens de diseño compartidos y clases utilitarias comunes del ecosistema Vibro.
 * Encolado por ZS Vibro Business Engine en frontend y admin.
 *
 * USO EN MÓDULOS (migración gradual):
 *   Los módulos pueden reemplazar los valores hardcodeados por variables CSS:
 *     color: #13b4c1  →  color: var(--vibro-primary)
 *     background: #c1d12f  →  background: var(--vibro-accent)
 *   Esto es opcional y puede hacerse módulo por módulo.
 *
 * @package ZS_Vibro
 * @since   0.7.0
 */

/* ==========================================================================
   1. Tokens de diseño — Variables CSS globales
   ========================================================================== */

:root {
    /* Colores de marca principales */
    --vibro-primary:     #13b4c1;   /* Teal — botones, links, estados activos */
    --vibro-accent:      #c1d12f;   /* Verde-amarillo — tabs inactivos, highlights */
    --vibro-dark:        #04142f;   /* Azul oscuro — badges de fecha, fondos */
    --vibro-dark-alt:    #1f2428;   /* Gris oscuro — botón registrarse en header */
    --vibro-cyan:        #23bfd3;   /* Cyan — botón upgrade en header */

    /* Colores neutros */
    --vibro-white:       #ffffff;
    --vibro-bg-soft:     #f7f7fb;   /* Fondo suave para stats, cards secundarias */
    --vibro-bg-muted:    #f0f2f5;   /* Pills, badges neutros */
    --vibro-border:      #ddd;      /* Bordes de cards */
    --vibro-border-soft: #e8e8ee;   /* Bordes de cards más suaves */
    --vibro-text:        #111;
    --vibro-text-muted:  #666a73;

    /* Colores de estado (notificaciones) */
    --vibro-success-bg:  #ecfdf5;
    --vibro-success-fg:  #065f46;
    --vibro-error-bg:    #fef2f2;
    --vibro-error-fg:    #991b1b;
    --vibro-info-bg:     #eff6ff;
    --vibro-info-fg:     #1d4ed8;
    --vibro-warning-bg:  #fffbeb;
    --vibro-warning-fg:  #92400e;

    /* Tipografía */
    --vibro-font-sm:     13px;
    --vibro-font-base:   14px;

    /* Espaciado y geometría */
    --vibro-radius-sm:   10px;
    --vibro-radius-md:   14px;
    --vibro-radius-lg:   18px;
    --vibro-gap-sm:      10px;
    --vibro-gap-md:      12px;
    --vibro-gap-lg:      16px;

    /* Transición estándar */
    --vibro-transition:  0.18s ease;
}

/* ==========================================================================
   2. Animaciones compartidas
   Idénticas a las definidas en cada módulo (.zsvbcSpin, .zsvbvSpin, etc.)
   ========================================================================== */

@keyframes vibroSpin {
    to { transform: rotate(360deg); }
}

@keyframes vibroFadeIn {
    from { opacity: 0.08; transform: translateY(4px); }
    to   { opacity: 1;    transform: translateY(0);   }
}

/* ==========================================================================
   3. Componentes utilitarios compartidos
   Prefijo .vibro- para no colisionar con los prefijos de cada módulo.
   Los módulos siguen usando sus propias clases (.zsvbc-btn, .zsvbv-btn, etc.)
   hasta que se migren gradualmente.
   ========================================================================== */

/* --- Notificaciones genéricas --- */
.vibro-notice {
    padding: 14px 16px;
    border-radius: var(--vibro-radius-sm);
    margin: 0 0 18px;
    font-size: var(--vibro-font-base);
    line-height: 1.5;
}

.vibro-notice--success {
    background: var(--vibro-success-bg);
    color: var(--vibro-success-fg);
}

.vibro-notice--error {
    background: var(--vibro-error-bg);
    color: var(--vibro-error-fg);
}

.vibro-notice--info {
    background: var(--vibro-info-bg);
    color: var(--vibro-info-fg);
}

.vibro-notice--warning {
    background: var(--vibro-warning-bg);
    color: var(--vibro-warning-fg);
}

/* --- Estado vacío --- */
.vibro-empty {
    padding: 20px;
    border: 1px dashed #cbd5e1;
    border-radius: var(--vibro-radius-md);
    color: var(--vibro-text-muted);
    font-size: var(--vibro-font-base);
}

/* --- Indicador de carga (spinner) --- */
.vibro-is-loading {
    opacity: 0.35;
    pointer-events: none;
    position: relative;
    transition: opacity var(--vibro-transition);
}

.vibro-is-loading::after {
    content: '';
    position: absolute;
    top: 26px;
    right: 18px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(87, 87, 242, 0.25);
    border-top-color: var(--vibro-primary);
    border-radius: 50%;
    animation: vibroSpin 0.6s linear infinite;
}

/* --- Fragmento con animación de entrada --- */
.vibro-fragment-enter {
    animation: vibroFadeIn var(--vibro-transition);
}