/* ════════════════════════════════════════════════════════════
   CorteClaro · capa de motion & craft
   Entradas por paso, micro-interacciones, focus rings, scrollbars.
   Todo se desactiva con prefers-reduced-motion o el tweak
   "Animaciones" (body.no-motion).
   ════════════════════════════════════════════════════════════ */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ══ Entrada de paso (solo al navegar, no en re-renders) ══ */
@keyframes v5FadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v5BarUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes v5Pop { 0% { transform: scale(.55); } 100% { transform: scale(1); } }

#view.flow-enter .fase-wrap > * { animation: v5FadeUp .5s var(--ease-out) both; }
#view.flow-enter .fase-wrap > *:nth-child(2) { animation-delay: .05s; }
#view.flow-enter .fase-wrap > *:nth-child(3) { animation-delay: .1s; }
#view.flow-enter .fase-wrap > *:nth-child(4) { animation-delay: .15s; }
#view.flow-enter .fase-wrap > *:nth-child(5) { animation-delay: .2s; }
#view.flow-enter .fase-wrap > *:nth-child(6) { animation-delay: .25s; }
#view.flow-enter .fase-wrap > *:nth-child(n+7) { animation-delay: .3s; }
#view.flow-enter .gatebar { animation: v5BarUp .45s var(--ease-out) .12s both; }
#view.flow-enter .fase.cur .n { animation: v5Pop .5s var(--ease-spring) both; }

/* ══ Stepper ══ */
.fase { transition: opacity .25s ease, border-color .3s ease; }
.fase .n { transition: background .3s var(--ease-out), color .3s ease, border-color .3s ease, transform .25s var(--ease-spring); }
.fase:not(.locked):not(.cur):hover .n { border-color: var(--gold); color: var(--gold); }
.fase .t b { transition: color .25s ease; }
.nav-tab { transition: color .2s ease, border-color .25s ease; }

/* ══ Ticker: pulso al cambiar valores ══ */
@keyframes v5Tick { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ticker.pulse .tk .v { animation: v5Tick .32s var(--ease-out); }

/* ══ Botones ══ */
.btn { transition: transform .15s var(--ease-out), box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease; position: relative; overflow: hidden; }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0) scale(.97); }
.btn-gold:not(:disabled):hover { box-shadow: 0 8px 22px -8px rgba(189, 167, 108, .5); }
.btn-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .32) 50%, transparent 58%); transform: translateX(-130%); pointer-events: none; }
.btn-gold:not(:disabled):hover::after { transition: transform .55s var(--ease-out); transform: translateX(130%); }
.icon-btn { transition: color .18s ease, background .18s ease, border-color .18s ease, transform .15s var(--ease-out); }
.icon-btn:active { transform: scale(.9); }

/* ══ Cards ══ */
.aj-card, .partida-card, .cost-card, .kpi-card, .margin-ctl, .share-box, .wf, .hero-price, .fee-card { transition: border-color .3s ease, box-shadow .35s ease, transform .3s var(--ease-out); }
.aj-card:hover, .partida-card:hover, .cost-card:hover { border-color: #363636; box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .85); }
.kpi-card:hover { transform: translateY(-2px); border-color: rgba(189, 167, 108, .35); }
.fee-card:hover { border-color: rgba(189, 167, 108, .5); }

/* ══ Inputs ══ */
:where(input:not([type=range]):not([type=checkbox]):not([type=file]), select, textarea) { transition: border-color .2s ease, box-shadow .25s ease, background .2s ease; }
:where(input:not([type=range]):not([type=checkbox]):not([type=file]), select, textarea):focus { box-shadow: 0 0 0 3px rgba(189, 167, 108, .13); }
input[type=range] { transition: opacity .2s ease; }
input[type=range]:hover { opacity: .92; }

/* ══ Chips · toggles · pills ══ */
.chip, .f-chip, .est-toggle button, .uni-toggle button, .vista-toggle button, .src-toggle button, .step { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .13s var(--ease-out); }
.chip:not(.sel):hover, .f-chip:not(.sel):hover { border-color: #4a4a4a; color: var(--txt2); }
.chip:active, .f-chip:active { transform: scale(.95); }
.tgl { transition: background .25s ease, border-color .25s ease; }
.tgl::after { transition: left .3s var(--ease-spring), background .2s ease; }

/* ══ Listado de proyectos ══ */
.q-row { transition: background .18s ease, box-shadow .25s ease; }
.q-row:hover { box-shadow: inset 3px 0 0 var(--gold); }

/* ══ Dropzone DXF ══ */
@keyframes v5DashPulse { 0%, 100% { border-color: var(--gold); } 50% { border-color: rgba(189, 167, 108, .35); } }
.dxf-drop { transition: border-color .25s ease, background .25s ease, color .25s ease; }
.dxf-drop:hover { background: rgba(189, 167, 108, .05); animation: v5DashPulse 1.6s ease-in-out infinite; }

/* ══ Modales (cierre, zoom de nesting) ══ */
@keyframes v5Fade { from { opacity: 0; } }
@keyframes v5ModalIn { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.modal-back { animation: v5Fade .22s ease both; }
.modal { animation: v5ModalIn .38s var(--ease-spring) both; }

/* ══ Zoom de nesting: cursor y realce ══ */
.mb-nest[data-zoom5] { transition: outline-color .2s ease, transform .25s var(--ease-out); }
.mb-nest[data-zoom5]:hover { transform: scale(1.01); }

/* ══ Scrollbars y focus ══ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #4a4238; }
:where(button, .chip, .f-chip, .nav-tab, .fase):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ══ Apagado global ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body.no-motion *, body.no-motion *::before, body.no-motion *::after { animation: none !important; transition: none !important; }