/* =========================================
   Odonto House — style.css
   ========================================= */

:root {
    --clr-bg:         #050b14;
    --clr-bg2:        #081120;
    --clr-surface:    #0d1a2b;
    --clr-surface2:   #122236;
    --clr-border:     rgba(99, 179, 237, 0.12);
    --clr-border-hov: rgba(99, 179, 237, 0.35);
    --clr-primary:    #3ea8ff;
    --clr-primary-dk: #1a7fd4;
    --clr-accent:     #00e5c8;
    --clr-accent2:    #7c6fff;
    --clr-text:       #e8f4ff;
    --clr-text-muted: #6b90b8;
    --clr-text-dim:   #3a5a7a;
    --clr-error:      #ff5f7e;
    --clr-error-bg:   rgba(255, 95, 126, 0.08);
    --radius-card:    24px;
    --radius-input:   12px;
    --radius-btn:     14px;
    --shadow-card:    0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--clr-border);
    --shadow-glow:    0 0 40px rgba(62, 168, 255, 0.18);
    --transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --spring:         0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    display: flex;
    font-family: 'DM Sans', sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
    overflow: hidden;
    position: relative;
}

/* ── Ambient Background ── */
.bg-art { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: orbFloat 12s ease-in-out infinite; }
.orb-1 { width:600px;height:600px;background:radial-gradient(circle,rgba(62,168,255,0.15) 0%,transparent 70%);top:-150px;left:-100px;animation-delay:0s; }
.orb-2 { width:500px;height:500px;background:radial-gradient(circle,rgba(124,111,255,0.12) 0%,transparent 70%);bottom:-100px;left:20%;animation-delay:-4s; }
.orb-3 { width:400px;height:400px;background:radial-gradient(circle,rgba(0,229,200,0.1) 0%,transparent 70%);top:30%;right:-100px;animation-delay:-8s; }
@keyframes orbFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(30px,-40px) scale(1.05); }
    66%      { transform: translate(-20px,20px) scale(0.97); }
}

.grid-lines {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(62,168,255,0.03) 1px,transparent 1px), linear-gradient(90deg,rgba(62,168,255,0.03) 1px,transparent 1px);
    background-size: 60px 60px;
    animation: gridShift 20s linear infinite;
}
@keyframes gridShift { 0% { background-position:0 0; } 100% { background-position:60px 60px; } }

.noise-overlay {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* ── Particles ── */
.particles { position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden; }
.particle { position:absolute;border-radius:50%;opacity:0;animation:snowFall linear infinite;pointer-events:none; }
@keyframes snowFall {
    0%   { transform:translateY(-20px) translateX(0) rotate(0deg); opacity:0; }
    5%   { opacity:1; }
    95%  { opacity:0.7; }
    100% { transform:translateY(105vh) translateX(var(--drift,0px)) rotate(360deg); opacity:0; }
}
.star { position:absolute;border-radius:50%;animation:starPulse ease-in-out infinite;pointer-events:none; }
@keyframes starPulse { 0%,100%{opacity:0.15;transform:scale(1);}50%{opacity:0.9;transform:scale(1.6);} }
.snowflake { position:absolute;color:rgba(255,255,255,0.85);font-size:18px;opacity:0;animation:snowFall linear infinite;pointer-events:none;text-shadow:0 0 8px rgba(255,255,255,0.8),0 0 16px rgba(62,168,255,0.6);user-select:none; }
.snowflake.small { font-size:12px;color:rgba(200,230,255,0.7); }
.snowflake.large { font-size:26px;color:rgba(255,255,255,0.9); }

/* ══════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════ */
.left-panel,
.right-panel {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    justify-content: center;
}

.left-panel {
    flex: 1; min-height: 100vh;
    padding: 60px 56px;
    background: linear-gradient(135deg, rgba(8,17,32,0.95) 0%, rgba(13,26,43,0.9) 100%);
    border-right: 1px solid var(--clr-border);
    overflow: hidden; align-items: center; text-align: center;
}
.left-panel .hero-subtitle { max-width: 400px; }

.right-panel {
    flex: 0.85; min-height: 100vh;
    padding: 60px 52px;
    align-items: center;
    
    /* Fondo con logo */
    background: 
        linear-gradient(135deg, rgba(5,11,20,0.92) 0%, rgba(8,17,32,0.88) 100%),
        url('../img/logo.jpeg') center center / cover no-repeat;
}

/* ══════════════════════════════════════════
   ANIMACIONES DE KEYFRAMES
   ══════════════════════════════════════════ */
@keyframes fadeDown {
    from { opacity:0; transform:translateY(-20px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes cardIn {
    from { opacity:0; transform:translateY(30px) scale(0.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes shake {
    0%,100% { transform:translateX(0); }
    20%      { transform:translateX(-8px); }
    40%      { transform:translateX(8px); }
    60%      { transform:translateX(-5px); }
    80%      { transform:translateX(5px); }
}
@keyframes underlineGrow { to { transform:scaleX(1); } }
@keyframes logoPulse { 0%,100%{transform:scale(1);opacity:0.8;}50%{transform:scale(1.08);opacity:0.3;} }
@keyframes blink { 0%,100%{opacity:1;box-shadow:0 0 6px var(--clr-accent);}50%{opacity:0.4;box-shadow:none;} }
@keyframes ripple { to { transform:scale(4);opacity:0; } }

/* ══════════════════════════════════════════
   ELEMENTOS CON ANIMACIÓN DE ENTRADA
   — SIN opacity:0 inicial, usan animation-fill-mode:both
   — La clase .animated dispara la animación
   ══════════════════════════════════════════ */

/* Estado inicial: invisible */
.logo-area,
.hero-tag,
.hero-title,
.hero-subtitle,
.stats-row {
    opacity: 0;
}

/* Cuando JS agrega .animated → anima y se queda visible */
.logo-area.animated {
    animation: fadeDown 0.6s ease both;
}
.hero-tag.animated {
    animation: fadeUp 0.6s ease both;
}
.hero-title.animated {
    animation: fadeUp 0.6s ease both;
}
.hero-subtitle.animated {
    animation: fadeUp 0.6s ease both;
}
.stats-row.animated {
    animation: fadeUp 0.6s ease both;
}

/* Login card */
.login-card {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
}
.login-card.animated {
    animation: cardIn 0.8s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* Deco line */
.deco-line {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0;
    background: linear-gradient(180deg, transparent, var(--clr-primary), var(--clr-accent), transparent);
    border-radius: 3px; transition: height 1.5s ease 0.5s;
}
.deco-line.animated { height: 60%; }

/* ── Logo ── */
.logo-icon {
    position: relative; width:48px; height:48px;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent2));
    border-radius: 14px; display:flex; align-items:center; justify-content:center;
    font-size: 22px; color:#fff;
    box-shadow: 0 8px 24px rgba(62,168,255,0.3); flex-shrink:0;
}
.logo-ring {
    position:absolute; inset:-4px; border-radius:18px;
    border:1px solid rgba(62,168,255,0.3);
    animation: logoPulse 3s ease-in-out infinite;
}
.logo-area {
    display:flex; align-items:center; gap:14px; margin-bottom:48px;
}
.logo-text { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; letter-spacing:-0.5px; color:var(--clr-text); }
.logo-text span { color:var(--clr-primary); }

/* ── Hero Tag ── */
.hero-tag {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
    color:var(--clr-accent); padding:6px 14px;
    background:rgba(0,229,200,0.08); border:1px solid rgba(0,229,200,0.2);
    border-radius:100px; margin-bottom:24px; width:fit-content;
}
.tag-dot { width:6px;height:6px;background:var(--clr-accent);border-radius:50%;animation:blink 2s ease-in-out infinite; }

/* ── Hero Title ── */
.hero-title {
    font-family:'Playfair Display',serif;
    font-size:clamp(40px,4vw,58px); font-weight:700;
    line-height:1.12; letter-spacing:-1.5px;
    color:var(--clr-text); margin-bottom:20px;
}
.hero-title em {
    font-style:italic;
    background:linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; position:relative;
}
.hero-title em::after {
    content:''; position:absolute; bottom:-4px; left:0; right:0;
    height:2px; background:linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    border-radius:2px; transform:scaleX(0); transform-origin:left;
    animation:underlineGrow 0.8s 1.2s ease forwards;
}

/* ── Hero Subtitle ── */
.hero-subtitle {
    font-size:15px; line-height:1.7;
    color:var(--clr-text-muted); max-width:380px; margin-bottom:40px;
}

/* ── Stats Row ── */
.stats-row {
    display:flex; align-items:center; gap:0; margin-bottom:48px;
    padding:24px 28px; background:rgba(255,255,255,0.03);
    border:1px solid var(--clr-border); border-radius:16px;
    backdrop-filter:blur(10px); width:fit-content;
    transition:border-color var(--transition), box-shadow var(--transition);
}
.stats-row:hover { border-color:var(--clr-border-hov); box-shadow:var(--shadow-glow); }
.stat-separator { width:1px;height:40px;background:var(--clr-border);margin:0 24px; }
.stat-item { text-align:center; }
.stat-num { font-family:'Playfair Display',serif;font-size:28px;font-weight:700;color:var(--clr-text);line-height:1;margin-bottom:4px; }
.stat-num span { color:var(--clr-primary);font-size:20px; }
.stat-label { font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--clr-text-muted); }

/* ── Login Card ── */
.login-card {
    width:100%; max-width:440px;
    background:linear-gradient(145deg, var(--clr-surface) 0%, var(--clr-surface2) 100%);
    border:1px solid var(--clr-border); border-radius:var(--radius-card);
    padding:44px 40px;
    box-shadow:var(--shadow-card);
    backdrop-filter:blur(20px);
    position:relative; overflow:hidden;
    transition:box-shadow var(--transition);
}
.login-card:hover { box-shadow:var(--shadow-card), var(--shadow-glow); }
.login-card::before {
    content:''; position:absolute; top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(62,168,255,0.5),transparent);
}

/* ── Card Header ── */
.card-eyebrow { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--clr-primary);margin-bottom:12px;opacity:0.8; }
.card-title { font-family:'Playfair Display',serif;font-size:32px;font-weight:700;letter-spacing:-1px;color:var(--clr-text);margin-bottom:6px; }
.card-subtitle { font-size:14px;color:var(--clr-text-muted);margin-bottom:32px; }

/* ── Mensajes ── */
.error-msg {
    display:flex; align-items:flex-start; gap:10px;
    padding:14px 16px;
    background:var(--clr-error-bg);
    border:1px solid rgba(255,95,126,0.2);
    border-radius:10px; color:var(--clr-error);
    font-size:13px; line-height:1.5; margin-bottom:24px;
    animation:shake 0.5s ease;
}
.error-msg i { margin-top:1px; flex-shrink:0; }

/* ── Form ── */
.form-group { margin-bottom:20px; }
.form-group label { display:block;font-size:13px;font-weight:500;color:var(--clr-text-muted);margin-bottom:8px;transition:color var(--transition); }
.form-group:focus-within label { color:var(--clr-primary); }

.input-wrap { position:relative;display:flex;align-items:center; }

.input-wrap input {
    width:100%;
    padding:14px 48px 14px 46px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--clr-border);
    border-radius:var(--radius-input);
    color:var(--clr-text);
    font-family:'DM Sans',sans-serif;
    font-size:14px; outline:none;
    transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.input-wrap input::placeholder { color:var(--clr-text-dim); }
.input-wrap input:focus {
    border-color:var(--clr-primary);
    background:rgba(62,168,255,0.06);
    box-shadow:0 0 0 4px rgba(62,168,255,0.1);
}

.input-icon {
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    color:var(--clr-text-dim); font-size:14px; pointer-events:none;
    transition:color var(--transition); z-index:2;
}
.input-wrap:focus-within .input-icon { color:var(--clr-primary); }

/* ── Toggle contraseña ── */
.toggle-pass {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer;
    color:var(--clr-text-dim);
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px; font-size:15px;
    transition:color var(--transition), background var(--transition);
    z-index:3;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.toggle-pass:hover { color:var(--clr-primary); background:rgba(62,168,255,0.12); }
.toggle-pass:active { background:rgba(62,168,255,0.2); }

.input-line {
    position:absolute; bottom:0; left:12px; right:12px; height:2px;
    background:linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
    border-radius:2px; transform:scaleX(0);
    transition:transform var(--transition); pointer-events:none;
}
.input-wrap:focus-within .input-line { transform:scaleX(1); }

/* ── Login Button ── */
.btn-login {
    width:100%; padding:16px; margin-top:8px;
    background:linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dk));
    border:none; border-radius:var(--radius-btn);
    color:#fff; font-family:'DM Sans',sans-serif;
    font-size:15px; font-weight:600; cursor:pointer;
    position:relative; overflow:hidden;
    transition:transform var(--spring), box-shadow var(--transition);
    box-shadow:0 8px 24px rgba(62,168,255,0.25);
    touch-action:manipulation;
}
.btn-login:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(62,168,255,0.35); }
.btn-login:active { transform:translateY(0) scale(0.98); }
.btn-loader { display:none; }
.btn-login.loading .btn-text   { display:none; }
.btn-login.loading .btn-loader { display:inline-flex; }
.btn-ripple { position:absolute;border-radius:50%;background:rgba(255,255,255,0.3);transform:scale(0);pointer-events:none; }
.btn-ripple.active { animation:ripple 0.6s ease-out forwards; }

/* ── Divider ── */
.divider { display:flex;align-items:center;gap:12px;margin:28px 0 0;color:var(--clr-text-dim);font-size:11px;letter-spacing:1.5px;text-transform:uppercase; }
.divider::before,.divider::after { content:'';flex:1;height:1px;background:var(--clr-border); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--clr-bg); }
::-webkit-scrollbar-thumb { background:var(--clr-border);border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--clr-primary); }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 900px) {
    body { flex-direction:column; overflow-y:auto; overflow-x:hidden; }
    .left-panel { min-height:auto;flex:none;padding:40px 32px 32px;border-right:none;border-bottom:1px solid var(--clr-border); }
    .right-panel { min-height:auto;flex:none;padding:32px 24px 48px;width:100%; }
    .hero-title { font-size:clamp(32px,6vw,48px); }
    .stats-row { padding:16px 20px; }
}

@media (max-width: 600px) {
    .left-panel { display:none; }
    .right-panel { min-height:100vh;width:100%;padding:32px 20px;justify-content:center; }
    .login-card { max-width:100%;padding:32px 24px;border-radius:20px; }
    .card-title { font-size:26px; }
    .input-wrap input { padding:16px 52px 16px 46px;font-size:16px; }
    .toggle-pass { right:10px;width:36px;height:36px;font-size:16px; }
    .btn-login { padding:18px;font-size:16px; }
    .error-msg { font-size:12px;padding:12px 14px; }
}

@media (max-width: 360px) {
    .login-card { padding:28px 18px; }
    .card-title { font-size:24px; }
}