/* assets/css/auth-v6.css — acceso de compradores y vendedores en ESCRITORIO (≥1024px):
   barra con logo + idioma, tarjeta ilustrada con beneficios a la izquierda, columna estrecha con el
   formulario "primero el correo" (assets/js/auth-v6.js) a la derecha y pie con enlaces.
   Por debajo de 1024px solo se ocultan los bloques nuevos: móvil y tablet quedan exactamente igual. */

.ikd-top, .ikd-hero, .ikd-foot, .ikd-role, .ikd-who, .ikd-continue, .ikd-estep, .ikd-only, .ikd-err { display: none; }

@media (min-width: 1024px) {
    body.ika-v6 {
        --d-ink: #1f2329; --d-ink-2: #4b5260; --d-muted: #767c87; --d-line: #d9dce1; --d-line-2: #eceef1;
        --d-acc: #9f652f; --d-acc-h: #8a5526;
        display: grid; min-height: 100vh; background: #fff; color: var(--d-ink);
        grid-template-columns: minmax(32px, 1fr) minmax(0, 740px) minmax(48px, 184px) minmax(340px, 372px) minmax(32px, 1fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas: "top top top top top" ". hero . form ." "foot foot foot foot foot";
    }
    body.ika-v6.ikd-wide { grid-template-columns: minmax(32px, 1fr) minmax(0, 620px) minmax(40px, 120px) minmax(440px, 500px) minmax(32px, 1fr); }
    .ika-v6 .ika-aside, .ika-v6 .ika-top, .ika-v6 .ika-touch-only { display: none; }

    /* barra superior */
    .ikd-top { grid-area: top; display: flex; align-items: center; gap: 22px; padding: 14px 40px; }
    .ikd-logo img { height: 34px; width: auto; display: block; }
    .ikd-top .ik-lang { height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--d-line); background: #fff; color: var(--d-ink); font-size: 14px; font-weight: 500; box-shadow: none; }
    .ikd-top .ik-lang:hover { border-color: #b9bec6; }
    .ikd-back { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--d-ink-2); text-decoration: none; padding: 8px 12px; border-radius: 8px; }
    .ikd-back:hover { background: #f4f5f7; color: var(--d-ink); }
    .ikd-back .material-symbols-outlined { font-size: 18px; }

    /* tarjeta ilustrada */
    .ikd-hero { grid-area: hero; display: block; position: sticky; top: 24px; align-self: start; margin-top: 26px; width: 100%;
        height: clamp(520px, calc(100vh - 150px), 740px); max-height: 100%; aspect-ratio: auto; border-radius: 24px; overflow: hidden; background: #efe2cf; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
    .ikd-wide .ikd-hero { height: clamp(520px, calc(100vh - 150px), 680px); }
    .ikd-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    .ikd-bub { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 12px; background: rgba(255,255,255,.9);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #3a2614; font: 700 clamp(15px, 1.25vw, 20px)/1.2 Manrope, Inter, sans-serif; letter-spacing: -.01em;
        box-shadow: 0 10px 30px rgba(42,30,14,.18); white-space: nowrap; animation: ikdBub .7s cubic-bezier(.2,.8,.2,1) both; }
    .ikd-bub::before { content: ''; width: 3px; align-self: stretch; border-radius: 2px; background: #CD9765; }
    .ikd-bub::after { content: ''; position: absolute; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); }
    .ikd-bub.b1 { right: 6%; top: 50%; animation-delay: .15s; } .ikd-bub.b1::after { left: 28px; bottom: -6px; }
    .ikd-bub.b2 { left: 8%; top: 59%; animation-delay: .3s; } .ikd-bub.b2::after { right: -6px; top: calc(50% - 7px); }
    .ikd-bub.b3 { left: 38%; top: 72%; animation-delay: .45s; } .ikd-bub.b3::after { left: 46px; top: -6px; }
    @keyframes ikdBub { from { opacity: 0; transform: translateY(10px) scale(.96); } }
    .ikd-note { position: absolute; left: 30px; right: 30px; bottom: 22px; margin: 0; color: rgba(255,255,255,.92); font-size: 13px; line-height: 1.45; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
    .ikd-note a { color: #fff; font-weight: 700; }
    .ikd-plan:empty { display: none; }
    .ikd-plan { position: absolute; left: 28px; top: 28px; width: min(330px, calc(100% - 56px)); padding: 16px 18px; border-radius: 16px; background: rgba(29,37,48,.88);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
    .ikd-plan .top { display: flex; justify-content: space-between; align-items: baseline; }
    .ikd-plan .top span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); font-weight: 700; }
    .ikd-plan .top b { font: 800 22px Manrope, sans-serif; } .ikd-plan .top b small { font-size: 12px; color: rgba(255,255,255,.6); }
    .ikd-plan h3 { font-size: 16px; margin: 4px 0 8px; }
    .ikd-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; color: rgba(255,255,255,.82); }
    .ikd-plan li { display: flex; gap: 6px; align-items: center; } .ikd-plan li:nth-child(n+5) { display: none; }
    .ikd-plan li .material-symbols-outlined { color: #86efac; font-size: 16px; }

    /* columna del formulario */
    .ika-v6 .ika-main { grid-area: form; min-height: 0; padding: 0; background: none; }
    .ika-v6 .ika-wrap { display: block; padding: 44px 0 40px; }
    .ika-v6 .ika-card, .ika-v6 .ika-card.is-wide { max-width: none !important; width: 100%; }
    .ikd-role { display: flex; gap: 4px; padding: 4px; margin: 0 0 26px; border-radius: 999px; background: #f3f4f6; }
    .ikd-role a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--d-ink-2); text-decoration: none; transition: background .2s, color .2s, box-shadow .2s; }
    .ikd-role a .material-symbols-outlined { font-size: 18px; }
    .ikd-role a:hover { color: var(--d-ink); }
    .ikd-role a.is-on { background: #fff; color: var(--d-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
    .ika-v6 .ika-head { margin-bottom: 22px; }
    .ika-v6 .ika-head .ico { display: none; }
    .ika-v6 .ika-head h1 { font: 800 24px/1.25 Manrope, Inter, sans-serif; color: var(--d-ink); letter-spacing: -.015em; }
    .ika-v6 .ika-head p { font-size: 14px; color: var(--d-ink-2); margin-top: 8px; }
    .ika-v6 .ika-head p a, .ika-v6 .ika-label a, .ika-v6 .ika-alt a, .ika-v6 .ika-check a { color: var(--d-acc); }
    .ika-v6 .ika-context { margin: -6px 0 18px; border-radius: 10px; border-color: var(--d-line-2); background: #fafafa; font-size: 13px; }
    .ika-v6 .ika-alert { border-radius: 10px; }

    /* Google / Facebook: botones con borde, ancho completo, icono a la izquierda */
    .ika-v6 .ika-oauth { gap: 14px; }
    .ika-v6 .ika-oauth-btn, .ika-v6 .ika-oauth-btn--facebook { position: relative; height: 48px; border-radius: 6px; border: 1px solid #1f2329; background: #fff; color: var(--d-ink); font-size: 14px; font-weight: 700; box-shadow: none; transform: none; }
    .ika-v6 .ika-oauth-btn svg { position: absolute; left: 14px; top: calc(50% - 10px); }
    .ika-v6 .ika-oauth-btn--facebook svg path:first-child { fill: #1877F2; } .ika-v6 .ika-oauth-btn--facebook svg path:last-child { fill: #fff; }
    .ika-v6 .ika-oauth-btn:hover { background: #f7f7f8; border-color: #1f2329; box-shadow: none; transform: none; }
    .ika-v6 .ika-sep { color: var(--d-muted); font-weight: 500; font-size: 13px; }
    .ika-v6 .ika-sep::before, .ika-v6 .ika-sep::after { background: var(--d-line-2); }
    .ika-v6 .ika-sep--oauth { margin: 22px 0 18px; }

    /* campos */
    .ika-v6 .ika-label { color: var(--d-ink); font-weight: 600; }
    .ika-v6 .ika-input input, .ika-v6 .ika-input select, .ika-v6 .ika-input .ik-select-trigger { height: 50px; border-radius: 6px; border: 1px solid var(--d-line); font-size: 15px; }
    .ika-v6 .ika-input input:hover, .ika-v6 .ika-input select:hover { border-color: #b9bec6; }
    .ika-v6 .ika-input input:focus, .ika-v6 .ika-input select:focus { border-color: var(--d-ink); box-shadow: 0 0 0 3px rgba(31,35,41,.08); }
    .ika-v6 .ika-input input::placeholder { color: #9aa0a9; }
    .ika-v6 .ika-input > .material-symbols-outlined { color: #9aa0a9; }
    .ika-v6 .ika-input:focus-within > .material-symbols-outlined { color: var(--d-ink); }
    .ika-v6 .ikd-err:not([hidden]) { display: block; color: var(--err); font-weight: 600; }
    .ika-v6 .ika-kind label > span, .ika-v6 .ika-seg label > span, .ika-v6 .ika-plan { border-radius: 10px; border-width: 1px; }
    .ika-v6 .ika-check input { accent-color: var(--d-acc); }

    /* botón principal en píldora (Continuar / Iniciar sesión / Crear mi cuenta) */
    .ika-v6 .ika-btn { border-radius: 999px; height: 50px; }
    .ika-v6 .ika-btn-primary { background: var(--d-acc); box-shadow: none; font-size: 16px; font-weight: 700; }
    .ika-v6 .ika-btn-primary:hover { background: var(--d-acc-h); box-shadow: 0 8px 20px rgba(159,101,47,.25); }
    .ika-v6 .ika-btn-ghost { border: 1px solid var(--d-line); color: var(--d-ink); }
    .ika-v6 .ika-btn-ghost:hover { border-color: var(--d-ink); background: #fff; }
    .ika-v6 .ika-nav .ika-btn-ghost { width: 50px; }
    .ika-v6 .ika-seller-link { border-top-color: var(--d-line-2); }
    .ika-v6 .ika-seller-link a { color: var(--d-ink); }
    .ika-v6 .ika-seller-link a:hover { color: var(--d-acc); }
    .ika-v6 .ikd-only { display: flex; }
    .ika-v6 .ika-demo { border-radius: 10px; border-width: 1px; }

    /* flujo "primero el correo" (solo con JavaScript: sin él todos los campos siguen visibles) */
    .ikd-js .ikd-continue { display: flex; width: 100%; margin-top: 4px; }
    .ikd-js.ikd-s1 [data-ikd-s2], .ikd-js.ikd-s2 [data-ikd-s1] { display: none !important; }
    .ikd-js.ikd-s2 .ikd-who { display: flex; }
    .ikd-who { align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; background: #f6f7f8; font-size: 14px; animation: fadeUp .35s var(--ease) both; }
    .ikd-who .material-symbols-outlined { color: var(--d-muted); font-size: 24px; }
    .ikd-who .ikd-who-v { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-weight: 600; color: var(--d-ink); text-overflow: ellipsis; cursor: default; }
    .ikd-who button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--d-acc); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
    .ikd-who button:hover { background: #ececee; }
    .ikd-js.ikd-s2 form[data-ikd-flow] > :not([type=hidden]) { animation: fadeUp .4s var(--ease) both; }
    /* registro de comprador: el correo va primero en ambos pasos */
    .ika-v6 form[data-ikd-flow="register"] { display: flex; flex-direction: column; }
    .ika-v6 form[data-ikd-flow="register"] > .ikd-email { order: -1; }
    .ika-v6 form[data-ikd-flow="register"] > .ikd-continue { order: -1; }
    .ika-v6 form[data-ikd-flow="register"] .ika-kind + div, .ika-v6 form[data-ikd-flow="register"] > .ika-btn-primary[type=submit] { width: 100%; }
    /* registro de vendedor: paso de correo antes del asistente */
    .ikd-js .ikd-estep { display: block; }
    .ikd-plan-note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: #f6f7f8; font-size: 13px; color: var(--d-ink-2); }
    .ikd-plan-note .material-symbols-outlined { color: var(--d-acc); font-size: 20px; }
    .ikd-plan-note b { color: var(--d-ink); }
    .ikd-plan-note small { flex-basis: 100%; font-size: 12px; color: var(--d-muted); padding-left: 28px; }
    .ikd-wide .ika-plans { grid-template-columns: 1fr; gap: 10px; }
    .ikd-wide .ika-plan { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 14px 48px 14px 16px; }
    .ikd-wide .ika-plan .nm { grid-column: 1; } .ikd-wide .ika-plan .pr { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 22px; }
    .ikd-wide .ika-plan .ds { grid-column: 1; } .ikd-wide .ika-plan ul { display: none; }
    .ikd-wide .ika-plan .check { top: calc(50% - 11px); }
    .ikd-wide .ika-seg span small { font-size: 11px; }
    .ikd-wide .ika-steps { margin-bottom: 22px; }

    /* pie */
    .ikd-foot { grid-area: foot; display: block; padding: 22px 32px 28px; text-align: center; font-size: 13px; color: var(--d-ink-2); }
    .ikd-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin-bottom: 10px; }
    .ikd-links a { color: var(--d-ink-2); text-decoration: none; padding: 0 10px; border-left: 1px solid #c9cdd3; line-height: 1.1; }
    .ikd-links a:first-child { border-left: 0; }
    .ikd-links a:hover { color: var(--d-ink); text-decoration: underline; }
    .ikd-links--legal a { border-left: 0; position: relative; }
    .ikd-links--legal a + a::before { content: '·'; position: absolute; left: -3px; color: #9aa0a9; }
    .ikd-foot p { margin: 4px 0 0; color: var(--d-muted); font-size: 12.5px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    body.ika-v6 { grid-template-columns: 32px minmax(0, 1fr) 56px 360px 32px; }
    body.ika-v6.ikd-wide { grid-template-columns: 32px minmax(0, 1fr) 40px 440px 32px; }
    .ikd-links--legal a { padding: 0 7px; font-size: 12.5px; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
    .ikd-bub { font-size: 14px; padding: 10px 14px 10px 12px; }
    .ikd-bub.b1 { right: 4%; } .ikd-bub.b3 { left: 30%; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .ikd-bub, .ikd-who { animation: none; } }