/* ==========================================================
   CRM - MICROINTERACCIONES
   Lo que hace que un software se sienta vivo no son las
   animaciones grandes: son las respuestas chicas, de menos de
   200ms, que confirman que el sistema te escucho.

   Regla de oro: todo lo que se mueve, se mueve con transform u
   opacity. Cualquier otra propiedad obliga al navegador a
   recalcular layout y ahi aparece el tironeo.
   ========================================================== */

/* ==========================================================
   1. SPOTLIGHT EN TARJETAS
   Un halo tenue que sigue al cursor dentro de la tarjeta.
   js/micro.js escribe --mx / --my. Es el detalle que usan
   Linear, Vercel y Attio: se percibe como material real
   reaccionando a la luz, no como una caja.
   ========================================================== */

.glass-panel,
.stat-card,
.metric-card {
    position: relative;
    isolation: isolate;
    transition: border-color var(--d-fast) var(--c-inout),
                transform var(--d-fast) var(--c-out);
}

.glass-panel::before,
.stat-card::before,
.metric-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--d-base) var(--c-inout);
    background: radial-gradient(
        320px circle at var(--mx, 50%) var(--my, 50%),
        color-mix(in srgb, var(--primary) 8%, transparent),
        transparent 60%
    );
}

.glass-panel:hover::before,
.stat-card:hover::before,
.metric-card:hover::before { opacity: 1; }

.stat-card:hover,
.metric-card:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color)) !important;
    transform: translateY(-1px);
}

/* ==========================================================
   2. BOTONES
   Tres capas de respuesta: brillo que barre al pasar, hundido
   al presionar, y onda desde el punto exacto del click.
   ========================================================== */

.btn, .btn-primary, .btn-secondary, .btn-icon, .tab-btn {
    position: relative;
    overflow: hidden;
    transition: background var(--d-fast) var(--c-inout),
                border-color var(--d-fast) var(--c-inout),
                color var(--d-fast) var(--c-inout),
                transform var(--d-instant) var(--c-inout);
}

/* Barrido de luz: cruza el boton primario al entrar el cursor */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-101%);
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 80%
    );
    pointer-events: none;
}

.btn-primary:hover::after {
    animation: barrido 620ms var(--c-inout);
}

@keyframes barrido {
    to { transform: translateX(101%); }
}

.btn:active, .btn-primary:active, .btn-icon:active {
    transform: scale(0.975) !important;
}

/* Onda desde el punto del click. js/micro.js fija --rx / --ry. */
.onda {
    position: absolute;
    left: var(--rx);
    top: var(--ry);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.28;
    pointer-events: none;
    transform: scale(0);
    animation: onda-expandir 520ms var(--c-out) forwards;
}

@keyframes onda-expandir {
    to { transform: scale(26); opacity: 0; }
}

/* ==========================================================
   3. FILAS DE TABLA
   Al pasar el cursor la fila se corre 2px y aparece su barra
   izquierda. Las acciones estaban siempre visibles: ahora se
   revelan solo en la fila apuntada, que es como se mantiene
   limpia una tabla densa.
   ========================================================== */

.custom-table tbody tr,
.lead-row {
    position: relative;
    transition: background var(--d-fast) var(--c-inout),
                transform var(--d-fast) var(--c-out);
}

.custom-table tbody tr::before,
.lead-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--primary);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--d-fast) var(--c-out);
}

.custom-table tbody tr:hover::before,
.lead-row:hover::before { transform: scaleY(1); }

.custom-table tbody tr:hover,
.lead-row:hover { transform: translateX(2px); }

.custom-table tbody tr .acciones,
.custom-table tbody tr [class*="accion"],
.lead-row .acciones {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--d-fast) var(--c-inout),
                transform var(--d-fast) var(--c-out);
}

.custom-table tbody tr:hover .acciones,
.custom-table tbody tr:hover [class*="accion"],
.custom-table tbody tr:focus-within .acciones,
.lead-row:hover .acciones { opacity: 1; transform: none; }

/* ==========================================================
   4. ENTRADA ESCALONADA
   Solo al cambiar de vista y solo los bloques de primer nivel:
   seis elementos como maximo, 30ms entre cada uno. Escalonar
   200 filas es exactamente lo que hacia que se trabara.
   ========================================================== */

.tab-content.active > *:nth-child(1) { animation: subir 380ms var(--c-out) both; }
.tab-content.active > *:nth-child(2) { animation: subir 380ms var(--c-out) 30ms both; }
.tab-content.active > *:nth-child(3) { animation: subir 380ms var(--c-out) 60ms both; }
.tab-content.active > *:nth-child(4) { animation: subir 380ms var(--c-out) 90ms both; }
.tab-content.active > *:nth-child(5) { animation: subir 380ms var(--c-out) 120ms both; }
.tab-content.active > *:nth-child(n+6) { animation: subir 380ms var(--c-out) 150ms both; }

@keyframes subir {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================
   5. NUMEROS QUE CUENTAN
   Una metrica que aparece ya escrita no comunica nada. Contando
   desde cero se lee como un dato que el sistema acaba de
   calcular. js/micro.js hace el conteo.
   ========================================================== */

.stat-value, .metric-value, [data-contar] {
    font-variant-numeric: tabular-nums;
    transition: color var(--d-fast) var(--c-inout);
}

/* Al actualizarse un valor, pulso corto de color */
.valor-actualizado {
    animation: pulso-valor 620ms var(--c-out);
}

@keyframes pulso-valor {
    0%   { color: var(--primary); transform: translateY(-2px); }
    100% { color: inherit; transform: none; }
}

/* ==========================================================
   6. INPUTS
   La etiqueta se tiñe con el foco. Detalle chico, respuesta
   inmediata: confirma donde estas parado sin leer.
   ========================================================== */

.campo-grupo:focus-within label,
label:has(+ input:focus),
label:has(+ .campo:focus) {
    color: var(--primary) !important;
    transition: color var(--d-fast) var(--c-inout);
}

input, select, textarea, .campo, .select-field {
    transition: border-color var(--d-fast) var(--c-inout),
                box-shadow var(--d-fast) var(--c-inout),
                background var(--d-fast) var(--c-inout) !important;
}

input:hover, select:hover, textarea:hover {
    border-color: var(--text-dim) !important;
}

/* ==========================================================
   7. NAVEGACION
   El icono de la pestaña activa se levanta 1px. Sutil, pero
   hace que el item se lea como seleccionado y no como pintado.
   ========================================================== */

.tab-btn i {
    transition: transform var(--d-fast) var(--c-out),
                color var(--d-fast) var(--c-inout);
}

.tab-btn:hover i { transform: translateY(-1px); }

.tab-btn.active i {
    color: var(--primary) !important;
    transform: translateY(-1px);
}

/* ==========================================================
   8. BADGES Y CHIPS
   ========================================================== */

.badge, .tab-badge, .chip {
    transition: background var(--d-fast) var(--c-inout),
                transform var(--d-fast) var(--c-out);
}

.tab-btn:hover .tab-badge { transform: scale(1.06); }

/* Punto de realtime: latido real, no parpadeo */
.status-indicator.connected .dot {
    position: relative;
}

.status-indicator.connected .dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    opacity: 0;
    animation: latido 2.4s var(--c-out) infinite;
}

@keyframes latido {
    0%   { transform: scale(0.6); opacity: 0.7; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* ==========================================================
   9. SCROLL
   Sombra bajo la cabecera solo cuando hay contenido arriba.
   Le da profundidad al scroll sin sombras permanentes.
   ========================================================== */

.top-navbar {
    transition: box-shadow var(--d-base) var(--c-inout),
                background var(--d-base) var(--c-inout);
}

body.scrolleado .top-navbar {
    box-shadow: 0 1px 0 var(--border-color), 0 6px 20px rgba(0, 0, 0, 0.28) !important;
}

/* ==========================================================
   10. TOASTS
   ========================================================== */

.toast, .crm-toast {
    animation: toast-entra 320ms var(--c-out) both;
}

.toast.saliendo, .crm-toast.saliendo {
    animation: toast-sale 220ms var(--c-inout) both;
}

@keyframes toast-entra {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes toast-sale {
    to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* ==========================================================
   11. RESPETO POR EL SISTEMA
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .glass-panel::before,
    .stat-card::before,
    .metric-card::before,
    .btn-primary::after,
    .onda,
    .status-indicator.connected .dot::after { display: none !important; }

    .tab-content.active > * { animation: none !important; }
}