/* ==========================================================================
   PrivateShop · Capa de diseño TEK-MOD — v2.0.0 "AUMOCOM"
   Layout dividido: panel de marca (marino, retícula técnica, matrícula)
   + panel de formulario. Tipografía autoalojada.
   Prefijo: .tkm-  ·  Compatible PrestaShop 8.2.x / tema Warehouse 4.7.x
   --------------------------------------------------------------------------
   Los nombres de clase usados por tkm-private-ui.js y password_17.tpl
   (.tkm-card, .tkm-tab, .tkm-pass, .tkm-input, etc.) se conservan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipografías autoalojadas (views/fonts/) — sin dependencias externas
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   1. Tokens de diseño
   -------------------------------------------------------------------------- */
.tkm-scope {
    --tkm-navy: #1B2653;
    --tkm-navy-deep: #121A3B;
    --tkm-ink: #0C1230;
    --tkm-red: #E30613;
    --tkm-red-dark: #C00511;
    --tkm-steel: #5B6585;
    --tkm-mute: #8B93AC;
    --tkm-paper: #F4F6FB;
    --tkm-field: #FFFFFF;
    --tkm-line: #DEE3EF;
    --tkm-line-strong: #C6CDE0;

    --tkm-ok: #0A7A4B;
    --tkm-ok-bg: #EEF9F3;
    --tkm-err: #C00511;
    --tkm-err-bg: #FDF1F2;
    --tkm-info: #1B2653;
    --tkm-info-bg: #EEF2FB;

    --tkm-font-ui: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tkm-font-disp: 'Barlow Condensed', 'Barlow', sans-serif;
    --tkm-font-mono: 'IBM Plex Mono', ui-monospace, "Courier New", monospace;

    --tkm-r-lg: 18px;
    --tkm-r-md: 12px;
    --tkm-r-sm: 9px;

    --tkm-card-alpha: 1;
    --tkm-shadow: 0 30px 70px -28px rgba(12, 18, 48, .45), 0 2px 8px rgba(12, 18, 48, .06);

    /* Alias de compatibilidad con la capa v1 */
    --tkm-brand: var(--tkm-navy);
    --tkm-brand-dark: var(--tkm-navy-deep);
    --tkm-brand-soft: rgba(27, 38, 83, .14);
    --tkm-accent: var(--tkm-red);
    --tkm-ink-soft: var(--tkm-steel);
    --tkm-ink-mute: var(--tkm-mute);
    --tkm-field-alt: var(--tkm-paper);
    --tkm-radius: var(--tkm-r-lg);
    --tkm-radius-sm: var(--tkm-r-md);
    --tkm-radius-xs: var(--tkm-r-sm);
    --tkm-danger: var(--tkm-err);
    --tkm-danger-bg: var(--tkm-err-bg);
    --tkm-success: var(--tkm-ok);
    --tkm-success-bg: var(--tkm-ok-bg);
}

.tkm-scope,
.tkm-scope * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Página independiente (sin cabecera/pie del tema)
   -------------------------------------------------------------------------- */
html { padding: 0; }

body {
    min-height: 100vh;
    margin: 0;
    color: #0C1230;
    -webkit-font-smoothing: antialiased;
    font-family: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #F4F6FB;
}

body.tkm-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Fondo decorativo por defecto (si no hay imagen/vídeo/color configurado) */
body.tkm-page:not(#bg-private-image):not(#bg-private-image_video):not(#bg-private-color) {
    background:
        radial-gradient(1100px 500px at 85% -10%, #E6EBF7 0%, transparent 60%),
        radial-gradient(900px 500px at 0% 110%, #E9EDF8 0%, transparent 55%),
        #F4F6FB;
}

/* --------------------------------------------------------------------------
   3. Escenario y contenedor dividido
   -------------------------------------------------------------------------- */
.tkm-stage {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 2.5rem 1.25rem;
    position: relative;
    float: none !important;
}

.tkm-stage--left  { justify-content: flex-start; padding-left: 4vw; }
.tkm-stage--right { justify-content: flex-end;  padding-right: 4vw; }

.tkm-shell {
    width: 100%;
    max-width: 1060px;
    display: grid;
    grid-template-columns: 5fr 6fr;
    background: var(--tkm-field);
    border-radius: var(--tkm-r-lg);
    overflow: hidden;
    box-shadow: var(--tkm-shadow);
    border: 1px solid var(--tkm-line);
}

/* Opacidad configurable desde el módulo (bg_opacity) */
.tkm-shell { opacity: var(--tkm-card-alpha); }

/* --------------------------------------------------------------------------
   4. Panel de marca (izquierda)
   -------------------------------------------------------------------------- */
.tkm-brand {
    position: relative;
    background:
        linear-gradient(160deg, rgba(227, 6, 19, .10) 0%, transparent 32%),
        linear-gradient(200deg, var(--tkm-navy) 0%, var(--tkm-navy-deep) 70%);
    color: #fff;
    padding: 2.6rem 2.4rem 2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Retícula técnica tipo plano */
.tkm-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    pointer-events: none;
}

/* Silueta técnica: disco de freno */
.tkm-brand::after {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 44px rgba(255, 255, 255, .03), inset 0 0 0 46px rgba(255, 255, 255, .07);
    pointer-events: none;
}

.tkm-brand > * { position: relative; z-index: 1; }

.tkm-brand__logo {
    align-self: flex-start;
    background: #fff;
    border-radius: var(--tkm-r-sm);
    padding: .55rem .9rem;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5);
}

.tkm-brand__logo img {
    display: block;
    height: 34px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

.tkm-brand__kicker {
    margin-top: 2.1rem;
    font-family: var(--tkm-font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #9FB0E0;
}

.tkm-brand__title {
    margin: .5rem 0 0;
    font-family: var(--tkm-font-disp);
    font-weight: 800;
    font-size: clamp(2rem, 3.4vw, 2.7rem);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #fff;
}

.tkm-brand__title em {
    font-style: normal;
    color: #FF6B74;
}

/* --- Matrícula AUMOCOM (elemento firma) --- */
.tkm-plate {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: stretch;
    align-self: flex-start;
    border-radius: 8px;
    overflow: hidden;
    border: 2.5px solid #10173A;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .15);
}

.tkm-plate__band {
    background: #0B3AA5;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .4rem .5rem;
    min-width: 2rem;
}

.tkm-plate__band svg { width: .95rem; height: .95rem; }

.tkm-plate__band span {
    font-family: var(--tkm-font-disp);
    font-weight: 700;
    font-size: .8rem;
    line-height: 1;
}

.tkm-plate__body {
    background: linear-gradient(180deg, #FFFFFF 0%, #E9ECF4 100%);
    color: #141B33;
    font-family: var(--tkm-font-disp);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: .06em;
    padding: .35rem 1rem .4rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.tkm-plate__body small {
    font-family: var(--tkm-font-mono);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .08em;
    color: var(--tkm-red);
    align-self: flex-end;
    margin-bottom: .42rem;
}

/* --- Ventajas como referencias de recambio --- */
.tkm-perks {
    margin: 2.1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    list-style: none;
}

.tkm-perks li {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    margin: 0;
}

.tkm-perks__ref {
    font-family: var(--tkm-font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: #9FB0E0;
    border: 1px solid rgba(159, 176, 224, .4);
    border-radius: 5px;
    padding: .18rem .45rem;
    white-space: nowrap;
}

.tkm-perks p {
    margin: 0;
    font-size: .92rem;
    color: #D9DFF2;
    line-height: 1.4;
}

.tkm-perks strong { color: #fff; font-weight: 600; }

.tkm-brand__foot {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    color: #9FB0E0;
}

.tkm-brand__foot svg { width: 1rem; height: 1rem; flex: none; }

/* --------------------------------------------------------------------------
   5. Panel de formulario (derecha) — .tkm-card (nombre requerido por el JS)
   -------------------------------------------------------------------------- */
.tkm-card {
    padding: 2.4rem 2.6rem 1.6rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--tkm-field);
}

.tkm-card.is-wide { /* el layout de dos columnas ya absorbe el ancho extra */ }

.tkm-card__brand { margin-bottom: 1.4rem; text-align: left; }

.tkm-card__eyebrow {
    display: block;
    font-family: var(--tkm-font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tkm-red);
}

.tkm-card__title {
    margin: .3rem 0 0;
    font-family: var(--tkm-font-disp);
    font-weight: 700;
    font-size: 1.65rem;
    text-transform: uppercase;
    letter-spacing: .015em;
    color: var(--tkm-navy);
}

.tkm-card__subtitle {
    margin: .35rem 0 0;
    font-size: .9rem;
    color: var(--tkm-steel);
    line-height: 1.45;
}

.tkm-shopname {
    display: block;
    margin-top: .4rem;
    font-family: var(--tkm-font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tkm-mute);
}

/* --------------------------------------------------------------------------
   6. Pestañas segmentadas
   -------------------------------------------------------------------------- */
.tkm-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--tkm-paper);
    border: 1px solid var(--tkm-line);
    border-radius: var(--tkm-r-md);
    padding: 4px;
    gap: 4px;
    margin-bottom: 1.5rem;
}

.tkm-tab {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--tkm-font-disp);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--tkm-steel);
    padding: .62rem .5rem;
    border-radius: calc(var(--tkm-r-md) - 4px);
    position: relative;
    transition: color .15s, background .15s, box-shadow .15s;
}

.tkm-tab:hover { color: var(--tkm-navy); }

.tkm-tab.is-active {
    background: #fff;
    color: var(--tkm-navy);
    box-shadow: 0 2px 8px rgba(12, 18, 48, .10), inset 0 -2.5px 0 var(--tkm-red);
}

.tkm-tab:focus-visible {
    outline: 2px solid var(--tkm-navy);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. Paneles
   -------------------------------------------------------------------------- */
.tkm-panels { min-width: 0; }

.tkm-panel { animation: tkmFade .18s ease; }

@keyframes tkmFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.tkm-panel__head { margin-bottom: 1.1rem; }

.tkm-panel__title {
    margin: 0;
    font-family: var(--tkm-font-disp);
    font-weight: 700;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: .015em;
    color: var(--tkm-navy);
}

.tkm-panel__desc {
    margin: .35rem 0 0;
    font-size: .88rem;
    color: var(--tkm-steel);
    line-height: 1.45;
}

/* Separador de secciones del formulario de alta */
.tkm-divider {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1.5rem 0 .95rem;
    font-family: var(--tkm-font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tkm-steel);
}

.tkm-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--tkm-line);
}

/* --------------------------------------------------------------------------
   8. Campos
   -------------------------------------------------------------------------- */
.tkm-field { margin-bottom: 1.05rem; }

.tkm-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.tkm-label {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-family: var(--tkm-font-disp);
    font-weight: 600;
    font-size: .86rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tkm-navy);
    margin-bottom: .38rem;
}

.tkm-req { color: var(--tkm-red); font-size: .9em; }

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

.tkm-icon {
    position: absolute;
    left: .85rem;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--tkm-mute);
    pointer-events: none;
    z-index: 1;
}

.tkm-input {
    width: 100%;
    font-family: var(--tkm-font-ui);
    font-size: .95rem;
    color: var(--tkm-ink);
    background: var(--tkm-field);
    border: 1px solid var(--tkm-line-strong);
    border-radius: var(--tkm-r-sm);
    padding: .68rem .9rem;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.4;
}

.tkm-input-wrap .tkm-icon ~ .tkm-input { padding-left: 2.5rem; }

.tkm-input::placeholder { color: var(--tkm-mute); }
.tkm-input:hover { border-color: #AAB3CC; }

.tkm-input:focus {
    outline: none;
    border-color: var(--tkm-navy);
    box-shadow: 0 0 0 3px rgba(27, 38, 83, .14);
}

textarea.tkm-input { resize: vertical; min-height: 96px; }

/* Campo obligatorio sin rellenar (validación en cliente, v2.0.1) */
.tkm-scope .tkm-invalid,
.tkm-scope .tkm-panels .form-control.tkm-invalid {
    border-color: var(--tkm-err) !important;
    box-shadow: 0 0 0 3px rgba(192, 5, 17, .14) !important;
}

select.tkm-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6585' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    padding-right: 2.4rem;
}

/* Botón mostrar/ocultar contraseña */
.tkm-pass-toggle {
    position: absolute;
    right: .5rem;
    appearance: none;
    border: 0;
    background: var(--tkm-paper);
    cursor: pointer;
    font-family: var(--tkm-font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--tkm-steel);
    padding: .34rem .6rem;
    border-radius: 6px;
    transition: background .15s, color .15s;
    z-index: 1;
}

.tkm-pass-toggle:hover { background: var(--tkm-line); color: var(--tkm-navy); }

.tkm-pass .tkm-input { padding-right: 5rem; }

/* Fila de ayuda (¿olvidó su contraseña?) */
.tkm-helper-row {
    display: flex;
    justify-content: flex-end;
    margin: -.3rem 0 1.1rem;
}

.tkm-link {
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--tkm-font-ui);
    font-size: .85rem;
    font-weight: 500;
    color: var(--tkm-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--tkm-line-strong);
    transition: color .15s, text-decoration-color .15s;
    padding: 0;
}

.tkm-link:hover { color: var(--tkm-red); text-decoration-color: var(--tkm-red); }

/* Radios y checks */
.tkm-radios { display: flex; gap: 1rem; }

.tkm-radio {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    color: var(--tkm-ink);
    cursor: pointer;
}

.tkm-radio input { accent-color: var(--tkm-navy); }

.tkm-check {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-bottom: .6rem;
    font-size: .85rem;
    color: var(--tkm-steel);
}

.tkm-check input {
    margin-top: .2rem;
    accent-color: var(--tkm-navy);
    width: 1rem;
    height: 1rem;
    flex: none;
}

.tkm-check label { cursor: pointer; }

/* Fecha de nacimiento */
.tkm-date-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.1fr;
    gap: .6rem;
}

/* --------------------------------------------------------------------------
   9. Botones
   -------------------------------------------------------------------------- */
.tkm-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.3rem;
    flex-wrap: wrap;
}

.tkm-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--tkm-font-disp);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: var(--tkm-r-sm);
    padding: .78rem 1.5rem;
    transition: transform .12s, box-shadow .15s, background .15s, color .15s, border-color .15s;
    line-height: 1.2;
    text-decoration: none;
}

.tkm-btn svg { width: 1.1rem; height: 1.1rem; flex: none; }

.tkm-btn:active { transform: translateY(1px); }

.tkm-btn--primary {
    flex: 1;
    min-width: 200px;
    background: linear-gradient(180deg, #232F63 0%, var(--tkm-navy) 55%, #16204A 100%);
    color: #fff;
    box-shadow: 0 12px 24px -10px rgba(27, 38, 83, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.tkm-btn--primary:hover {
    background: linear-gradient(180deg, #2A3773 0%, #212D62 55%, #1A2453 100%);
    box-shadow: 0 14px 28px -10px rgba(27, 38, 83, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
    color: #fff;
}

.tkm-btn--primary:focus-visible {
    outline: 2px solid var(--tkm-red);
    outline-offset: 2px;
}

.tkm-btn--primary[disabled] { opacity: .65; cursor: wait; }

.tkm-btn--ghost {
    background: #fff;
    color: var(--tkm-navy);
    border: 1px solid var(--tkm-line-strong);
}

.tkm-btn--ghost:hover {
    border-color: var(--tkm-navy);
    background: var(--tkm-paper);
    color: var(--tkm-navy);
}

/* Enlace de cambio de vista al pie del formulario */
.tkm-switch {
    margin-top: 1.3rem;
    text-align: center;
    font-size: .88rem;
    color: var(--tkm-steel);
}

.tkm-switch button {
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--tkm-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--tkm-line-strong);
    transition: color .15s, text-decoration-color .15s;
    padding: 0;
}

.tkm-switch button:hover { color: var(--tkm-red); text-decoration-color: var(--tkm-red); }

/* --------------------------------------------------------------------------
   10. Avisos y errores
   -------------------------------------------------------------------------- */
.tkm-scope .alert {
    border-radius: var(--tkm-r-sm);
    padding: .8rem 1rem;
    font-size: .88rem;
    line-height: 1.45;
    margin: 0 0 1rem;
    border: 1px solid;
    font-family: var(--tkm-font-ui);
}

.tkm-scope .alert ol,
.tkm-scope .alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

.tkm-scope .alert-danger {
    background: var(--tkm-err-bg);
    border-color: #F2C3C7;
    color: var(--tkm-err);
}

.tkm-scope .alert-success {
    background: var(--tkm-ok-bg);
    border-color: #BFE6D2;
    color: var(--tkm-ok);
}

.tkm-scope .alert-info,
.tkm-scope .alert-warning {
    background: var(--tkm-info-bg);
    border-color: #C8D4F0;
    color: var(--tkm-navy);
}

/* Cargador AJAX */
#gif_loader {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, .7);
    background-repeat: no-repeat;
    background-position: center center;
}

/* --------------------------------------------------------------------------
   11. Pie del panel de formulario
   -------------------------------------------------------------------------- */
.tkm-card__foot {
    margin-top: auto;
    padding-top: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--tkm-mute);
}

.tkm-card__foot svg { width: .9rem; height: .9rem; flex: none; }

/* --------------------------------------------------------------------------
   12. Compatibilidad con campos inyectados por otros módulos
       (PrivateShop Extra Fields / hook displayCustomerAccountForm)
   -------------------------------------------------------------------------- */
.tkm-panels .form-group { margin-bottom: 1.05rem; }

.tkm-panels .form-group.row,
.tkm-panels .row {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

.tkm-panels .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.tkm-panels fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.tkm-panels .form-control-label,
.tkm-panels .rf_input_label,
.tkm-panels section label:not(.tkm-label):not(.tkm-radio):not([for="optin"]):not([for="newsletter"]) {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: .38rem;
    font-family: var(--tkm-font-disp);
    font-weight: 600;
    font-size: .86rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tkm-navy);
    text-align: left;
    padding: 0;
}

.tkm-scope .tkm-panels .form-control:not(.tkm-input) {
    display: block;
    width: 100%;
    padding: .68rem .9rem;
    font-family: var(--tkm-font-ui);
    font-size: .95rem;
    color: var(--tkm-ink);
    background: var(--tkm-field);
    background-image: none;
    border: 1px solid var(--tkm-line-strong);
    border-radius: var(--tkm-r-sm);
    box-shadow: none;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}

.tkm-scope .tkm-panels .form-control:not(.tkm-input):hover { border-color: #AAB3CC; }

.tkm-scope .tkm-panels .form-control:not(.tkm-input):focus {
    border-color: var(--tkm-navy);
    box-shadow: 0 0 0 3px rgba(27, 38, 83, .14);
    outline: none;
}

.tkm-panels .form-control-comment {
    font-size: .78rem;
    color: var(--tkm-mute);
    padding: .3rem 0 0;
}

.tkm-panels .form-control-comment:empty { display: none; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
    .tkm-stage { padding: 1.25rem .8rem; }
    .tkm-stage--left,
    .tkm-stage--right { justify-content: center; padding-left: .8rem; padding-right: .8rem; }

    .tkm-shell { grid-template-columns: 1fr; max-width: 560px; }

    .tkm-brand { padding: 1.6rem 1.5rem 1.4rem; }
    .tkm-brand::after { display: none; }
    .tkm-brand__title { font-size: 1.7rem; margin-top: .4rem; }
    .tkm-brand__kicker { margin-top: 1.3rem; }
    .tkm-plate { margin-top: 1rem; }
    .tkm-plate__body { font-size: 1.35rem; }
    .tkm-perks { display: none; }        /* móvil: marca compacta */
    .tkm-brand__foot { display: none; }

    .tkm-card { padding: 1.6rem 1.4rem 1.2rem; }
    .tkm-grid-2 { grid-template-columns: 1fr; }
    .tkm-date-grid { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
    .tkm-actions { flex-direction: column; }
    .tkm-btn--primary { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tkm-scope *,
    .tkm-panel { animation: none !important; transition: none !important; }
}