/* =========================================================
   VARIABLES
   ========================================================= */
:root {
    --c-primary: #00BCD4;
    --c-secondary: #FFC107;
    --c-accent: #FF7043;
    --c-light: #F0F8FF;
    --c-dark: #2C3E50;
    --c-dark-card: #34495E;
    --ring: var(--c-primary);
    --radius-xl: 1.25rem;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-soft: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
    --shadow-card: 0 10px 25px -5px rgba(44,62,80,.15), 0 8px 10px -6px rgba(44,62,80,.10);
    --shadow-lift: 0 25px 50px -12px rgba(44,62,80,.30);
}

/* =========================================================
   BASE
   ========================================================= */
html { scroll-padding-top: 5rem; }
body {
    font-family: 'Quicksand', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
::selection { background: var(--c-secondary); color: var(--c-dark); }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--c-primary), var(--c-accent));
    border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
html { scrollbar-width: thin; scrollbar-color: var(--c-primary) transparent; }

.font-pacifico { font-family: 'Pacifico', cursive; }

.gradient-text {
    background: linear-gradient(100deg, #00BCD4 0%, #26A69A 45%, #FFB300 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding-bottom: .15em; line-height: 1.25; display: inline-block;
}
.dark .gradient-text {
    background: linear-gradient(100deg, #26C6DA 0%, #80DEEA 40%, #FFEB3B 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-shadow-custom { text-shadow: 3px 3px 0 rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.18); }
.dark .text-shadow-custom { text-shadow: 2px 2px 0 #FF7043, 4px 4px 0 rgba(0,0,0,.3); }

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
#navbar { border-bottom: 1px solid rgba(0,188,212,.15); }
.dark #navbar { border-bottom-color: rgba(255,193,7,.12); }

.nav-link {
    position: relative; padding: .5rem .35rem; font-weight: 700; font-size: .95rem;
    color: var(--c-dark); transition: color .25s ease;
}
.dark .nav-link { color: #E5EEF5; }
.nav-link::after {
    content: ""; position: absolute; left: 50%; bottom: .15rem; width: 0; height: 3px;
    border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
    transform: translateX(-50%); transition: width .3s var(--ease-out);
}
.nav-link:hover, .nav-link.active { color: var(--c-primary); }
.dark .nav-link:hover, .dark .nav-link.active { color: var(--c-secondary); }
.nav-link:hover::after, .nav-link.active::after, .nav-link:focus-visible::after { width: 100%; }

.mobile-nav-link {
    display: block; padding: .75rem 1rem; border-radius: .75rem; font-weight: 700;
    color: var(--c-dark); transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}
.dark .mobile-nav-link { color: #E5EEF5; }
.mobile-nav-link:hover { background: rgba(0,188,212,.12); color: var(--c-primary); padding-left: 1.5rem; }
.dark .mobile-nav-link:hover { background: rgba(255,193,7,.12); color: var(--c-secondary); }
#mobile-menu { border-top: 1px solid rgba(0,0,0,.06); box-shadow: 0 12px 24px -12px rgba(0,0,0,.25); }
.dark #mobile-menu { border-top-color: rgba(255,255,255,.08); }

.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); transition: left .7s var(--ease-out); pointer-events: none; z-index: -1;
}
.btn-shine:hover::after { left: 130%; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 10px 20px -8px rgba(255,112,67,.55), 0 0 0 0 rgba(255,112,67,.65); }
    70%      { box-shadow: 0 10px 20px -8px rgba(255,112,67,.55), 0 0 0 14px rgba(255,112,67,0); }
}
.animate-pulse-glow { animation: pulse-glow 2.2s infinite cubic-bezier(.4,0,.6,1); }

/* =========================================================
   HERO
   ========================================================= */
#hero { position: relative; overflow: hidden; }
#hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6rem;
    background: linear-gradient(to bottom, transparent, rgba(240,248,255,.95));
    pointer-events: none; z-index: 2;
}
.dark #hero::after { background: linear-gradient(to bottom, transparent, rgba(44,62,80,.98)); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: 1; }

.search-input {
    transition: box-shadow .25s ease, border-color .25s ease;
}
.search-input:focus {
    outline: none; border-color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(0,188,212,.28);
}
.dark .search-input:focus { border-color: var(--c-secondary); box-shadow: 0 0 0 4px rgba(255,193,7,.30); }
.search-input::placeholder { color: #94A3B8; }

.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border-radius: 999px;
    background: var(--c-primary); color: #fff; font-weight: 700; cursor: pointer;
    box-shadow: 0 10px 20px -8px rgba(0,188,212,.6);
    transition: transform .3s var(--ease-out), filter .3s ease;
}
.btn-primary:hover { transform: scale(1.05); filter: brightness(1.08); }
.btn-primary:active { transform: scale(.97); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border-radius: 999px;
    background: transparent; color: var(--c-dark); font-weight: 700; cursor: pointer;
    border: 2px solid #CBD5E1; transition: transform .3s var(--ease-out), border-color .3s ease, color .3s ease;
}
.dark .btn-ghost { color: var(--c-light); border-color: #5B6D80; }
.btn-ghost:hover { transform: scale(1.05); border-color: var(--c-accent); color: var(--c-accent); }

/* =========================================================
   TOAST
   ========================================================= */
#toast {
    position: fixed; left: 50%; bottom: 6.5rem; z-index: 90; transform: translate(-50%, 20px);
    padding: .75rem 1.25rem; border-radius: 999px; background: var(--c-dark); color: #fff; font-weight: 700;
    box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .3s var(--ease-out);
}
.dark #toast { background: var(--c-secondary); color: var(--c-dark); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

footer a[aria-label] { transition: color .25s ease, transform .3s var(--ease-out); }
footer a[aria-label]:hover { transform: translateY(-4px) scale(1.15); }

/* =========================================================
   AUTENTICACIÓN (login / registro)
   ========================================================= */
.auth-main {
    position: relative; overflow: hidden; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 7rem 1rem 4rem;
    background: linear-gradient(135deg, #00BCD4 0%, #26A69A 60%, #4DB6AC 100%);
}
.dark .auth-main { background: linear-gradient(135deg, #2C3E50 0%, #1f4f55 65%, #115e59 100%); }

.auth-card {
    position: relative; z-index: 2; width: 100%; max-width: 62rem;
    display: grid; grid-template-columns: 1fr;
    background: #fff; border-radius: 1.5rem; overflow: hidden;
    box-shadow: var(--shadow-lift);
}
.dark .auth-card { background: var(--c-dark-card); }
@media (min-width: 900px) { .auth-card { grid-template-columns: 5fr 6fr; } }

.auth-side {
    display: none; position: relative; overflow: hidden; color: #fff; text-align: center;
    padding: 2.5rem; flex-direction: column; justify-content: center; align-items: center; gap: 1.1rem;
    background: linear-gradient(135deg, #FF7043 0%, #FF8A65 55%, #FFAB40 100%);
}
.auth-side::before {
    content: ""; position: absolute; inset: -25% -20% auto auto; width: 22rem; height: 22rem;
    background: radial-gradient(circle, rgba(255,255,255,.3), transparent 65%); pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }
.auth-side blockquote {
    margin-top: 1rem; padding: 1rem 1.25rem; border-radius: 1rem;
    background: rgba(255,255,255,.18); backdrop-filter: blur(4px); font-style: italic;
}
.auth-side blockquote footer { margin-top: .5rem; font-style: normal; font-weight: 700; opacity: .9; }
@media (min-width: 900px) { .auth-side { display: flex; } }

.auth-form-wrap { padding: 2rem 1.5rem; }
@media (min-width: 640px) { .auth-form-wrap { padding: 3rem; } }

.field { margin-bottom: 1.1rem; }
.field > label { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--c-dark); }
.dark .field > label { color: var(--c-light); }
.field-box { position: relative; }
.field-box > i.lead {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: #94A3B8; pointer-events: none;
}
.field-box input[type="text"], .field-box input[type="email"], .field-box input[type="password"] {
    width: 100%; padding: .8rem 2.9rem .8rem 2.7rem; border-radius: .9rem;
    border: 2px solid #CBD5E1; background: #F8FAFC; color: var(--c-dark); font-size: 1rem;
    transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.dark .field-box input[type="text"], .dark .field-box input[type="email"], .dark .field-box input[type="password"] {
    background: var(--c-dark); border-color: #4B5C6E; color: var(--c-light);
}
.field-box input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(0,188,212,.28); }
.dark .field-box input:focus { border-color: var(--c-secondary); box-shadow: 0 0 0 4px rgba(255,193,7,.30); }
.field-box input::placeholder { color: #94A3B8; }
.field-box input.input-error { border-color: #EF4444; }
.field-box input.input-error:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.25); }
.field-box input.input-success { border-color: #22C55E; }
.error-message { color: #EF4444; font-size: .875rem; margin-top: .3rem; }
.dark .error-message { color: #FCA5A5; }

.pw-toggle {
    position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
    width: 2.25rem; height: 2.25rem; border-radius: 999px; color: #64748B; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: color .2s ease, background-color .2s ease;
}
.pw-toggle:hover { color: var(--c-primary); background: rgba(0,188,212,.1); }
.dark .pw-toggle:hover { color: var(--c-secondary); background: rgba(255,193,7,.12); }

.strength { height: .4rem; border-radius: 999px; background: #E2E8F0; overflow: hidden; margin-top: .55rem; }
.dark .strength { background: #4B5C6E; }
.strength > span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .3s var(--ease-out), background-color .3s ease; }
.strength-label { font-size: .85rem; margin-top: .3rem; color: #64748B; }
.dark .strength-label { color: #CBD5E1; }

.check-row { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: #4B5563; }
.dark .check-row { color: #CBD5E1; }
.check-row input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--c-primary); flex-shrink: 0; }

.form-alert { display: none; padding: .75rem 1rem; border-radius: .9rem; font-weight: 600; margin-bottom: 1rem; }
.form-alert.show { display: block; }
.form-alert.error { background: #FEE2E2; color: #991B1B; }
.dark .form-alert.error { background: rgba(239,68,68,.15); color: #FCA5A5; }
.form-alert.ok { background: #DCFCE7; color: #166534; }
.dark .form-alert.ok { background: rgba(34,197,94,.15); color: #86EFAC; }
.demo-note {
    display: none; margin-bottom: 1rem; padding: .6rem .9rem; border-radius: .9rem; font-size: .85rem;
    background: rgba(255,193,7,.18); color: #7A5B00;
}
.dark .demo-note { background: rgba(255,193,7,.12); color: #FFE08A; }
.demo-note.show { display: block; }

.btn-block { width: 100%; justify-content: center; }
.btn-primary[disabled] { opacity: .6; cursor: not-allowed; transform: none; filter: none; }
.auth-link { color: var(--c-accent); font-weight: 700; }
.auth-link:hover { text-decoration: underline; }