/* ===================================================================== */
/*     Estilos Inspirados en la App de Presión Arterial (History)        */
/* ===================================================================== */

/* Variables de Color para fácil personalización */
:root {
    --bg-gradient-start: #0D1B2A; /* Azul oscuro/casi negro */
    --bg-gradient-end: #1D2D3F;   /* Azul medianoche */
    --accent-cyan: #00F6FF;       /* Cian vibrante para elementos activos y brillos */
    --card-bg: rgba(28, 41, 56, 0.4); /* Fondo de tarjeta semitransparente */
    --card-border: rgba(255, 255, 255, 0.1); /* Borde sutil para las tarjetas */
    --text-primary: #FFFFFF;        /* Texto principal blanco */
    --text-secondary: rgba(235, 235, 245, 0.7); /* Texto secundario más tenue */
    --inactive-border: rgba(255, 255, 255, 0.3); /* Borde para botones inactivos */
}


/* General Body Styles */
body {
    font-family: 'Poppins', 'Roboto', sans-serif;
    overflow-x: hidden;
    background-color: var(--bg-gradient-start);
    color: var(--text-primary);
}

/* Font Imports */
h1, h2, h3, .font-orbitron {
    font-family: 'Poppins', 'Helvetica Neue', sans-serif;
    font-weight: 600;
}

/* Background Animations - Sutil gradiente oscuro */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-shift {
    background: linear-gradient(-45deg, var(--bg-gradient-start), var(--bg-gradient-end), #0D1B2A);
    background-size: 400% 400%;
    animation: gradient-shift 25s ease infinite;
}

.dots-pattern {
    background-image: none; /* El diseño es limpio, sin patrones de puntos */
}

/* Blob animado adaptado a la nueva paleta */
@keyframes blob {
    0% { transform: translate(0, 0) scale(1); }
    30% { transform: translate(30px, -50px) scale(1.1); }
    60% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

.animate-blob {
    animation: blob 10s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    background: rgba(0, 246, 255, 0.05); /* Usando el cian de acento muy tenue */
}

.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* Pulse Glow para elementos de fondo, adaptado al cian */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 10px rgba(0, 246, 255, 0.2); }
    50% { box-shadow: 0 0 30px rgba(0, 246, 255, 0.4), 0 0 60px rgba(0, 246, 255, 0.2); }
    100% { box-shadow: 0 0 10px rgba(0, 246, 255, 0.2); }
}

.animate-pulse-glow {
    animation: pulse-glow 4s infinite alternate;
}

/* Starfield se mantiene igual, es un buen efecto opcional */
.starfield { /* ... (sin cambios) ... */ }
.star { /* ... (sin cambios) ... */ }
@keyframes twinkle { /* ... (sin cambios) ... */ }

/* Text Animations (sin cambios, son universales) */
@keyframes fade-in-up { /* ... (sin cambios) ... */ }
.animate-fade-in-up { /* ... (sin cambios) ... */ }
.animation-delay-500 { /* ... (sin cambios) ... */ }
.animation-delay-1000 { /* ... (sin cambios) ... */ }

/* Card Styles - Adaptado a las tarjetas de historial */
.feature-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 20px; /* Bordes redondeados como en la imagen */
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.feature-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

/* El borde rotatorio no está en este diseño, se puede eliminar o mantener para un efecto extra */
.feature-card::before {
    content: none;
}

/* Glassmorphism Effect - Unificado con el estilo de las tarjetas */
.glass-effect {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Gradient & Glowy Text - Para el título "History" */
.text-gradient {
    color: var(--text-primary);
    text-shadow: 0 0 8px rgba(0, 246, 255, 0.6), 0 0 16px rgba(0, 246, 255, 0.4);
}

/* Obsoleto en este diseño, pero se mantiene la definición */
.gradient-purple-blue, .gradient-pink-purple {
    background-image: none;
}

/* Button Styles - Adaptado a los botones de filtro */
.btn-filter {
    border-radius: 9999px; /* Forma de píldora */
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    border: 1.5px solid;
    background-color: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-filter.active {
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-gradient-start); /* Texto oscuro sobre fondo claro */
    box-shadow: 0 0 15px rgba(0, 246, 255, 0.5);
}

.btn-filter.inactive {
    border-color: var(--inactive-border);
    color: var(--text-secondary);
}

.btn-filter.inactive:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Form Input Styles - Para la barra "Filter by date" */
input[type="text"],
input[type="email"],
textarea,
.search-bar { /* Añadida una clase para mayor flexibilidad */
    background-color: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
    border-radius: 9999px; /* Forma de píldora */
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder,
.search-bar::placeholder {
    color: var(--text-secondary);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
.search-bar:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 246, 255, 0.3);
    background-color: var(--card-bg);
    color: var(--text-primary);
    outline: none;
}