/* ============================================================
   BotDynamics — utilidades
   Subconjunto escrito a mano de lo que el HTML realmente usa.
   Cargar SIEMPRE despues de mistral.css.
   ============================================================ */

/* ---------- Layout ---------- */
.block          { display: block; }
.flex           { display: flex; }
.grid           { display: grid; }
.hidden         { display: none; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

.inset-0   { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.-inset-6  { inset: -1.5rem; }
.-inset-8  { inset: -2rem; }

.top-0        { top: 0; }
.top-1\/2     { top: 50%; }
.-top-40      { top: -10rem; }
.-top-2px     { top: -2px; }
.right-6      { right: 1.5rem; }
.-right-32    { right: -8rem; }
.-right-2px   { right: -2px; }
.bottom-6     { bottom: 1.5rem; }
.-bottom-32   { bottom: -8rem; }
.-bottom-2px  { bottom: -2px; }
.-left-24     { left: -6rem; }
.-left-2px    { left: -2px; }

.z-50 { z-index: 50; }

.overflow-hidden     { overflow: hidden; }
.overflow-y-auto     { overflow-y: auto; }
.overscroll-contain  { overscroll-behavior: contain; }

.isolate { isolation: isolate; }

/* ---------- Flexbox y grid ---------- */
.flex-1     { flex: 1 1 0%; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.shrink-0   { flex-shrink: 0; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }

.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.order-1 { order: 1; }
.order-2 { order: 2; }

.gap-1     { gap: .25rem; }
.gap-1\.5  { gap: .375rem; }
.gap-2     { gap: .5rem; }
.gap-2\.5  { gap: .625rem; }
.gap-3     { gap: .75rem; }
.gap-4     { gap: 1rem; }
.gap-5     { gap: 1.25rem; }
.gap-6     { gap: 1.5rem; }
.gap-8     { gap: 2rem; }
.gap-10    { gap: 2.5rem; }
.gap-12    { gap: 3rem; }
.gap-14    { gap: 3.5rem; }
.gap-px    { gap: 1px; }
.gap-x-6   { column-gap: 1.5rem; }
.gap-y-3   { row-gap: .75rem; }

/* space-y / -space-x usan el patron hermano adyacente */
.space-y-2\.5 > * + * { margin-top: .625rem; }
.space-y-3   > * + * { margin-top: .75rem; }
.space-y-4   > * + * { margin-top: 1rem; }
.space-y-5   > * + * { margin-top: 1.25rem; }
.-space-x-2  > * + * { margin-left: -.5rem; }

/* ---------- Sizing ---------- */
.w-1      { width: .25rem; }
.w-1\.5   { width: .375rem; }
.w-2      { width: .5rem; }
.w-2\.5   { width: .625rem; }
.w-3\.5   { width: .875rem; }
.w-4      { width: 1rem; }
.w-5      { width: 1.25rem; }
.w-6      { width: 1.5rem; }
.w-8      { width: 2rem; }
.w-9      { width: 2.25rem; }
.w-10     { width: 2.5rem; }
.w-16     { width: 4rem; }
.w-20     { width: 5rem; }
.w-26r    { width: 26rem; }
.w-34r    { width: 34rem; }
.w-5px    { width: 5px; }
.w-px     { width: 1px; }
.w-auto   { width: auto; }
.w-full   { width: 100%; }

.h-1      { height: .25rem; }
.h-1\.5   { height: .375rem; }
.h-2      { height: .5rem; }
.h-2\.5   { height: .625rem; }
.h-3\.5   { height: .875rem; }
.h-4      { height: 1rem; }
.h-5      { height: 1.25rem; }
.h-6      { height: 1.5rem; }
.h-8      { height: 2rem; }
.h-9      { height: 2.25rem; }
.h-10     { height: 2.5rem; }
.h-11     { height: 2.75rem; }
.h-12     { height: 3rem; }
.h-14     { height: 3.5rem; }
.h-16     { height: 4rem; }
.h-20     { height: 5rem; }
.h-28     { height: 7rem; }
.h-26r    { height: 26rem; }
.h-34r    { height: 34rem; }
.h-5px    { height: 5px; }

.min-w-0 { min-width: 0; }

.min-h-svh  { min-height: 100svh; }
.min-h-11r  { min-height: 11rem; }
.min-h-13r  { min-height: 13rem; }
.min-h-17r  { min-height: 17rem; }
.min-h-24r  { min-height: 24rem; }
.max-h-70svh { max-height: 70svh; }

.max-w-0      { max-width: 0; }
.max-w-sm     { max-width: 24rem; }
.max-w-md     { max-width: 28rem; }
.max-w-lg     { max-width: 32rem; }
.max-w-xl     { max-width: 36rem; }
.max-w-3xl    { max-width: 48rem; }
.max-w-5xl    { max-width: 64rem; }
.max-w-screen { max-width: 1440px; }
.max-w-p75    { max-width: 75%; }
.max-w-p80    { max-width: 80%; }
.max-w-p85    { max-width: 85%; }

/* ---------- Spacing ---------- */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mt-auto { margin-top: auto; }

.mt-0\.5 { margin-top: .125rem; }
.mt-1\.5 { margin-top: .375rem; }
.mt-3    { margin-top: .75rem; }
.mt-4    { margin-top: 1rem; }
.mt-7    { margin-top: 1.75rem; }
.mt-12   { margin-top: 3rem; }

.mb-1    { margin-bottom: .25rem; }
.mb-1\.5 { margin-bottom: .375rem; }
.mb-2    { margin-bottom: .5rem; }
.mb-3    { margin-bottom: .75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-10   { margin-bottom: 2.5rem; }
.mb-12   { margin-bottom: 3rem; }
.mb-14   { margin-bottom: 3.5rem; }
.mb-16   { margin-bottom: 4rem; }
.mb-20   { margin-bottom: 5rem; }
.mb-px   { margin-bottom: 1px; }
.-mr-3   { margin-right: -.75rem; }

.p-2 { padding: .5rem; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-2 { padding-left: .5rem;  padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem;   padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-1    { padding-top: .25rem;  padding-bottom: .25rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.py-2    { padding-top: .5rem;   padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3    { padding-top: .75rem;  padding-bottom: .75rem; }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }
.py-4    { padding-top: 1rem;    padding-bottom: 1rem; }
.py-5    { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6    { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.py-8    { padding-top: 2rem;    padding-bottom: 2rem; }
.py-14   { padding-top: 3.5rem;  padding-bottom: 3.5rem; }
.py-28   { padding-top: 7rem;    padding-bottom: 7rem; }
.py-32   { padding-top: 8rem;    padding-bottom: 8rem; }

.pt-1  { padding-top: .25rem; }
.pt-2  { padding-top: .5rem; }
.pt-3  { padding-top: .75rem; }
.pt-4  { padding-top: 1rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-8  { padding-top: 2rem; }
.pt-20 { padding-top: 5rem; }
.pt-32 { padding-top: 8rem; }

.pb-3  { padding-bottom: .75rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }

.pr-4  { padding-right: 1rem; }
.pl-11 { padding-left: 2.75rem; }

/* ---------- Tipografia ---------- */
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

.font-light    { font-weight: 300; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }

.text-12  { font-size: 12px; }
.text-13  { font-size: 13px; }
.text-15  { font-size: 15px; }
.text-17  { font-size: 1.0625rem; }
.text-sm  { font-size: .875rem; line-height: 1.5; }
.text-base{ font-size: 1rem;    line-height: 1.55; }
.text-lg  { font-size: 1.125rem; line-height: 1.6; }
.text-xl  { font-size: 1.25rem;  line-height: 1.3; }
.text-2xl { font-size: 1.5rem;   line-height: 1.25; }
.text-3xl { font-size: 1.875rem; line-height: 1.15; }

/* Escalas fluidas de display */
.text-d1 { font-size: clamp(2.75rem, 7.2vw, 6.25rem); }
.text-d2 { font-size: clamp(2.25rem, 4.6vw, 4rem); }
.text-d3 { font-size: clamp(2.5rem, 7vw, 6rem); }
.text-wordmark { font-size: clamp(1.75rem, 11.5vw, 11.5rem); }

.leading-relaxed { line-height: 1.625; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-widest  { letter-spacing: .1em; }
.uppercase        { text-transform: uppercase; }
.text-center      { text-align: center; }
.whitespace-nowrap { white-space: nowrap; }
.break-words      { overflow-wrap: break-word; }
.antialiased      { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Color de texto ---------- */
.text-ink      { color: var(--ink); }
.text-ink-500  { color: var(--ink-500); }
.text-ink-600  { color: var(--ink-600); }
.text-ink-700  { color: var(--ink-700); }
.text-cream    { color: var(--cream); }
.text-white    { color: #fff; }
.text-flame-amber  { color: var(--f2); }
.text-flame-orange { color: var(--f3); }
.text-flame-ember  { color: var(--f4); }

.text-cream-a52 { color: rgba(255, 250, 235, .52); }
.text-cream-a56 { color: rgba(255, 250, 235, .56); }
.text-cream-a58 { color: rgba(255, 250, 235, .58); }
.text-cream-a62 { color: rgba(255, 250, 235, .62); }
.text-cream-a68 { color: rgba(255, 250, 235, .68); }
.text-cream-a72 { color: rgba(255, 250, 235, .72); }
.text-cream-a78 { color: rgba(255, 250, 235, .78); }
.text-cream-a82 { color: rgba(255, 250, 235, .82); }
.text-cream-a85 { color: rgba(255, 250, 235, .85); }
.text-cream-a88 { color: rgba(255, 250, 235, .88); }

/* ---------- Fondos ---------- */
.bg-transparent { background-color: transparent; }
.bg-cream       { background-color: var(--cream); }
.bg-cream-50    { background-color: var(--cream-50); }
.bg-cream-100   { background-color: var(--cream-100); }
.bg-cream-300   { background-color: var(--cream-300); }
.bg-ink         { background-color: var(--ink); }
.bg-ink-800     { background-color: var(--ink-800); }
.bg-ink-900     { background-color: var(--ink-900); }
.bg-hair        { background-color: var(--hair); }

.bg-flame-amber  { background-color: var(--f2); }
.bg-flame-orange { background-color: var(--f3); }
.bg-flame-ember  { background-color: var(--f4); }

.bg-cream-a10 { background-color: rgba(255, 250, 235, .10); }
.bg-cream-a40 { background-color: rgba(255, 250, 235, .40); }
.bg-cream-a80 { background-color: rgba(255, 250, 235, .80); }
.bg-cream-a95 { background-color: rgba(255, 250, 235, .95); }
.bg-cream-a04 { background-color: rgba(255, 250, 235, .04); }
.bg-ember-a07 { background-color: rgba(255, 130, 5, .07); }

/* ---------- Gradientes ----------
   from-* declara los stops con un fallback transparente del mismo tono
   (evita el oscurecimiento que produce interpolar hacia `transparent`).
   via-* debe venir DESPUES de from-* porque sobreescribe --g-stops. */
.bg-gradient-to-b  { background-image: linear-gradient(to bottom, var(--g-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--g-stops)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right, var(--g-stops)); }

.from-cream        { --g-from: var(--cream);   --g-stops: var(--g-from), var(--g-to, rgba(255,250,235,0)); }
.from-cream-a30    { --g-from: rgba(255,250,235,.30); --g-stops: var(--g-from), var(--g-to, rgba(255,250,235,0)); }
.from-cream100-a60 { --g-from: rgba(255,248,231,.60); --g-stops: var(--g-from), var(--g-to, rgba(255,248,231,0)); }
.from-ink          { --g-from: var(--ink);     --g-stops: var(--g-from), var(--g-to, rgba(10,10,10,0)); }
.from-flame-yellow { --g-from: var(--f1);      --g-stops: var(--g-from), var(--g-to, rgba(255,216,0,0)); }
.from-flame-orange { --g-from: var(--f3);      --g-stops: var(--g-from), var(--g-to, rgba(255,130,5,0)); }
.from-flame-ember  { --g-from: var(--f4);      --g-stops: var(--g-from), var(--g-to, rgba(250,80,15,0)); }
.from-yellow-a25   { --g-from: rgba(255,216,0,.25);  --g-stops: var(--g-from), var(--g-to, rgba(255,216,0,0)); }
.from-amber-a25    { --g-from: rgba(255,175,0,.25);  --g-stops: var(--g-from), var(--g-to, rgba(255,175,0,0)); }
.from-orange-a20   { --g-from: rgba(255,130,5,.20);  --g-stops: var(--g-from), var(--g-to, rgba(255,130,5,0)); }

.via-cream-a35     { --g-stops: var(--g-from, rgba(255,250,235,0)), rgba(255,250,235,.35), var(--g-to, rgba(255,250,235,0)); }
.via-cream-a60     { --g-stops: var(--g-from, rgba(255,250,235,0)), rgba(255,250,235,.60), var(--g-to, rgba(255,250,235,0)); }
.via-cream100-a85  { --g-stops: var(--g-from, rgba(255,248,231,0)), rgba(255,248,231,.85), var(--g-to, rgba(255,248,231,0)); }
.via-ink-a88       { --g-stops: var(--g-from, rgba(10,10,10,0)), rgba(10,10,10,.88), var(--g-to, rgba(10,10,10,0)); }
.via-flame-orange  { --g-stops: var(--g-from, rgba(255,130,5,0)), var(--f3), var(--g-to, rgba(255,130,5,0)); }
.via-flame-ember   { --g-stops: var(--g-from, rgba(250,80,15,0)), var(--f4), var(--g-to, rgba(250,80,15,0)); }
.via-orange-a20    { --g-stops: var(--g-from, rgba(255,130,5,0)), rgba(255,130,5,.20), var(--g-to, rgba(255,130,5,0)); }
.via-ember-a15     { --g-stops: var(--g-from, rgba(250,80,15,0)), rgba(250,80,15,.15), var(--g-to, rgba(250,80,15,0)); }
.via-ember-a20     { --g-stops: var(--g-from, rgba(250,80,15,0)), rgba(250,80,15,.20), var(--g-to, rgba(250,80,15,0)); }

.to-cream         { --g-to: var(--cream); }
.to-cream-100     { --g-to: var(--cream-100); }
.to-ink           { --g-to: var(--ink); }
.to-flame-ember   { --g-to: var(--f4); }
.to-flame-red     { --g-to: var(--f5); }
.to-red-a10       { --g-to: rgba(225,5,0,.10); }
.to-red-a15       { --g-to: rgba(225,5,0,.15); }
.to-red-a20       { --g-to: rgba(225,5,0,.20); }

/* ---------- Bordes ---------- */
.border   { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }

.border-transparent { border-color: transparent; }
.border-hair        { border-color: var(--hair); }
.border-hair-d      { border-color: var(--hair-dark); }
.border-hair-soft   { border-color: var(--hair-soft); }
.border-cream-50    { border-color: var(--cream-50); }
.border-ember-a35   { border-color: rgba(250, 80, 15, .35); }

.rounded-full { border-radius: 9999px; }

/* ---------- Efectos ---------- */
.shadow-nav         { box-shadow: 0 1px 24px rgba(10, 10, 10, .06); }
.shadow-fab         { box-shadow: 0 12px 36px -12px rgba(10, 10, 10, .55); }
.shadow-panel       { box-shadow: 0 24px 70px -30px rgba(10, 10, 10, .30); }
.shadow-panel-soft  { box-shadow: 0 24px 70px -40px rgba(10, 10, 10, .35); }
.shadow-panel-lg    { box-shadow: 0 28px 80px -40px rgba(10, 10, 10, .40); }

.blur-3xl         { filter: blur(64px); }
.backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

.opacity-0  { opacity: 0; }
.opacity-40 { opacity: .40; }
.opacity-45 { opacity: .45; }
.opacity-50 { opacity: .50; }

.rotate-45          { transform: rotate(45deg); }
.-translate-y-1\/2  { transform: translateY(-50%); }

.pointer-events-none { pointer-events: none; }
.select-none         { user-select: none; -webkit-user-select: none; }

.transition-all      { transition: all .3s var(--ease); }
.transition-colors   { transition: color .3s ease, background-color .3s ease, border-color .3s ease; }
.transition-opacity  { transition: opacity .3s ease; }
.duration-300        { transition-duration: .3s; }
.duration-500        { transition-duration: .5s; }

@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
    50%      { transform: none;             animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
.animate-bounce { animation: bounce 1s infinite; }

/* ---------- Estados ---------- */
.hover\:bg-cream:hover        { background-color: var(--cream); }
.hover\:bg-cream-a03:hover    { background-color: rgba(255, 250, 235, .03); }
.hover\:bg-flame-orange:hover { background-color: var(--f3); }
.hover\:bg-flame-ember:hover  { background-color: var(--f4); }
.hover\:border-ink:hover      { border-color: var(--ink); }
.hover\:border-orange-a50:hover { border-color: rgba(255, 130, 5, .50); }
.hover\:text-ink:hover        { color: var(--ink); }
.hover\:text-cream:hover      { color: var(--cream); }
.hover\:text-white:hover      { color: #fff; }
.hover\:opacity-100:hover     { opacity: 1; }

/* Quita el anillo solo cuando el foco viene del puntero, no del teclado */
.focus\:outline-none:focus:not(:focus-visible) { outline: none; }

.placeholder\:text-ink-500::placeholder   { color: var(--ink-500); }
.placeholder\:text-cream-a52::placeholder { color: rgba(255, 250, 235, .52); }

.group:hover .group-hover\:opacity-100      { opacity: 1; }
.group:hover .group-hover\:max-w-9r         { max-width: 9rem; }
.group:hover .group-hover\:text-flame-orange { color: var(--f3); }