:root {
--primary-color: #FF6B6B;
--secondary-color: #FFA07A;
--accent-color: #FFD166;
--dark-color: #4A4A4A;
--light-color: #F7F7F7;
--success-color: #06D6A0;
--warning-color: #FFD166;
--error-color: #EF476F;
--google-red: #DB4437;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
line-height: 1.6;
background-image: url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}

.login-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 450px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow);
animation: fadeIn 0.5s ease-in-out;
transition: var(--transition);
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.login-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 30px 20px;
text-align: center;
position: relative;
overflow: hidden;
}

.login-header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.1)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>');
background-size: 100% 100%;
opacity: 0.3;
}

.login-header h1 {
font-size: 2rem;
margin-bottom: 10px;
position: relative;
z-index: 1;
}

.login-header p {
font-size: 0.9rem;
opacity: 0.9;
position: relative;
z-index: 1;
}

.login-header .icon {
font-size: 2.5rem;
margin-bottom: 15px;
display: inline-block;
animation: bounce 2s infinite;
position: relative;
z-index: 1;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-15px); }
60% { transform: translateY(-7px); }
}

.login-content {
padding: 30px;
}

.form-group {
margin-bottom: 20px;
position: relative;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--dark-color);
}

.form-control {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 1rem;
transition: var(--transition);
background-color: rgba(255, 255, 255, 0.8);
}

.form-control:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
}

.form-control::placeholder {
color: #aaa;
}

.input-icon {
position: absolute;
right: 15px;
top: 40px;
color: #aaa;
}

.btn {
display: inline-block;
padding: 12px 20px;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
text-align: center;
width: 100%;
}

.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
box-shadow: var(--shadow);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.divider {
display: flex;
align-items: center;
margin: 20px 0;
color: #aaa;
font-size: 0.9rem;
}

.divider::before, .divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #e0e0e0;
}

.divider::before {
margin-right: 10px;
}

.divider::after {
margin-left: 10px;
}

.forgot-password {
text-align: right;
margin-bottom: 20px;
}

.forgot-password a {
color: var(--primary-color);
text-decoration: none;
font-size: 0.9rem;
transition: var(--transition);
}

.forgot-password a:hover {
text-decoration: underline;
}

.food-icons {
display: flex;
justify-content: space-around;
margin-top: 20px;
opacity: 0.8;
}

.food-icons i {
font-size: 1.5rem;
color: var(--primary-color);
animation: float 3s ease-in-out infinite;
}

.food-icons i:nth-child(2) {
animation-delay: 0.2s;
}

.food-icons i:nth-child(3) {
animation-delay: 0.4s;
}

.food-icons i:nth-child(4) {
animation-delay: 0.6s;
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

/* Switch Styles */
.login-switch {
display: flex;
background: #f0f0f0;
border-radius: 10px;
padding: 5px;
margin-bottom: 25px;
position: relative;
}

.switch-option {
flex: 1;
text-align: center;
padding: 12px;
cursor: pointer;
border-radius: 8px;
transition: var(--transition);
font-weight: 500;
z-index: 1;
position: relative;
}

.switch-option.active {
color: white;
}

.switch-slider {
position: absolute;
top: 5px;
left: 5px;
width: calc(50% - 5px);
height: calc(100% - 10px);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 8px;
transition: var(--transition);
z-index: 0;
}

.switch-slider.admin {
transform: translateX(0);
}

.switch-slider.seller {
transform: translateX(100%);
}

/* Form visibility */
.login-form {
display: none;
}

.login-form.active {
display: block;
animation: fadeInForm 0.5s ease-in-out;
}

@keyframes fadeInForm {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
.login-container {
max-width: 100%;
border-radius: 15px;
}

.login-header h1 {
font-size: 1.8rem;
}

.login-content {
padding: 25px;
}
}

@media (max-width: 480px) {
body {
padding: 10px;
}

.login-header {
padding: 20px 15px;
}

.login-header h1 {
font-size: 1.5rem;
}

.login-content {
padding: 20px 15px;
}

.btn {
padding: 10px 15px;
}
}

/* Floating animation for form */
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

.login-container:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Error message styling */
.error-message {
color: var(--error-color);
font-size: 0.8rem;
margin-top: 5px;
display: none;
}

.form-group.error .error-message {
display: block;
}

.form-group.error .form-control {
border-color: var(--error-color);
}

.form-group.success .form-control {
border-color: var(--success-color);
}

.register-link {
margin-top: 15px;
text-align: center;
font-size: 0.9rem;
}

.register-link a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}

.register-link a:hover {
text-decoration: underline;
color: var(--secondary-color);
}

/* Estilos para el overlay de carga */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}

.loading-overlay.active {
opacity: 1;
pointer-events: all;
}

.loading-content {
text-align: center;
padding: 40px;
border-radius: 16px;
background-color: white;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 90%;
position: relative;
overflow: hidden;
}

.loading-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--primary-color));
background-size: 200% 100%;
animation: gradientFlow 3s linear infinite;
}

.loading-logo {
margin: 20px 0;
animation: float 3s ease-in-out infinite;
}

.loading-message {
font-size: 28px;
color: var(--dark-color);
margin-bottom: 20px;
font-weight: 600;
}

.loading-submessage {
font-size: 16px;
color: #666;
margin-bottom: 30px;
}

.loading-bar-container {
width: 100%;
height: 8px;
background-color: #e9ecef;
border-radius: 4px;
overflow: hidden;
margin-bottom: 30px;
}

.loading-bar {
height: 100%;
width: 0%;
border-radius: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
transition: width 4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.loading-food-icons {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}

.loading-food-icon {
font-size: 24px;
color: var(--primary-color);
animation: bounce 2s infinite;
}

.loading-powered-by {
font-size: 14px;
color: #999;
margin-top: 30px;
letter-spacing: 1px;
}