/* Depor Treno PWA - Custom CSS with Tailwind-inspired classes */

/* CSS Variables for easy theming */
:root {
  --color-primary: #10b981;
  --color-primary-dark: #059669;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
}

/* Reset and base styles */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Utility Classes */
.min-h-screen { min-height: 100vh; }
.h-screen { height: 100vh; }
.h-16 { height: 4rem; }
.h-12 { height: 3rem; }
.h-8 { height: 2rem; }
.h-6 { height: 1.5rem; }
.h-5 { height: 1.25rem; }
.h-4 { height: 1rem; }

.w-full { width: 100%; }
.w-48 { width: 12rem; }
.w-12 { width: 3rem; }
.w-8 { width: 2rem; }
.w-6 { width: 1.5rem; }
.w-5 { width: 1.25rem; }
.w-4 { width: 1rem; }

.max-w-md { max-width: 28rem; }

/* Flexbox utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* Grid utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Spacing utilities */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }

.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.m-4 { margin: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-1 { margin-left: 0.25rem; }
.mr-3 { margin-right: 0.75rem; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* Z-index utilities */
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Background utilities */
.bg-white { background-color: white; }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }
.bg-emerald-600 { background-color: var(--color-primary); }
.bg-emerald-700 { background-color: var(--color-primary-dark); }
.bg-red-50 { background-color: #fef2f2; }

/* Text utilities */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-left { text-align: left; }

.text-white { color: white; }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-900 { color: var(--color-gray-900); }
.text-emerald-600 { color: var(--color-primary); }
.text-emerald-500 { color: #10b981; }
.text-blue-600 { color: #2563eb; }
.text-purple-600 { color: #9333ea; }
.text-red-600 { color: #dc2626; }
.text-red-400 { color: #f87171; }

/* Border utilities */
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-2 { border-width: 2px; }
.border-transparent { border-color: transparent; }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-gray-600 { border-color: var(--color-gray-600); }
.border-gray-700 { border-color: var(--color-gray-700); }
.border-red-200 { border-color: #fecaca; }
.border-red-800 { border-color: #991b1b; }

.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* Shadow utilities */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); }

/* Form utilities */
.block { display: block; }

input, textarea, select {
  appearance: none;
  background-color: white;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Button utilities */
button {
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.15s ease-in-out;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Hover utilities */
.hover\:bg-gray-100:hover { background-color: var(--color-gray-100); }
.hover\:bg-gray-700:hover { background-color: var(--color-gray-700); }
.hover\:bg-emerald-700:hover { background-color: var(--color-primary-dark); }
.hover\:text-emerald-500:hover { color: #10b981; }

/* Focus utilities */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.focus\:ring-emerald-500:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.focus\:border-emerald-500:focus { border-color: var(--color-primary); }

/* Animation utilities */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Transition utilities */
.transition {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Opacity utilities */
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* Dark mode utilities */
.dark .dark\:bg-gray-800 { background-color: var(--color-gray-800); }
.dark .dark\:bg-gray-900 { background-color: var(--color-gray-900); }
.dark .dark\:bg-red-900\/20 { background-color: rgba(127, 29, 29, 0.2); }

.dark .dark\:text-white { color: white; }
.dark .dark\:text-gray-300 { color: var(--color-gray-300); }
.dark .dark\:text-gray-400 { color: var(--color-gray-400); }
.dark .dark\:text-red-400 { color: #f87171; }

.dark .dark\:border-gray-600 { border-color: var(--color-gray-600); }
.dark .dark\:border-gray-700 { border-color: var(--color-gray-700); }
.dark .dark\:border-red-800 { border-color: #991b1b; }

.dark input, .dark textarea, .dark select {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-600);
  color: white;
}

.dark .dark\:hover\:bg-gray-700:hover { background-color: var(--color-gray-700); }

/* Media queries for responsive design */
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Custom Alpine.js transitions */
[x-cloak] { display: none !important; }

.transition-enter {
  transition: all 300ms ease-out;
}

.transition-enter-start {
  opacity: 0;
  transform: scale(0.95);
}

.transition-enter-end {
  opacity: 1;
  transform: scale(1);
}

.transition-leave {
  transition: all 300ms ease-in;
}

.transition-leave-start {
  opacity: 1;
  transform: scale(1);
}

.transition-leave-end {
  opacity: 0;
  transform: scale(0.95);
}

/* PWA specific styles */
.pwa-install-banner {
  position: fixed;
  bottom: 80px;
  left: 1rem;
  right: 1rem;
  background: white;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border: 1px solid var(--color-gray-200);
  z-index: 45;
}

/* Loading states */
.loading-shimmer {
  background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.dark .loading-shimmer {
  background: linear-gradient(90deg, var(--color-gray-700) 25%, var(--color-gray-600) 50%, var(--color-gray-700) 75%);
  background-size: 200% 100%;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}

.dark ::-webkit-scrollbar-track {
  background: var(--color-gray-800);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--color-gray-600);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}
/* ==========================================================================
   Variantes que el HTML usaba sin ninguna regla detrás
   --------------------------------------------------------------------------
   index.html declara estados hover / disabled y algunos breakpoints que no
   existían en esta hoja, así que los botones no reaccionaban al puntero ni se
   veían deshabilitados. Se añaden aquí junto con las clases base de las que
   dependen (gradientes, transiciones y sombras), porque una variante sin su
   clase base no pinta nada.

   Nota: esta hoja es un subconjunto escrito a mano, no un build de Tailwind.
   Siguen faltando ~130 clases base y 54 variantes dark:. Ver README/notas.
   ========================================================================== */

:root {
  --color-emerald-50:  #ecfdf5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-teal-600:    #0d9488;
  --color-teal-700:    #0f766e;
  --color-blue-50:     #eff6ff;
  --color-blue-600:    #2563eb;
  --color-blue-700:    #1d4ed8;
  --color-red-600:     #dc2626;
  --color-red-700:     #b91c1c;
}

/* --- Gradientes (no existían: los botones salían sin fondo) --- */
.bg-gradient-to-r  { background-image: linear-gradient(to right, var(--grad-from, transparent), var(--grad-to, transparent)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--grad-from, transparent), var(--grad-to, transparent)); }

.from-emerald-50  { --grad-from: var(--color-emerald-50); }
.from-emerald-500 { --grad-from: var(--color-emerald-500); }
.from-emerald-600 { --grad-from: var(--color-emerald-600); }
.to-blue-50       { --grad-to: var(--color-blue-50); }
.to-blue-600      { --grad-to: var(--color-blue-600); }
.to-teal-600      { --grad-to: var(--color-teal-600); }

.hover\:from-emerald-700:hover { --grad-from: var(--color-emerald-700); }
.hover\:to-teal-700:hover      { --grad-to: var(--color-teal-700); }
.disabled\:from-gray-400:disabled { --grad-from: var(--color-gray-400); }
.disabled\:to-gray-500:disabled   { --grad-to: var(--color-gray-500); }

/* --- Transiciones y sombras que usan los estados hover --- */
.transition-all    { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200      { transition-duration: 200ms; }
.duration-300      { transition-duration: 300ms; }

.shadow-md  { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

/* --- hover: fondos --- */
.hover\:bg-gray-50:hover      { background-color: var(--color-gray-50); }
.hover\:bg-gray-200:hover     { background-color: var(--color-gray-200); }
.hover\:bg-gray-300:hover     { background-color: var(--color-gray-300); }
.hover\:bg-emerald-200:hover  { background-color: var(--color-emerald-200); }
.hover\:bg-emerald-600:hover  { background-color: var(--color-emerald-600); }
.hover\:bg-red-700:hover      { background-color: var(--color-red-700); }

/* --- hover: texto --- */
.hover\:text-gray-600:hover    { color: var(--color-gray-600); }
.hover\:text-blue-700:hover    { color: var(--color-blue-700); }
.hover\:text-emerald-700:hover { color: var(--color-emerald-700); }
.hover\:text-emerald-800:hover { color: var(--color-emerald-800); }

/* --- hover: bordes y efectos --- */
.hover\:border-emerald-400:hover { border-color: var(--color-emerald-400); }
.hover\:border-emerald-500:hover { border-color: var(--color-emerald-500); }
.hover\:shadow-md:hover          { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.hover\:shadow-2xl:hover         { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.hover\:scale-105:hover          { transform: scale(1.05); }

/* --- disabled: el usuario no tenía forma de ver que un botón estaba inactivo --- */
.disabled\:opacity-50:disabled       { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:bg-gray-400:disabled      { background-color: var(--color-gray-400); }
.disabled\:border-gray-400:disabled  { border-color: var(--color-gray-400); }

/* --- breakpoints que faltaban --- */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:mx-0 { margin-left: 0; margin-right: 0; }
}

@media (min-width: 1024px) {
  .lg\:max-w-md { max-width: 28rem; }
}