/* ═══════════════════════════════════════════════════════════════ Demole Viaje — CSS compartido de páginas de acceso Login, Registro, Recuperar, Activar, Admin, Vendedor, Staff Usa las variables del tema global (--dv-*) inyectadas en . ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100vh; } body { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--dv-text); background: radial-gradient(1000px 600px at 90% 10%, color-mix(in oklab, var(--dv-accent) 25%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at 10% 100%, color-mix(in oklab, var(--dv-primary) 18%, transparent) 0%, transparent 60%), var(--dv-bg); display: grid; place-items: center; padding: 3vh 1rem; } /* ── Card contenedora ── */ .auth-card { width: 100%; max-width: 1080px; background: #fff; border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 40px 90px -30px color-mix(in oklab, var(--dv-primary) 45%, transparent); min-height: 620px; } .auth-card.wide { max-width: 1180px; min-height: 680px; } /* ── Panel de marca (izquierda) ── */ .auth-brand { background: var(--dv-gradient); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 2rem; color: #fff; } .auth-brand::before, .auth-brand::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); } .auth-brand::before { width: 500px; height: 500px; bottom: -220px; left: -180px; } .auth-brand::after { width: 400px; height: 400px; top: -140px; right: -140px; background: color-mix(in oklab, var(--dv-accent) 40%, transparent); } .brand-logo { width: 140px; height: 140px; border-radius: 32px; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); display: grid; place-items: center; box-shadow: 0 20px 40px rgba(0,0,0,.25); position: relative; z-index: 1; margin-bottom: 1.5rem; } .brand-logo img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); } .brand-logo .fallback { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 2.4rem; color: #fff; letter-spacing: -.02em; } .brand-name { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 2.4rem; text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1; position: relative; z-index: 1; margin-bottom: .35rem; } .brand-tag { font-size: .85rem; font-weight: 600; color: color-mix(in oklab, var(--dv-accent) 90%, white); letter-spacing: .28em; text-transform: uppercase; position: relative; z-index: 1; margin-bottom: 2rem; text-align: center; } .brand-motto { position: relative; z-index: 1; font-size: .95rem; opacity: .85; text-align: center; max-width: 320px; line-height: 1.5; } .brand-badges { position: relative; z-index: 1; display: flex; gap: .5rem; margin-top: 1.5rem; flex-wrap: wrap; justify-content: center; } .brand-badges span { background: rgba(255,255,255,.15); color: #fff; font-size: .68rem; font-weight: 700; padding: .28rem .7rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(6px); } /* ── Panel de formulario (derecha) ── */ .auth-form { padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: center; max-height: 94vh; overflow-y: auto; } .auth-inner { max-width: 400px; width: 100%; margin: 0 auto; } .auth-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2.4rem; color: var(--dv-primary); letter-spacing: -.02em; line-height: 1; margin-bottom: .4rem; } .auth-sub { font-size: .95rem; color: color-mix(in oklab, var(--dv-text) 60%, transparent); margin-bottom: 2rem; } .auth-sub b { color: var(--dv-primary); font-weight: 700; } /* ── Sección (para formularios largos) ── */ .auth-section { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid color-mix(in oklab, var(--dv-text) 10%, transparent); } .auth-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .auth-section-title { font-size: .72rem; font-weight: 800; color: var(--dv-primary); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; display: flex; align-items: center; gap: .5rem; } .auth-section-title i { font-size: .85rem; } /* ── Campo ── */ .form-label { display: block; font-size: .74rem; font-weight: 800; color: color-mix(in oklab, var(--dv-text) 70%, transparent); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; } .input-icon { position: relative; background: color-mix(in oklab, var(--dv-accent) 12%, white); border: 1.5px solid transparent; border-radius: 14px; display: flex; align-items: center; padding: 0 .9rem; margin-bottom: 1.2rem; transition: border-color .15s, background .15s; } .input-icon:focus-within { border-color: var(--dv-primary); background: #fff; box-shadow: 0 0 0 4px color-mix(in oklab, var(--dv-primary) 15%, transparent); } .input-icon i.lead { color: color-mix(in oklab, var(--dv-primary) 70%, transparent); font-size: 1rem; width: 22px; text-align: center; } .input-icon input, .input-icon select, .input-icon textarea { flex: 1; border: none; background: transparent; padding: .9rem .6rem; font-size: .95rem; font-family: inherit; color: var(--dv-text); outline: none; appearance: none; -webkit-appearance: none; } .input-icon select { padding-right: 1.4rem; cursor: pointer; } .input-icon input::placeholder { color: color-mix(in oklab, var(--dv-text) 40%, transparent); } .pw-toggle { background: none; border: none; cursor: pointer; color: color-mix(in oklab, var(--dv-primary) 60%, transparent); padding: .3rem .5rem; font-size: 1rem; } .pw-toggle:hover { color: var(--dv-primary); } /* Grid de 2 columnas para campos cortos */ .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; } @media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } } /* ── Botón CTA ── */ .btn-cta { width: 100%; background: var(--dv-gradient); color: #fff; border: none; padding: 1rem 1.4rem; border-radius: 16px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .92rem; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; box-shadow: 0 20px 40px -12px color-mix(in oklab, var(--dv-primary) 60%, transparent); transition: transform .15s, box-shadow .15s; margin-top: .3rem; } .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 26px 48px -12px color-mix(in oklab, var(--dv-primary) 65%, transparent); } .btn-cta:active { transform: translateY(0); } .btn-cta.ghost { background: transparent; color: var(--dv-primary); border: 2px solid color-mix(in oklab, var(--dv-primary) 30%, transparent); box-shadow: none; margin-top: .8rem; } .btn-cta.ghost:hover { background: color-mix(in oklab, var(--dv-primary) 8%, white); } /* ── Notice ── */ .notice { padding: .8rem 1rem; border-radius: 12px; font-size: .86rem; font-weight: 600; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .55rem; } .notice.error { background: color-mix(in oklab, #ef4444 10%, white); color: #b91c1c; border: 1px solid color-mix(in oklab, #ef4444 30%, white); } .notice.ok { background: color-mix(in oklab, #16a34a 10%, white); color: #166534; border: 1px solid color-mix(in oklab, #16a34a 30%, white); } .notice.info { background: color-mix(in oklab, var(--dv-primary) 8%, white); color: var(--dv-primary); border: 1px solid color-mix(in oklab, var(--dv-primary) 25%, white); } /* ── Links ── */ .auth-links { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.5rem; text-align: center; font-size: .85rem; } .auth-links a { color: color-mix(in oklab, var(--dv-text) 65%, transparent); text-decoration: none; transition: color .15s; } .auth-links a b { color: var(--dv-primary); font-weight: 700; } .auth-links a:hover { color: var(--dv-primary); } .auth-links .divider { height: 1px; background: color-mix(in oklab, var(--dv-text) 10%, transparent); margin: .3rem 0; } /* ── OAuth botones (Google / Microsoft) ── */ .oauth-list { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.3rem; } .oauth-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; background: #fff; border: 1.5px solid color-mix(in oklab, var(--dv-text) 15%, transparent); border-radius: 12px; padding: .8rem 1rem; font-family: inherit; font-size: .9rem; font-weight: 700; color: var(--dv-text); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; } .oauth-btn:hover { border-color: color-mix(in oklab, var(--dv-primary) 40%, transparent); background: color-mix(in oklab, var(--dv-primary) 4%, white); transform: translateY(-1px); } .oauth-btn svg { width: 20px; height: 20px; flex-shrink: 0; } .oauth-btn.microsoft { background: #2F2F2F; color: #fff; border-color: #2F2F2F; } .oauth-btn.microsoft:hover { background: #1F1F1F; border-color: #1F1F1F; color: #fff; } .oauth-sep { display: flex; align-items: center; gap: .8rem; margin: .5rem 0 1.3rem; color: color-mix(in oklab, var(--dv-text) 50%, transparent); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .oauth-sep::before, .oauth-sep::after { content: ''; flex: 1; height: 1px; background: color-mix(in oklab, var(--dv-text) 12%, transparent); } /* ── Steps (para recuperar.php y wizards) ── */ .auth-steps { display: flex; gap: .5rem; margin-bottom: 1.7rem; } .auth-step { flex: 1; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--dv-text) 8%, transparent); transition: background .2s; } .auth-step.on { background: var(--dv-gradient); } /* ── Wizard paso a paso (registro) ── */ .wiz-progress { display: flex; gap: .6rem; margin-bottom: 1.4rem; justify-content: space-between; } .wiz-progress-item { flex: 1; display: flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 800; color: color-mix(in oklab, var(--dv-text) 40%, transparent); text-transform: uppercase; letter-spacing: .06em; } .wiz-progress-item .num { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in oklab, var(--dv-text) 10%, transparent); color: color-mix(in oklab, var(--dv-text) 55%, transparent); display: grid; place-items: center; font-size: .78rem; font-weight: 900; flex-shrink: 0; transition: all .2s; } .wiz-progress-item.on { color: var(--dv-primary); } .wiz-progress-item.on .num { background: var(--dv-gradient); color: #fff; box-shadow: 0 6px 16px -4px color-mix(in oklab, var(--dv-primary) 55%, transparent); } .wiz-progress-item.done .num { background: color-mix(in oklab, var(--dv-primary) 15%, white); color: var(--dv-primary); } @media (max-width: 500px) { .wiz-progress-item .lbl { display: none; } .wiz-progress-item { justify-content: center; } } /* Panel del paso */ .wiz-step { display: none; animation: wiz-fade .25s ease; } .wiz-step.on { display: block; } @keyframes wiz-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .wiz-step-head { margin-bottom: 1.2rem; } .wiz-step-head h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--dv-text); letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; } .wiz-step-head h3 i { color: var(--dv-primary); font-size: .95rem; } .wiz-step-head p { font-size: .82rem; color: color-mix(in oklab, var(--dv-text) 60%, transparent); margin-top: .2rem; } /* Navegación del wizard */ .wiz-nav { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--dv-text) 10%, transparent); } .wiz-nav .grow { flex: 1; } .wiz-nav-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .85rem 1.4rem; border-radius: 12px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; border: none; cursor: pointer; transition: all .15s; } .wiz-nav-btn.back { background: transparent; color: color-mix(in oklab, var(--dv-text) 60%, transparent); border: 1.5px solid color-mix(in oklab, var(--dv-text) 15%, transparent); } .wiz-nav-btn.back:hover { color: var(--dv-primary); border-color: var(--dv-primary); } .wiz-nav-btn.next { background: var(--dv-gradient); color: #fff; box-shadow: 0 14px 32px -12px color-mix(in oklab, var(--dv-primary) 60%, transparent); } .wiz-nav-btn.next:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -12px color-mix(in oklab, var(--dv-primary) 65%, transparent); } .wiz-nav-btn[hidden] { display: none !important; } /* OAuth chip compacto */ .oauth-chip-row { display: flex; gap: .5rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .oauth-chip { flex: 1; min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: #fff; border: 1.5px solid color-mix(in oklab, var(--dv-text) 12%, transparent); border-radius: 12px; padding: .7rem .9rem; font-size: .82rem; font-weight: 700; color: var(--dv-text); text-decoration: none; transition: border-color .15s, background .15s, transform .12s; } .oauth-chip:hover { border-color: color-mix(in oklab, var(--dv-primary) 40%, transparent); background: color-mix(in oklab, var(--dv-primary) 4%, white); transform: translateY(-1px); } .oauth-chip svg { width: 18px; height: 18px; flex-shrink: 0; } .oauth-chip.microsoft { background: #2F2F2F; color: #fff; border-color: #2F2F2F; } .oauth-chip.microsoft:hover { background: #1F1F1F; color: #fff; } /* ── Wizard paso a paso (registro) ── */ .wiz-progress { display: flex; gap: .6rem; margin-bottom: 1.4rem; justify-content: space-between; } .wiz-progress-item { flex: 1; display: flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 800; color: color-mix(in oklab, var(--dv-text) 40%, transparent); text-transform: uppercase; letter-spacing: .06em; } .wiz-progress-item .num { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in oklab, var(--dv-text) 10%, transparent); color: color-mix(in oklab, var(--dv-text) 55%, transparent); display: grid; place-items: center; font-size: .78rem; font-weight: 900; flex-shrink: 0; transition: all .2s; } .wiz-progress-item.on { color: var(--dv-primary); } .wiz-progress-item.on .num { background: var(--dv-gradient); color: #fff; box-shadow: 0 6px 16px -4px color-mix(in oklab, var(--dv-primary) 55%, transparent); } .wiz-progress-item.done .num { background: color-mix(in oklab, var(--dv-primary) 15%, white); color: var(--dv-primary); } .wiz-progress-item.done .num::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; } .wiz-progress-item.done .num > span { display: none; } @media (max-width: 500px) { .wiz-progress-item .lbl { display: none; } .wiz-progress-item { justify-content: center; } } /* Panel del paso */ .wiz-step { display: none; animation: wiz-fade .25s ease; } .wiz-step.on { display: block; } @keyframes wiz-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .wiz-step-head { margin-bottom: 1.2rem; } .wiz-step-head h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--dv-text); letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; } .wiz-step-head h3 i { color: var(--dv-primary); font-size: .95rem; } .wiz-step-head p { font-size: .82rem; color: color-mix(in oklab, var(--dv-text) 60%, transparent); margin-top: .2rem; } /* Navegación del wizard */ .wiz-nav { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--dv-text) 10%, transparent); } .wiz-nav .grow { flex: 1; } .wiz-nav-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .85rem 1.4rem; border-radius: 12px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; border: none; cursor: pointer; transition: all .15s; } .wiz-nav-btn.back { background: transparent; color: color-mix(in oklab, var(--dv-text) 60%, transparent); border: 1.5px solid color-mix(in oklab, var(--dv-text) 15%, transparent); } .wiz-nav-btn.back:hover { color: var(--dv-primary); border-color: var(--dv-primary); } .wiz-nav-btn.next { background: var(--dv-gradient); color: #fff; box-shadow: 0 14px 32px -12px color-mix(in oklab, var(--dv-primary) 60%, transparent); } .wiz-nav-btn.next:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -12px color-mix(in oklab, var(--dv-primary) 65%, transparent); } /* Banner OAuth compacto (chip horizontal) */ .oauth-chip-row { display: flex; gap: .5rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .oauth-chip { flex: 1; min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: #fff; border: 1.5px solid color-mix(in oklab, var(--dv-text) 12%, transparent); border-radius: 12px; padding: .7rem .9rem; font-size: .82rem; font-weight: 700; color: var(--dv-text); text-decoration: none; transition: border-color .15s, background .15s, transform .12s; } .oauth-chip:hover { border-color: color-mix(in oklab, var(--dv-primary) 40%, transparent); background: color-mix(in oklab, var(--dv-primary) 4%, white); transform: translateY(-1px); } .oauth-chip svg { width: 18px; height: 18px; flex-shrink: 0; } .oauth-chip.microsoft { background: #2F2F2F; color: #fff; border-color: #2F2F2F; } .oauth-chip.microsoft:hover { background: #1F1F1F; color: #fff; } /* ── Responsive ── */ @media (max-width: 900px) { .auth-card, .auth-card.wide { grid-template-columns: 1fr; max-width: 500px; min-height: auto; } .auth-brand { padding: 2.5rem 1.5rem 2rem; } .brand-logo { width: 88px; height: 88px; margin-bottom: 1rem; border-radius: 22px; } .brand-logo img { width: 62px; height: 62px; } .brand-name { font-size: 1.6rem; } .brand-tag { margin-bottom: 1rem; font-size: .72rem; } .brand-motto, .brand-badges { display: none; } .auth-form { padding: 2rem 1.5rem 2.5rem; max-height: none; } .auth-title { font-size: 1.9rem; } }