/* ViewTakeout — hoja de estilos del sitio.
   Utilidades compiladas + paleta de colores (claro y .dark).
   La fuente Inter y los iconos Remixicon se cargan desde includes/header.php */

*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-backdrop-blur: }
*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}
:before,:after{--tw-content:""}
html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--font-body);-webkit-tap-highlight-color:transparent}
body{line-height:inherit;margin:0}
hr{height:0;color:inherit;border-top-width:1px}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}
small{font-size:80%}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}
:-moz-focusring{outline:auto}
summary{display:list-item}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}
fieldset{margin:0;padding:0}
legend{padding:0}
ol,ul,menu{margin:0;padding:0;list-style:none}
dialog{padding:0}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
button,[role=button]{cursor:pointer}
:disabled{cursor:default}
img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}
img,video{max-width:100%;height:auto}
[hidden]:where(:not([hidden=until-found])){display:none}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{font-family:var(--font-body);background-color:oklch(var(--background-50));color:oklch(var(--foreground-900));-webkit-font-smoothing:antialiased}
::selection{background-color:oklch(var(--primary-500)/.25)}

/* ===================== Paleta ===================== */
:root{
  --font-heading:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --background-50:.988 .003 247;--background-100:.968 .005 247;--background-200:.928 .006 264;--background-300:.869 .01 261;--background-400:.704 .022 260;--background-500:.555 .028 258;--background-600:.446 .026 257;--background-700:.373 .026 256;--background-800:.279 .041 260;--background-900:.208 .042 265;--background-950:.146 .039 264;
  --primary-50:.963 .018 259;--primary-100:.924 .036 260;--primary-200:.853 .077 261;--primary-300:.758 .123 262;--primary-400:.653 .169 263;--primary-500:.585 .203 264;--primary-600:.546 .215 263;--primary-700:.477 .189 264;--primary-800:.426 .157 265;--primary-900:.393 .126 266;--primary-950:.251 .09 266;
  --accent-50:.977 .023 166;--accent-100:.95 .046 164;--accent-200:.898 .09 165;--accent-300:.831 .132 166;--accent-400:.76 .164 167;--accent-500:.696 .17 163;--accent-600:.63 .151 164;--accent-700:.558 .131 166;--accent-800:.489 .108 168;--accent-900:.421 .086 170;--accent-950:.226 .05 169;
  --foreground-50:.988 .003 247;--foreground-100:.968 .005 247;--foreground-200:.928 .006 264;--foreground-300:.869 .01 261;--foreground-400:.704 .022 260;--foreground-500:.555 .028 258;--foreground-600:.446 .026 257;--foreground-700:.373 .026 256;--foreground-800:.279 .041 260;--foreground-900:.208 .042 265;--foreground-950:.146 .039 264;
}
.dark{
  --background-50:.208 .042 265;--background-100:.251 .041 265;--background-200:.279 .041 260;--background-300:.373 .026 256;--background-400:.446 .026 257;--background-500:.555 .028 258;--background-600:.704 .022 260;--background-700:.869 .01 261;--background-800:.928 .006 264;--background-900:.968 .005 247;--background-950:.988 .003 247;
  --foreground-50:.146 .039 264;--foreground-100:.208 .042 265;--foreground-200:.279 .041 260;--foreground-300:.373 .026 256;--foreground-400:.446 .026 257;--foreground-500:.555 .028 258;--foreground-600:.704 .022 260;--foreground-700:.869 .01 261;--foreground-800:.928 .006 264;--foreground-900:.968 .005 247;--foreground-950:.988 .003 247;
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:0 0}
::-webkit-scrollbar-thumb{background:oklch(var(--foreground-300));border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:oklch(var(--foreground-400))}

/* ===================== Utilidades ===================== */
.pointer-events-none{pointer-events:none}
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}
.inset-x-0{left:0;right:0}
.-bottom-5{bottom:-1.25rem}.-left-3{left:-.75rem}.bottom-0{bottom:0}.left-3{left:.75rem}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-12{top:3rem}.top-16{top:4rem}.top-1\/2{top:50%}
.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}
.mx-auto{margin-left:auto;margin-right:auto}
.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-auto{margin-top:auto}
.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}
.h-1\.5{height:.375rem}.h-3{height:.75rem}.h-7{height:1.75rem}.h-8{height:4rem}.h-9{height:2.25rem}.h-10{height:2.5rem}.h-16{height:5rem}.h-24{height:6rem}.h-screen{height:100vh}
.min-h-screen{min-height:100vh}
.w-1\.5{width:.375rem}.w-3{width:.75rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}.w-40{width:10rem}.w-56{width:14rem}.w-72{width:18rem}.w-full{width:100%}
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-6xl{max-width:72rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}
.flex-1{flex:1}.shrink-0{flex-shrink:0}
.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y))}
.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}
.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))}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.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-12{gap:3rem}
.gap-x-5{column-gap:1.25rem}.gap-y-2{row-gap:.5rem}
.space-y-1\.5>:not([hidden])~:not([hidden]){margin-top:.375rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.space-y-2\.5>:not([hidden])~:not([hidden]){margin-top:.625rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.space-y-10>:not([hidden])~:not([hidden]){margin-top:2.5rem}
.divide-y>:not([hidden])~:not([hidden]){border-top-width:1px}
.divide-background-200>:not([hidden])~:not([hidden]){border-color:oklch(var(--background-200))}
.overflow-hidden{overflow:hidden}
.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.whitespace-nowrap{white-space:nowrap}
.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}
.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}
.border-accent-200{border-color:oklch(var(--accent-200))}.border-accent-300{border-color:oklch(var(--accent-300))}
.border-background-200{border-color:oklch(var(--background-200))}.border-background-300{border-color:oklch(var(--background-300))}
.border-foreground-300{border-color:oklch(var(--foreground-300))}.border-primary-500{border-color:oklch(var(--primary-500))}
.bg-accent-50{background-color:oklch(var(--accent-50))}.bg-accent-100{background-color:oklch(var(--accent-100))}.bg-accent-500{background-color:oklch(var(--accent-500))}
.bg-background-50{background-color:oklch(var(--background-50))}.bg-background-50\/90{background-color:oklch(var(--background-50)/.9)}
.bg-background-100{background-color:oklch(var(--background-100))}.bg-background-200{background-color:oklch(var(--background-200))}
.bg-foreground-100{background-color:oklch(var(--foreground-100))}.bg-foreground-300{background-color:oklch(var(--foreground-300))}
.bg-primary-50{background-color:oklch(var(--primary-50))}.bg-primary-100{background-color:oklch(var(--primary-100))}.bg-primary-500{background-color:oklch(var(--primary-500))}
.bg-transparent{background-color:#0000}
.object-cover{object-fit:cover}.object-top{object-position:top}
.p-3{padding:.75rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.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-0\.5{padding-top:.125rem;padding-bottom:.125rem}.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-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}
.pb-5{padding-bottom:1.25rem}.pb-10{padding-bottom:2.5rem}.pb-16{padding-bottom:4rem}
.pl-9{padding-left:2.25rem}.pr-4{padding-right:1rem}
.pt-0{padding-top:0}.pt-3{padding-top:.75rem}.pt-6{padding-top:1.5rem}.pt-28{padding-top:7rem}
.text-left{text-align:left}.text-center{text-align:center}
.font-heading{font-family:var(--font-heading)}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}
.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-9xl{font-size:8rem;line-height:1}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-black{font-weight:900}
.uppercase{text-transform:uppercase}
.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}.leading-loose{line-height:2}
.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}
.text-accent-500{color:oklch(var(--accent-500))}.text-accent-700{color:oklch(var(--accent-700))}.text-accent-900{color:oklch(var(--accent-900))}
.text-background-50{color:oklch(var(--background-50))}
.text-foreground-400{color:oklch(var(--foreground-400))}.text-foreground-500{color:oklch(var(--foreground-500))}.text-foreground-600{color:oklch(var(--foreground-600))}.text-foreground-700{color:oklch(var(--foreground-700))}.text-foreground-800{color:oklch(var(--foreground-800))}.text-foreground-900{color:oklch(var(--foreground-900))}.text-foreground-950{color:oklch(var(--foreground-950))}
.text-primary-500{color:oklch(var(--primary-500))}.text-primary-600{color:oklch(var(--primary-600))}.text-primary-700{color:oklch(var(--primary-700))}
.shadow-sm{box-shadow:0 1px 2px 0 #0000000d}
.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur);backdrop-filter:var(--tw-backdrop-blur)}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.duration-300{transition-duration:.3s}
.placeholder\:text-foreground-400::placeholder{color:oklch(var(--foreground-400))}
.hover\:bg-background-50:hover{background-color:oklch(var(--background-50))}
.hover\:bg-background-100:hover{background-color:oklch(var(--background-100))}
.hover\:bg-primary-600:hover{background-color:oklch(var(--primary-600))}
.hover\:text-foreground-950:hover{color:oklch(var(--foreground-950))}
.hover\:text-primary-600:hover{color:oklch(var(--primary-600))}
.hover\:text-primary-700:hover{color:oklch(var(--primary-700))}
.focus\:border-primary-400:focus{border-color:oklch(var(--primary-400))}
.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}
.list-none{list-style-type:none}
.group-open\:hidden{display:none}
details[open] .group-open\:hidden{display:none}
details[open] .hidden.group-open\:block{display:block}

@media (min-width:640px){
  .sm\:flex{display:flex}.sm\:hidden{display:none}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}
}
@media (min-width:768px){
  .md\:-left-6{left:-1.5rem}.md\:right-6{right:1.5rem}
  .md\:flex{display:flex}.md\:h-28{height:7rem}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:p-4{padding:1rem}.md\:p-8{padding:2rem}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}
  .md\:pb-24{padding-bottom:6rem}.md\:pt-32{padding-top:8rem}.md\:pt-36{padding-top:9rem}
  .md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}
}
@media (min-width:1024px){
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:flex{display:flex}.lg\:hidden{display:none}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:gap-16{gap:4rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}







/* ============================================================
   PEGAR AL FINAL de css/app.css — no toca nada de lo anterior
   Animaciones de la home y utilidades que usa index.php
   ============================================================ */

/* Punto verde de "disponible": latido lento + anillo suave */
.vt-dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;
  background:oklch(var(--accent-500));flex:none}
.vt-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:oklch(var(--accent-500));animation:vt-ping 2.8s cubic-bezier(.4,0,.6,1) infinite}
@keyframes vt-ping{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.vt-dot--soft{animation:vt-breathe 3.6s ease-in-out infinite}
@keyframes vt-breathe{0%,100%{opacity:1}50%{opacity:.45}}

/* Aparición escalonada al cargar */
.vt-in{opacity:0;transform:translateY(10px);animation:vt-up .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes vt-up{to{opacity:1;transform:none}}

/* Tarjetas: elevación al pasar el cursor */
.vt-card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.vt-card:hover{transform:translateY(-3px);border-color:oklch(var(--foreground-300));box-shadow:0 12px 28px -14px rgba(16,24,40,.35)}
.vt-card--live{border-color:oklch(var(--accent-300))}
.vt-card--live:hover{border-color:oklch(var(--accent-500))}

/* Flecha que avanza al pasar el cursor */
.vt-go i{display:inline-block;transition:transform .2s}
.vt-go:hover i{transform:translateX(3px)}

/* Barra de progreso de lectores listos */
.vt-bar{height:6px;border-radius:999px;background:oklch(var(--background-200));overflow:hidden}
.vt-bar span{display:block;height:100%;border-radius:999px;background:oklch(var(--accent-500));width:0;
  animation:vt-grow 1.4s .3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes vt-grow{to{width:var(--w,5%)}}

/* Utilidades que faltaban en app.css y usa la home */
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.items-end{align-items:flex-end}
.gap-2\.5{gap:.625rem}
.mt-16{margin-top:4rem}
.pt-36{padding-top:9rem}
.pb-12{padding-bottom:3rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.p-8{padding:2rem}
.w-11{width:2.75rem}.h-11{height:2.75rem}
.rounded-2xl{border-radius:1rem}
.text-\[13px\]{font-size:13px}
.bg-accent-200{background-color:oklch(var(--accent-200))}
.bg-primary-600{background-color:oklch(var(--primary-600))}
.border-accent-500{border-color:oklch(var(--accent-500))}
.text-primary-800{color:oklch(var(--primary-800))}
.opacity-60{opacity:.6}
.sm\:w-56{width:14rem}
@media (min-width:640px){.sm\:w-56{width:14rem}}
@media (min-width:768px){
  .md\:py-20{padding-top:5rem;padding-bottom:5rem}
  .md\:pb-16{padding-bottom:4rem}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
}
@media (prefers-reduced-motion:reduce){
  .vt-in,.vt-bar span{animation:none;opacity:1;transform:none;width:var(--w,5%)}
  .vt-dot::after,.vt-dot--soft{animation:none}
  .vt-card:hover{transform:none}
}



/* ============================================================
   PEGAR AL FINAL de css/app.css
   1) Centrado global de los contenedores
   2) Arreglo del hover que dejaba el texto invisible
   ============================================================ */

/* ---------- 1. Centrado ----------
   Si pusiste width:90% en alguna utilidad (.md\:px-6, .px-4…), el bloque
   queda pegado a la izquierda porque le falta el margen automático.
   Esto lo centra sin tocar tus anchos. */

.mx-auto{margin-left:auto;margin-right:auto}

/* Cualquier contenedor con ancho limitado se centra solo */
[class*="max-w-"]{margin-left:auto;margin-right:auto}

/* Secciones a ancho completo, con su contenido centrado */
main > section{width:100%;margin-left:auto;margin-right:auto}
main > section > div{margin-left:auto;margin-right:auto}

/* Si mantienes el 90% en las utilidades de padding, esto las centra */
.px-4,.md\:px-6,.px-6{margin-left:auto;margin-right:auto}

/* El módulo de fotos, dentro de su contenedor */
#upload-section,#activity-section,#contacts-section{margin-left:auto;margin-right:auto}

/* ---------- 2. Hover: que el texto no desaparezca ----------
   Un botón con fondo de color y texto blanco no debe recibir
   un fondo claro al pasar el cursor. */

.bg-primary-500:hover,
.bg-primary-500.hover\:bg-background-100:hover,
.bg-primary-500.hover\:bg-background-50:hover{
  background-color:oklch(var(--primary-600));
  color:oklch(var(--background-50));
}
.bg-accent-500:hover{background-color:oklch(var(--accent-600));color:oklch(var(--background-50))}

/* Enlaces y botones de texto: solo cambia el color, nunca desaparece */
a:hover,button:hover{color:inherit}
.text-background-50:hover{color:oklch(var(--background-50))}

/* ---------- 3. Detalle: foco visible en todo el sitio ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid oklch(var(--primary-500));
  outline-offset:2px;
  border-radius:6px;
}



/* ============================================================
   PEGAR AL FINAL de css/app.css
   Scroll personalizado para todo el sitio.
   Chrome, Edge, Opera y Safari usan ::-webkit-scrollbar.
   Firefox usa scrollbar-width y scrollbar-color.
   ============================================================ */

:root{
  --sb-size: 14px;                       /* grosor de la barra */
  --sb-track: oklch(var(--background-100));
  --sb-thumb: oklch(var(--primary-500));
  --sb-thumb-hover: oklch(var(--primary-600));
}
html.dark{
  --sb-track: oklch(var(--background-100));
  --sb-thumb: oklch(var(--primary-400));
  --sb-thumb-hover: oklch(var(--primary-300));
}

/* Firefox */
html{scrollbar-width:auto;scrollbar-color:var(--sb-thumb) var(--sb-track)}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}

/* Chrome, Edge, Opera, Safari */
::-webkit-scrollbar{width:var(--sb-size);height:var(--sb-size)}
::-webkit-scrollbar-track{background:var(--sb-track);border-radius:999px}
::-webkit-scrollbar-thumb{
  background:var(--sb-thumb);
  border:3px solid var(--sb-track);      /* deja aire alrededor del pulgar */
  border-radius:999px;
  min-height:44px;
  transition:background .2s;
}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover)}
::-webkit-scrollbar-thumb:active{background:var(--sb-thumb-hover)}
::-webkit-scrollbar-corner{background:transparent}

/* Barras internas (menús, listas, tablas): un poco más finas */
.vt-scroll::-webkit-scrollbar,
[class*="overflow"]::-webkit-scrollbar{width:10px;height:10px}

/* En móvil la barra la dibuja el sistema: no forzamos grosor */
@media (max-width:640px){
  ::-webkit-scrollbar{width:8px;height:8px}
}