:root, .light {
  /* Base */
  --background: 0 0% 99%;
  --foreground: 210 25% 12%;

  /* Componentes */
  --card: 0 0% 98%; 
  --card-foreground: 210 25% 12%;
  --popover: 183 50% 97%;
  --popover-foreground: 211 35% 20%;
  --card2: 232 100% 78%;
  --card2-foreground: 211 28% 29%;

  /* Identidad */
  --primary: 183 77% 36%;
  --primary-foreground: 0 0% 100%;
  --secondary: 211 28% 29%;
  --secondary-foreground: 0 0% 100%;

  /* Colores complementarios */
  --muted: 183 30% 95%;
  --muted-foreground: 211 15% 35%;
  --accent: 25 80% 60%;
  --accent-foreground: 0 0% 100%;
  --destructive: 5 85% 55%;
  --destructive-foreground: 0 0% 100%;

  /* Bordes e inputs */
  --border: 183 20% 85%;
  --input: 183 20% 90%;

  /* Detalles */
  --ring: 183 77% 36% / 0.2;
  --radius: 0.75rem;
  --tw-ring-offset-width: 0px;

  /* Iconos */
  --iconsColor: 211 28% 29%;
  --iconsColor-foreground: 0 0% 100%;

  /* Colores adicionales */
  --success: 145 65% 40%;
  --success-foreground: 0 0% 100%;
  --warning: 45 95% 55%;
  --warning-foreground: 210 25% 12%;
  --info: 200 85% 45%;
  --info-foreground: 0 0% 100%;
  --info-copy: 200 85% 55%;
  --info-copy-foreground: 0 0% 100%;
  --header: 183 77% 36% / 0.2;
  --header-foreground: 211 28% 29%;
}

.dark {
  /* Base oscura */
  --background: 210 25% 8%;
  --foreground: 183 50% 90%;

  /* Componentes */
  --card: 210 20% 12%; 
  --card-foreground: 183 50% 90%;
  --popover: 211 30% 15%;
  --popover-foreground: 183 50% 90%;
  --card2: 232 100% 78%;
  --card2-foreground: 183 50% 90%;

  /* Identidad */
  --primary: 183 77% 36%;
  --primary-foreground: 210 25% 8%;
  --secondary: 183 50% 97%;
  --secondary-foreground: 210 25% 8%;

  /* Colores complementarios */
  --muted: 210 15% 20%;
  --muted-foreground: 183 30% 70%;
  --accent: 25 80% 55%;
  --accent-foreground: 210 25% 8%;
  --destructive: 5 85% 60%;
  --destructive-foreground: 0 0% 100%;

  /* Bordes e inputs */
  --border: 210 15% 30%;
  --input: 210 15% 25%;

  /* Detalles */
  --ring: 183 77% 36% / 0.5;

  /* Iconos */
  --iconsColor: 210 25% 70%;
  --iconsColor-foreground: 210 25% 8%;

  /* Colores adicionales */
  --success: 145 65% 45%;
  --success-foreground: 0 0% 100%;
  --warning: 45 95% 60%;
  --warning-foreground: 210 25% 8%;
  --info: 200 85% 55%;
  --info-foreground: 0 0% 100%;
  --info-copy: 200 85% 45%;
  --info-copy-foreground: 0 0% 100%;
  --header: 183 77% 36% / 0.2;
  --header-foreground: 211 28% 29%;
}

:root {
  --safe-top: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --safe-right: 0px;
}

.app-padding-safe {
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}

* {
  border-color: hsl(var(--border));
}


@keyframes slide-in-from-bottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slide-out-to-bottom {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

.animate-in.slide-in-from-bottom {
  animation: slide-in-from-bottom 0.3s ease-out forwards;
}

.animate-out.slide-out-to-bottom {
  animation: slide-out-to-bottom 0.3s ease-in forwards;
}

html,
body {
  -ms-overflow-style: none;  /* IE y Edge */
  scrollbar-width: none;  /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;  /* Chrome, Safari y Opera */
    width: 0;
    height: 0;
    background: transparent; /* Opcional: asegura que no haya fondo visible */
}

/* Para el pulgar (el arrastrador de la barra) */
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: transparent;
}

/* Para la pista (el área donde se mueve el pulgar) */
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent;
}