/* =========================================================================
   Horizons — Panel de agentes · capa de movimiento (1.75.0 · datos 1.76.0)
   Va encima de dashboard.css y usa sus tokens (--hz-ease, --hz-dur-*,
   --hz-stagger, colores). Todo se anima con transform / opacity /
   clip-path. `backwards` y no `both`: el estado final es siempre el CSS
   normal, igual que en dashboard.css 1.49.
   Con prefers-reduced-motion no se mueve nada (bloque del final).
   ========================================================================= */

/* ---------- Entrada con el logo (una vez por sesión) ----------------------
   html.hz-entra lo pone el <script> de <head> (inc/panel-motion.php), que
   también lleva los tiempos: suelta la página a los 1,37 s (hz-entra--sale)
   y quita las clases a los 1,66 s. ::before es el telón azul, ::after el
   logo real + «Panel de agentes». Un clic o una tecla lo adelantan
   (hz-entra--ya, desde hr-panel-motion.js). */
@keyframes hzEntraLogo { from { opacity: 0; transform: translate(-50%, -44%); filter: blur(5px); } to { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); } }
@keyframes hzEntraFuera { to { opacity: 0; visibility: hidden; } }
html.hz-entra { overflow: hidden; }
html.hz-entra::before,
html.hz-entra::after { position: fixed; z-index: 2147483000; pointer-events: auto; }
html.hz-entra::before {
    content: ""; inset: 0;
    background: radial-gradient(700px 360px at 50% 40%, rgba(184,168,136,.15), transparent 70%),
                linear-gradient(160deg, #0B2231 0%, #0E2A3A 55%, #123447 100%);
    animation: hzEntraFuera 380ms cubic-bezier(.55,0,1,.45) 1250ms forwards;
}
html.hz-entra::after {
    --w: min(280px, 70vw);
    content: "Panel de agentes";
    left: 50%; top: 50%; width: var(--w); height: calc(var(--w) * .232 + 58px);
    display: flex; align-items: flex-end; justify-content: center;
    background: url(../img/horizons-wordmark-blanco.png) top center / 100% auto no-repeat,
                linear-gradient(#B8A888, #B8A888) center calc(var(--w) * .232 + 24px) / 120px 1px no-repeat;
    font: 500 10.5px/1 "Outfit", "Helvetica Neue", Arial, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #C9BFA6;
    transform: translate(-50%, -50%);
    animation: hzEntraLogo 700ms cubic-bezier(.22,1,.36,1) both, hzEntraFuera 380ms cubic-bezier(.55,0,1,.45) 1250ms forwards;
}
html.hz-entra.hz-entra--ya::before,
html.hz-entra.hz-entra--ya::after { animation: hzEntraFuera 240ms cubic-bezier(.55,0,1,.45) forwards; }
/* Mientras el telón está arriba, lo de abajo espera desde el primer cuadro:
   la cascada, las barras y los aros arrancan cuando el telón se va. */
html.hz-entra:not(.hz-entra--sale) body * { animation-play-state: paused !important; }

/* ---------- Cambio de módulo -------------------------------------------- */
@keyframes hzMvWipe { from { clip-path: inset(-.3em 100% -.3em -.1em); } to { clip-path: inset(-.3em -.1em -.3em -.1em); } }
@keyframes hzMvFade { from { opacity: 0; } }
/* Salida: el contenido se apaga mientras el servidor arma la página nueva. */
body.houzez-dashboard-body .dashboard-content.hz-sale,
body.houzez-dashboard-body .dashboard-content > .hz-sale {
    opacity: 0; transform: translateY(-6px);
    transition: opacity 170ms cubic-bezier(.55,0,1,.45), transform 170ms cubic-bezier(.55,0,1,.45);
    pointer-events: none;
}
/* Entrada: el título se escribe y los bloques suben en cascada. Es CSS puro
   y corre desde el primer cuadro, así nada se ve quieto y luego salta.
   Inicio y Mis tareas ya traen la suya y no se tocan.
   Solo en la carga: hz-mv-fin (lo pone el JS al terminar) la apaga, porque
   una animación CSS vuelve a correr cada vez que un hijo pasa de oculto a
   visible (paneles de pestañas, la ventana de Producciones). Las ventanas y
   lo que nace oculto no entran nunca en la cascada. */
body.houzez-dashboard-body .dashboard-content:not(.hz-home--v2):not(.hz-mistareas):not(.hz-mv-fin) > :not([hidden]):not(.hz-prod__scrim):not(.hz-ov):not(.hz-modal) {
    animation: hzRise var(--hz-dur-slow, 340ms) var(--hz-ease, ease) backwards;
    animation-delay: calc(110ms + var(--hz-i, 0) * var(--hz-stagger, 40ms));
}
body.houzez-dashboard-body .dashboard-content > :nth-child(2) { --hz-i: 1; }
body.houzez-dashboard-body .dashboard-content > :nth-child(3) { --hz-i: 2; }
body.houzez-dashboard-body .dashboard-content > :nth-child(4) { --hz-i: 3; }
body.houzez-dashboard-body .dashboard-content > :nth-child(5) { --hz-i: 4; }
body.houzez-dashboard-body .dashboard-content > :nth-child(6) { --hz-i: 5; }
body.houzez-dashboard-body .dashboard-content > :nth-child(7) { --hz-i: 6; }
body.houzez-dashboard-body .dashboard-content > :nth-child(8) { --hz-i: 7; }
body.houzez-dashboard-body .dashboard-content > :nth-child(9) { --hz-i: 8; }
body.houzez-dashboard-body .dashboard-content > :nth-child(n+10) { --hz-i: 9; }
body.houzez-dashboard-body .dashboard-content:not(.hz-home--v2):not(.hz-mistareas):not(.hz-mv-fin) > .heading :is(h1, h2) {
    animation: hzMvWipe 640ms var(--hz-ease, ease) 60ms backwards;
}
body.houzez-dashboard-body .dashboard-content:not(.hz-home--v2):not(.hz-mistareas):not(.hz-mv-fin) > .heading p {
    animation: hzMvFade 420ms var(--hz-ease, ease) 220ms backwards;
}
/* Dirección: cambiar de pestaña es cambiar de página, pero el título y las
   pestañas son los mismos; solo entra lo de abajo. */
html.hz-de-tab body.houzez-dashboard-body .dashboard-content > :is(.heading, .hz-mkt__tabs, .hz-tabs),
html.hz-de-tab body.houzez-dashboard-body .dashboard-content > .heading * { animation: none !important; }

/* Marca del menú: una sola pieza que viaja de la opción anterior a la nueva.
   La opción activa deja de pintar su propio fondo y su borde dorado. */
body.houzez-dashboard-body .dashboard-sidebar .sidebar-nav.hz-ink-on { position: relative; }
body.houzez-dashboard-body .dashboard-sidebar .sidebar-nav.hz-ink-on .nav-box ul li a { position: relative; z-index: 1; }
body.houzez-dashboard-body .dashboard-sidebar .sidebar-nav.hz-ink-on .nav-box ul li a.active { background: transparent; border-left-color: transparent; }
body.houzez-dashboard-body .hz-nav-ink {
    position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; box-sizing: border-box;
    background: rgba(255,255,255,.10); border-left: 2px solid var(--hz-gold-warm, #b8a888); border-radius: 3px;
    transition: transform 440ms var(--hz-ease, ease), height 440ms var(--hz-ease, ease), width 440ms var(--hz-ease, ease);
}

/* ---------- Pestañas: el subrayado dorado se desliza --------------------- */
body.houzez-dashboard-body .hz-mv-tabs { position: relative; }
body.houzez-dashboard-body .hz-mv-tabs > .hz-tab.on,
body.houzez-dashboard-body .hz-mv-tabs > .hz-cotiza__tab.is-on { border-bottom-color: transparent !important; }
body.houzez-dashboard-body .hz-mv-ink {
    position: absolute; left: 0; top: 0; height: 2px; z-index: 1; pointer-events: none;
    background: var(--hz-gold, #ADAA97);
    transition: transform 360ms var(--hz-ease, ease), width 360ms var(--hz-ease, ease);
}
body.houzez-dashboard-body .hz-cotiza__tabs .hz-mv-ink { background: var(--hz-brass, #9a8c6a); }
body.houzez-dashboard-body .hz-prod__tabs .hz-mv-ink { background: var(--hz-navy, #0E2A3A); }

/* ---------- Ventanas y avisos -------------------------------------------- */
@keyframes hzMvScrim { from { opacity: 0; } }
@keyframes hzMvCard { from { opacity: 0; transform: translateY(14px) scale(.965); } }
body.houzez-dashboard-body .hz-modal,
body.houzez-dashboard-body .hz-ov:not([hidden]),
body.houzez-dashboard-body .hz-prod__scrim:not([hidden]) {
    animation: hzMvScrim 220ms var(--hz-ease, ease) backwards;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
body.houzez-dashboard-body .hz-modal__card,
body.houzez-dashboard-body .hz-ov:not([hidden]) > .hz-ovbox,
body.houzez-dashboard-body .hz-prod__scrim:not([hidden]) > .hz-prod__modal {
    animation: hzMvCard 320ms var(--hz-ease, ease) 40ms backwards;
}
body.houzez-dashboard-body .hz-toast { transition: opacity 240ms var(--hz-ease, ease), transform 380ms var(--hz-ease, ease); }
/* En teléfonos dashboard.css estira el aviso a todo el ancho, sin translateX. */
@media (min-width: 701px) {
    body.houzez-dashboard-body .hz-toast { transform: translateX(-50%) translateY(18px) scale(.98); }
    body.houzez-dashboard-body .hz-toast.on { transform: translateX(-50%) translateY(0) scale(1); }
}

/* Botones: un leve hundido al pulsar. */
body.houzez-dashboard-body .hz-btn:active:not(:disabled),
body.houzez-dashboard-body .hz-tab:active { transform: scale(.97); }

/* =========================================================================
   Paquete 2 (1.76.0) · los datos — ver assets/js/hr-panel-motion-datos.js
   ========================================================================= */

/* ---------- Filtros: la fila que sale se despide donde estaba -------------
   El módulo ya la escondió (display: none en línea o [hidden]); esta clase la
   vuelve a mostrar 200 ms fuera del flujo, en su sitio, mientras se desvanece.
   El estilo en línea del módulo no se toca. */
body.houzez-dashboard-body .hz-mv-sale {
    display: var(--hz-mv-d, block) !important;
    position: absolute !important;
    left: var(--hz-mv-x, 0) !important; top: var(--hz-mv-y, 0) !important;
    width: var(--hz-mv-w, auto) !important; height: var(--hz-mv-h, auto) !important;
    margin: 0 !important; box-sizing: border-box !important;
    pointer-events: none !important;
    overflow-anchor: none;    /* the browser must not hold the scroll on a row that is leaving */
}
body.houzez-dashboard-body .hz-mv-sale-hijo { display: var(--hz-mv-d, block) !important; overflow-anchor: none; }

/* ---------- Cifras que giran ----------------------------------------------
   El texto real queda (transparente) y manda el ancho; ::before es la cifra
   que se va y ::after la que llega, con el color de antes (--hz-odo-c).
   --hz-odo-dir: 1 sube, -1 baja. `/ ""` saca las dos copias del lector de
   pantalla, que sigue leyendo el texto real. */
@keyframes hzOdoSale { 0% { transform: none; opacity: 1; } 55% { opacity: 0; } 100% { transform: translateY(calc(var(--hz-odo-dir, 1) * -100%)); opacity: 0; } }
@keyframes hzOdoEntra { 0% { transform: translateY(calc(var(--hz-odo-dir, 1) * 100%)); opacity: 0; } 45% { opacity: 1; } 100% { transform: none; opacity: 1; } }
body.houzez-dashboard-body .hz-odo { color: transparent !important; -webkit-text-fill-color: transparent !important; clip-path: inset(0 -2em); }
body.houzez-dashboard-body .hz-odo--rel { position: relative; }
body.houzez-dashboard-body .hz-odo--ib { display: inline-block; }
body.houzez-dashboard-body .hz-odo::before,
body.houzez-dashboard-body .hz-odo::after {
    position: absolute; inset: 0; box-sizing: border-box; padding: inherit;
    text-align: inherit; white-space: nowrap; pointer-events: none;
    color: var(--hz-odo-c); -webkit-text-fill-color: var(--hz-odo-c);
}
body.houzez-dashboard-body .hz-odo--flex::before,
body.houzez-dashboard-body .hz-odo--flex::after { display: flex; align-items: inherit; justify-content: inherit; }
body.houzez-dashboard-body .hz-odo::before {
    content: attr(data-hz-odo-de); content: attr(data-hz-odo-de) / "";
    animation: hzOdoSale 420ms cubic-bezier(.55,0,1,.45) forwards;
}
body.houzez-dashboard-body .hz-odo::after {
    content: attr(data-hz-odo-a); content: attr(data-hz-odo-a) / "";
    animation: hzOdoEntra 460ms var(--hz-ease, ease) both;
}

/* ---------- Gráficas -------------------------------------------------------- */
@keyframes hzMvDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Visitas: la línea se dibuja de izquierda a derecha y el relleno aparece
   debajo (antes se descubría todo junto con un barrido). */
body.houzez-dashboard-body .hz-home--v2 .hz-wipe.hz-wipe--draw { animation: none; }
body.houzez-dashboard-body .hz-wipe--draw .hz-chart__ln { stroke-dasharray: 1; animation: hzMvDraw 1100ms var(--hz-ease, ease) 320ms backwards; }
body.houzez-dashboard-body .hz-wipe--draw .hz-chart__ar { animation: hzMvFade 600ms var(--hz-ease, ease) 760ms backwards; }
/* Dirección › Comisiones del equipo: las barras crecen como en el inicio. */
body.houzez-dashboard-body .dashboard-content:not(.hz-home--v2) .hz-chart .hz-bars2 .hz-bars2__b {
    animation: hzGrow 500ms var(--hz-ease, ease) backwards;
    animation-delay: calc(420ms + var(--i, 0) * 30ms);
}
/* Guía, punto y globito (los pone el JS dentro de la caja de la gráfica). */
body.houzez-dashboard-body .hz-gwrap { position: relative; outline: none; touch-action: pan-y pinch-zoom; }
/* The transparent outline is what Windows high contrast paints (it drops box-shadow). */
body.houzez-dashboard-body .hz-gwrap:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--hz-focus, 0 0 0 3px rgba(39,129,173,.55)); border-radius: 3px; }
body.houzez-dashboard-body .hz-gguia {
    position: absolute; left: 0; top: 0; width: 1px; margin-left: -.5px; pointer-events: none;
    background: rgba(14, 42, 58, .28); opacity: 0;
    transition: opacity 150ms, transform 140ms var(--hz-ease, ease);
}
body.houzez-dashboard-body .hz-gpunto {
    position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; pointer-events: none;
    box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid #186B99; opacity: 0;
    transition: opacity 150ms, transform 140ms var(--hz-ease, ease);
}
body.houzez-dashboard-body .hz-gtip {
    position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
    background: var(--hz-navy, #0E2A3A); color: #fff; border-radius: 3px; padding: 8px 11px;
    font: 400 12px/1.3 var(--hz-sans, sans-serif); white-space: nowrap; text-align: left;
    box-shadow: 0 10px 24px -10px rgba(14, 42, 58, .5); opacity: 0;
    transition: opacity 150ms, transform 140ms var(--hz-ease, ease);
}
body.houzez-dashboard-body .hz-gtip small { display: block; font-size: 11px; color: #b7c4ce; letter-spacing: 0; text-transform: none; }
body.houzez-dashboard-body .hz-gtip b { display: block; margin: 2px 0; font: 500 17px/1.15 var(--hz-serif, serif); color: #fff; }
body.houzez-dashboard-body .hz-gwrap.is-hover .hz-gguia,
body.houzez-dashboard-body .hz-gwrap.is-hover .hz-gpunto,
body.houzez-dashboard-body .hz-gwrap.is-hover .hz-gtip { opacity: 1; }
body.houzez-dashboard-body .hz-gwrap.no-anim .hz-gguia,
body.houzez-dashboard-body .hz-gwrap.no-anim .hz-gpunto,
body.houzez-dashboard-body .hz-gwrap.no-anim .hz-gtip { transition: opacity 150ms; }
body.houzez-dashboard-body .hz-gwrap [data-hz-t] { transition: opacity 160ms; }
body.houzez-dashboard-body .hz-gwrap.is-hover [data-hz-t]:not(.is-hot) { opacity: .42; }

/* ---------- Alto contraste de Windows: la marca no puede desaparecer ----- */
@media (forced-colors: active) {
    body.houzez-dashboard-body .hz-nav-ink,
    body.houzez-dashboard-body .hz-mv-ink { background: Highlight; forced-color-adjust: none; }
}

/* ---------- Reducir movimiento ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.hz-entra::before, html.hz-entra::after { display: none; }
    body.houzez-dashboard-body .dashboard-content > *,
    body.houzez-dashboard-body .dashboard-content > .heading *,
    body.houzez-dashboard-body .hz-modal, body.houzez-dashboard-body .hz-modal__card,
    body.houzez-dashboard-body .hz-ov, body.houzez-dashboard-body .hz-ov > *,
    body.houzez-dashboard-body .hz-prod__scrim, body.houzez-dashboard-body .hz-prod__scrim > * { animation: none !important; }
    body.houzez-dashboard-body .dashboard-content.hz-sale,
    body.houzez-dashboard-body .dashboard-content > .hz-sale { opacity: 1; transform: none; transition: none; }
    body.houzez-dashboard-body .hz-nav-ink, body.houzez-dashboard-body .hz-mv-ink, body.houzez-dashboard-body .hz-toast { transition: none; }
    body.houzez-dashboard-body .hz-btn:active, body.houzez-dashboard-body .hz-tab:active { transform: none; }
    /* 1.76.0 */
    body.houzez-dashboard-body .hz-odo { color: var(--hz-odo-c) !important; -webkit-text-fill-color: var(--hz-odo-c) !important; clip-path: none; }
    body.houzez-dashboard-body .hz-odo::before, body.houzez-dashboard-body .hz-odo::after { content: none; animation: none; }
    body.houzez-dashboard-body .hz-wipe--draw .hz-chart__ln,
    body.houzez-dashboard-body .hz-wipe--draw .hz-chart__ar,
    body.houzez-dashboard-body .hz-chart .hz-bars2 .hz-bars2__b { animation: none !important; }
    body.houzez-dashboard-body .hz-gguia, body.houzez-dashboard-body .hz-gpunto, body.houzez-dashboard-body .hz-gtip,
    body.houzez-dashboard-body .hz-gwrap [data-hz-t] { transition: none; }
}