/* Acceso a Mercasist (acceso.php): ingreso de titulares y operadores, registro con correo y codigo
   de verificacion. Parte del diseño de la propuesta 1 (_tests/login_propuestas/propuesta-1.html). */
:root
{
    --paper: #f7f7f2;
    --ink: #26313b;
    --muted: #5e6871;
    --line: #dce1e5;
    --field: #c6cdd3;
    --accent: #1f618d;
    --accent-soft: #e4edf3;
    --navy: #34495e;
    --navy-deep: #263b4e;
    --tab-off: #eef1f4;
    --danger: #b42318;
    --danger-soft: #fdf1f0;
    --sans: 'DM Sans', Arial, sans-serif;
    --serif: 'DM Serif Display', Georgia, serif;
}
*, *::before, *::after
{
    box-sizing: border-box;
}
body
{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font: 1rem/1.5 var(--sans);
    -webkit-font-smoothing: antialiased;
}
a
{
    color: inherit;
    text-decoration: none;
}
button, input, select
{
    font: inherit;
}
button, select
{
    cursor: pointer;
}
button
{
    color: inherit;
}
button, a, input, select
{
    -webkit-tap-highlight-color: transparent;
}
:focus-visible
{
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}
[hidden]
{
    display: none !important;
}
img
{
    display: block;
    max-width: 100%;
    height: auto;
}
svg
{
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.symbols, .sr-only
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip
{
    position: absolute;
    z-index: 30;
    top: -100px;
    left: 16px;
    padding: 12px 18px;
    background: white;
}
.skip:focus
{
    top: 12px;
}

/* Modo de la pestaña (titular u operador): cada uno muestra solo sus textos. */
body[data-modo="principal"] .solo-operador, body[data-modo="operador"] .solo-principal
{
    display: none !important;
}

/* Cada vista (ingreso, registro, codigo) muestra solo sus elementos. La vista inicial la fija el
   servidor en el body, asi no hay parpadeo antes de que cargue el JavaScript. */
body[data-vista="ingreso"] [data-solo]:not([data-solo~="ingreso"]),
body[data-vista="registro"] [data-solo]:not([data-solo~="registro"]),
body[data-vista="codigo"] [data-solo]:not([data-solo~="codigo"])
{
    display: none !important;
}

.shell
{
    width: min(1280px, calc(100% - 96px));
    margin-inline: auto;
}
.header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 18px;
}
.brand
{
    width: 156px;
    flex-shrink: 0;
}
.back
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--muted);
    font-size: .9375rem;
}
.back svg
{
    width: 20px;
    height: 20px;
}
.back:hover, .footer a:hover
{
    color: var(--accent);
}
.main
{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: min(1080px, calc(100% - 96px));
    margin-inline: auto;
    padding-block: 8px 28px;
}
.notice
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0 0 20px;
    padding: 10px 16px;
    color: var(--ink);
    background: var(--accent-soft);
    border-radius: 8px;
    font-size: .9375rem;
}
.notice a
{
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.intro
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px 40px;
    margin-bottom: 24px;
}
.eyebrow
{
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    color: var(--accent);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.eyebrow .dot
{
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}
h1
{
    margin: 0;
    font-size: clamp(2.125rem, 1.45rem + 2.2vw, 3.25rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.045em;
}
h1 em
{
    color: var(--accent);
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.02em;
    white-space: nowrap;
}
/* Los textos de los dos modos ocupan la misma celda: cambiar de pestaña no mueve la tarjeta. */
.intro-aside
{
    display: grid;
}
.intro-aside > p
{
    grid-area: 1 / 1;
}
body[data-vista="ingreso"][data-modo="principal"] .intro-aside > .solo-operador,
body[data-vista="ingreso"][data-modo="operador"] .intro-aside > .solo-principal
{
    display: flex !important;
    visibility: hidden;
}
.intro-aside p
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    color: var(--muted);
    font-size: .9375rem;
}
.intro-aside strong
{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-weight: 550;
}
.text-button
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    color: var(--accent);
    background: none;
    border: 0;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.text-button:hover
{
    color: var(--ink);
}
.text-button:disabled
{
    color: var(--muted);
    cursor: default;
    text-decoration: none;
}
.text-button svg
{
    width: 18px;
    height: 18px;
}

/* Tarjeta con pestañas: la pestaña activa se abre hacia el cuerpo de la tarjeta. En el registro y
   en el codigo no hay pestañas (son solo del titular) y el filo azul lo pone la tarjeta. La tarjeta
   no recorta su contenido, para que la lista de paises de Mercado Libre pueda salirse de ella; las
   esquinas redondeadas de arriba las conservan las pestañas. */
.card
{
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 36px #26313b0a;
}
body[data-vista="registro"] .card, body[data-vista="codigo"] .card
{
    box-shadow: inset 0 3px 0 var(--accent), 0 10px 36px #26313b0a;
}
.tabs
{
    display: grid;
    overflow: hidden;
    border-radius: 9px 9px 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tab
{
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px 28px;
    color: var(--muted);
    background: var(--tab-off);
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    transition: background-color .2s ease, color .2s ease;
}
.tab + .tab
{
    border-left: 1px solid var(--line);
}
.tab:hover
{
    color: var(--ink);
    background: #e6ebef;
}
.tab[aria-selected="true"]
{
    color: var(--ink);
    background: white;
    border-bottom-color: transparent;
    box-shadow: inset 0 3px 0 var(--accent);
}
.tab:focus-visible
{
    outline-offset: -5px;
}
.tab-icon
{
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    color: var(--muted);
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tab[aria-selected="true"] .tab-icon
{
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}
.tab-text
{
    min-width: 0;
}
.tab strong
{
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}
.tab small
{
    display: block;
    margin-top: 2px;
    font-size: .875rem;
    line-height: 1.4;
}
.panels
{
    display: grid;
}
.panel
{
    grid-area: 1 / 1;
    min-width: 0;
    padding: 28px 40px 34px;
}
/* Los dos paneles del ingreso reservan su alto: al cambiar de pestaña la tarjeta no salta. */
.panels > .panel[hidden]
{
    display: block !important;
    visibility: hidden;
    pointer-events: none;
}
.panel:not([hidden])
{
    animation: panel-in .25s ease both;
}
@keyframes panel-in
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}
.panel-lead
{
    margin: 0 0 22px;
    color: var(--muted);
}
.split
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
}
body[data-vista="codigo"] .split
{
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin-inline: auto;
}
.or
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: .875rem;
}
.or::before, .or::after
{
    content: '';
    flex: 1;
    width: 1px;
    background: var(--line);
}
.rule
{
    justify-self: center;
    width: 1px;
    background: var(--line);
}
.field
{
    margin-bottom: 16px;
}
.field label
{
    display: block;
    margin-bottom: 8px;
    font-weight: 550;
}
.label-row
{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.label-row .text-button
{
    min-height: 0;
    padding: 5px 0;
    margin: -5px 0 3px;
    font-size: .875rem;
    font-weight: 450;
}
.field input, .field select
{
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 11px 14px;
    color: var(--ink);
    background: #fcfcfa;
    border: 1px solid var(--field);
    border-radius: 4px;
    font-size: 1rem;
}
.field select
{
    padding-right: 40px;
    background: #fcfcfa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6871' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
    appearance: none;
}
.field input::placeholder
{
    color: #6c747c;
    opacity: 1;
}
.field input:focus, .field select:focus
{
    background-color: white;
    border-color: var(--accent);
}
.field [aria-invalid="true"]
{
    border-color: var(--danger);
}
.field-help, .field-error
{
    display: block;
    margin-top: 6px;
    font-size: .875rem;
    line-height: 1.45;
}
.field-help
{
    color: var(--muted);
}
.field-error
{
    color: var(--danger);
    font-weight: 500;
}
.field-error:empty
{
    display: none;
}
.codigo-operador:not(:placeholder-shown)
{
    font-variant-numeric: tabular-nums;
    letter-spacing: .18em;
}
.codigo-verificacion
{
    font-variant-numeric: tabular-nums;
    letter-spacing: .32em;
}
.field .codigo-verificacion
{
    height: 58px;
    font-size: 1.5rem;
    text-align: center;
}
.password
{
    position: relative;
}
.password input
{
    padding-right: 52px;
}
.password button
{
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 3px;
}
.password button[aria-pressed="true"]
{
    color: var(--accent);
    background: var(--accent-soft);
}
.form-error
{
    margin: 0 0 14px;
    padding: 11px 14px;
    color: var(--danger);
    background: var(--danger-soft);
    border-left: 3px solid var(--danger);
    border-radius: 4px;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.45;
}
.form-error:empty
{
    display: none;
}
.form-note
{
    margin: 0 0 14px;
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.5;
}
.form-note a
{
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.test-note
{
    margin: 0 0 18px;
    padding: 10px 14px;
    color: #6a4b00;
    background: #fff7dc;
    border: 1px solid #f0dd9c;
    border-radius: 6px;
    font-size: .875rem;
    line-height: 1.45;
}
/* Turnstile en modo interaction-only: el contenedor queda vacio salvo que Cloudflare pida un clic. */
.turnstile
{
    display: flex;
    justify-content: center;
}
.turnstile:has(iframe)
{
    margin: 2px 0 14px;
}
.button
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: 550;
    line-height: 1.4;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.button svg
{
    width: 20px;
    height: 20px;
}
.primary
{
    margin-top: 6px;
    color: white;
    background: var(--navy);
}
.primary:hover
{
    background: var(--navy-deep);
}
.primary:disabled
{
    cursor: progress;
    opacity: .72;
}
.social
{
    display: grid;
    align-content: center;
    gap: 10px;
}
.social-label
{
    margin: 0 0 2px;
    color: var(--muted);
}
.social .button
{
    justify-content: flex-start;
}
.social .chev
{
    width: 18px;
    height: 18px;
    margin-left: auto;
    opacity: .7;
}
/* Boton de Mercado Libre con el pais dentro: todo el boton entra, menos la pastilla de la derecha,
   que abre la lista de paises. Son dos controles hermanos en el mismo marco (un boton no puede ir
   dentro de un enlace); el marco entero se ilumina al pasar por la parte que entra. */
.meli-boton
{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    background: #fff3a6;
    border: 1px solid #ecd973;
    border-radius: 4px;
    transition: background-color .15s ease;
}
.meli-boton:has(.meli-ir:hover)
{
    background: #ffe978;
}
.meli-ir
{
    display: flex;
    flex: 1;
    align-items: center;
    align-self: stretch;
    gap: 12px;
    min-width: 0;
    padding: 12px 6px 12px 16px;
    color: var(--ink);
    border-radius: 3px;
    font-weight: 550;
    line-height: 1.4;
}
.meli-ir img
{
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.meli-ir:focus-visible
{
    outline-offset: -3px;
}
/* Bandera redonda (flag-icons 1x1, en assets/banderas). */
.bandera
{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #26313b1f;
}
/* El codigo va junto a la bandera porque en tamaño chico las de Venezuela, Colombia y Ecuador casi
   no se distinguen. */
.meli-pais
{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    margin-right: 7px;
    padding: 5px 7px 5px 5px;
    color: #6b5a12;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .04em;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.meli-pais:hover, .meli-pais[aria-expanded="true"]
{
    background: #ffffffa6;
    box-shadow: inset 0 0 0 1px #e3ce66;
}
.meli-pais:focus-visible
{
    outline-offset: 1px;
}
.meli-pais .flecha
{
    width: 13px;
    height: 13px;
    stroke-width: 2.2;
    opacity: .75;
    transition: transform .15s ease;
}
.meli-pais[aria-expanded="true"] .flecha
{
    transform: rotate(180deg);
}
/* Lista de paises: tarjeta pequeña bajo la pastilla, o sobre ella si abajo no cabe (acceso.js).
   Solo se anima la opacidad (ver la nota de dropdowns del CLAUDE.md). */
.meli-lista
{
    position: absolute;
    z-index: 25;
    top: calc(100% + 8px);
    right: 0;
    width: 248px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 18px 42px #1422302b, 0 2px 6px #1422300f;
    animation: lista-aparece .14s ease both;
}
.meli-lista.arriba
{
    top: auto;
    bottom: calc(100% + 8px);
}
@keyframes lista-aparece
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}
.meli-lista-titulo
{
    margin: 6px 10px;
    color: var(--muted);
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.meli-opciones
{
    position: relative;
    max-height: 500px;
    overflow-y: auto;
}
.meli-opcion
{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 10px;
    color: var(--ink);
    border-radius: 7px;
    font-size: .9375rem;
    cursor: pointer;
}
.meli-opcion:hover, .meli-opcion:focus
{
    background: #f3f6f8;
    outline: none;
}
.meli-opcion:focus-visible
{
    box-shadow: inset 0 0 0 2px var(--accent);
}
.meli-opcion[aria-selected="true"]
{
    background: #fff8cc;
    font-weight: 600;
}
.meli-opcion .marca
{
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #8a7414;
    stroke-width: 2.2;
    visibility: hidden;
}
.meli-opcion[aria-selected="true"] .marca
{
    visibility: visible;
}
.google
{
    background: white;
    border-color: var(--field);
}
.google:hover
{
    background: #f3f5f7;
}
.facebook
{
    color: white;
    background: #1764c0;
}
.facebook:hover
{
    background: #1254a4;
}
.brand-icon
{
    width: 24px;
    height: 24px;
    stroke: none;
}
.social-note
{
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.5;
}
.help
{
    align-self: center;
    padding: 22px 24px;
    background: #f6f8f9;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.help-title
{
    margin: 0 0 16px;
    color: var(--accent);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.help ul
{
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.help li
{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.5;
}
.help strong
{
    display: block;
    color: var(--ink);
    font-weight: 600;
}
.help-icon
{
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--accent);
    background: white;
    border: 1px solid var(--line);
    border-radius: 50%;
}
.help-icon svg
{
    width: 17px;
    height: 17px;
}
.code-intro
{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 22px;
    color: var(--muted);
}
.code-intro p
{
    margin: 0;
}
.code-intro strong
{
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.code-icon
{
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 8px;
}
.code-actions
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 16px;
    margin-top: 10px;
}
.code-actions .text-button
{
    font-size: .9375rem;
    font-weight: 500;
}
.toast
{
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: 24px;
    width: max-content;
    max-width: min(460px, calc(100% - 32px));
    padding: 12px 16px;
    color: #f5f5ec;
    background: var(--ink);
    border-radius: 8px;
    box-shadow: 0 12px 32px #14223033;
    font-size: .9375rem;
    line-height: 1.5;
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.toast.visible
{
    opacity: 1;
    transform: translate(-50%, 0);
}
.footer
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .875rem;
}
.footer nav
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}
.footer a
{
    display: inline-flex;
    align-items: center;
    min-height: 36px;
}
@media (max-width: 1100px)
{
    .shell, .main
    {
        width: calc(100% - 64px);
    }
    .panel
    {
        padding: 26px 28px 30px;
    }
    .split
    {
        grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    }
}
@media (max-width: 759px)
{
    .main
    {
        justify-content: flex-start;
        padding-block: 4px 28px;
    }
    .intro
    {
        display: block;
        margin-bottom: 20px;
    }
    .intro-aside
    {
        margin-top: 8px;
    }
    .intro-aside p
    {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 8px;
    }
    .panels > .panel[hidden]
    {
        display: none !important;
    }
    .split
    {
        grid-template-columns: minmax(0, 1fr);
    }
    .or
    {
        flex-direction: row;
        margin: 18px 0 14px;
    }
    .or::before, .or::after
    {
        width: auto;
        height: 1px;
    }
    .rule
    {
        display: none;
    }
    .help
    {
        margin-top: 22px;
    }
    /* Mercado Libre ocupa todo el ancho, para que quepa la pastilla del pais; Google y Facebook van
       debajo, uno al lado del otro. */
    .social
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .social-label, .meli-boton, .social-note
    {
        grid-column: 1 / -1;
    }
    .social-label, .social-note
    {
        text-align: center;
    }
    .social .button
    {
        justify-content: center;
        gap: 10px;
        padding: 12px 8px;
    }
    .social .chev
    {
        display: none;
    }
}
@media (max-width: 540px)
{
    .shell, .main
    {
        width: calc(100% - 32px);
    }
    .brand
    {
        width: 128px;
    }
    .back
    {
        gap: 6px;
        font-size: .875rem;
    }
    .back svg
    {
        width: 16px;
    }
    .tab
    {
        justify-content: center;
        padding: 14px 10px;
        text-align: center;
    }
    .tab-icon
    {
        display: none;
    }
    .panel
    {
        padding: 22px 16px 24px;
    }
    .social
    {
        gap: 8px;
    }
    .social .button
    {
        padding-inline: 3px;
    }
    .footer
    {
        flex-direction: column;
        gap: 6px;
        padding-block: 18px;
    }
    .footer nav
    {
        justify-content: center;
        gap: 4px 18px;
    }
}
@media (max-width: 374px)
{
    .tab small
    {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce)
{
    *, *::before, *::after
    {
        animation: none !important;
        transition: none !important;
    }
}