/* ==========================================================================
   Acomer by Davadigital · acceso
   ========================================================================== */

:root {
    --auth-bg: #FFF1E3;
    --auth-stage: #FFE8D3;
    --auth-surface: #FFFDFC;
    --auth-ink: #211009;
    --auth-muted: #7A5B4B;
    --auth-coral: #FF4D1C;
    --auth-mango: #FFC23D;
    --auth-teal: #0B7A74;
    --auth-cobalt: #1D4ED8;
    --auth-line: #211009;
    --auth-font: 'Inter', system-ui, sans-serif;
    --auth-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body.auth-body {
    margin: 0;
    background: var(--auth-bg);
    color: var(--auth-ink);
    font-family: var(--auth-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.auth-shell { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 100dvh; }

/* ── Escenario animado ───────────────────────────────────────────────────── */

.auth-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 28px 32px 0;
    background: var(--auth-stage);
    color: var(--auth-ink);
}

.auth-stage::before {
    content: '';
    position: absolute;
    inset: -40%;
    z-index: -2;
    background: conic-gradient(from 0deg, transparent 0 12%, rgba(255, 194, 61, .42) 18%, transparent 30%, rgba(11, 122, 116, .24) 48%, transparent 62%, rgba(29, 78, 216, .18) 78%, transparent 90%);
    animation: auth-spin 26s linear infinite;
    opacity: .34;
}

.auth-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.auth-blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .38; }
.auth-blob.b1 { width: 340px; height: 340px; left: -90px; top: -80px; background: var(--auth-mango); opacity: .34; }
.auth-blob.b2 { width: 380px; height: 380px; right: -140px; bottom: -140px; background: var(--auth-teal); opacity: .18; }
.auth-blob.b3 { width: 260px; height: 260px; right: 16%; top: -100px; background: var(--auth-cobalt); opacity: .16; }

.auth-dish {
    position: absolute;
    width: 138px;
    line-height: 0;
    opacity: .92;
    filter: drop-shadow(0 16px 22px rgba(33, 16, 9, .2));
    animation: auth-dish-fly 24s ease-in-out infinite;
    transform-origin: center;
    pointer-events: none;
    user-select: none;
}
.auth-dish svg { display: block; width: 100%; height: auto; }

.auth-dish.d1 { left: 3%; top: 13%; --x1: 46px; --y1: -56px; --x2: -22px; --y2: 22px; --rot: -10deg; animation-duration: 21s; }
.auth-dish.d2 { right: 3%; top: 19%; width: 112px; --x1: -48px; --y1: 34px; --x2: 22px; --y2: -30px; --rot: 8deg; animation-duration: 26s; animation-delay: -6s; opacity: .86; }
.auth-dish.d3 { left: 4%; bottom: 25%; width: 126px; --x1: 38px; --y1: 44px; --x2: -24px; --y2: -28px; --rot: 6deg; animation-duration: 24s; animation-delay: -11s; opacity: .82; }
.auth-dish.d4 { right: 17%; top: 55%; width: 92px; --x1: -30px; --y1: -40px; --x2: 18px; --y2: 26px; --rot: -6deg; animation-duration: 28s; animation-delay: -3s; opacity: .68; filter: blur(1px) drop-shadow(0 16px 22px rgba(33, 16, 9, .2)); }
.auth-dish.d5 { right: 2%; bottom: 7%; width: 124px; --x1: 34px; --y1: -42px; --x2: -20px; --y2: 28px; --rot: 10deg; animation-duration: 23s; animation-delay: -14s; opacity: .88; }

.auth-ring {
    position: absolute;
    right: 12%;
    top: 22%;
    width: 176px;
    height: 176px;
    border: 2px dashed rgba(33, 16, 9, .3);
    border-radius: 50%;
    animation: auth-spin 20s linear infinite reverse;
}

.auth-stage-top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.auth-mark {
    width: 50px;
    height: 50px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 6px;
    border: 1.5px solid var(--auth-ink);
    border-radius: 50%;
    background: var(--auth-surface);
    box-shadow: 2px 2px 0 var(--auth-ink);
}
.auth-mark img { width: 100%; height: 100%; display: block; }
.auth-wordmark { display: flex; flex-direction: column; }
.auth-wordmark b { font-family: var(--auth-display); font-size: 26px; font-weight: 800; line-height: .85; letter-spacing: -.06em; }
.auth-wordmark b i { font-style: normal; color: var(--auth-coral); -webkit-text-stroke: 1px var(--auth-ink); }
.auth-wordmark small { margin-top: 5px; font-size: 8px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

.auth-home { padding: 7px 11px; border: 1.5px solid var(--auth-ink); border-radius: 99px; background: rgba(255, 253, 252, .58); font-size: 10px; font-weight: 700; text-decoration: none; transition: background .15s, transform .15s; }
.auth-home:hover { background: var(--auth-surface); transform: translateY(-1px); }

.auth-copy { position: relative; z-index: 2; max-width: 640px; margin-top: auto; padding: 48px 0 24px; }

.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1.5px solid var(--auth-ink);
    border-radius: 99px;
    background: var(--auth-mango);
    box-shadow: 2px 2px 0 var(--auth-ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.auth-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--auth-ink); }

.auth-copy h1 {
    margin: 18px 0 0;
    font-family: var(--auth-display);
    font-size: clamp(48px, 5.4vw, 78px);
    font-weight: 800;
    line-height: .86;
    letter-spacing: -.06em;
}
.auth-copy h1 em { font-style: normal; color: var(--auth-mango); -webkit-text-stroke: 1.5px var(--auth-ink); text-shadow: 4px 4px 0 var(--auth-ink); }

.auth-copy p { max-width: 47ch; margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; font-weight: 500; color: rgba(33, 16, 9, .76); }

.auth-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.auth-pills span { padding: 5px 9px; border: 1px solid var(--auth-ink); border-radius: 99px; background: rgba(255, 253, 252, .68); font-size: 9px; font-weight: 700; }

.auth-marquee {
    position: relative;
    z-index: 2;
    margin: 26px -32px 0;
    padding: 9px 0;
    overflow: hidden;
    background: var(--auth-ink);
    color: var(--auth-bg);
    transform: rotate(-1.2deg);
}
.auth-marquee-track { display: flex; width: max-content; gap: 26px; white-space: nowrap; animation: auth-marquee 24s linear infinite; font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.auth-marquee-track span::before { content: '✦'; margin-right: 12px; color: var(--auth-mango); }

/* ── Panel del formulario ────────────────────────────────────────────────── */

.auth-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
    background-color: var(--auth-bg);
    background-image: radial-gradient(rgba(33, 16, 9, .065) 1px, transparent 1px);
    background-size: 10px 10px;
}

.auth-panel-top { position: absolute; top: 24px; right: 30px; font-size: 10px; color: var(--auth-muted); }
.auth-panel-top a { color: var(--auth-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.auth-card {
    width: min(440px, 100%);
    padding: 28px;
    border: 1.5px solid var(--auth-line);
    border-radius: 22px;
    background: var(--auth-surface);
    box-shadow: 8px 8px 0 var(--auth-line);
    animation: auth-card-in .55s cubic-bezier(.2, .8, .2, 1) both;
}

.auth-head { margin-bottom: 18px; }
.auth-eyebrow { display: block; margin-bottom: 5px; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--auth-coral); }
.auth-head h2 { margin: 0; font-family: var(--auth-display); font-size: 30px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.auth-head p { margin: 7px 0 0; font-size: 11.5px; color: var(--auth-muted); }
.auth-head a { color: var(--auth-coral); font-weight: 700; text-decoration: none; }
.auth-head a:hover { text-decoration: underline; }

.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 14px; }
.auth-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1.5px solid var(--auth-line);
    border-radius: 10px;
    background: var(--auth-bg);
    color: var(--auth-ink);
    font: 700 11px var(--auth-font);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--auth-line);
    transition: transform .15s, box-shadow .15s;
}
.auth-social-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--auth-line); }
.auth-social-btn .social-glyph { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; background: var(--auth-ink); color: var(--auth-bg); font-size: 10px; font-weight: 800; }
.auth-social-btn.google .social-glyph { background: #fff; color: #4285F4; border: 1px solid #dadce0; }

.auth-divider { display: flex; align-items: center; gap: 9px; margin: 14px 0; color: var(--auth-muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(33, 16, 9, .18); }

.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field > span { font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.auth-input {
    width: 100%;
    padding: 10px 11px;
    border: 1.5px solid var(--auth-line);
    border-radius: 10px;
    background: #fff;
    color: var(--auth-ink);
    font: 500 12.5px var(--auth-font);
    outline: none;
    transition: box-shadow .15s, border-color .15s;
}
.auth-input::placeholder { color: #A88F7E; }
.auth-input:focus { border-color: var(--auth-coral); box-shadow: 3px 3px 0 rgba(255, 77, 28, .24); }
.auth-input.has-error { border-color: #B91C1C; }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 4px; font-size: 10.5px; }
.auth-check { display: inline-flex; align-items: center; gap: 6px; color: var(--auth-muted); cursor: pointer; }
.auth-check input { width: 14px; height: 14px; accent-color: var(--auth-coral); }
.auth-row a { color: var(--auth-coral); font-weight: 700; text-decoration: none; }
.auth-row a:hover { text-decoration: underline; }

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    padding: 11px 14px;
    border: 1.5px solid var(--auth-line);
    border-radius: 11px;
    background: var(--auth-coral);
    color: var(--auth-ink);
    font: 800 12.5px var(--auth-font);
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--auth-line);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.auth-submit:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--auth-line); filter: brightness(1.02); }
.auth-submit:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--auth-line); }
.auth-submit svg { width: 15px; height: 15px; }

.auth-error { padding: 8px 10px; border: 1.5px solid #B91C1C; border-radius: 9px; background: #FBE5E5; color: #991B1B; font-size: 10.5px; font-weight: 600; }
.auth-status { padding: 8px 10px; border: 1.5px solid var(--auth-teal); border-radius: 9px; background: #DDF5F1; color: #0B5F5A; font-size: 10.5px; font-weight: 600; }

.auth-form .form-group { display: flex; flex-direction: column; gap: 4px; }
.auth-form .status-not-available { font-size: 9.5px; color: #B91C1C; font-weight: 600; }
.auth-form .status-available { display: block; padding: 7px 9px; border: 1px solid rgba(33, 16, 9, .2); border-radius: 8px; background: var(--auth-bg); font-size: 10.5px; }
.auth-form .checkbox { display: flex; align-items: flex-start; gap: 7px; margin: 2px 0 4px; font-size: 9.5px; line-height: 1.45; color: var(--auth-muted); }
.auth-form .checkbox input { margin-top: 2px; accent-color: var(--auth-coral); }
.auth-form .checkbox a { color: var(--auth-coral); font-weight: 700; }

.auth-captcha { margin: 2px 0; overflow: hidden; border-radius: 8px; }
.auth-loader { display: none; }

.auth-alt { margin-top: 14px; padding-top: 13px; border-top: 1px dashed rgba(33, 16, 9, .22); font-size: 10.5px; color: var(--auth-muted); text-align: center; }
.auth-alt a { color: var(--auth-coral); font-weight: 700; text-decoration: none; }

.auth-demo { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 10px; }
.auth-demo th, .auth-demo td { padding: 5px 7px; border: 1px solid rgba(33, 16, 9, .18); text-align: left; }
.auth-demo th { background: var(--auth-bg); font-weight: 700; }

.auth-foot { margin-top: 18px; font-size: 9px; color: var(--auth-muted); text-align: center; }
.auth-foot a { color: var(--auth-ink); font-weight: 700; }

/* ── Animaciones ─────────────────────────────────────────────────────────── */

@keyframes auth-spin { to { transform: rotate(360deg); } }
@keyframes auth-dish-fly {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
    33% { transform: translate3d(var(--x1, 0), var(--y1, -24px), 0) rotate(calc(var(--rot, 0deg) + 6deg)); }
    66% { transform: translate3d(var(--x2, 0), var(--y2, 12px), 0) rotate(calc(var(--rot, 0deg) - 5deg)); }
}
@keyframes auth-marquee { to { transform: translateX(-50%); } }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(18px) rotate(-.5deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .auth-card { opacity: 1; transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-stage { min-height: 318px; padding: 20px 20px 0; }
    .auth-stage-top { align-items: center; }
    .auth-mark { width: 36px; height: 36px; }
    .auth-wordmark b { font-size: 22px; }
    .auth-copy { margin-top: 26px; padding: 18px 0 16px; }
    .auth-copy h1 { font-size: clamp(40px, 9vw, 58px); }
    .auth-copy p { max-width: 38ch; font-size: 11.5px; }
    .auth-pills { display: none; }
    .auth-dish { width: 82px; opacity: .78; }
    .auth-dish.d1 { left: 1%; top: 12%; }
    .auth-dish.d2 { right: 1%; top: 22%; width: 68px; }
    .auth-dish.d3 { left: 2%; bottom: 22%; width: 72px; }
    .auth-dish.d4 { display: none; }
    .auth-dish.d5 { right: 1%; bottom: 4%; width: 70px; }
    .auth-ring { width: 100px; height: 100px; right: 9%; top: 18%; }
    .auth-marquee { margin: 12px -20px 0; }
    .auth-panel { padding: 0 16px 30px; justify-content: flex-start; }
    .auth-card { margin-top: -34px; position: relative; z-index: 3; padding: 22px; box-shadow: 5px 5px 0 var(--auth-line); }
    .auth-panel-top { display: none; }
    .auth-foot { margin-top: 20px; }
}

@media (max-width: 420px) {
    .auth-social { grid-template-columns: 1fr; }
    .auth-copy h1 { font-size: 38px; }
    .auth-home { display: none; }
}