/* ==========================================
   FLETIX CORE STYLES
   ========================================== */

/* Efecto Glassmorphism para Tarjetas */
.glass-card {
    background: rgba(15, 23, 42, 0.85); /* Slate 900 con opacidad */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ==========================================
   COMPONENTES REUTILIZABLES (Clases Tailwind)
   ========================================== */

/* Inputs de formulario estándar FletiX */
.input-fletix {
    width: 100%;
    background-color: rgba(15, 23, 42, 0.8); /* Slate 900 */
    border: 1px solid rgba(51, 65, 85, 1); /* Slate 700 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 0.625rem; /* p-2.5 */
    font-size: 0.75rem; /* text-xs */
    color: white;
    outline: none;
    transition: all 0.2s;
}
.input-fletix:focus {
    border-color: #3b82f6; /* focus:border-blue-500 */
}

/* Botón Primario FletiX (Degradado Cian/Verde) */
.btn-primary {
    background-image: linear-gradient(to right, #2563eb, #10b981); /* from-blue-600 to-emerald-500 */
    color: white;
    font-weight: 700; /* font-bold */
    border-radius: 0.75rem; /* rounded-xl */
    transition: all 0.2s;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2); /* shadow-blue-600/20 */
}
.btn-primary:hover {
    background-image: linear-gradient(to right, #3b82f6, #34d399); /* hover:from-blue-500 hover:to-emerald-400 */
}
.btn-primary:active {
    transform: scale(0.98); /* active:scale-[0.98] */
}

/* Input de Archivo (File) estilizado */
.file-input-fletix {
    width: 100%;
    font-size: 0.75rem; /* text-xs */
    color: #94a3b8; /* text-slate-400 */
    cursor: pointer;
}
.file-input-fletix::file-selector-button {
    margin-right: 0.5rem; /* file:mr-2 */
    padding: 0.375rem 0.75rem; /* file:py-1.5 file:px-3 */
    border-radius: 0.75rem; /* file:rounded-xl */
    border-width: 0; /* file:border-0 */
    font-size: 0.75rem; /* file:text-xs */
    font-weight: 600; /* file:font-semibold */
    background-color: rgba(37, 99, 235, 0.3); /* file:bg-blue-600/30 */
    color: #93c5fd; /* file:text-blue-300 */
    transition: all 0.2s;
}
.file-input-fletix:hover::file-selector-button {
    background-color: rgba(37, 99, 235, 0.5); /* hover:file:bg-blue-600/50 */
}

/* ==========================================
   CORRECCIONES LEAFLET (MODO OSCURO VERCEL)
   ========================================== */

/* Invertir colores del mapa para que se vea oscuro y combine */
.leaflet-tile {
    filter: brightness(0.7) invert(1) contrast(1.2) hue-rotate(200deg) saturate(0.4);
}

/* Fondo del contenedor del mapa para evitar bordes blancos al cargar */
.leaflet-container {
    background-color: #020617 !important; /* Slate 950 */
    font-family: inherit;
}

/* Estilar Popups de Leaflet para que sean oscuros */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: #0f172a !important; /* Slate 900 */
    color: #f8fafc !important; /* Slate 50 */
    border: 1px solid rgba(6, 182, 212, 0.3); /* Cian */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}