/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/public/public.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  /* Colores personalizados de EnviosMiami */
  --em-blue: #1e88e5;
  --em-blue-dark: #0d47a1;
  --em-blue-light: #64b5f6;
  --em-yellow: #ffc107;
  --em-yellow-dark: #ff8f00;
  --em-yellow-light: #ffecb3;
  --em-green: #4caf50;
  --em-red: #f44336;
  --em-purple: #9c27b0;
  --em-gray: #9e9e9e;
  --em-gray-dark: #616161;
  --em-gray-light: #e0e0e0;

  /* Variables para animaciones */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* modo oscuro “al estilo Opera GX” */

:root.dark-mode {
  filter: invert(0.9) hue-rotate(180deg) brightness(0.9) contrast(1.1);
  transition: filter 0.3s;
}

/* excluimos footer e imágenes devolviéndolas a su estado original */

:root.dark-mode footer,
:root.dark-mode img {
  filter: invert(1) hue-rotate(180deg) brightness(1) contrast(1);
}

/* Estilos base */

body {
  color: rgb(var(--foreground-rgb));
  background: #f9fafb; /* Fondo gris claro para toda la aplicación */
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Mejoras de accesibilidad */

/* Ocultar el contorno de enfoque cuando no se usa el teclado */

*:focus {
  outline: none;
}

/* Mostrar el contorno de enfoque solo cuando se navega con teclado */

body.usando-teclado *:focus {
  outline: 2px solid var(--em-blue);
  outline-offset: 2px;
}

/* Mejorar contraste para texto sobre fondos de color */

.bg-em-blue-dark  { --tw-bg-opacity: 1; background-color: var(--em-blue-dark); }

.bg-em-blue-light { --tw-bg-opacity: 1; background-color: var(--em-blue-light); }

.bg-em-yellow     { --tw-bg-opacity: 1; background-color: var(--em-yellow); }

.bg-em-red        { --tw-bg-opacity: 1; background-color: var(--em-red); }

.bg-em-green      { --tw-bg-opacity: 1; background-color: var(--em-green); }

.bg-em-black      { --tw-bg-opacity: 1; background-color: var(--em-black); }

.bg-em-white      { --tw-bg-opacity: 1; background-color: var(--em-white); }

.text-em-blue-dark  { color: var(--em-blue-dark); }

.text-em-blue-light { color: var(--em-blue-light); }

.text-em-yellow     { color: var(--em-yellow); }

.text-em-red        { color: var(--em-red); }

.text-em-green      { color: var(--em-green); }

.text-em-black      { color: var(--em-black); }

.text-em-white      { color: var(--em-white); }

/* Animaciones y transiciones */

.transition-all {
  transition-property: all;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--transition-normal);
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--transition-normal);
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--transition-normal);
}

/* Animación de entrada para páginas */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-enter {
  animation: fadeIn var(--transition-normal) var(--ease-out);
}

/* Mejoras para dispositivos móviles */

/* Ajustar tamaño de texto en móviles */

@media (max-width: 640px) {
  html {
    font-size: 14px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Mejorar espaciado en dispositivos pequeños */

@media (max-width: 480px) {
  .sm-stack > * + * {
    margin-top: 0.75rem;
  }

  .sm-compact-p {
    padding: 0.75rem !important;
  }

  .sm-hide-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .sm-hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }
}

/* Utilidades personalizadas */

@layer utilities {
  /* Sombras mejoradas */
  .shadow-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--transition-fast) var(--ease-out);
  }

  .shadow-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  }

  /* Truncar texto con elipsis */
  .truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Botones con efecto de escala al hacer hover */
  .hover-scale {
    transition: transform var(--transition-fast) var(--ease-out);
  }

  .hover-scale:hover {
    transform: scale(1.05);
  }

  /* Efecto de elevación para tarjetas */
  .hover-elevate {
    transition: transform var(--transition-fast) var(--ease-out),
                box-shadow var(--transition-fast) var(--ease-out);
  }

  .hover-elevate:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}