/* Admin de /nuestra-historia. HTML nativo + tokens --ba-* (MASTER v1.4).
   Medidas en rem; px solo en bordes y en el subrayado/barra que pide el diseño. */

.ha[b-sec-historiaadmin] {
    /* Salida del drawer al ~68% de la entrada (MASTER §5.6). */
    --ha-salida: calc(var(--ba-duration-base) * .68);

    /* min-width 0: si el layout la mete en un flex, la tabla (min-width 53.75rem)
       no debe ensanchar la página; la tabla se desplaza dentro de su caja (§6.1). */
    min-width: 0;
    max-width: 80rem;
    margin: 0 auto;
    padding: var(--ba-space-8) var(--ba-space-4) var(--ba-space-20);
    color: var(--ba-text);
}

.ha .visually-hidden[b-sec-historiaadmin],
.ha-dr__centinela[b-sec-historiaadmin] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ha-icono[b-sec-historiaadmin] {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Encabezado ---- */

.ha-head[b-sec-historiaadmin] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ba-space-6);
}

.ha-head__texto[b-sec-historiaadmin] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ha-h1[b-sec-historiaadmin] {
    margin: 0;
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ba-primary);
}

.ha-sub[b-sec-historiaadmin] {
    margin: 0;
    font-size: var(--ba-text-sm);
    line-height: 1.4;
    color: var(--ba-text-muted);
}

.ha-sub a[b-sec-historiaadmin] {
    color: var(--ba-primary);
}

.ha-sub a:hover[b-sec-historiaadmin] {
    color: var(--ba-blue-800);
}

/* ---- Botones ---- */

.ha-btn[b-sec-historiaadmin] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    height: 2.5rem;
    padding: 0 var(--ba-space-4);
    font: inherit;
    font-size: var(--ba-text-base);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--ba-radius-sm);
    cursor: pointer;
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

.ha-btn--primario[b-sec-historiaadmin] {
    color: var(--ba-surface);
    background: var(--ba-primary);
    border-color: var(--ba-primary);
}

.ha-btn--primario:hover[b-sec-historiaadmin] {
    background: var(--ba-blue-800);
    border-color: var(--ba-blue-800);
}

.ha-btn--primario:active[b-sec-historiaadmin] {
    background: var(--ba-blue-900);
    border-color: var(--ba-blue-900);
    transition: none;
}

.ha-btn--contorno[b-sec-historiaadmin] {
    color: var(--ba-primary);
    background: var(--ba-surface);
    border-color: var(--ba-primary);
}

.ha-btn--contorno:hover[b-sec-historiaadmin] {
    background: var(--ba-blue-50);
}

.ha-btn--peligro[b-sec-historiaadmin] {
    color: var(--ba-surface);
    background: var(--ba-red-800);
    border-color: var(--ba-red-800);
}

.ha-btn--sm[b-sec-historiaadmin] {
    height: 2rem;
    padding: 0 var(--ba-space-3);
    font-size: var(--ba-text-sm);
}

/* Las dos etiquetas ocupan la misma celda: el botón mide lo que la más larga
   y no cambia de ancho al pasar a "Guardando…" (MASTER §7.4). */
.ha-btn__estable[b-sec-historiaadmin] {
    display: inline-grid;
}

.ha-btn__estable > span[b-sec-historiaadmin] {
    grid-area: 1 / 1;
    text-align: center;
}

.ha-btn__estable > .is-oculto[b-sec-historiaadmin] {
    visibility: hidden;
}

.ha-btn-icono[b-sec-historiaadmin] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--ba-text);
    background: transparent;
    border: 0;
    border-radius: var(--ba-radius-sm);
    cursor: pointer;
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

.ha-btn-icono:hover[b-sec-historiaadmin] {
    background: var(--ba-surface-alt);
}

.ha-enlace-peligro[b-sec-historiaadmin] {
    height: 2.5rem;
    padding: 0 var(--ba-space-1);
    font: inherit;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-red-800);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* ---- Pestañas y búsqueda ---- */

.ha-barra[b-sec-historiaadmin] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-4);
    margin-top: 1.75rem;
    border-bottom: 1px solid var(--ba-border);
}

.ha-tabs[b-sec-historiaadmin] {
    display: flex;
    gap: var(--ba-space-1);
    min-width: 0;
}

.ha-tab[b-sec-historiaadmin] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    height: 2.75rem;
    padding: 0 0.875rem;
    font: inherit;
    font-size: var(--ba-text-sm);
    font-weight: 500;
    white-space: nowrap;
    color: var(--ba-text);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--ba-duration-fast) var(--ba-easing);
}

.ha-tab:hover[b-sec-historiaadmin] {
    color: var(--ba-primary);
}

.ha-tab.is-activa[b-sec-historiaadmin] {
    font-weight: 600;
    color: var(--ba-primary);
    border-bottom-color: var(--ba-primary);
}

/* El anillo va hacia dentro: la fila de pestañas recorta en móvil. */
.ha-tab:focus-visible[b-sec-historiaadmin] {
    outline-offset: -2px;
}

.ha-tab__n[b-sec-historiaadmin] {
    min-width: 1.5rem;
    padding: 0.125rem 0.4375rem;
    font-size: var(--ba-text-xs);
    font-weight: 600;
    text-align: center;
    color: var(--ba-text);
    background: var(--ba-blue-50);
    border-radius: var(--ba-radius-sm);
}

.ha-tab.is-activa .ha-tab__n[b-sec-historiaadmin] {
    color: var(--ba-surface);
    background: var(--ba-primary);
}

.ha-tab .ha-tab__n.is-aviso[b-sec-historiaadmin] {
    color: var(--ba-warning-text);
    background: var(--ba-warning-bg);
}

.ha-buscar[b-sec-historiaadmin] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    width: 17.5rem;
    max-width: 100%;
    height: 2.5rem;
    margin: 0 0 var(--ba-space-2);
    padding: 0 var(--ba-space-3);
    color: var(--ba-text-muted);
    background: var(--ba-surface);
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
}

/* El campo no dibuja foco propio: lo comunica el borde del contenedor (§7.4). */
.ha-buscar:focus-within[b-sec-historiaadmin] {
    border-color: var(--ba-primary);
    box-shadow: inset 0 0 0 1px var(--ba-primary);
}

.ha-buscar input[b-sec-historiaadmin] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    font: inherit;
    font-size: var(--ba-text-base);
    color: var(--ba-text);
    background: transparent;
    border: 0;
    outline: none;
}

/* ---- Panel ---- */

.ha-panel[b-sec-historiaadmin] {
    margin-top: var(--ba-space-4);
}

.ha-panel__intro[b-sec-historiaadmin] {
    margin-bottom: var(--ba-space-3);
}

/* ---- Tabla ---- */

.ha-tabla-caja[b-sec-historiaadmin] {
    overflow-x: auto;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    transition: opacity var(--ba-duration-fast) var(--ba-easing);
}

/* Recarga tras guardar: se atenúa lo que ya se veía, sin esqueleto (§8.6). */
.ha-tabla-caja.is-recargando[b-sec-historiaadmin] {
    opacity: .6;
}

.ha-tabla[b-sec-historiaadmin] {
    width: 100%;
    min-width: 53.75rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--ba-text-sm);
    line-height: 1.4;
}

.ha-tabla th[b-sec-historiaadmin],
.ha-tabla td[b-sec-historiaadmin] {
    padding: var(--ba-space-3) var(--ba-space-4);
    text-align: left;
    vertical-align: top;
}

.ha-tabla th[b-sec-historiaadmin] {
    font-weight: 600;
    background: var(--ba-surface-alt);
}

.ha-tabla td[b-sec-historiaadmin] {
    border-top: 1px solid var(--ba-border);
}

.ha-tabla tbody tr:first-child td[b-sec-historiaadmin] {
    border-top: 0;
}

.ha-tabla thead + tbody tr:first-child td[b-sec-historiaadmin] {
    border-top: 1px solid var(--ba-border);
}

.ha-col-fecha[b-sec-historiaadmin] {
    width: 6.5rem;
    white-space: nowrap;
}

.ha-col-tipo[b-sec-historiaadmin] {
    width: 6.5rem;
}

.ha-col-estado[b-sec-historiaadmin] {
    width: 12.5rem;
}

.ha-tabla .ha-col-ir[b-sec-historiaadmin] {
    width: 3rem;
    text-align: right;
}

.ha-fila[b-sec-historiaadmin] {
    cursor: pointer;
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

.ha-fila:hover[b-sec-historiaadmin],
.ha-fila.is-editando[b-sec-historiaadmin] {
    background: var(--ba-blue-50);
}

.ha-fila.is-editando td:first-child[b-sec-historiaadmin] {
    box-shadow: inset 3px 0 0 var(--ba-primary);
}

/* La caja recorta lo que sale de la tabla: el anillo de la fila va hacia dentro. */
.ha-fila:focus-visible[b-sec-historiaadmin] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: -2px;
}

.ha-fila--esqueleto[b-sec-historiaadmin] {
    cursor: default;
}

.ha-fila--esqueleto:hover[b-sec-historiaadmin] {
    background: transparent;
}

.ha-entrada[b-sec-historiaadmin] {
    display: flex;
    align-items: flex-start;
    gap: var(--ba-space-3);
}

.ha-miniatura[b-sec-historiaadmin] {
    display: block;
    flex: none;
    width: 4rem;
    height: 3rem;
    object-fit: cover;
    background: var(--ba-surface-alt);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-sm);
}

.ha-miniatura--vacia[b-sec-historiaadmin] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--ba-text-muted);
}

/* La foto tapa el icono; si da error se oculta y el icono queda a la vista. */
.ha-miniatura__foto[b-sec-historiaadmin] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ha-entrada__texto[b-sec-historiaadmin] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ha-entrada__titulo[b-sec-historiaadmin] {
    font-weight: 600;
    text-wrap: pretty;
}

.ha-entrada__sucursal[b-sec-historiaadmin] {
    overflow: hidden;
    color: var(--ba-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ha-chevron[b-sec-historiaadmin] {
    margin-top: 0.0625rem;
    color: var(--ba-text-muted);
}

/* ---- Chip de estado (texto + punto: el estado nunca va solo en color) ---- */

.ha-chip[b-sec-historiaadmin] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem var(--ba-space-2);
    font-size: var(--ba-text-xs);
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--ba-radius-sm);
}

.ha-chip__punto[b-sec-historiaadmin] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
}

.ha-chip.is-publicada[b-sec-historiaadmin] {
    color: var(--ba-success-text);
    background: var(--ba-success-bg);
}

.ha-chip.is-publicada .ha-chip__punto[b-sec-historiaadmin] {
    background: var(--ba-success);
}

.ha-chip.is-incompleta[b-sec-historiaadmin] {
    color: var(--ba-warning-text);
    background: var(--ba-warning-bg);
}

.ha-chip.is-incompleta .ha-chip__punto[b-sec-historiaadmin] {
    background: var(--ba-warning);
}

.ha-chip.is-oculta[b-sec-historiaadmin] {
    color: var(--ba-text);
    background: var(--ba-blue-50);
}

.ha-chip.is-oculta .ha-chip__punto[b-sec-historiaadmin] {
    background: var(--ba-text-muted);
}

.ha-motivo[b-sec-historiaadmin] {
    display: block;
    margin-top: var(--ba-space-1);
    color: var(--ba-warning-text);
}

/* ---- Esqueleto, vacío y error ---- */

.ha-hueso[b-sec-historiaadmin] {
    display: block;
    height: 0.875rem;
    background: var(--ba-surface-alt);
    border-radius: var(--ba-radius-sm);
    animation: ha-pulso-b-sec-historiaadmin 1.2s var(--ba-easing) infinite;
}

.ha-miniatura.ha-hueso[b-sec-historiaadmin] {
    height: 3rem;
}

.ha-hueso--corto[b-sec-historiaadmin] {
    width: 4rem;
}

.ha-hueso--largo[b-sec-historiaadmin] {
    width: 70%;
}

.ha-hueso--medio[b-sec-historiaadmin] {
    width: 45%;
    margin-top: 0.375rem;
}

.ha-hueso--chip[b-sec-historiaadmin] {
    width: 5rem;
    height: 1.25rem;
}

@keyframes ha-pulso-b-sec-historiaadmin {
    50% {
        opacity: .5;
    }
}

.ha-vacio[b-sec-historiaadmin] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ba-space-3);
    padding: 2.5rem var(--ba-space-4);
    text-align: center;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
}

.ha-vacio--tabla[b-sec-historiaadmin] {
    border: 0;
    border-top: 1px solid var(--ba-border);
    border-radius: 0;
}

.ha-vacio p[b-sec-historiaadmin] {
    margin: 0;
    font-size: var(--ba-text-base);
}

.ha-error[b-sec-historiaadmin] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ba-space-3);
    padding: var(--ba-space-4);
    color: var(--ba-red-800);
    background: var(--ba-red-50);
    border-radius: var(--ba-radius-md);
}

.ha-error p[b-sec-historiaadmin] {
    flex: 1 1 16rem;
    margin: 0;
}

/* ---- Sucursales sin historia ---- */

.ha-lista[b-sec-historiaadmin] {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
}

.ha-lista li[b-sec-historiaadmin] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-4);
    padding: var(--ba-space-3) var(--ba-space-4);
}

.ha-lista li + li[b-sec-historiaadmin] {
    border-top: 1px solid var(--ba-border);
}

.ha-lista__texto[b-sec-historiaadmin] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    font-size: var(--ba-text-sm);
}

.ha-lista__nombre[b-sec-historiaadmin] {
    font-weight: 600;
}

.ha-lista__entidad[b-sec-historiaadmin] {
    color: var(--ba-text-muted);
}

/* ---- Drawer ---- */

.ha-capa[b-sec-historiaadmin] {
    position: fixed;
    inset: 0;
    z-index: var(--ba-z-overlay);
    background: color-mix(in srgb, var(--ba-black) 40%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ha-salida) var(--ba-easing), visibility 0s linear var(--ha-salida);
}

.ha-capa.is-abierto[b-sec-historiaadmin] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--ba-duration-base) var(--ba-easing), visibility 0s;
}

/* Siempre en el DOM para poder animar la salida; cerrado, visibility lo saca
   del orden de tabulación y del árbol de accesibilidad. */
.ha-dr[b-sec-historiaadmin] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ba-z-modal);
    display: flex;
    flex-direction: column;
    width: 35rem;
    max-width: 100vw;
    background: var(--ba-surface);
    box-shadow: var(--ba-shadow-md);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--ha-salida) var(--ba-easing), visibility 0s linear var(--ha-salida);
}

.ha-dr.is-abierto[b-sec-historiaadmin] {
    transform: none;
    visibility: visible;
    transition: transform var(--ba-duration-base) var(--ba-easing), visibility 0s;
}

.ha-dr__form[b-sec-historiaadmin] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.ha-dr__cabecera[b-sec-historiaadmin] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ba-space-4);
    padding: 1.25rem var(--ba-space-6) var(--ba-space-4);
    border-bottom: 1px solid var(--ba-border);
}

.ha-dr__titulos[b-sec-historiaadmin] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.ha-dr__titulos .ha-chip[b-sec-historiaadmin] {
    align-self: flex-start;
}

.ha-dr__kicker[b-sec-historiaadmin] {
    font-size: var(--ba-text-xs);
    font-weight: 500;
    color: var(--ba-text-muted);
}

.ha-dr__titulo[b-sec-historiaadmin] {
    margin: 0;
    font-size: var(--ba-text-h3);
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.ha-dr__cuerpo[b-sec-historiaadmin] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem var(--ba-space-6) var(--ba-space-8);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ha-dr__pie[b-sec-historiaadmin] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3);
    padding: var(--ba-space-4) var(--ba-space-6);
    background: var(--ba-surface);
    border-top: 1px solid var(--ba-border);
}

.ha-dr__estado[b-sec-historiaadmin] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3);
    min-width: 0;
}

.ha-dr__acciones[b-sec-historiaadmin] {
    display: flex;
    gap: var(--ba-space-2);
    margin-left: auto;
}

.ha-dr__pregunta[b-sec-historiaadmin] {
    margin: 0;
    font-size: var(--ba-text-sm);
    font-weight: 600;
}

/* ---- Revisión de publicación en vivo ---- */

.ha-revision[b-sec-historiaadmin] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem var(--ba-space-4);
    border-radius: var(--ba-radius-md);
}

.ha-revision.is-publicada[b-sec-historiaadmin] {
    background: var(--ba-success-bg);
}

.ha-revision.is-incompleta[b-sec-historiaadmin] {
    background: var(--ba-warning-bg);
}

.ha-revision.is-oculta[b-sec-historiaadmin] {
    background: var(--ba-blue-50);
}

.ha-revision__veredicto[b-sec-historiaadmin] {
    margin: 0;
    font-size: var(--ba-text-sm);
    font-weight: 600;
}

.ha-revision.is-publicada .ha-revision__veredicto[b-sec-historiaadmin] {
    color: var(--ba-success-text);
}

.ha-revision.is-incompleta .ha-revision__veredicto[b-sec-historiaadmin] {
    color: var(--ba-warning-text);
}

.ha-revision__lista[b-sec-historiaadmin] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ha-revision__lista li[b-sec-historiaadmin] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    font-size: var(--ba-text-sm);
    color: var(--ba-text);
}

.ha-revision__icono[b-sec-historiaadmin] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--ba-surface);
    border-radius: 50%;
}

.ha-revision__icono.is-ok[b-sec-historiaadmin] {
    background: var(--ba-success);
}

.ha-revision__icono.is-falta[b-sec-historiaadmin] {
    background: var(--ba-red-800);
}

/* ---- Campos ---- */

.ha-campo[b-sec-historiaadmin] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ha-etiqueta[b-sec-historiaadmin] {
    padding: 0;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-text);
}

legend.ha-etiqueta[b-sec-historiaadmin] {
    margin-bottom: var(--ba-space-2);
}

.ha-etiqueta--contador[b-sec-historiaadmin] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ba-space-2);
}

.ha-contador[b-sec-historiaadmin] {
    font-weight: 400;
    color: var(--ba-text-muted);
}

.ha-contador.is-cerca[b-sec-historiaadmin] {
    color: var(--ba-warning-text);
}

.ha-obligatorio[b-sec-historiaadmin] {
    color: var(--ba-red-800);
}

.ha-opcional[b-sec-historiaadmin] {
    font-weight: 400;
    color: var(--ba-text-muted);
}

.ha-control[b-sec-historiaadmin] {
    width: 100%;
    min-height: 3rem;
    padding: 0 var(--ba-space-3);
    font: inherit;
    font-size: var(--ba-text-base);
    color: var(--ba-text);
    background: var(--ba-surface);
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
}

.ha-control--area[b-sec-historiaadmin] {
    padding: var(--ba-space-3);
    line-height: 1.5;
    resize: vertical;
}

.ha-codigo[b-sec-historiaadmin] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--ba-text-sm);
}

/* Campos: borde reforzado, sin anillo (MASTER §7.4). */
.ha-control:focus-visible[b-sec-historiaadmin] {
    outline: none;
    border-color: var(--ba-primary);
    box-shadow: inset 0 0 0 1px var(--ba-primary);
}

.ha-control[aria-invalid="true"][b-sec-historiaadmin] {
    border-color: var(--ba-red-800);
}

.ha-control[aria-invalid="true"]:focus-visible[b-sec-historiaadmin] {
    box-shadow: inset 0 0 0 1px var(--ba-red-800);
}

.ha-ayuda[b-sec-historiaadmin] {
    font-size: var(--ba-text-sm);
    font-weight: 400;
    line-height: 1.45;
    color: var(--ba-text-muted);
}

.ha-fuerte[b-sec-historiaadmin] {
    font-weight: 600;
    color: var(--ba-text);
}

.ha-error-campo[b-sec-historiaadmin] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--ba-text-sm);
    font-weight: 500;
    color: var(--ba-red-800);
}

.ha-error-campo[b-sec-historiaadmin]::before {
    content: "!";
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--ba-surface);
    background: var(--ba-red-800);
    border-radius: 50%;
}

.ha-dos[b-sec-historiaadmin] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--ba-space-3);
}

.ha-control.is-ignorada[b-sec-historiaadmin] {
    color: var(--ba-text-muted);
    background: var(--ba-surface-alt);
}

.ha-nota[b-sec-historiaadmin] {
    margin: 0;
    padding: var(--ba-space-2) var(--ba-space-3);
    font-size: var(--ba-text-sm);
    line-height: 1.45;
    border-radius: var(--ba-radius-sm);
}

.ha-nota--aviso[b-sec-historiaadmin] {
    color: var(--ba-warning-text);
    background: var(--ba-warning-bg);
}

.ha-nota--info[b-sec-historiaadmin] {
    color: var(--ba-text);
    background: var(--ba-blue-50);
}

/* ---- Editor de contenido (RadzenHtmlEditor: componente, va con ::deep) ---- */

.ha-editor[b-sec-historiaadmin]  .rz-html-editor {
    display: flex;
    flex-direction: column;
    height: auto;
    margin: 0;
    font-family: inherit;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
    overflow: hidden;
}

/* Mismo foco que los demás campos: borde reforzado, sin anillo (§7.4). */
.ha-editor[b-sec-historiaadmin]  .rz-html-editor:focus-within {
    border-color: var(--ba-primary);
    box-shadow: inset 0 0 0 1px var(--ba-primary);
}

.ha-editor[b-sec-historiaadmin]  .rz-html-editor-toolbar {
    flex-wrap: wrap;
    background: var(--ba-surface-alt);
    border-bottom: 1px solid var(--ba-border);
}

.ha-editor[b-sec-historiaadmin]  .rz-html-editor-content,
.ha-editor[b-sec-historiaadmin]  .rz-html-editor-source {
    min-height: 10rem;
    max-height: 22rem;
    padding: var(--ba-space-3);
    overflow-y: auto;
    font-size: var(--ba-text-base);
    line-height: 1.5;
    color: var(--ba-text);
}

.ha-editor[b-sec-historiaadmin]  .rz-html-editor-content p {
    margin: 0 0 var(--ba-space-2);
}

.ha-editor[b-sec-historiaadmin]  .rz-html-editor-content a {
    color: var(--ba-primary);
    text-decoration: underline;
}

/* Un enlace a sucursal se distingue de uno normal: así se ve qué quedó ligado. */
.ha-editor[b-sec-historiaadmin]  .rz-html-editor-content a[href^="sucursal:"] {
    padding: 0 var(--ba-space-1);
    text-decoration: none;
    background: var(--ba-blue-50);
    border: 1px solid var(--ba-primary);
    border-radius: var(--ba-radius-sm);
}

.ha-enlazar[b-sec-historiaadmin] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: var(--ba-space-3);
    background: var(--ba-blue-50);
    border-radius: var(--ba-radius-md);
}

.ha-enlazar__fila[b-sec-historiaadmin] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ba-space-2);
}

.ha-enlazar__fila .ha-control[b-sec-historiaadmin] {
    flex: 1 1 14rem;
    width: auto;
}

.ha-enlazar__fila .ha-btn[b-sec-historiaadmin] {
    height: 3rem;
}

/* ---- Tipo: tarjetas radio (radio nativo: flechas y anuncio gratis) ---- */

.ha-tipos[b-sec-historiaadmin] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--ba-space-2);
}

.ha-tipo[b-sec-historiaadmin] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-1);
    padding: var(--ba-space-3) 0.875rem;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
    cursor: pointer;
}

.ha-tipo input[b-sec-historiaadmin] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ha-tipo.is-elegido[b-sec-historiaadmin] {
    background: var(--ba-blue-50);
    border-color: var(--ba-primary);
    box-shadow: inset 0 0 0 1px var(--ba-primary);
}

.ha-tipo:has(input:focus-visible)[b-sec-historiaadmin] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: 2px;
}

.ha-tipo__nombre[b-sec-historiaadmin] {
    font-size: var(--ba-text-base);
    font-weight: 600;
    color: var(--ba-text);
}

/* ---- Foto ---- */

.ha-foto__zona[b-sec-historiaadmin] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    min-height: 8.25rem;
    padding: 1.25rem var(--ba-space-4);
    text-align: center;
    background: var(--ba-surface);
    border: 1px dashed var(--ba-border-input);
    border-radius: var(--ba-radius-md);
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

.ha-foto__zona:hover[b-sec-historiaadmin],
.ha-foto__zona.is-arrastrando[b-sec-historiaadmin] {
    background: var(--ba-blue-50);
}

.ha-foto__zona.is-arrastrando[b-sec-historiaadmin] {
    border-color: var(--ba-primary);
}

.ha-foto__zona:focus-within[b-sec-historiaadmin],
.ha-foto__cambiar:focus-within[b-sec-historiaadmin] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: 2px;
}

/* InputFile es un componente: no recibe el atributo de alcance, va con ::deep.
   El input transparente cubre su zona: clic, teclado y arrastre son nativos. */
.ha-foto__zona[b-sec-historiaadmin]  .ha-foto__input,
.ha-foto__cambiar[b-sec-historiaadmin]  .ha-foto__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ha-foto__icono[b-sec-historiaadmin] {
    color: var(--ba-primary);
    stroke-width: 1.8;
}

.ha-foto__accion[b-sec-historiaadmin] {
    font-size: var(--ba-text-base);
    font-weight: 600;
    color: var(--ba-primary);
}

.ha-foto__actual[b-sec-historiaadmin] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3);
    padding: 0.625rem;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
}

.ha-foto__miniatura[b-sec-historiaadmin] {
    display: block;
    flex: none;
    width: 6rem;
    height: 4.5rem;
    object-fit: cover;
    background: var(--ba-surface-alt);
    border-radius: var(--ba-radius-sm);
}

.ha-foto__datos[b-sec-historiaadmin] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ha-foto__nombre[b-sec-historiaadmin] {
    overflow: hidden;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ha-foto__botones[b-sec-historiaadmin] {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--ba-space-1);
}

.ha-foto__cambiar[b-sec-historiaadmin] {
    position: relative;
    overflow: hidden;
}

.ha-foto__botones .ha-enlace-peligro[b-sec-historiaadmin] {
    height: 2rem;
    padding: 0 0.625rem;
}

/* ---- Publicada: etiqueta y casilla son un solo objetivo ---- */

.ha-publicada[b-sec-historiaadmin] {
    display: flex;
    align-items: flex-start;
    gap: var(--ba-space-3);
    padding: 0.875rem var(--ba-space-4);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    cursor: pointer;
}

.ha-publicada input[b-sec-historiaadmin] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.0625rem 0 0;
    accent-color: var(--ba-primary);
    cursor: pointer;
}

.ha-publicada__texto[b-sec-historiaadmin] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ha-publicada__nombre[b-sec-historiaadmin] {
    font-size: var(--ba-text-base);
    font-weight: 600;
}

/* ---- Aviso ---- */

.ha-aviso[b-sec-historiaadmin] {
    position: fixed;
    bottom: var(--ba-space-6);
    left: var(--ba-space-6);
    z-index: var(--ba-z-toast);
    display: flex;
    align-items: flex-start;
    gap: var(--ba-space-3);
    max-width: min(27.5rem, calc(100vw - 2 * var(--ba-space-4)));
    padding: 0.875rem var(--ba-space-4);
    font-size: var(--ba-text-sm);
    line-height: 1.45;
    border-radius: var(--ba-radius-md);
    box-shadow: var(--ba-shadow-md);
    animation: ha-aviso-entra-b-sec-historiaadmin var(--ba-duration-base) var(--ba-easing);
}

@keyframes ha-aviso-entra-b-sec-historiaadmin {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

.ha-aviso--exito[b-sec-historiaadmin] {
    color: var(--ba-surface);
    background: var(--ba-success-text);
}

.ha-aviso--advertencia[b-sec-historiaadmin] {
    color: var(--ba-warning-text);
    background: var(--ba-warning-bg);
}

.ha-aviso--error[b-sec-historiaadmin] {
    color: var(--ba-red-800);
    background: var(--ba-red-50);
}

.ha-aviso__texto[b-sec-historiaadmin] {
    flex: 1;
    font-weight: 500;
}

.ha-aviso__cerrar[b-sec-historiaadmin] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -0.375rem -0.5rem -0.375rem 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--ba-radius-sm);
    cursor: pointer;
}

/* ---- Responsive ---- */

@media (max-width: 767.98px) {
    /* Búsqueda arriba y pestañas pegadas a la línea; las pestañas se desplazan
       dentro de su fila, nunca la página (§6.1). */
    /* nowrap obligatorio: un flex en columna CON wrap mide cada línea por su
       hijo más ancho, y la fila de pestañas (sin cortes) estiraba la barra más
       allá de la pantalla en vez de desplazarse dentro de su propia fila. */
    .ha-barra[b-sec-historiaadmin] {
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--ba-space-3);
    }

    .ha-tabs[b-sec-historiaadmin] {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .ha-buscar[b-sec-historiaadmin] {
        width: 100%;
        margin: 0;
    }

    .ha-btn[b-sec-historiaadmin] {
        height: 2.75rem;
    }

    .ha-dr__cabecera[b-sec-historiaadmin],
    .ha-dr__cuerpo[b-sec-historiaadmin],
    .ha-dr__pie[b-sec-historiaadmin] {
        padding-inline: var(--ba-space-4);
    }

    .ha-aviso[b-sec-historiaadmin] {
        right: var(--ba-space-4);
        bottom: var(--ba-space-4);
        left: var(--ba-space-4);
    }
}

@media (min-width: 1024px) {
    .ha[b-sec-historiaadmin] {
        padding-inline: var(--ba-space-12);
    }
}

/* El combo de "Enlazar sucursal" ocupa el espacio que tenia el <select> en la fila. */
.ha-enlazar__combo[b-sec-historiaadmin] {
    flex: 1 1 14rem;
    min-width: 0;
}
/* ================================================================
   MenuMiCuenta.razor.css — Hub /Mi cuenta (mcd-* scoped)
   ================================================================ */

/* ── Shell ──────────────────────────────────────────────────────── */
.mcd-shell[b-sec-menumicuenta] {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--ba-space-8) var(--ba-space-4) var(--ba-space-20);
    transition: transform var(--ba-duration-base) var(--ba-easing),
                opacity var(--ba-duration-base) var(--ba-easing);
}

.mmcv2--siempre[b-sec-menumicuenta] {
    max-width: 100%;
    position: static;
}

/* Salida de navegación */
.mcd-shell--salida[b-sec-menumicuenta] {
    transform: translateX(-1.5rem);
    opacity: 0;
}

/* ── Header ─────────────────────────────────────────────────────── */
.mcd-header-inner[b-sec-menumicuenta] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-2);
}

.mcd-breadcrumb-row[b-sec-menumicuenta] {
    width: 100%;
    display: flex;
    align-items: center;
}

.mcd-header-text[b-sec-menumicuenta] {
    width: 100%;
    min-width: 0;
}

.mcd-title[b-sec-menumicuenta] {
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: left;
}

.mcd-sub[b-sec-menumicuenta] {
    margin-top: var(--ba-space-1);
    color: var(--ba-text-muted);
    max-width: 70%;
}

/* ── Profile card ───────────────────────────────────────────────── */
.mcd-card[b-sec-menumicuenta] {
    margin-top: var(--ba-space-8);
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    box-shadow: var(--ba-shadow-sm);
}

.mcd-summary[b-sec-menumicuenta] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-4);
    padding: var(--ba-space-6);
}

.mcd-avatar[b-sec-menumicuenta] {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--ba-radius-full);
    background: var(--ba-blue-50);
    color: var(--ba-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--ba-text-h3);
}

.mcd-summary-meta[b-sec-menumicuenta] {
    min-width: 0;
}

.mcd-summary-name[b-sec-menumicuenta] {
    font-size: var(--ba-text-base);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mcd-summary-mail[b-sec-menumicuenta] {
    color: var(--ba-text-muted);
    font-size: var(--ba-text-base);
    overflow-wrap: anywhere;
}

/* Rol entre el nombre y el correo, solo si no es generico (RolesBasicos del .razor):
   pintar "User" en cualquier cuenta nueva solo ensucia la linea de identidad. */
.mcd-summary-rol[b-sec-menumicuenta] {
    margin: var(--ba-space-1) 0 var(--ba-space-2);
    color: var(--ba-primary);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ── Skeleton ───────────────────────────────────────────────────── */
.mcd-skeleton[b-sec-menumicuenta] {
    background: var(--ba-border);
    border-radius: var(--ba-radius-sm);
    animation: mcd-pulse-b-sec-menumicuenta 1.4s ease-in-out infinite;
}

.mcd-skel-card[b-sec-menumicuenta] {
    margin-top: var(--ba-space-8);
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    box-shadow: var(--ba-shadow-sm);
}

.mcd-skel-nav[b-sec-menumicuenta] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
}

.mcd-skel-nav-item[b-sec-menumicuenta] {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 var(--ba-space-4);
    border-bottom: 1px solid var(--ba-border);
}

.mcd-skel-nav-item:last-child[b-sec-menumicuenta] {
    border-bottom: 0;
}

.mcd-skeleton--avatar[b-sec-menumicuenta] {
    width: 56px;
    height: 56px;
    border-radius: var(--ba-radius-full);
    flex: 0 0 auto;
}

.mcd-skeleton-lines[b-sec-menumicuenta] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-2);
}

.mcd-skeleton--line[b-sec-menumicuenta] {
    height: 1rem;
}

@keyframes mcd-pulse-b-sec-menumicuenta {
    50% { opacity: .5; }
}

.mcd-fadein[b-sec-menumicuenta] {
    animation: mcd-fadein-b-sec-menumicuenta 250ms var(--ba-easing) both;
}

@keyframes mcd-fadein-b-sec-menumicuenta {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Orders section ─────────────────────────────────────────────── */
.mcd-section-title[b-sec-menumicuenta] {
    font-size: var(--ba-text-base);
    font-weight: 700;
    line-height: 1.4;
}

.mcd-orders[b-sec-menumicuenta] {
    margin-top: var(--ba-space-8);
    padding-bottom: var(--ba-space-2);
}

.mcd-order-row[b-sec-menumicuenta] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3);
    padding: var(--ba-space-3) 0;
    border-bottom: 1px solid var(--ba-border);
}

.mcd-order-row:first-of-type[b-sec-menumicuenta] {
    border-top: 1px solid var(--ba-border);
}

.mcd-order-thumb[b-sec-menumicuenta] {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-surface-alt);
    overflow: hidden;
}

.mcd-order-thumb img[b-sec-menumicuenta] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mcd-order-info[b-sec-menumicuenta] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mcd-order-num[b-sec-menumicuenta] {
    font-weight: 600;
}

.mcd-order-meta[b-sec-menumicuenta] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.mcd-order-status[b-sec-menumicuenta] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ba-space-1);
}

.mcd-order-price[b-sec-menumicuenta] {
    font-weight: 600;
}

/* ── Badges ─────────────────────────────────────────────────────── */
.mcd-badge[b-sec-menumicuenta] {
    font-size: var(--ba-text-xs);
    font-weight: 600;
    padding: var(--ba-space-1) var(--ba-space-2);
    border-radius: var(--ba-radius-sm);
    white-space: nowrap;
}

.mcd-badge--entregada[b-sec-menumicuenta] {
    background: var(--ba-success-bg);
    color: var(--ba-success-text);
}

.mcd-badge--lista[b-sec-menumicuenta] {
    background: #FFF3CD;
    color: #664D03;
}

.mcd-badge--cancelada[b-sec-menumicuenta] {
    background: #F8D7DA;
    color: var(--ba-red-800);
}

/* ── Navigation links ───────────────────────────────────────────── */
.mcd-nav[b-sec-menumicuenta] {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
}

.mcd-nav-item[b-sec-menumicuenta] {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--ba-space-4);
    border-bottom: 1px solid var(--ba-border);
    color: var(--ba-text);
    text-decoration: none;
    font-family: inherit;
    font-size: var(--ba-text-base);
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--ba-duration-fast) var(--ba-easing);
}

.mcd-nav-item:last-child[b-sec-menumicuenta] {
    border-bottom: 0;
}

.mcd-nav-item:hover[b-sec-menumicuenta] {
    background: color-mix(in oklch, var(--ba-primary) 4%, var(--ba-surface));
}

.mcd-nav-item:active[b-sec-menumicuenta] {
    background: color-mix(in oklch, var(--ba-primary) 8%, var(--ba-surface));
}

.mcd-nav-item:focus-visible[b-sec-menumicuenta] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
    border-radius: var(--ba-radius-sm);
}

.mcd-nav-icon[b-sec-menumicuenta] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-blue-50);
    color: var(--ba-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcd-nav-icon svg[b-sec-menumicuenta] {
    width: 20px;
    height: 20px;
}

.mcd-nav-label[b-sec-menumicuenta] {
    flex: 1 1 auto;
}

.mcd-nav-chevron[b-sec-menumicuenta],
.mcd-nav-external[b-sec-menumicuenta] {
    flex: 0 0 auto;
    color: var(--ba-text-muted);
    width: 18px;
    height: 18px;
}

.mcd-nav-gap[b-sec-menumicuenta] {
    height: var(--ba-space-4);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.mcd-btn[b-sec-menumicuenta] {
    font-family: inherit;
    font-size: var(--ba-text-base);
    font-weight: 600;
    line-height: 1;
    min-height: 48px;
    padding: 0 var(--ba-space-4);
    border-radius: var(--ba-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    transition: background var(--ba-duration-fast) var(--ba-easing),
                border-color var(--ba-duration-fast) var(--ba-easing),
                color var(--ba-duration-fast) var(--ba-easing);
}

.mcd-btn--primary[b-sec-menumicuenta] {
    background: var(--ba-primary);
    color: #FFFFFF;
    border: 1px solid var(--ba-primary);
}

.mcd-btn--primary:hover[b-sec-menumicuenta] {
    background: var(--ba-primary-hover);
    border-color: var(--ba-primary-hover);
}

.mcd-btn--primary:active[b-sec-menumicuenta] {
    background: var(--ba-primary-dark);
    border-color: var(--ba-primary-dark);
}

.mcd-btn--primary:disabled[b-sec-menumicuenta] {
    opacity: .45;
    cursor: not-allowed;
    background: var(--ba-primary);
    border-color: var(--ba-primary);
}

.mcd-btn--secondary[b-sec-menumicuenta] {
    background: var(--ba-surface);
    color: var(--ba-primary);
    border: 1px solid var(--ba-primary);
}

/* Ambos botones comparten el ancho minimo: antes solo el primario lo tenia y
   Cancelar salia notoriamente mas angosto. */
.mcd-btn--primary[b-sec-menumicuenta],
.mcd-btn--secondary[b-sec-menumicuenta] {
    min-width: 10.5rem;
}

.mcd-btn--secondary:hover[b-sec-menumicuenta] {
    background: color-mix(in oklch, var(--ba-primary) 8%, var(--ba-surface));
}

.mcd-btn--secondary:active[b-sec-menumicuenta] {
    background: color-mix(in oklch, var(--ba-primary) 14%, var(--ba-surface));
}

.mcd-btn--primary:focus-visible[b-sec-menumicuenta],
.mcd-btn--secondary:focus-visible[b-sec-menumicuenta],
.mcd-iconbtn:focus-visible[b-sec-menumicuenta],
.mcd-eyebtn:focus-visible[b-sec-menumicuenta] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: 0;
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

.mcd-spinner[b-sec-menumicuenta] {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    border-radius: var(--ba-radius-full);
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #FFFFFF;
    animation: mcd-spin-b-sec-menumicuenta .7s linear infinite;
}

@keyframes mcd-spin-b-sec-menumicuenta {
    to { transform: rotate(360deg); }
}

/* ── Overlay y hoja lateral (drawers) ──────────────────────────── */
.mcd-overlay[b-sec-menumicuenta] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: var(--ba-z-overlay);
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: opacity var(--ba-duration-fast) var(--ba-easing),
                visibility 0s linear var(--ba-duration-fast);
}

.mcd-overlay.is-open[b-sec-menumicuenta] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--ba-duration-base) var(--ba-easing);
}

.mcd-drawer[b-sec-menumicuenta] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 420px);
    background: var(--ba-surface);
    z-index: var(--ba-z-modal);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--ba-duration-fast) var(--ba-easing),
                visibility 0s linear var(--ba-duration-fast);
}

.mcd-drawer.is-open[b-sec-menumicuenta] {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--ba-duration-base) var(--ba-easing);
}

.mcd-drawer-head[b-sec-menumicuenta] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3);
    padding: var(--ba-space-4) var(--ba-space-6);
    border-bottom: 1px solid var(--ba-border);
    flex: 0 0 auto;
}

.mcd-drawer-title[b-sec-menumicuenta] {
    font-size: var(--ba-text-h3);
    font-weight: 600;
    line-height: 1.3;
}

.mcd-iconbtn[b-sec-menumicuenta] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-surface);
    color: var(--ba-primary);
    cursor: pointer;
    transition: background var(--ba-duration-fast) var(--ba-easing);
}

.mcd-iconbtn:hover[b-sec-menumicuenta] {
    background: color-mix(in oklch, var(--ba-primary) 8%, var(--ba-surface));
}

.mcd-iconbtn:active[b-sec-menumicuenta] {
    background: color-mix(in oklch, var(--ba-primary) 14%, var(--ba-surface));
}

.mcd-iconbtn svg[b-sec-menumicuenta] {
    width: 20px;
    height: 20px;
}

.mcd-drawer-body[b-sec-menumicuenta] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--ba-space-6);
}

/* ── Form fields ────────────────────────────────────────────────── */
.mcd-form[b-sec-menumicuenta] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-6);
}

.mcd-field[b-sec-menumicuenta] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-1);
}

.mcd-label[b-sec-menumicuenta] {
    font-weight: 600;
    font-size: var(--ba-text-base);
}

.mcd-req[b-sec-menumicuenta] {
    color: var(--ba-red-800);
    font-weight: 600;
}

.mcd-help[b-sec-menumicuenta] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.mcd-inputwrap[b-sec-menumicuenta] {
    position: relative;
}

.mcd-input[b-sec-menumicuenta] {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--ba-space-4);
    font-family: inherit;
    font-size: var(--ba-text-base);
    color: var(--ba-text);
    background: var(--ba-surface);
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
    transition: border-color var(--ba-duration-fast) var(--ba-easing),
                box-shadow var(--ba-duration-fast) var(--ba-easing);
}

.mcd-input--toggle[b-sec-menumicuenta] {
    padding-right: 3.25rem;
}

.mcd-input:focus[b-sec-menumicuenta] {
    outline: none;
    border-color: var(--ba-primary);
    box-shadow: inset 0 0 0 1px var(--ba-primary);
}

.mcd-field.has-error .mcd-input[b-sec-menumicuenta] {
    border-color: var(--ba-red-800);
    box-shadow: inset 0 0 0 1px var(--ba-red-800);
}

.mcd-input--disabled[b-sec-menumicuenta] {
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
    cursor: not-allowed;
    opacity: .7;
}

.mcd-eyebtn[b-sec-menumicuenta] {
    position: absolute;
    right: var(--ba-space-1);
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--ba-radius-sm);
    color: var(--ba-text-muted);
    cursor: pointer;
    transition: color var(--ba-duration-fast) var(--ba-easing),
                background var(--ba-duration-fast) var(--ba-easing);
}

.mcd-eyebtn:hover[b-sec-menumicuenta] {
    color: var(--ba-primary);
    background: color-mix(in oklch, var(--ba-primary) 8%, var(--ba-surface));
}

.mcd-eyebtn svg[b-sec-menumicuenta] {
    width: 20px;
    height: 20px;
}

.mcd-eyebtn .mcd-eyeoff[b-sec-menumicuenta] {
    display: none;
}

.mcd-eyebtn[aria-pressed="true"] .mcd-eye[b-sec-menumicuenta] {
    display: none;
}

.mcd-eyebtn[aria-pressed="true"] .mcd-eyeoff[b-sec-menumicuenta] {
    display: block;
}

.mcd-error[b-sec-menumicuenta] {
    display: flex;
    align-items: flex-start;
    gap: var(--ba-space-1);
    font-size: var(--ba-text-sm);
    color: var(--ba-red-800);
}

.mcd-error svg[b-sec-menumicuenta] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
}

/* ── Checklist ──────────────────────────────────────────────────── */
.mcd-checklist[b-sec-menumicuenta] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ba-space-1) var(--ba-space-3);
    margin: var(--ba-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.mcd-checklist-item[b-sec-menumicuenta] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    transition: color var(--ba-duration-fast) var(--ba-easing);
}

.mcd-checklist-item.met[b-sec-menumicuenta] {
    color: var(--ba-success-text);
}

.mcd-sr[b-sec-menumicuenta] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

/* ── Seguridad: nota, medidor de fuerza, coincidencia ───────────── */
.mcd-form--pass[b-sec-menumicuenta] {
    padding-bottom: var(--ba-space-4);
}

.mcd-formnote[b-sec-menumicuenta] {
    display: flex;
    align-items: flex-start;
    gap: var(--ba-space-2);
    padding: var(--ba-space-3);
    font-size: var(--ba-text-sm);
    line-height: 1.5;
    color: var(--ba-text-muted);
    background: var(--ba-surface-alt);
    border-radius: var(--ba-radius-sm);
}

.mcd-formnote svg[b-sec-menumicuenta] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--ba-primary);
}

/* Caja de feedback: mismo patron que Register.razor (medidor + requisitos
   agrupados sobre superficie alterna), para que registrarse y cambiar la
   contrasena se vean igual. */
.mcd-pwfeedback[b-sec-menumicuenta] {
    margin-top: var(--ba-space-2);
    padding: var(--ba-space-3);
    background: var(--ba-surface-alt);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-sm);
}

.mcd-strength[b-sec-menumicuenta] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
}

.mcd-strength-bars[b-sec-menumicuenta] {
    display: flex;
    flex: 1 1 auto;
    gap: 4px;
}

.mcd-strength-bar[b-sec-menumicuenta] {
    flex: 1 1 0;
    height: 4px;
    border-radius: var(--ba-radius-lg);
    background: var(--ba-border);
    transition: background var(--ba-duration-fast) var(--ba-easing);
}

.mcd-strength-label[b-sec-menumicuenta] {
    flex: 0 0 auto;
    min-width: 4.5rem;
    text-align: right;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--ba-text-muted);
}

.mcd-strength--debil .mcd-strength-bar:nth-child(-n + 1)[b-sec-menumicuenta] {
    background: var(--ba-red-800);
}

.mcd-strength--media .mcd-strength-bar:nth-child(-n + 2)[b-sec-menumicuenta] {
    background: var(--ba-warning-text);
}

.mcd-strength--fuerte .mcd-strength-bar:nth-child(-n + 3)[b-sec-menumicuenta] {
    background: var(--ba-success);
}

.mcd-strength--muyfuerte .mcd-strength-bar[b-sec-menumicuenta] {
    background: var(--ba-success);
}

/* Circulo con palomita, como el registro: no es un control seleccionable
   porque vive dentro de una lista de requisitos, no de opciones. */
.mcd-req-circle[b-sec-menumicuenta] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border-radius: var(--ba-radius-full);
    border: 1px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
}

/* Confirmación en vivo: color + icono, nunca color solo. */
.mcd-match[b-sec-menumicuenta] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-1);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-success-text);
}

.mcd-match svg[b-sec-menumicuenta] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.mcd-field.is-match .mcd-input[b-sec-menumicuenta] {
    border-color: var(--ba-success);
}

/* ── Actions, success, logout ──────────────────────────────────── */
.mcd-actions[b-sec-menumicuenta] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ba-space-2);
    margin-top: var(--ba-space-2);
}

.mcd-actions .mcd-btn[b-sec-menumicuenta] {
    flex: 0 0 auto;
}

/* Pie fijo: las acciones no se pierden al hacer scroll del formulario. */
.mcd-actions--sticky[b-sec-menumicuenta] {
    position: sticky;
    bottom: 0;
    margin: var(--ba-space-2) calc(var(--ba-space-6) * -1) calc(var(--ba-space-6) * -1);
    padding: var(--ba-space-4) var(--ba-space-6);
    background: var(--ba-surface);
    border-top: 1px solid var(--ba-border);
}

.mcd-success[b-sec-menumicuenta] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-3);
}

.mcd-success-icon[b-sec-menumicuenta] {
    width: 56px;
    height: 56px;
    border-radius: var(--ba-radius-full);
    background: var(--ba-success-bg);
    color: var(--ba-success);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcd-success-icon svg[b-sec-menumicuenta] {
    width: 28px;
    height: 28px;
}

.mcd-success-title[b-sec-menumicuenta] {
    font-size: var(--ba-text-h3);
    font-weight: 600;
}

.mcd-success-note[b-sec-menumicuenta] {
    font-weight: 600;
}

.mcd-success p[b-sec-menumicuenta] {
    color: var(--ba-text-muted);
}

.mcd-success .mcd-btn[b-sec-menumicuenta] {
    margin-top: var(--ba-space-2);
}

.mcd-logout[b-sec-menumicuenta] {
    margin-top: var(--ba-space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ba-space-2);
    text-align: center;
}

.mcd-logout form[b-sec-menumicuenta] {
    display: block;
}

.mcd-logout-ask[b-sec-menumicuenta] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .mcd-shell[b-sec-menumicuenta] {
        max-width: 920px;
    }
}

@media (max-width: 767px) {
    .mcd-shell[b-sec-menumicuenta] {
        padding-top: var(--ba-space-6);
    }

    .mcd-sub[b-sec-menumicuenta] {
        max-width: 100%;
    }

    .mcd-card[b-sec-menumicuenta] {
        margin-top: var(--ba-space-6);
    }

    .mcd-drawer-body[b-sec-menumicuenta] {
        padding: var(--ba-space-6) var(--ba-space-4);
    }

    .mcd-drawer-head[b-sec-menumicuenta] {
        padding: var(--ba-space-4);
    }

    .mcd-actions[b-sec-menumicuenta] {
        justify-content: stretch;
    }

    /* El body móvil usa padding lateral space-4: el pie fijo debe sangrar igual. */
    .mcd-actions--sticky[b-sec-menumicuenta] {
        margin-left: calc(var(--ba-space-4) * -1);
        margin-right: calc(var(--ba-space-4) * -1);
        padding-left: var(--ba-space-4);
        padding-right: var(--ba-space-4);
    }

    .mcd-actions .mcd-btn[b-sec-menumicuenta] {
        flex: 1 1 0;
        min-width: 0;
    }
}
/* ============================================================
   Mis Pedidos (compras)
   Rehace según CONVENCIONES.md (referencia: VincularCuenta).
   Tokens según /wwwroot/css/tokens.css.
   ============================================================ */

@keyframes co-rise-b-sec-compras {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Shell desktop --- */
.co-shell[b-sec-compras] {
    display: flex;
    min-height: 100%;
    gap: 1rem;
}

.co-sidebar[b-sec-compras] {
    flex: 0 0 auto;
}

.co-main[b-sec-compras] {
    flex: 1;
    min-width: 0;
}

/* --- Header --- */
.co-header[b-sec-compras] {
    background: transparent;
    padding: 0 0 var(--ba-space-6);
    color: inherit;
}

.co-header-inner[b-sec-compras] {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-2);
}

/* Filas del header: breadcrumb y titulo ocupan todo el ancho */
.co-breadcrumb-row[b-sec-compras] {
    width: 100%;
    display: flex;
    align-items: center;
}

.co-header-text[b-sec-compras] {
    width: 100%;
    min-width: 0;
}

.co-header-title[b-sec-compras] {
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ba-text);
    margin: 0;
}

.co-header-sub[b-sec-compras] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    margin: var(--ba-space-1) 0 0;
    line-height: 1.5;
}

/* --- Contenido desktop --- */
.co-content[b-sec-compras] {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    padding: var(--ba-space-8) var(--ba-space-6) var(--ba-space-12);
    animation: co-rise-b-sec-compras 300ms var(--ba-easing) both;
}

/* Lista de pedidos — 1 tarjeta alargada por fila */
.co-order-list[b-sec-compras] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
}

/* Card de pedido — alargada horizontal, muestra más info de la orden */
.co-order-card[b-sec-compras] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    padding: var(--ba-space-6);
    display: flex;
    align-items: center;
    gap: var(--ba-space-6);
    cursor: pointer;
    transition: box-shadow var(--ba-duration-fast) var(--ba-easing),
                transform var(--ba-duration-fast) var(--ba-easing);
}

/* Fila grande clicable: levantado mas contenido (2 px) que las tarjetas de rejilla.
   El hover solo con cursor; en tactil responde :active. */
@media (hover: hover) {
    .co-order-card:hover[b-sec-compras] {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .08);
    }
}

.co-order-card:has(:focus-visible)[b-sec-compras] {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .08);
}

.co-order-card:active[b-sec-compras] {
    transform: translateY(-1px);
    box-shadow: var(--ba-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .co-order-card[b-sec-compras] { transition: none; }
    .co-order-card:hover[b-sec-compras],
    .co-order-card:has(:focus-visible)[b-sec-compras],
    .co-order-card:active[b-sec-compras] { transform: none; }
}

/* El chevron es hijo directo de la tarjeta (ver markup), no del aside: se pega
   al borde en vez de heredar el gap grande entre bloques de contenido. */
.co-order-card > .co-order-chevron[b-sec-compras] {
    margin-left: calc(var(--ba-space-6) * -1 + var(--ba-space-2));
}

/* Afordancia: la fila entera es clicable, así que el chevron reacciona al hover
   de la tarjeta en vez de quedarse inerte. */
.co-order-card:hover > .co-order-chevron[b-sec-compras] {
    opacity: 1;
    color: var(--ba-primary);
}

.co-order-minis[b-sec-compras] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.co-order-body[b-sec-compras] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-1);
}

.co-order-top[b-sec-compras] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3);
}

.co-order-number[b-sec-compras] {
    font-size: var(--ba-text-h3);
    font-weight: 700;
    color: var(--ba-text);
    line-height: 1.2;
    min-width: 0;
}

/* El nombre del producto es lo que hace reconocible un pedido en la lista, pero
   estaba en gris apagado y los metadatos (fecha, piezas, envío) en texto pleno:
   la jerarquía iba al revés. Se invierte el contraste entre ambos. */
.co-order-meta[b-sec-compras] {
    font-size: var(--ba-text-base);
    color: var(--ba-text);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-order-datos[b-sec-compras] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Separación mayor entre datos: sin separador visible, el gap ES el límite
       entre un dato y el siguiente. */
    gap: var(--ba-space-1) var(--ba-space-4);
    margin-top: 2px;
}

.co-order-dato[b-sec-compras] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-2);
}

/* La fecha ancla el pedido en el tiempo: es el primer dato que se busca al
   escanear, así que conserva el color de texto pleno. */
.co-order-dato--fecha[b-sec-compras] {
    color: var(--ba-text);
    font-variant-numeric: tabular-nums;
}

/* El aside se dimensionaba por su contenido, así que un método de pago largo
   ("Pago Contra Entrega / Tarjeta") ensanchaba la columna y movía la línea
   divisoria hacia la izquierda SOLO en esa tarjeta: la lista perdía su eje
   vertical. Ancho fijo = la división cae en el mismo sitio en todas las filas,
   y el texto largo se ajusta dentro en vez de empujar el layout. */
.co-order-aside[b-sec-compras] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ba-space-1);
    flex-shrink: 0;
    width: 168px;
    padding-left: var(--ba-space-6);
    border-left: 1px solid var(--ba-border);
    text-align: right;
}

.co-order-total-group[b-sec-compras] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}

/* "Total" es una etiqueta, no un dato: baja a tamaño de etiqueta y cede el peso
   a la cifra, que es lo que el usuario busca al escanear la columna. */
.co-order-total-label[b-sec-compras] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ba-text-muted);
}

.co-order-total[b-sec-compras] {
    font-size: var(--ba-text-h3);
    font-weight: 700;
    color: var(--ba-primary);
    line-height: 1.2;
    white-space: nowrap;
    /* Cifras de igual ancho: los totales quedan alineados entre tarjetas. */
    font-variant-numeric: tabular-nums;
}

/* El método de pago es dato secundario y puede ser largo. Se le permite usar
   dos líneas dentro del ancho fijo en vez de ensanchar la columna. */
.co-order-pago[b-sec-compras] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--ba-text-muted);
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Fuera del aside: el chevron indica "esta fila abre", así que se centra
   respecto a la tarjeta en vez de colgar bajo el método de pago. */
.co-order-chevron[b-sec-compras] {
    width: 20px;
    height: 20px;
    color: var(--ba-text);
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity var(--ba-duration-fast) var(--ba-easing),
                color var(--ba-duration-fast) var(--ba-easing);
}

/* --- Buscador por número de pedido --- */
.co-buscador[b-sec-compras] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3);
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    padding: 0 var(--ba-space-4);
    margin-bottom: var(--ba-space-6);
    min-height: 48px;
    transition: border-color var(--ba-duration-fast) var(--ba-easing),
                box-shadow var(--ba-duration-fast) var(--ba-easing);
}

.co-buscador:focus-within[b-sec-compras] {
    border-color: var(--ba-primary);
    box-shadow: 0 0 0 3px var(--ba-blue-50);
}

.co-buscador-icon[b-sec-compras] {
    width: 20px;
    height: 20px;
    color: var(--ba-text-muted);
    flex-shrink: 0;
}

.co-buscador-input[b-sec-compras] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
    color: var(--ba-text);
    line-height: 1.5;
    padding: var(--ba-space-3) 0;
}

.co-buscador-input[b-sec-compras]::placeholder {
    color: var(--ba-text-muted);
    opacity: 1;
}

.co-buscador-input[b-sec-compras]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.co-buscador-clear[b-sec-compras] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: var(--ba-radius-sm);
    color: var(--ba-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--ba-duration-fast) var(--ba-easing),
                color var(--ba-duration-fast) var(--ba-easing);
}

.co-buscador-clear:hover[b-sec-compras] {
    background: var(--ba-blue-50);
    color: var(--ba-text);
}

.co-buscador-clear svg[b-sec-compras] {
    width: 18px;
    height: 18px;
}

.co-buscador-spinner[b-sec-compras] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: co-buscador-spin-b-sec-compras 0.7s linear infinite;
    color: var(--ba-primary);
    flex-shrink: 0;
}

@keyframes co-buscador-spin-b-sec-compras {
    to {
        transform: rotate(360deg);
    }
}

/* --- Minis / avatares de productos --- */
.co-thumb[b-sec-compras] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--ba-radius-full);
    border: 1px solid var(--ba-border);
    background: var(--ba-surface);
    color: #fff;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
    text-decoration: none;
}

.co-thumb img[b-sec-compras] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ba-radius-full);
}

.co-thumb--overlap[b-sec-compras] {
    margin-left: -24px;
}

.co-thumb--more[b-sec-compras] {
    background: var(--ba-text);
    border-color: var(--ba-surface);
}

.co-thumb--sm[b-sec-compras] {
    width: 32px;
    height: 32px;
    font-size: 10px;
}

.co-thumb--overlap-sm[b-sec-compras] {
    margin-left: -12px;
}

/* --- Badge de estado ---
   Es un BADGE, no un chip: comunica estado y no es interactivo (un chip
   representa un valor o una acción, y al ser clicable invitaría a filtrar).
   El color va en el fondo, no solo en el texto: con fondo gris uniforme para
   los 8 estados, la columna se leía igual a distancia de escaneo. El texto
   siempre está presente, así que el color refuerza y nunca es el único
   indicador. Los pares fondo/texto son los de tokens.css, con su contraste
   ya verificado (7.9:1 info, 8.6:1 success, 7.06:1 warning). */
.co-badge[b-sec-compras] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    line-height: 1;
    font-size: 11px;
    font-weight: 600;
    /* Las mayúsculas vienen del .ToUpper() en el markup; el tracking evita que
       se lean apelmazadas a este tamaño. */
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: var(--ba-radius-lg);
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
    flex-shrink: 0;
}

/* Generada (0): aún no pasa nada, neutro a propósito — hereda el gris base. */

/* Pagada (1): confirmado, avanza. */
.co-badge--pagada[b-sec-compras] {
    background: var(--ba-blue-50);
    color: var(--ba-blue-700);
}

/* En preparación (2), Enviada (3) y Listo para entregar (9): en curso.
   Comparten familia igual que en Utils.ConvertEstadoOrdenToColor (los tres
   son Teal.Darken2 ahí); el texto del badge es lo que los distingue. */
.co-badge--curso[b-sec-compras] {
    background: var(--ba-info-bg);
    color: var(--ba-info-text);
}

/* Entregada (4): cerrado con éxito. */
.co-badge--entregada[b-sec-compras] {
    background: var(--ba-success-bg);
    color: var(--ba-success-text);
}

/* Cancelada (5): cerrado sin éxito. */
.co-badge--cancelada[b-sec-compras] {
    background: var(--ba-red-50);
    color: var(--ba-danger);
}

/* Devolución (6): requiere atención. */
.co-badge--devolucion[b-sec-compras] {
    background: var(--ba-warning-bg);
    color: var(--ba-warning-text);
}

/* --- Estado vacío --- */
.co-empty[b-sec-compras] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    padding: var(--ba-space-12) var(--ba-space-6);
    text-align: center;
    background: var(--ba-surface);
}

.co-empty-svg[b-sec-compras] {
    width: 48px;
    height: 48px;
    stroke: var(--ba-text-muted);
}

.co-empty-title[b-sec-compras] {
    font-size: var(--ba-text-h3);
    font-weight: 600;
    color: var(--ba-text);
    margin: 0;
}

.co-empty-sub[b-sec-compras] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    margin: 0;
}

/* --- Cargar más (sustituye la paginación) --- */
.co-cargar-mas[b-sec-compras] {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ba-space-2);
    padding: var(--ba-space-6) 0 var(--ba-space-4);
}

.co-cargar-mas > *[b-sec-compras] {
    margin-left: auto;
    margin-right: auto;
}

.co-btn-cargar-mas[b-sec-compras] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    min-height: 44px;
    padding: var(--ba-space-3) var(--ba-space-6);
    border: 1.5px solid var(--ba-primary);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface);
    color: var(--ba-primary);
    font-family: var(--ba-font-base);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition:
        background-color var(--ba-duration-fast) var(--ba-easing),
        color var(--ba-duration-fast) var(--ba-easing),
        box-shadow var(--ba-duration-fast) var(--ba-easing),
        transform var(--ba-duration-fast) var(--ba-easing);
}

.co-btn-cargar-mas:hover:not(:disabled)[b-sec-compras] {
    background: var(--ba-primary);
    color: var(--ba-surface);
    box-shadow: var(--ba-shadow-sm);
}

.co-btn-cargar-mas:active:not(:disabled)[b-sec-compras] {
    transform: scale(0.97);
}

.co-btn-cargar-mas:disabled[b-sec-compras] {
    opacity: 0.65;
    cursor: not-allowed;
}

.co-btn-cargar-mas:focus-visible[b-sec-compras] {
    outline: 2px solid var(--ba-focus-outer);
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

.co-btn-cargar-mas-chevron[b-sec-compras] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.co-btn-cargar-mas-spinner[b-sec-compras] {
    width: 16px;
    height: 16px;
    border-radius: var(--ba-radius-full);
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: co-cargar-mas-spin-b-sec-compras 0.7s linear infinite;
}

@keyframes co-cargar-mas-spin-b-sec-compras {
    to {
        transform: rotate(360deg);
    }
}

.co-cargar-mas-progreso[b-sec-compras] {
    width: 220px;
    max-width: 80%;
    height: 4px;
    border-radius: 2px;
    background: var(--ba-border);
    overflow: hidden;
}

.co-cargar-mas-barra[b-sec-compras] {
    min-width: 6px;
    height: 100%;
    background: var(--ba-primary);
    transition: width var(--ba-duration-fast) var(--ba-easing);
}

.co-cargar-mas-texto[b-sec-compras] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.co-cargar-mas-texto strong[b-sec-compras] {
    color: var(--ba-text);
    font-weight: 700;
}

/* --- Responsive --- */
@media screen and (max-width: 900px) {
    .co-header[b-sec-compras] {
        padding: var(--ba-space-6) var(--ba-space-4) var(--ba-space-5);
    }

    .co-content[b-sec-compras] {
        padding: var(--ba-space-5) var(--ba-space-4) var(--ba-space-8);
    }
}

@media screen and (max-width: 768px) {
    .co-header-title[b-sec-compras] {
        font-size: var(--ba-text-h2);
    }

    .co-header-inner[b-sec-compras] {
        gap: var(--ba-space-1);
    }

    .co-order-card[b-sec-compras] {
        padding: var(--ba-space-6);
        gap: var(--ba-space-4);
    }

    .co-order-aside[b-sec-compras] {
        padding-left: var(--ba-space-4);
    }
}

@media screen and (max-width: 600px) {
    .co-header-title[b-sec-compras] {
        font-size: var(--ba-text-h2);
    }

    /* Tarjeta apilada en móvil: minis + body en la misma fila (simetría,
       sin hueco en blanco a la derecha); el aside va en su propia fila abajo */
    .co-order-card[b-sec-compras] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--ba-space-4);
    }

    .co-order-minis[b-sec-compras] {
        flex-shrink: 0;
        align-self: center;
    }

    .co-order-body[b-sec-compras] {
        flex: 1;
        min-width: 0;
    }

    .co-order-top[b-sec-compras] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* En móvil el aside es una fila completa, así que el ancho fijo de escritorio
       (que existe para alinear la divisoria vertical) no aplica. */
    .co-order-aside[b-sec-compras] {
        flex-basis: 100%;
        width: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--ba-space-3);
        border-left: none;
        border-top: 1px dashed var(--ba-border);
        padding-left: 0;
        padding-top: var(--ba-space-3);
        text-align: left;
        flex-wrap: nowrap;
    }

    .co-order-total-group[b-sec-compras] {
        align-items: flex-start;
        flex-shrink: 0;
    }

    /* En una sola fila no hay alto para dos líneas: aquí sí se trunca. */
    .co-order-pago[b-sec-compras] {
        text-align: right;
        min-width: 0;
        display: block;
        -webkit-line-clamp: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* El chevron va después del aside en el DOM, y en móvil el aside ocupa la
       fila completa: sin reordenar, el chevron caería suelto bajo la divisoria.
       El aside pasa al final (order 1) y el chevron cierra la primera fila. */
    .co-order-aside[b-sec-compras] {
        order: 1;
    }

    .co-order-card > .co-order-chevron[b-sec-compras] {
        order: 0;
        align-self: flex-start;
        margin-left: 0;
        margin-top: var(--ba-space-1);
    }

    /* Minis en móvil: misma escala que co-thumb--sm */
    .co-thumb[b-sec-compras] {
        width: 32px;
        height: 32px;
        font-size: 10px;
    }

    .co-thumb--overlap[b-sec-compras] {
        margin-left: -12px;
    }

    .co-btn-cargar-mas[b-sec-compras] {
        width: 100%;
        max-width: 320px;
    }
}

@media screen and (max-width: 480px) {
    .co-header[b-sec-compras] {
        padding: var(--ba-space-5) var(--ba-space-4);
    }

    .co-header-title[b-sec-compras] {
        font-size: 1.25rem;
    }
}
/* ============================================================
   Vincular Cuenta
   - Estado SIN vincular: hero con gradiente de marca + guía de
     pasos + formulario (diseño v3).
   - Estado VINCULADO: iguala el snapshot cuenta-vinculada
     (header azul plano + card con banda de verificación,
     fila de identidad y grid de datos).
   Tokens según design-system/MASTER.md.
   ============================================================ */

@keyframes vc-rise-b-sec-vincularcuenta {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Shell desktop --- */
.vc-shell[b-sec-vincularcuenta] {
    display: flex;
    min-height: 100%;
    gap:1rem;
}

.vc-sidebar[b-sec-vincularcuenta] {
    flex: 0 0 auto;
}

.vc-main[b-sec-vincularcuenta] {
    flex: 1;
    min-width: 0;
}

.vc-breadcrumb-row[b-sec-vincularcuenta] {
    width: 100%;
    display: flex;
    align-items: center;
}

.vl-breadcrumb-row[b-sec-vincularcuenta] {
    width: 100%;
    display: flex;
    align-items: center;
}

/* ============================================================
   Hero del estado SIN vincular
   ============================================================ */
.vc-hero[b-sec-vincularcuenta] {
    position: relative;
    padding: 0 0 var(--ba-space-6);
}

.vc-hero[b-sec-vincularcuenta]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}

.vc-hero--empty[b-sec-vincularcuenta] {
    background: transparent;
}

.vc-hero-inner[b-sec-vincularcuenta] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-2);
    max-width: 720px;
    margin: 0 auto;
}

.vc-hero-badge[b-sec-vincularcuenta] {
    width: 56px;
    height: 56px;
    border-radius: var(--ba-radius-lg);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.vc-hero-badge--accent[b-sec-vincularcuenta] {
    background: rgba(6, 105, 249, 0.32);
    border-color: rgba(255, 255, 255, 0.28);
}

.vc-hero-text[b-sec-vincularcuenta] {
    flex: 1;
    min-width: 0;
}

.vc-hero-title[b-sec-vincularcuenta] {
    font-size: var(--ba-text-h1);
    font-weight: 700;
    color: var(--ba-text);
    line-height: 1.15;
    margin: 0 0 var(--ba-space-1);
    text-wrap: balance;
}

.vc-hero-sub[b-sec-vincularcuenta] {
    font-size: var(--ba-text-base);
    font-weight: 400;
    color: var(--ba-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ============================================================
   Contenido del estado SIN vincular
   ============================================================ */
.vc-content[b-sec-vincularcuenta] {
    padding: var(--ba-space-6) var(--ba-space-8) var(--ba-space-12);
    max-width: 720px;
    margin: 0 auto;
}

/* --- Guía de pasos con salida accionable (MASTER §8.6) --- */
.vc-guide[b-sec-vincularcuenta] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-lg);
    box-shadow: var(--ba-shadow-sm);
    padding: var(--ba-space-6);
    margin-bottom: var(--ba-space-6);
    animation: vc-rise-b-sec-vincularcuenta 300ms var(--ba-easing) both;
}

.vc-guide-title[b-sec-vincularcuenta] {
    font-size: var(--ba-text-h3);
    font-weight: 600;
    color: var(--ba-text);
    line-height: 1.2;
    margin: 0 0 var(--ba-space-4);
}

.vc-guide-list[b-sec-vincularcuenta] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.vc-guide-item[b-sec-vincularcuenta] {
    display: flex;
    align-items: flex-start;
    gap: var(--ba-space-3);
}

.vc-guide-step[b-sec-vincularcuenta] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--ba-radius-full);
    background: var(--ba-blue-50);
    color: var(--ba-primary);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vc-guide-text[b-sec-vincularcuenta] {
    margin: 0;
    font-size: var(--ba-text-base);
    line-height: 1.5;
    color: var(--ba-text);
    max-width: 55ch;
}

.vc-guide-actions[b-sec-vincularcuenta] {
    display: flex;
    margin-top: var(--ba-space-3);
}

/* --- Tarjeta de formulario --- */
.vc-form-card[b-sec-vincularcuenta] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-lg);
    box-shadow: var(--ba-shadow-md);
    padding: var(--ba-space-6);
    animation: vc-rise-b-sec-vincularcuenta 300ms var(--ba-easing) both;
}

.vc-form-head[b-sec-vincularcuenta] {
    display: flex;
    align-items: flex-start;
    gap: var(--ba-space-3);
    padding: var(--ba-space-4);
    background: var(--ba-surface-alt);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    margin-bottom: var(--ba-space-6);
}

.vc-form-lock[b-sec-vincularcuenta] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-blue-50);
    color: var(--ba-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vc-form-lock svg[b-sec-vincularcuenta] {
    width: 16px;
    height: 16px;
}

.vc-form-hint[b-sec-vincularcuenta] {
    margin: var(--ba-space-1) 0 0;
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    line-height: 1.5;
}

.vc-form[b-sec-vincularcuenta] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
}

.vc-field[b-sec-vincularcuenta] {
    width: 100%;
}

/* Deep overrides para MudTextField dentro del formulario */
.vc-form[b-sec-vincularcuenta]  .mud-input-outlined {
    background: var(--ba-surface);
    border-radius: var(--ba-radius-md);
    min-height: 48px;
}

.vc-form[b-sec-vincularcuenta]  .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--ba-radius-md);
}

.vc-form[b-sec-vincularcuenta]  .mud-input-outlined input {
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
}

.vc-form[b-sec-vincularcuenta]  .mud-input-outlined .mud-input-label {
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
}

.vc-form[b-sec-vincularcuenta]  .mud-input-outlined input::placeholder {
    color: var(--ba-text-muted);
    opacity: 1;
}

/* RFC se muestra en mayúsculas por estilo; el dato no se transforma (MASTER §4.9) */
.vc-form[b-sec-vincularcuenta]  .vc-field--rfc input {
    text-transform: uppercase;
}

/* ============================================================
   Botones unificados del estado SIN vincular (MASTER §7)
   ============================================================ */
.vc-btn[b-sec-vincularcuenta] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    padding: 0 var(--ba-space-5);
    min-height: 44px;
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--ba-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background var(--ba-duration-fast) var(--ba-easing),
        border-color var(--ba-duration-fast) var(--ba-easing),
        box-shadow var(--ba-duration-fast) var(--ba-easing),
        color var(--ba-duration-fast) var(--ba-easing);
}

.vc-btn:focus-visible[b-sec-vincularcuenta] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: 0;
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

.vc-btn:disabled[b-sec-vincularcuenta] {
    opacity: 0.55;
    cursor: not-allowed;
}

.vc-btn--primary[b-sec-vincularcuenta] {
    color: #ffffff;
    background: var(--ba-primary);
    border-color: var(--ba-primary);
    margin-top: var(--ba-space-6);
}

/* Ancho reservado para que el cambio a "Verificando" no mueva el botón */
.vc-form-card > .vc-btn--primary[b-sec-vincularcuenta] {
    min-width: 184px;
}

.vc-btn--primary:hover:not(:disabled)[b-sec-vincularcuenta] {
    background: var(--ba-primary-hover);
    border-color: var(--ba-primary-hover);
    box-shadow: var(--ba-shadow-sm);
}

.vc-btn--primary:active:not(:disabled)[b-sec-vincularcuenta] {
    background: var(--ba-blue-900);
    border-color: var(--ba-blue-900);
    box-shadow: none;
}

.vc-btn--secondary[b-sec-vincularcuenta] {
    color: var(--ba-primary);
    background: var(--ba-surface);
    border-color: var(--ba-primary);
}

.vc-btn--secondary:hover:not(:disabled)[b-sec-vincularcuenta] {
    background: var(--ba-blue-50);
    box-shadow: var(--ba-shadow-sm);
}

.vc-btn--secondary:active:not(:disabled)[b-sec-vincularcuenta] {
    color: var(--ba-primary-dark);
    box-shadow: none;
}

/* ============================================================
   Estado VINCULADO — snapshot cuenta-vinculada
   ============================================================ */
.vl-header[b-sec-vincularcuenta] {
    background: transparent;
    padding: 0 0 var(--ba-space-6);
    color: inherit;
}

.vl-header-inner[b-sec-vincularcuenta] {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-2);
}

.vl-header-text[b-sec-vincularcuenta] {
    width: 100%;
    min-width: 0;
}

.vl-header-title-row[b-sec-vincularcuenta] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    flex-wrap: wrap;
}

.vl-header-title[b-sec-vincularcuenta] {
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ba-text);
    margin: 0;
}

.vl-header-sub[b-sec-vincularcuenta] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    margin: var(--ba-space-1) 0 0;
    line-height: 1.5;
}

/* Badges compartidos */
.vl-badge[b-sec-vincularcuenta] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    line-height: 1;
}

.vl-badge svg[b-sec-vincularcuenta] {
    width: 12px;
    height: 12px;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.vl-badge--band[b-sec-vincularcuenta] {
    display: none;
    background: var(--ba-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: var(--ba-radius-sm);
}

.vl-badge--band svg[b-sec-vincularcuenta] {
    stroke: currentColor;
}

.vl-badge--verified[b-sec-vincularcuenta] {
    background: var(--ba-success-bg);
    color: var(--ba-success-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 12px;
    border-radius: var(--ba-radius-sm);
}

.vl-badge--verified svg[b-sec-vincularcuenta] {
    width: 13px;
    height: 13px;
    stroke: var(--ba-success);
}

/* Contenido principal */
.vl-main[b-sec-vincularcuenta] {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    padding: var(--ba-space-8) var(--ba-space-6) var(--ba-space-12);
    animation: vc-rise-b-sec-vincularcuenta 300ms var(--ba-easing) both;
}

/* Card */
.vl-card[b-sec-vincularcuenta] {
    background: var(--ba-surface);
    border-radius: var(--ba-radius-lg);
    box-shadow: var(--ba-shadow-sm);
    overflow: hidden;
}

.vl-card-status[b-sec-vincularcuenta] {
    padding: var(--ba-space-3) var(--ba-space-6);
    border-bottom: 1px solid var(--ba-border);
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    background: var(--ba-surface-alt);
}

.vl-card-body[b-sec-vincularcuenta] {
    padding: var(--ba-space-6);
}

/* Fila de identidad */
.vl-identity[b-sec-vincularcuenta] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-4);
    padding-bottom: var(--ba-space-6);
    border-bottom: 1px solid var(--ba-border);
    margin-bottom: var(--ba-space-6);
}

.vl-avatar[b-sec-vincularcuenta] {
    width: 52px;
    height: 52px;
    border-radius: var(--ba-radius-full);
    background: var(--ba-blue-50);
    border: 2px solid var(--ba-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ba-text-muted);
    flex-shrink: 0;
}

.vl-avatar svg[b-sec-vincularcuenta] {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.vl-identity-info[b-sec-vincularcuenta] {
    min-width: 0;
}

.vl-identity-value[b-sec-vincularcuenta] {
    font-size: var(--ba-text-h2);
    font-weight: 700;
    color: var(--ba-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Grid de datos */
.vl-grid[b-sec-vincularcuenta] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ba-space-6) var(--ba-space-8);
}

.vl-field[b-sec-vincularcuenta] {
    display: flex;
    align-items: flex-start;
    gap: var(--ba-space-3);
    min-width: 0;
}

.vl-field-icon[b-sec-vincularcuenta] {
    width: 36px;
    height: 36px;
    border-radius: var(--ba-radius-md);
    background: var(--ba-blue-50);
    color: var(--ba-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.vl-field-icon svg[b-sec-vincularcuenta] {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vl-field-content[b-sec-vincularcuenta] {
    min-width: 0;
    align-self: center;
}

/* Tipografía de campos */
.vl-label[b-sec-vincularcuenta] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ba-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    line-height: 1.3;
}

.vl-field-value[b-sec-vincularcuenta] {
    font-size: var(--ba-text-sm);
    font-weight: 500;
    color: var(--ba-text);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.vl-mono[b-sec-vincularcuenta] {
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: 'tnum' 1, 'zero' 1, 'ss02' 1;
}

/* Pie de card — acción */
.vl-card-footer[b-sec-vincularcuenta] {
    padding: var(--ba-space-4) var(--ba-space-6);
    border-top: 1px solid var(--ba-border);
    display: flex;
    justify-content: flex-end;
}

.vl-btn-desvincular[b-sec-vincularcuenta] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    min-width: 180px;
    background: transparent;
    color: var(--ba-text-muted);
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-md);
    padding: 0 16px;
    min-height: 44px;
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition:
        color var(--ba-duration-fast) var(--ba-easing),
        border-color var(--ba-duration-fast) var(--ba-easing),
        background var(--ba-duration-fast) var(--ba-easing);
}

.vl-btn-desvincular svg[b-sec-vincularcuenta] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.vl-btn-desvincular:hover:not(:disabled)[b-sec-vincularcuenta] {
    color: var(--ba-danger);
    border-color: var(--ba-danger);
    background: var(--ba-red-50);
}

.vl-btn-desvincular:active:not(:disabled)[b-sec-vincularcuenta] {
    background: var(--ba-red-50);
    border-color: var(--ba-red-800);
    color: var(--ba-red-800);
}

.vl-btn-desvincular:focus-visible[b-sec-vincularcuenta] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

.vl-btn-desvincular:disabled[b-sec-vincularcuenta] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============================================================
   Responsive
   ============================================================ */
@media screen and (max-width: 900px) {
    .vc-hero[b-sec-vincularcuenta] {
        padding: var(--ba-space-6) var(--ba-space-4) var(--ba-space-5);
    }

    .vc-content[b-sec-vincularcuenta] {
        padding: var(--ba-space-5) var(--ba-space-4) var(--ba-space-8);
    }
}

@media screen and (max-width: 600px) {
    .vc-hero[b-sec-vincularcuenta] {
        padding: var(--ba-space-5) var(--ba-space-4) var(--ba-space-4);
    }

    .vc-hero-badge[b-sec-vincularcuenta] {
        width: 48px;
        height: 48px;
    }

    .vc-hero-badge svg[b-sec-vincularcuenta] {
        width: 22px;
        height: 22px;
    }

    .vc-hero-title[b-sec-vincularcuenta] {
        font-size: var(--ba-text-h2);
    }

    .vc-hero-sub[b-sec-vincularcuenta] {
        font-size: var(--ba-text-sm);
    }

    .vc-content[b-sec-vincularcuenta] {
        padding: var(--ba-space-4) var(--ba-space-4) var(--ba-space-6);
    }

    .vc-form-card[b-sec-vincularcuenta] {
        padding: var(--ba-space-4);
    }

    .vc-guide[b-sec-vincularcuenta] {
        padding: var(--ba-space-5);
    }

    .vc-guide-text[b-sec-vincularcuenta] {
        font-size: var(--ba-text-sm);
    }

    .vc-guide-actions .vc-btn[b-sec-vincularcuenta],
    .vc-btn--primary[b-sec-vincularcuenta] {
        width: 100%;
    }
}

/* Estado vinculado — snapshot */
@media screen and (max-width: 768px) {
    .vl-header[b-sec-vincularcuenta] {
        padding: var(--ba-space-6) var(--ba-space-4);
    }

    .vl-header-inner[b-sec-vincularcuenta] {
        gap: var(--ba-space-3);
    }

    .vl-header-title[b-sec-vincularcuenta] {
        font-size: var(--ba-text-h2);
    }

    .vl-main[b-sec-vincularcuenta] {
        padding: var(--ba-space-6) var(--ba-space-4) var(--ba-space-8);
    }

    .vl-card-body[b-sec-vincularcuenta] {
        padding: var(--ba-space-4);
    }

    .vl-card-status[b-sec-vincularcuenta] {
        padding: var(--ba-space-3) var(--ba-space-4);
    }

    .vl-card-footer[b-sec-vincularcuenta] {
        padding: var(--ba-space-4);
    }

    .vl-identity[b-sec-vincularcuenta] {
        flex-wrap: wrap;
        gap: var(--ba-space-3);
        padding-bottom: var(--ba-space-4);
        margin-bottom: var(--ba-space-4);
    }

    .vl-identity-info[b-sec-vincularcuenta] {
        flex: 1;
        min-width: 0;
    }

    /* El badge sale de la fila en móvil y queda en su propia línea,
       alineado a la izquierda sobre el borde de la fila identidad */
    .vl-badge--verified[b-sec-vincularcuenta] {
        flex-basis: 100%;
        align-self: flex-start;
    }

    .vl-avatar[b-sec-vincularcuenta] {
        width: 44px;
        height: 44px;
    }

    .vl-avatar svg[b-sec-vincularcuenta] {
        width: 22px;
        height: 22px;
    }

    .vl-identity-value[b-sec-vincularcuenta] {
        font-size: var(--ba-text-h3);
    }

    .vl-grid[b-sec-vincularcuenta] {
        grid-template-columns: 1fr;
        gap: var(--ba-space-5);
    }

    .vl-field-icon[b-sec-vincularcuenta] {
        width: 32px;
        height: 32px;
    }

    .vl-field-icon svg[b-sec-vincularcuenta] {
        width: 16px;
        height: 16px;
    }
}

@media screen and (max-width: 480px) {
    .vl-header[b-sec-vincularcuenta] {
        padding: var(--ba-space-5) var(--ba-space-4);
    }

    .vl-header-title-row[b-sec-vincularcuenta] {
        gap: var(--ba-space-1);
    }

    .vl-header-title[b-sec-vincularcuenta] {
        font-size: 1.25rem;
    }

    .vl-badge--band[b-sec-vincularcuenta] {
        font-size: 10px;
        padding: 2px 8px;
    }

    .vl-main[b-sec-vincularcuenta] {
        padding: var(--ba-space-4) var(--ba-space-4) var(--ba-space-6);
    }

    .vl-card-body[b-sec-vincularcuenta] {
        padding: var(--ba-space-3);
    }

    .vl-identity[b-sec-vincularcuenta] {
        gap: var(--ba-space-2);
    }

    .vl-identity-value[b-sec-vincularcuenta] {
        font-size: 1.125rem;
    }

    .vl-badge--verified[b-sec-vincularcuenta] {
        align-self: flex-start;
    }
}
/* ============================================================
   Detalle de pedido -- mismo lenguaje visual que el checkout
   (CarritoCompra/checkout.css): tarjetas blancas con borde decorativo y
   radio 8px, titulos de bloque, chips, lista de productos con miniatura,
   resumen con total en azul y botones de 48px. Todo con tokens --ba-*.
   Estructura de pagina de /Cuenta segun CONVENCIONESMiCuenta.md.
   ============================================================ */

@keyframes odp-rise-b-sec-pedidobadetalle {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes odpPulse-b-sec-pedidobadetalle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ---------- Shell ---------- */
.odp-shell[b-sec-pedidobadetalle] {
    display: flex;
    min-height: 100%;
    gap: 1rem;
}

.odp-sidebar[b-sec-pedidobadetalle] {
    flex: 0 0 auto;
}

.odp-main[b-sec-pedidobadetalle] {
    flex: 1;
    min-width: 0;
}

/* ---------- Header ---------- */
.odp-header[b-sec-pedidobadetalle] {
    background: transparent;
    padding: 0 0 var(--ba-space-6);
    color: inherit;
}

/* 1120px y no los 960 de la convencion: con dos columnas (datos | resumen de
   480px en el checkout, 400px aqui) 960 dejaba las tarjetas angostas. */
.odp-header-inner[b-sec-pedidobadetalle] {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-2);
}

.odp-breadcrumb-row[b-sec-pedidobadetalle] {
    width: 100%;
}

.odp-header-text[b-sec-pedidobadetalle] {
    width: 100%;
    min-width: 0;
}

.odp-header-title[b-sec-pedidobadetalle] {
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ba-text);
    margin: 0;
}

/* ---------- Contenido ---------- */
.odp-content[b-sec-pedidobadetalle] {
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
    padding: var(--ba-space-6) var(--ba-space-4) var(--ba-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
    animation: odp-rise-b-sec-pedidobadetalle var(--ba-duration-fast) var(--ba-easing) both;
}

.odp-alert[b-sec-pedidobadetalle] {
    background: var(--ba-warning-bg);
    border: 1px solid var(--ba-warning-text);
    border-radius: var(--ba-radius-md);
    color: var(--ba-warning-text);
    padding: var(--ba-space-5) var(--ba-space-6);
    font-size: var(--ba-text-base);
    line-height: 1.5;
}

/* Cifras tabulares y cero barrado en importes, folios y claves (MASTER §4.3). */
.odp-tnum[b-sec-pedidobadetalle] {
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Texto solo para lectores de pantalla (los iconos de los chips son decorativos). */
.odp-sr[b-sec-pedidobadetalle] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Timeline / stepper ---------- */
.odp-stepper-card[b-sec-pedidobadetalle] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    padding: var(--ba-space-6) var(--ba-space-4) var(--ba-space-4);
    max-width: 100%;
}

.odp-stepper-wrap[b-sec-pedidobadetalle] {
    position: relative;
    padding: 0 var(--ba-space-4);
}

.odp-stepper-line[b-sec-pedidobadetalle] {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ba-border);
}

.odp-stepper-line-fill[b-sec-pedidobadetalle] {
    height: 100%;
    background: var(--ba-primary);
    transition: width var(--ba-duration-fast) var(--ba-easing);
}

.odp-stepper-row[b-sec-pedidobadetalle] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    z-index: 1;
}

.odp-step-item[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* 40px, como los circulos del stepper del checkout. */
.odp-step-circle[b-sec-pedidobadetalle] {
    width: 40px;
    height: 40px;
    border-radius: var(--ba-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
}

/* Hecho = azul de marca con palomita (antes verde): mismo codigo que el checkout. */
.odp-step-circle--done[b-sec-pedidobadetalle] {
    background: var(--ba-primary);
}

.odp-step-circle--current[b-sec-pedidobadetalle] {
    background: var(--ba-primary);
    animation: odpPulse-b-sec-pedidobadetalle 1.5s ease-in-out infinite;
}

.odp-step-circle--pending[b-sec-pedidobadetalle] {
    background: var(--ba-surface);
    border: 2px solid var(--ba-border);
}

.odp-step-circle--cancelled[b-sec-pedidobadetalle] {
    background: var(--ba-red-800);
}

.odp-step-dot[b-sec-pedidobadetalle] {
    width: 12px;
    height: 12px;
    border-radius: var(--ba-radius-full);
    background: var(--ba-surface);
}

.odp-step-label[b-sec-pedidobadetalle] {
    margin-top: var(--ba-space-2);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-primary);
    text-align: center;
    max-width: 112px;
    line-height: 1.3;
}

.odp-step-label--pending[b-sec-pedidobadetalle] {
    color: var(--ba-text-muted);
    font-weight: 500;
}

.odp-step-date[b-sec-pedidobadetalle] {
    margin-top: var(--ba-space-1);
    font-size: var(--ba-text-xs);
    font-weight: 500;
    color: var(--ba-text-muted);
    text-align: center;
    line-height: 1.4;
    max-width: 112px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Rejilla: datos | resumen ---------- */
.odp-grid[b-sec-pedidobadetalle] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--ba-space-4);
    align-items: start;
}

.odp-col[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
    min-width: 0;
}

/* El resumen se queda a la vista mientras se recorre la lista de la izquierda. */
.odp-aside[b-sec-pedidobadetalle] {
    position: sticky;
    top: var(--ba-space-4);
    min-width: 0;
}

/* ---------- Bloque (tarjeta) ---------- */
.odp-bloque[b-sec-pedidobadetalle] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    padding: var(--ba-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.odp-bloque__titulo[b-sec-pedidobadetalle] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ba-text);
    line-height: 1.3;
}

/* ---------- Entrega ---------- */
.odp-metodo[b-sec-pedidobadetalle] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-2);
    color: var(--ba-primary);
    font-size: var(--ba-text-sm);
    font-weight: 600;
}

.odp-direccion[b-sec-pedidobadetalle] {
    font-size: var(--ba-text-base);
    line-height: 1.5;
    color: var(--ba-text);
    overflow-wrap: anywhere;
}

/* ---------- Chips ---------- */
.odp-chips[b-sec-pedidobadetalle] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ba-space-2);
}

.odp-chip[b-sec-pedidobadetalle] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-1);
    padding: var(--ba-space-1) var(--ba-space-3);
    border-radius: 999px;
    background: var(--ba-surface-alt);
    color: var(--ba-text);
    font-size: var(--ba-text-sm);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.odp-chip svg[b-sec-pedidobadetalle] {
    flex: none;
    color: var(--ba-text-muted);
}

/* La fecha es el dato que mas importa del bloque: azul sutil. */
.odp-chip--fecha[b-sec-pedidobadetalle] {
    background: var(--ba-blue-50);
    color: var(--ba-primary);
    font-weight: 600;
}

.odp-chip--fecha svg[b-sec-pedidobadetalle] {
    color: var(--ba-primary);
}

/* Estados: pares fondo/texto con contraste AA (tokens.css), siempre con icono + texto. */
.odp-chip--exito[b-sec-pedidobadetalle] { background: var(--ba-success-bg); color: var(--ba-success-text); font-weight: 600; }
.odp-chip--advertencia[b-sec-pedidobadetalle] { background: var(--ba-warning-bg); color: var(--ba-warning-text); font-weight: 600; }
.odp-chip--peligro[b-sec-pedidobadetalle] { background: var(--ba-red-50); color: var(--ba-red-800); font-weight: 600; }
.odp-chip--info[b-sec-pedidobadetalle] { background: var(--ba-info-bg); color: var(--ba-info-text); font-weight: 600; }
.odp-chip--exito svg[b-sec-pedidobadetalle],
.odp-chip--advertencia svg[b-sec-pedidobadetalle],
.odp-chip--peligro svg[b-sec-pedidobadetalle],
.odp-chip--info svg[b-sec-pedidobadetalle] {
    color: currentColor;
}

/* Datos clave/valor (paqueteria, facturacion, cancelacion). */
.odp-datos[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
    margin: var(--ba-space-1) 0 0;
    padding-top: var(--ba-space-3);
    border-top: 1px solid var(--ba-border);
}

.odp-datos dt[b-sec-pedidobadetalle] {
    font-size: var(--ba-text-sm);
    font-weight: 400;
    color: var(--ba-text-muted);
}

.odp-datos dd[b-sec-pedidobadetalle] {
    margin: 2px 0 0;
    font-size: var(--ba-text-base);
    font-weight: 600;
    color: var(--ba-text);
    overflow-wrap: anywhere;
}

.odp-tracking[b-sec-pedidobadetalle] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
}

/* Boton de icono: area activa de 44px aunque el icono mida menos. */
.odp-copy-btn[b-sec-pedidobadetalle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px 0;
    padding: 0;
    border: 0;
    border-radius: var(--ba-radius-sm);
    background: transparent;
    color: var(--ba-text-muted);
    cursor: pointer;
}

.odp-copy-btn:hover[b-sec-pedidobadetalle] {
    color: var(--ba-primary);
}

.odp-copy-btn:focus-visible[b-sec-pedidobadetalle],
.odp-btn:focus-visible[b-sec-pedidobadetalle],
.odp-producto__nombre:focus-visible[b-sec-pedidobadetalle] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: 0;
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

/* ---------- Productos ---------- */
.odp-productos[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.odp-producto[b-sec-pedidobadetalle] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-4);
    padding: var(--ba-space-3) 0;
}

.odp-producto + .odp-producto[b-sec-pedidobadetalle] {
    border-top: 1px solid var(--ba-border);
}

.odp-producto__img-enlace[b-sec-pedidobadetalle] {
    flex: none;
    display: block;
}

.odp-producto__img[b-sec-pedidobadetalle] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
    display: block;
}

.odp-producto__texto[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-1);
    flex: 1;
    min-width: 0;
}

.odp-producto__nombre[b-sec-pedidobadetalle] {
    font-size: var(--ba-text-base);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ba-text);
    text-decoration: none;
    overflow-wrap: anywhere;
    border-radius: var(--ba-radius-sm);
}

.odp-producto__nombre:hover[b-sec-pedidobadetalle] {
    color: var(--ba-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.odp-chips-fila[b-sec-pedidobadetalle] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ba-space-2);
}

/* Mismos chips de marca/SKU que la tarjeta del carrito. */
.odp-chip-meta[b-sec-pedidobadetalle] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--ba-space-2);
    border-radius: var(--ba-radius-sm);
    background: var(--ba-surface-alt);
    border: 1px solid var(--ba-border);
    color: var(--ba-text-muted);
    font-size: var(--ba-text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.odp-producto__cifras[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ba-space-1);
    flex: none;
}

.odp-producto__precio[b-sec-pedidobadetalle] {
    font-size: var(--ba-text-base);
    font-weight: 700;
    color: var(--ba-primary);
}

.odp-producto__cantidad[b-sec-pedidobadetalle] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

/* ---------- Forma de pago ---------- */
.odp-pago[b-sec-pedidobadetalle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-4);
}

.odp-pago__texto[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.odp-pago__metodo[b-sec-pedidobadetalle] {
    font-size: 18px;
    font-weight: 600;
    color: var(--ba-text);
}

.odp-pago__detalle[b-sec-pedidobadetalle] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.odp-pago__logo[b-sec-pedidobadetalle] {
    height: 24px;
    width: auto;
    max-width: 128px;
    object-fit: contain;
    flex: none;
}

/* ---------- Cancelacion ---------- */
.odp-cancelada[b-sec-pedidobadetalle] {
    background: var(--ba-red-50);
    border: 1px solid var(--ba-red-800);
    border-radius: var(--ba-radius-md);
    padding: var(--ba-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.odp-cancelada__titulo[b-sec-pedidobadetalle] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ba-red-800);
}

.odp-cancelada .odp-datos[b-sec-pedidobadetalle] {
    border-top-color: var(--ba-red-800);
}

.odp-vacio[b-sec-pedidobadetalle] {
    margin: var(--ba-space-6) 0;
    text-align: center;
    font-size: var(--ba-text-base);
    color: var(--ba-text-muted);
}

/* ---------- Resumen ---------- */
.odp-resumen__cab[b-sec-pedidobadetalle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ba-space-2);
}

.odp-filas[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
    margin: 0;
}

.odp-fila[b-sec-pedidobadetalle] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ba-space-3);
    font-size: var(--ba-text-base);
    color: var(--ba-text);
}

.odp-fila dt[b-sec-pedidobadetalle],
.odp-fila dd[b-sec-pedidobadetalle] {
    margin: 0;
}

/* Bootstrap pone <dt> en negritas (700): las etiquetas del resumen van en texto normal. */
.odp-fila dt[b-sec-pedidobadetalle] {
    font-weight: 400;
}

.odp-fila dd[b-sec-pedidobadetalle] {
    font-weight: 500;
}

.odp-total[b-sec-pedidobadetalle] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--ba-space-3);
    border-top: 1px solid var(--ba-border);
    font-size: 24px;
    font-weight: 700;
    color: var(--ba-primary);
}

.odp-estado-pago[b-sec-pedidobadetalle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3);
}

.odp-estado-pago__k[b-sec-pedidobadetalle] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

/* ---------- Botones (48px, radio 4px, una sola accion principal) ---------- */
.odp-acciones[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.odp-peligro[b-sec-pedidobadetalle] {
    display: flex;
    flex-direction: column;
    /* Separada de las demas acciones: la destructiva nunca queda pegada a la principal. */
    margin-top: var(--ba-space-2);
    padding-top: var(--ba-space-4);
    border-top: 1px solid var(--ba-border);
}

.odp-btn[b-sec-pedidobadetalle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--ba-radius-sm);
    border: 1px solid transparent;
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    transition: background-color var(--ba-duration-fast) var(--ba-easing),
                border-color var(--ba-duration-fast) var(--ba-easing);
}

.odp-btn:disabled[b-sec-pedidobadetalle] {
    opacity: .45;
    cursor: not-allowed;
}

.odp-btn--primario[b-sec-pedidobadetalle] {
    background: var(--ba-primary);
    color: #fff;
}

.odp-btn--primario:hover:not(:disabled)[b-sec-pedidobadetalle] {
    background: var(--ba-primary-hover);
}

.odp-btn--primario:active:not(:disabled)[b-sec-pedidobadetalle] {
    background: var(--ba-primary-dark);
}

.odp-btn--contorno[b-sec-pedidobadetalle] {
    background: var(--ba-surface);
    border-color: var(--ba-primary);
    color: var(--ba-primary);
}

.odp-btn--contorno:hover:not(:disabled)[b-sec-pedidobadetalle] {
    background: var(--ba-blue-50);
}

/* Rojo funcional (#B30B19), no el de marca: el de marca se lee como promocion. */
.odp-btn--peligro[b-sec-pedidobadetalle] {
    background: var(--ba-surface);
    border-color: var(--ba-red-800);
    color: var(--ba-red-800);
}

.odp-btn--peligro:hover:not(:disabled)[b-sec-pedidobadetalle] {
    background: var(--ba-red-50);
}

.odp-btn--sm[b-sec-pedidobadetalle] {
    min-height: 40px;
    width: auto;
    padding: 0 var(--ba-space-4);
}

.odp-ayuda[b-sec-pedidobadetalle] {
    margin: 0;
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    line-height: 1.4;
}

/* ---------- Responsivo ---------- */
@media screen and (max-width: 1000px) {
    .odp-grid[b-sec-pedidobadetalle] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* En una sola columna el resumen va debajo y deja de pegarse. */
    .odp-aside[b-sec-pedidobadetalle] {
        position: static;
    }
}

@media screen and (max-width: 900px) {
    .odp-header-inner[b-sec-pedidobadetalle],
    .odp-content[b-sec-pedidobadetalle] {
        max-width: 100%;
    }

    .odp-content[b-sec-pedidobadetalle] {
        padding-right: var(--ba-space-4);
        padding-left: var(--ba-space-4);
    }
}

@media screen and (max-width: 768px) {
    .odp-header-title[b-sec-pedidobadetalle] {
        font-size: var(--ba-text-h2);
    }
}

@media screen and (max-width: 600px) {
    .odp-header[b-sec-pedidobadetalle] {
        padding: 0 0 var(--ba-space-5);
    }

    .odp-header-title[b-sec-pedidobadetalle] {
        font-size: var(--ba-text-h2);
    }

    .odp-content[b-sec-pedidobadetalle] {
        padding: var(--ba-space-5) var(--ba-space-3) var(--ba-space-8);
        gap: var(--ba-space-3);
    }

    .odp-bloque[b-sec-pedidobadetalle],
    .odp-cancelada[b-sec-pedidobadetalle] {
        padding: var(--ba-space-4);
    }

    .odp-stepper-card[b-sec-pedidobadetalle] {
        padding: var(--ba-space-4) var(--ba-space-2) var(--ba-space-3);
    }

    .odp-stepper-wrap[b-sec-pedidobadetalle] {
        padding: 0 var(--ba-space-1);
    }

    .odp-stepper-line[b-sec-pedidobadetalle] {
        top: 16px;
    }

    .odp-step-circle[b-sec-pedidobadetalle] {
        width: 32px;
        height: 32px;
    }

    .odp-step-dot[b-sec-pedidobadetalle] {
        width: 10px;
        height: 10px;
    }

    .odp-step-label[b-sec-pedidobadetalle] {
        font-size: var(--ba-text-xs);
        max-width: 64px;
    }

    .odp-step-date[b-sec-pedidobadetalle] {
        max-width: 64px;
    }

    .odp-pago[b-sec-pedidobadetalle] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media screen and (max-width: 480px) {
    .odp-header-title[b-sec-pedidobadetalle] {
        font-size: 1.25rem;
    }

    .odp-total[b-sec-pedidobadetalle] {
        font-size: var(--ba-text-h3);
    }

    /* La cifra baja bajo el nombre para que el nombre no quede en una columna angosta. */
    .odp-producto[b-sec-pedidobadetalle] {
        flex-wrap: wrap;
    }

    .odp-producto__cifras[b-sec-pedidobadetalle] {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        width: 100%;
    }
}
/* ==========================================================================
   Cancelación / devolución de orden: panel lateral embebido en
   PedidoBADetalle.

   MASTER.md manda: paleta y tipografía salen de tokens.css, nunca literales.
   El marco del panel (fixed a la derecha, overlay, head, body con scroll y
   pie fijo) lo resuelve wwwroot/css/pedidos-ba.css para .ba-ppb-panel; aquí
   sólo se ajusta lo propio de esta pantalla.
   ========================================================================== */

/* ---------- Panel lateral ------------------------------------------------ */

/* Dos ajustes sobre el panel de 780px que trae pedidos-ba.css:
   1. La devolución necesita más ancho que el detalle de orden: motivo +
      detalle + cantidad no caben en 780px sin scroll horizontal.
   2. Radzen lee estas variables de sus campos; MASTER §8.3 exige 16px de texto
      y 48px de alto. En las celdas de la tabla 48px se vive mejor en 44px: es
      el mínimo táctil y la fila no crece. */
.ba-cdo-panel[b-sec-cancelaciondevolucionordenba] {
  width: min(1024px, 100vw);
  color: var(--ba-text);
  font-size: var(--ba-text-base);

  --rz-input-font-size: var(--ba-text-base);
  --rz-input-height: 3rem;
  --rz-body-font-size: var(--ba-text-base);
  --rz-border-radius: var(--ba-radius-sm);
  --rz-grid-cell-padding: var(--ba-space-2) var(--ba-space-3);
}

/* Sólo para lectores de pantalla: el esqueleto y los badges decorativos
   no aportan nada a la vista. */
.ba-cdo-sr[b-sec-cancelaciondevolucionordenba] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Encabezado de la vista -------------------------------------- */

.ba-cdo-head[b-sec-cancelaciondevolucionordenba] { display: flex; flex-direction: column; gap: var(--ba-space-1); }

.ba-cdo-eyebrow[b-sec-cancelaciondevolucionordenba] {
  margin: 0;
  font-size: var(--ba-text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ba-text-muted);
}

.ba-cdo-titulo[b-sec-cancelaciondevolucionordenba] {
  margin: 4px 0 0;
  font-size: var(--ba-text-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ba-text);
  text-wrap: balance;
}

/* ---------- Campos ------------------------------------------------------- */

.ba-cdo-campo[b-sec-cancelaciondevolucionordenba] { display: flex; flex-direction: column; gap: 6px; }

.ba-cdo-label[b-sec-cancelaciondevolucionordenba] {
  font-size: var(--ba-text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ba-text-muted);
}

.ba-cdo-ayuda[b-sec-cancelaciondevolucionordenba] {
  margin: 0;
  font-size: var(--ba-text-sm);
  line-height: 1.4;
  color: var(--ba-text-muted);
}

/* Los validadores de Radzen se posicionaban con style="position: relative" en
   línea; aquí baja al flujo para que el mensaje quede pegado al campo y no se
   monte sobre la etiqueta de abajo. */
.ba-cdo-campo[b-sec-cancelaciondevolucionordenba]  .rz-validation-message {
  position: static;
  margin: 0;
  font-size: var(--ba-text-sm);
  color: var(--ba-danger);
}

/* ---------- Pie de acciones ---------------------------------------------- */

/* .ba-ppb-panel-body ya hace de contenedor con scroll y .ba-ppb-panel-footer
   de pie fijo: aquí no hace falta position:sticky. El pie se apila cuando lleva
   una confirmación abierta, porque la pregunta y los dos botones no caben en
   una línea. */
.ba-cdo-pie[b-sec-cancelaciondevolucionordenba] { flex-direction: column; align-items: stretch; gap: var(--ba-space-3); }

.ba-cdo-pie-bloque[b-sec-cancelaciondevolucionordenba] { display: flex; flex-direction: column; }

.ba-cdo-pie-acciones[b-sec-cancelaciondevolucionordenba] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ba-space-3); }

.ba-banda-outline[b-sec-cancelaciondevolucionordenba] {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ba-space-2);
  padding: 0 var(--ba-space-4);
  font-family: inherit;
  font-size: var(--ba-text-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ba-blue-700);
  background: var(--ba-surface);
  border: 1px solid var(--ba-blue-700);
  border-radius: var(--ba-radius-sm);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.ba-banda-outline:hover:not(:disabled)[b-sec-cancelaciondevolucionordenba] { background: var(--ba-blue-50); }
.ba-banda-outline:active:not(:disabled)[b-sec-cancelaciondevolucionordenba] { background: var(--ba-blue-50); color: var(--ba-blue-900); }

.ba-banda-outline:focus-visible[b-sec-cancelaciondevolucionordenba] {
  outline: 2px solid var(--ba-focus-outer);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

.ba-banda-outline:disabled[b-sec-cancelaciondevolucionordenba] {
  color: var(--ba-text-muted);
  background: var(--ba-surface-alt);
  border-color: var(--ba-border);
  cursor: not-allowed;
}

/* Acción principal no destructiva: reintentar, cerrar, cerrar tras el éxito.
   Misma anatomía que las dos anteriores y distinto relleno; MASTER §7.2 pide
   jerarquía por relleno, no por color. */
.ba-banda-primario[b-sec-cancelaciondevolucionordenba] {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ba-space-2);
  padding: 0 20px;
  font-family: inherit;
  font-size: var(--ba-text-base);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: var(--ba-blue-700);
  border: 1px solid var(--ba-blue-700);
  border-radius: var(--ba-radius-sm);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.ba-banda-primario:hover:not(:disabled)[b-sec-cancelaciondevolucionordenba] { background: var(--ba-blue-800); border-color: var(--ba-blue-800); }
.ba-banda-primario:active:not(:disabled)[b-sec-cancelaciondevolucionordenba] { background: var(--ba-blue-900); border-color: var(--ba-blue-900); }

.ba-banda-primario:focus-visible[b-sec-cancelaciondevolucionordenba] {
  outline: 2px solid var(--ba-focus-outer);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

.ba-banda-primario:disabled[b-sec-cancelaciondevolucionordenba] {
  color: var(--ba-text-muted);
  background: var(--ba-surface-alt);
  border-color: var(--ba-border);
  cursor: not-allowed;
}

/* Acción principal. Es destructiva en los tres flujos (cancelar por cliente,
   cancelar por personal, solicitar devolución), así que el relleno va en
   --ba-red-800 y no en el azul de marca (MASTER §7.6). El hover sube a
   --ba-red-700; para el estado presionado la escala de rojo no trae un tono
   más oscuro, así que se oscurece el mismo token con filter en vez de
   escribir un color suelto. */
.ba-banda-peligro[b-sec-cancelaciondevolucionordenba] {
  position: relative;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-family: inherit;
  font-size: var(--ba-text-base);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: var(--ba-red-800);
  border: 1px solid var(--ba-red-800);
  border-radius: var(--ba-radius-sm);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.ba-banda-peligro:hover:not(:disabled)[b-sec-cancelaciondevolucionordenba] { background: var(--ba-red-700); border-color: var(--ba-red-700); }
.ba-banda-peligro:active:not(:disabled)[b-sec-cancelaciondevolucionordenba] { background: var(--ba-red-800); border-color: var(--ba-red-800); filter: brightness(.9); }

.ba-banda-peligro:focus-visible[b-sec-cancelaciondevolucionordenba] {
  outline: 2px solid var(--ba-focus-outer);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

.ba-banda-peligro:disabled[b-sec-cancelaciondevolucionordenba] {
  color: var(--ba-text-muted);
  background: var(--ba-surface-alt);
  border-color: var(--ba-border);
  cursor: not-allowed;
}

/* Cargando: el texto queda en el flujo con visibility:hidden en vez de
   desaparecer, así el botón conserva su ancho (MASTER §7.4) y sólo el anillo
   gira. Se anima transform, no color. */
.ba-banda-peligro .ba-cdo-spinner[b-sec-cancelaciondevolucionordenba] {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid var(--ba-focus-inner);
  border-top-color: transparent;
  border-radius: var(--ba-radius-full);
  animation: ba-cdo-gira-b-sec-cancelaciondevolucionordenba .8s linear infinite;
}

.ba-banda-peligro.ba-cdo-cargando .ba-cdo-spinner[b-sec-cancelaciondevolucionordenba] { display: block; }
.ba-banda-peligro.ba-cdo-cargando .ba-cdo-btn-texto[b-sec-cancelaciondevolucionordenba] { visibility: hidden; }

@keyframes ba-cdo-gira-b-sec-cancelaciondevolucionordenba {
  to { transform: rotate(360deg); }
}

/* ---------- Datos de la orden y avisos ----------------------------------- */

.ba-cdo-orden[b-sec-cancelaciondevolucionordenba] { display: flex; flex-wrap: wrap; gap: var(--ba-space-2); }

.ba-cdo-dato[b-sec-cancelaciondevolucionordenba] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ba-text-sm);
  color: var(--ba-text-muted);
}

.ba-cdo-dato-v[b-sec-cancelaciondevolucionordenba] {
  font-weight: 600;
  color: var(--ba-text);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'zero' 1, 'ss02' 1;
}

.ba-cdo-banda[b-sec-cancelaciondevolucionordenba] {
  display: flex;
  gap: var(--ba-space-2);
  padding: 12px 14px;
  border-radius: var(--ba-radius-md);
  font-size: var(--ba-text-sm);
  line-height: 1.45;
  text-wrap: pretty;
}

.ba-cdo-banda--peligro[b-sec-cancelaciondevolucionordenba] { background: var(--ba-red-50); color: var(--ba-danger); }
.ba-cdo-banda--info[b-sec-cancelaciondevolucionordenba] { background: var(--ba-info-bg); color: var(--ba-info-text); }
.ba-cdo-banda--aviso[b-sec-cancelaciondevolucionordenba] { background: var(--ba-warning-bg); color: var(--ba-warning-text); }
.ba-cdo-banda--exito[b-sec-cancelaciondevolucionordenba] { background: var(--ba-success-bg); color: var(--ba-success-text); }
.ba-cdo-banda--error[b-sec-cancelaciondevolucionordenba] { background: var(--ba-red-50); color: var(--ba-danger); }
.ba-cdo-banda p[b-sec-cancelaciondevolucionordenba] { margin: 0; }

/* Contador de avance de la devolución. */
.ba-cdo-chip[b-sec-cancelaciondevolucionordenba] {
  background: var(--ba-blue-50);
  color: var(--ba-blue-900);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'zero' 1, 'ss02' 1;
}

/* ---------- Estados: cargando, vacío, error (MASTER §8.6) ---------------- */

.ba-cdo-estado[b-sec-cancelaciondevolucionordenba] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ba-space-3);
  padding: var(--ba-space-8) var(--ba-space-6);
  text-align: center;
}

.ba-cdo-estado-titulo[b-sec-cancelaciondevolucionordenba] { margin: 0; font-size: var(--ba-text-h3); font-weight: 600; text-wrap: balance; }

.ba-cdo-estado-texto[b-sec-cancelaciondevolucionordenba] {
  margin: 0;
  max-width: 46ch;
  font-size: var(--ba-text-base);
  line-height: 1.5;
  color: var(--ba-text-muted);
  text-wrap: pretty;
}

.ba-cdo-esq[b-sec-cancelaciondevolucionordenba] { display: flex; flex-direction: column; gap: var(--ba-space-2); width: 100%; }

.ba-cdo-esq-barra[b-sec-cancelaciondevolucionordenba] {
  height: 48px;
  border-radius: var(--ba-radius-sm);
  background: var(--ba-surface-alt);
  animation: ba-cdo-pulso-b-sec-cancelaciondevolucionordenba 1.2s ease-in-out infinite;
}

.ba-cdo-esq-barra--corta[b-sec-cancelaciondevolucionordenba] { height: 14px; width: 40%; }
.ba-cdo-esq-barra--alta[b-sec-cancelaciondevolucionordenba] { height: 80px; }

@keyframes ba-cdo-pulso-b-sec-cancelaciondevolucionordenba {
  50% { opacity: .55; }
}

/* ---------- Listado de productos a devolver ------------------------------ */

/* Código de parte: es el dato que el usuario tiene a la mano cuando va a
   empacar la caja, así que encabeza la fila con cifras tabulares, cero
   barrado y marcado como no traducible (MASTER §4.3). */
.ba-cdo-sku[b-sec-cancelaciondevolucionordenba] {
  font-family: var(--ba-font-base);
  font-size: var(--ba-text-sm);
  font-weight: 600;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'zero' 1, 'ss02' 1;
  color: var(--ba-text);
}

.ba-cdo-prod[b-sec-cancelaciondevolucionordenba] { display: flex; align-items: center; gap: var(--ba-space-3); }

.ba-cdo-prod-img[b-sec-cancelaciondevolucionordenba] {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--ba-radius-sm);
  object-fit: contain;
  background: var(--ba-surface-alt);
}

.ba-cdo-prod-txt[b-sec-cancelaciondevolucionordenba] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ba-cdo-prod-nombre[b-sec-cancelaciondevolucionordenba] {
  font-size: var(--ba-text-sm);
  line-height: 1.35;
  color: var(--ba-text);
  overflow-wrap: anywhere;
}

.ba-cdo-prod-disp[b-sec-cancelaciondevolucionordenba] {
  font-size: var(--ba-text-xs);
  color: var(--ba-text-muted);
  font-variant-numeric: tabular-nums;
}

.ba-cdo-detalle[b-sec-cancelaciondevolucionordenba] {
  font-size: var(--ba-text-sm);
  line-height: 1.4;
  color: var(--ba-text);
  overflow-wrap: anywhere;
}

.ba-cdo-detalle--vacio[b-sec-cancelaciondevolucionordenba] { color: var(--ba-text-muted); }

/* Los botones de editar / guardar / descartar viven dentro de la celda; se
   les da el mínimo táctil de 44px con un área pulsable cuadrada. */
.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-cell {
  font-size: var(--ba-text-sm);
  vertical-align: middle;
}

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-cell[data-title]::before {
  display: none;
}

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-data-grid-data tr td,
.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-data-grid-data tr th {
  white-space: normal;
}

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-data-grid-data .rz-cell {
  color: var(--ba-text);
}

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-data-grid-data .rz-cell .rz-textbox,
.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-data-grid-data .rz-cell .rz-dropdown {
  font-size: var(--ba-text-sm);
}

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-data-grid-data .rz-cell .rz-textbox {
  height: 44px;
}

/* Los editores de la fila se estiran a la celda; el botón de acción se queda
   en su ancho mínimo táctil. */
.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-cell .rz-dropdown,
.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-cell .rz-numeric,
.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-cell .rz-textbox { width: 100%; }

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-data-grid-data tr:hover .rz-cell {
  background: var(--ba-surface-alt);
}

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-data-grid-data .rz-cell .rz-state-invalid {
  border-color: var(--ba-danger);
}

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-data-grid-data .rz-cell .rz-state-invalid:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ba-danger);
}

.ba-cdo-grid[b-sec-cancelaciondevolucionordenba]  .rz-paginator {
  font-size: var(--ba-text-sm);
}

/* En móvil los dos botones del pie se apilan y la acción principal toma el
   ancho completo (MASTER §7.6). */
@media (max-width: 768px) {
  .ba-cdo-panel[b-sec-cancelaciondevolucionordenba] { left: 0; width: auto; }

  .ba-cdo-pie-acciones[b-sec-cancelaciondevolucionordenba] { flex-direction: column-reverse; align-items: stretch; }

  .ba-banda-outline[b-sec-cancelaciondevolucionordenba],
  .ba-banda-primario[b-sec-cancelaciondevolucionordenba],
  .ba-banda-peligro[b-sec-cancelaciondevolucionordenba] { width: 100%; }

  .ba-cdo-estado[b-sec-cancelaciondevolucionordenba] { padding: var(--ba-space-6) var(--ba-space-4); }
}
.direcciones-page[b-sec-direccionentrega] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--ba-space-8) var(--ba-space-4);
    animation: de-rise-b-sec-direccionentrega 300ms var(--ba-easing) both;
}

@keyframes de-rise-b-sec-direccionentrega {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.direcciones-header[b-sec-direccionentrega] {
    margin-bottom: var(--ba-space-6);
}

.direcciones-header__title[b-sec-direccionentrega] {
    font-size: var(--ba-text-h1);
    font-weight: 700;
    color: var(--ba-text);
    line-height: 1.2;
}

/* Banda de cabecera — misma forma que .vl-header de VincularCuenta */
.de-header[b-sec-direccionentrega] {
    width: 100%;
    background: transparent;
    padding: 0 0 var(--ba-space-6);
    color: inherit;
}

.de-header-inner[b-sec-direccionentrega] {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-2);
}

.de-breadcrumb-row[b-sec-direccionentrega] {
    width: 100%;
    display: flex;
    align-items: center;
}

.de-header-text[b-sec-direccionentrega] {
    width: 100%;
    min-width: 0;
}

.de-header-title[b-sec-direccionentrega] {
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ba-text);
    margin: 0;
}

.de-header-sub[b-sec-direccionentrega] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    margin: var(--ba-space-1) 0 0;
    line-height: 1.5;
}

/* Estado vacio */
.direcciones-empty[b-sec-direccionentrega] {
    background: var(--ba-surface);
    border: 1px dashed var(--ba-border);
    border-radius: var(--ba-radius-lg);
    padding: var(--ba-space-8);
    text-align: center;
    color: var(--ba-text-muted);
    margin-bottom: var(--ba-space-6);
}

.direcciones-empty p[b-sec-direccionentrega] {
    margin: 0;
    font-size: var(--ba-text-base);
}

/* Lista de direcciones */
.direcciones-list[b-sec-direccionentrega] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
    margin-bottom: var(--ba-space-6);
}

/* Tarjeta de direccion */
.direccion-card[b-sec-direccionentrega] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-lg);
    padding: var(--ba-space-4) var(--ba-space-6);
    position: relative;
    transition: box-shadow var(--ba-duration-fast) var(--ba-easing);
}

.direccion-card:hover[b-sec-direccionentrega] {
    box-shadow: var(--ba-shadow-md);
}

.direccion-card--default[b-sec-direccionentrega] {
    border-color: var(--ba-accent);
    border-width: 2px;
    background: linear-gradient(135deg, var(--ba-surface) 0%, #f0f6ff 100%);
}

.direccion-card__badge[b-sec-direccionentrega] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-1);
    font-size: var(--ba-text-xs);
    font-weight: 600;
    color: var(--ba-accent);
    background: var(--ba-blue-50);
    padding: var(--ba-space-1) var(--ba-space-2);
    border-radius: var(--ba-radius-md);
    margin-bottom: var(--ba-space-2);
}

.direccion-card__badge svg[b-sec-direccionentrega] {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.direccion-card__header[b-sec-direccionentrega] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ba-space-3);
    margin-bottom: var(--ba-space-2);
}

.direccion-card__street[b-sec-direccionentrega] {
    font-size: var(--ba-text-base);
    font-weight: 700;
    color: var(--ba-text);
    line-height: 1.3;
}

.direccion-card__menu-wrap[b-sec-direccionentrega] {
    position: relative;
    flex-shrink: 0;
}

.direccion-card__menu[b-sec-direccionentrega] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--ba-radius-md);
    cursor: pointer;
    color: var(--ba-text-muted);
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

.direccion-card__menu:hover[b-sec-direccionentrega] {
    background: var(--ba-blue-50);
}

.direccion-card__menu svg[b-sec-direccionentrega] {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.direccion-card__dropdown[b-sec-direccionentrega] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    padding: var(--ba-space-1);
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    box-shadow: var(--ba-shadow-md);
    z-index: var(--ba-z-dropdown);
}

.direccion-card__dropdown-item[b-sec-direccionentrega] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    width: 100%;
    padding: var(--ba-space-2) var(--ba-space-3);
    background: none;
    border: none;
    border-radius: var(--ba-radius-sm);
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-sm);
    color: var(--ba-text);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

.direccion-card__dropdown-item:hover[b-sec-direccionentrega] {
    background: var(--ba-blue-50);
}

.direccion-card__dropdown-item svg[b-sec-direccionentrega] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
}

.direccion-card__dropdown-item--danger[b-sec-direccionentrega] {
    color: var(--ba-danger);
}

.direccion-card__dropdown-item:disabled[b-sec-direccionentrega] {
    color: var(--ba-text-muted);
    cursor: not-allowed;
    opacity: .6;
}

.direccion-card__dropdown-item:disabled:hover[b-sec-direccionentrega] {
    background: none;
}

.direccion-card__location[b-sec-direccionentrega] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text);
    margin-bottom: var(--ba-space-3);
}

.direccion-card__contact[b-sec-direccionentrega] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    margin-bottom: var(--ba-space-3);
}

.direccion-card__add-info[b-sec-direccionentrega] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-2);
    padding: 0;
    background: none;
    border: none;
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-accent);
    cursor: pointer;
    transition: color var(--ba-duration-fast) var(--ba-easing);
}

.direccion-card__add-info:hover[b-sec-direccionentrega] {
    color: var(--ba-accent-hover);
}

.direccion-card__add-info svg[b-sec-direccionentrega] {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.direccion-card__extra[b-sec-direccionentrega] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-1);
    margin-top: var(--ba-space-3);
    padding-top: var(--ba-space-3);
    border-top: 1px solid var(--ba-border);
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.direccion-card__extra p[b-sec-direccionentrega] {
    margin: 0;
}

.direccion-card__extra span[b-sec-direccionentrega] {
    font-weight: 600;
    color: var(--ba-text);
}

/* Boton agregar */
.direcciones-add-btn[b-sec-direccionentrega] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    width: 100%;
    padding: var(--ba-space-4);
    font-size: var(--ba-text-base);
    font-weight: 600;
    font-family: var(--ba-font-base);
    color: var(--ba-accent);
    background-color: var(--ba-blue-50);
    border: none;
    border-radius: var(--ba-radius-lg);
    cursor: pointer;
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

.direcciones-add-btn:hover[b-sec-direccionentrega] {
    background-color: #e3eaf3;
}

.direcciones-add-btn svg[b-sec-direccionentrega] {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Responsive */
@media (max-width: 768px) {
    .de-header[b-sec-direccionentrega] {
        padding: var(--ba-space-6) var(--ba-space-4);
    }

    .de-header-inner[b-sec-direccionentrega] {
        gap: var(--ba-space-3);
    }

    .de-header-title[b-sec-direccionentrega] {
        font-size: var(--ba-text-h2);
    }
}

@media (max-width: 600px) {
    .direcciones-page[b-sec-direccionentrega] {
        padding: var(--ba-space-4) var(--ba-space-3);
    }

    .direcciones-header__title[b-sec-direccionentrega] {
        font-size: var(--ba-text-h2);
    }

    .de-header[b-sec-direccionentrega] {
        padding: var(--ba-space-5) var(--ba-space-3);
    }

    .de-header-title[b-sec-direccionentrega] {
        font-size: 1.25rem;
    }

    .direccion-card[b-sec-direccionentrega] {
        padding: var(--ba-space-3) var(--ba-space-4);
    }
}
/* ============================================================
   Mis Favoritos (ProductosFavoritosUsuario)
   Rehace según CONVENCIONES.md (referencia: VincularCuenta / Compras).
   Tokens según /wwwroot/css/tokens.css.
   ============================================================ */

@keyframes fav-rise-b-sec-productosfavoritosusuario {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Shell desktop --- */
.fav-shell[b-sec-productosfavoritosusuario] {
    display: flex;
    min-height: 100%;
    gap: 1rem;
}

.fav-sidebar[b-sec-productosfavoritosusuario] {
    flex: 0 0 auto;
}

.fav-main[b-sec-productosfavoritosusuario] {
    flex: 1;
    min-width: 0;
}

/* --- Header desktop --- */
.fav-header[b-sec-productosfavoritosusuario] {
    background: transparent;
    padding: 0 0 var(--ba-space-6);
    color: inherit;
}

.fav-header-inner[b-sec-productosfavoritosusuario] {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-2);
}

.fav-breadcrumb-row[b-sec-productosfavoritosusuario] {
    width: 100%;
    display: flex;
    align-items: center;
}

.fav-header-text[b-sec-productosfavoritosusuario] {
    width: 100%;
    min-width: 0;
}

.fav-header-title[b-sec-productosfavoritosusuario] {
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ba-text);
    margin: 0;
}

.fav-header-sub[b-sec-productosfavoritosusuario] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    margin: var(--ba-space-1) 0 0;
    line-height: 1.5;
}

/* --- Contenido desktop --- */
.fav-content[b-sec-productosfavoritosusuario] {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    padding: var(--ba-space-8) var(--ba-space-6) var(--ba-space-12);
    animation: fav-rise-b-sec-productosfavoritosusuario 300ms var(--ba-easing) both;
}

/* --- Item de favorito: contenedor relativo para el botón eliminar --- */
.fav-item[b-sec-productosfavoritosusuario] {
    position: relative;
    margin-bottom: var(--ba-space-4);
}

.fav-item-del[b-sec-productosfavoritosusuario] {
    position: absolute;
    bottom: var(--ba-space-3);
    right: var(--ba-space-3);
    z-index: var(--ba-z-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--ba-radius-full);
    background: var(--ba-surface);
    color: var(--ba-danger);
    cursor: pointer;
    box-shadow: var(--ba-shadow-sm);
    transition: background var(--ba-duration-fast) var(--ba-easing),
                color var(--ba-duration-fast) var(--ba-easing),
                box-shadow var(--ba-duration-fast) var(--ba-easing);
}

.fav-item-del svg[b-sec-productosfavoritosusuario] {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fav-item-del:hover[b-sec-productosfavoritosusuario] {
    background: var(--ba-red-50);
    color: var(--ba-danger);
    box-shadow: var(--ba-shadow-md);
}

.fav-item-del:focus-visible[b-sec-productosfavoritosusuario] {
    outline: 2px solid var(--ba-focus-outer);
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

/* --- Estado vacío --- */
.fav-empty[b-sec-productosfavoritosusuario] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    padding: var(--ba-space-12) var(--ba-space-6);
    text-align: center;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
}

.fav-empty-svg[b-sec-productosfavoritosusuario] {
    width: 48px;
    height: 48px;
    stroke: var(--ba-text-muted);
}

.fav-empty-title[b-sec-productosfavoritosusuario] {
    font-size: var(--ba-text-h3);
    font-weight: 600;
    color: var(--ba-text);
    margin: 0;
}

.fav-empty-sub[b-sec-productosfavoritosusuario] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    margin: 0;
}

/* --- Cargar más (sustituye la paginación) --- */
.fav-cargar-mas[b-sec-productosfavoritosusuario] {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ba-space-2);
    padding: var(--ba-space-6) 0 var(--ba-space-4);
}

.fav-cargar-mas > *[b-sec-productosfavoritosusuario] {
    margin-left: auto;
    margin-right: auto;
}

.fav-btn-cargar-mas[b-sec-productosfavoritosusuario] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    min-height: 44px;
    padding: var(--ba-space-3) var(--ba-space-6);
    border: 1.5px solid var(--ba-primary);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface);
    color: var(--ba-primary);
    font-family: var(--ba-font-base);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition:
        background-color var(--ba-duration-fast) var(--ba-easing),
        color var(--ba-duration-fast) var(--ba-easing),
        box-shadow var(--ba-duration-fast) var(--ba-easing),
        transform var(--ba-duration-fast) var(--ba-easing);
}

.fav-btn-cargar-mas:hover:not(:disabled)[b-sec-productosfavoritosusuario] {
    background: var(--ba-primary);
    color: var(--ba-surface);
    box-shadow: var(--ba-shadow-sm);
}

.fav-btn-cargar-mas:active:not(:disabled)[b-sec-productosfavoritosusuario] {
    transform: scale(0.97);
}

.fav-btn-cargar-mas:disabled[b-sec-productosfavoritosusuario] {
    opacity: 0.65;
    cursor: not-allowed;
}

.fav-btn-cargar-mas:focus-visible[b-sec-productosfavoritosusuario] {
    outline: 2px solid var(--ba-focus-outer);
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

.fav-btn-cargar-mas-chevron[b-sec-productosfavoritosusuario] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.fav-btn-cargar-mas-spinner[b-sec-productosfavoritosusuario] {
    width: 16px;
    height: 16px;
    border-radius: var(--ba-radius-full);
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: fav-cargar-mas-spin-b-sec-productosfavoritosusuario 0.7s linear infinite;
}

@keyframes fav-cargar-mas-spin-b-sec-productosfavoritosusuario {
    to {
        transform: rotate(360deg);
    }
}

.fav-cargar-mas-progreso[b-sec-productosfavoritosusuario] {
    width: 220px;
    max-width: 80%;
    height: 4px;
    border-radius: 2px;
    background: var(--ba-border);
    overflow: hidden;
}

.fav-cargar-mas-barra[b-sec-productosfavoritosusuario] {
    min-width: 6px;
    height: 100%;
    background: var(--ba-primary);
    transition: width var(--ba-duration-fast) var(--ba-easing);
}

.fav-cargar-mas-texto[b-sec-productosfavoritosusuario] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.fav-cargar-mas-texto strong[b-sec-productosfavoritosusuario] {
    color: var(--ba-text);
    font-weight: 700;
}

/* ============================================================
   Responsive
   ============================================================ */
@media screen and (max-width: 900px) {
    .fav-header[b-sec-productosfavoritosusuario] {
        padding: var(--ba-space-6) var(--ba-space-4) var(--ba-space-5);
    }

    .fav-content[b-sec-productosfavoritosusuario] {
        padding: var(--ba-space-5) var(--ba-space-4) var(--ba-space-8);
    }
}

@media screen and (max-width: 768px) {
    .fav-header-title[b-sec-productosfavoritosusuario] {
        font-size: var(--ba-text-h2);
    }

    /* En móvil el boton de eliminar va en la esquina superior derecha para no
       chocar con el bloque desplegable y las acciones ("Añadir a carrito" /
       "Ver atributos"). */
    .fav-item-del[b-sec-productosfavoritosusuario] {
        top: var(--ba-space-3);
        right: var(--ba-space-3);
        bottom: auto;
    }

    /* La tarjeta de producto ocupa todo el ancho disponible */
    .fav-content[b-sec-productosfavoritosusuario]  .radzen-card,
    .fav-content[b-sec-productosfavoritosusuario]  .rz-card {
        width: 100% !important;
    }
}

@media screen and (max-width: 600px) {
    .fav-header-title[b-sec-productosfavoritosusuario] {
        font-size: var(--ba-text-h2);
    }

    .fav-btn-cargar-mas[b-sec-productosfavoritosusuario] {
        width: 100%;
        max-width: 320px;
    }
}

@media screen and (max-width: 480px) {
    .fav-header[b-sec-productosfavoritosusuario] {
        padding: var(--ba-space-5) var(--ba-space-4);
    }

    .fav-header-title[b-sec-productosfavoritosusuario] {
        font-size: 1.25rem;
    }

    .fav-content[b-sec-productosfavoritosusuario] {
        padding: var(--ba-space-3);
    }
}
.ba-exp-pagina[b-sec-expansion] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}

.ba-exp-migas[b-sec-expansion] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
    margin-bottom: 24px;
}

.ba-exp-migas a[b-sec-expansion] {
    color: var(--ba-primary);
}





/* ------------------------------ Éxito ------------------------------ */

.ba-exp-exito[b-sec-expansion] {
    border: 1px solid var(--ba-success);
    border-radius: var(--ba-radius-md);
    background: #FFFFFF;
    overflow: hidden;
    margin-bottom: 64px;
}

.ba-exp-exito-cabecera[b-sec-expansion] {
    background: var(--ba-success-bg);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.ba-exp-exito-cabecera svg[b-sec-expansion] {
    flex: none;
    margin-top: 2px;
}

.ba-exp-exito-titulo[b-sec-expansion] {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ba-success-text);
}

.ba-exp-exito-texto[b-sec-expansion] {
    margin: 0;
    color: var(--ba-success-text);
}

.ba-exp-exito-cuerpo[b-sec-expansion] {
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.ba-exp-exito-columna[b-sec-expansion] {
    flex: 1 1 320px;
}

.ba-exp-exito-subtitulo[b-sec-expansion] {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ba-primary);
}

.ba-exp-exito-pasos[b-sec-expansion] {
    margin: 0;
    padding-left: 20px;
    color: var(--ba-text);
}

.ba-exp-exito-pasos li[b-sec-expansion] {
    margin-bottom: 8px;
}

.ba-exp-exito-resumen[b-sec-expansion] {
    flex: 1 1 260px;
    background: var(--ba-surface-alt);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    padding: 16px;
}

.ba-exp-exito-resumen-titulo[b-sec-expansion] {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ba-text-muted);
}

.ba-exp-exito-fila[b-sec-expansion] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ba-border);
    font-size: 0.875rem;
}

.ba-exp-exito-fila-etiqueta[b-sec-expansion] {
    color: var(--ba-text-muted);
}

.ba-exp-exito-fila-valor[b-sec-expansion] {
    font-weight: 500;
    text-align: right;
}

.ba-exp-exito-accion[b-sec-expansion] {
    padding: 0 24px 24px;
}

/* ------------------------------ Layout ------------------------------ */

.ba-exp-layout[b-sec-expansion] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 64px;
}

.ba-exp-aside[b-sec-expansion] {
    flex: 1 1 260px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
}

.ba-exp-aside-tarjeta[b-sec-expansion] {
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: #FFFFFF;
    padding: 16px;
}

.ba-exp-aside-titulo[b-sec-expansion] {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ba-primary);
}

.ba-exp-aside-nota[b-sec-expansion] {
    margin: 0 0 16px;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

.ba-exp-progreso[b-sec-expansion] {
    height: 6px;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-border);
    overflow: hidden;
    margin-bottom: 16px;
}

.ba-exp-progreso-relleno[b-sec-expansion] {
    height: 100%;
    background: var(--ba-primary);
    transition: width 250ms cubic-bezier(.4, 0, .2, 1);
}

.ba-exp-resumen-fila[b-sec-expansion] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--ba-border);
}

.ba-exp-resumen-texto[b-sec-expansion] {
    min-width: 0;
}

.ba-exp-resumen-etiqueta[b-sec-expansion] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ba-text-muted);
}

.ba-exp-resumen-valor[b-sec-expansion] {
    margin: 2px 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ba-exp-aside-contacto[b-sec-expansion] {
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
    padding: 16px;
}

.ba-exp-aside-contacto p[b-sec-expansion] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

.ba-exp-form[b-sec-expansion] {
    flex: 4 1 560px;
    min-width: 0;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: #FFFFFF;
    box-shadow: var(--ba-shadow-sm);
}

.ba-exp-form-cabecera[b-sec-expansion] {
    padding: 24px 24px 0;
}

.ba-exp-form-titulo[b-sec-expansion] {
    margin: 0 0 16px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ba-primary);
}

.ba-exp-form-nota[b-sec-expansion] {
    margin: 0 0 20px;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

/* ------------------------------ Stepper ------------------------------ */

.ba-exp-stepper[b-sec-expansion] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ba-exp-stepper-item[b-sec-expansion] {
    flex: 1 1 140px;
    min-width: 0;
}

.ba-exp-stepper-btn[b-sec-expansion] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ba-text);
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-exp-stepper-btn.es-actual[b-sec-expansion] {
    background: #F1F4F8;
    border-color: var(--ba-primary);
    font-weight: 600;
}

.ba-exp-stepper-btn.es-bloqueado[b-sec-expansion] {
    cursor: not-allowed;
    opacity: .55;
    color: var(--ba-text-muted);
}

.ba-exp-stepper-numero[b-sec-expansion] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--ba-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
    border: 1px solid var(--ba-border);
}

.ba-exp-stepper-numero.es-actual[b-sec-expansion] {
    background: var(--ba-primary);
    color: #FFFFFF;
    border: 0;
}

.ba-exp-stepper-numero.es-listo[b-sec-expansion] {
    background: var(--ba-success-bg);
    color: var(--ba-success-text);
    border: 0;
}

.ba-exp-stepper-titulo[b-sec-expansion] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ba-exp-stepper-check[b-sec-expansion] {
    flex: none;
    margin-left: auto;
}

/* ------------------------------ Campos ------------------------------ */

.ba-exp-form-cuerpo[b-sec-expansion] {
    padding: 24px;
}

.ba-exp-campos[b-sec-expansion] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ba-exp-campo[b-sec-expansion] {
    flex: 1 1 240px;
    min-width: 0;
}

.ba-exp-campo-apilado[b-sec-expansion] {
    margin-bottom: 12px;
}

.ba-exp-campo label[b-sec-expansion] {
    display: block;
    margin-bottom: 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

.ba-exp-campo input[b-sec-expansion],
.ba-exp-campo select[b-sec-expansion] {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    font-size: 1rem;
    color: var(--ba-text);
    background: #FFFFFF;
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
}

.ba-exp-campo input:focus-visible[b-sec-expansion],
.ba-exp-campo select:focus-visible[b-sec-expansion] {
    outline: none;
    border-color: var(--ba-primary);
    box-shadow: inset 0 0 0 1px var(--ba-primary);
}


.ba-exp-error[b-sec-expansion] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 6px 0 0;
    font-size: 0.875rem;
    color: var(--ba-red-800);
}

.ba-exp-error svg[b-sec-expansion] {
    flex: none;
}

.ba-exp-fieldset[b-sec-expansion] {
    border: 0;
    margin: 0;
    padding: 0;
}

.ba-exp-legend[b-sec-expansion] {
    padding: 0;
    margin-bottom: 4px;
    font-size: 0.875rem;
    font-weight: 600;
}












.ba-exp-recaptcha[b-sec-expansion] {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.ba-exp-error-general[b-sec-expansion] {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    border: 1px solid var(--ba-red-800);
    background: var(--ba-red-50);
    border-radius: var(--ba-radius-sm);
    padding: 12px;
}

.ba-exp-error-general svg[b-sec-expansion] {
    flex: none;
}

.ba-exp-error-general p[b-sec-expansion] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ba-red-800);
}

/* ------------------------------ Acciones ------------------------------ */

.ba-exp-acciones[b-sec-expansion] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ba-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ba-exp-btn-secundario[b-sec-expansion] {
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--ba-primary);
    border-radius: var(--ba-radius-sm);
    background: #FFFFFF;
    color: var(--ba-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-exp-btn-secundario:hover[b-sec-expansion] {
    background: #F1F4F8;
}

.ba-exp-btn-principal[b-sec-expansion] {
    min-height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-primary);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-exp-btn-principal:hover[b-sec-expansion] {
    background: var(--ba-primary-hover);
}

.ba-exp-btn-principal:active[b-sec-expansion] {
    background: var(--ba-primary-dark);
}

.ba-exp-contador[b-sec-expansion] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

/* ------------------------------ Institucional ------------------------------ */














/* ------------------------------ Cabecera y hero ------------------------------ */

.ba-exp-migas[b-sec-expansion] {
    margin-bottom: 24px;
}

.ba-exp-bajada[b-sec-expansion] {
    margin: 0;
    line-height: 1.5;
    color: var(--ba-text-muted);
}

.ba-exp-cta[b-sec-expansion] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    margin-top: 8px;
    padding: 0 24px;
    background: var(--ba-primary);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: var(--ba-radius-sm);
    text-decoration: none;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-exp-cta:hover[b-sec-expansion] {
    background: var(--ba-primary-hover);
    color: #FFFFFF;
}

.ba-exp-cta:active[b-sec-expansion] {
    background: var(--ba-primary-dark);
}

.ba-exp-cta:focus-visible[b-sec-expansion] {
    outline: 2px solid var(--ba-primary);
    outline-offset: 2px;
}

/* Mismo banner que /quienes-somos (.qs-banner): foto completa, titular encima sobre un
   degradado inferior que da contraste sin tocar la imagen. */
.ba-exp-banner[b-sec-expansion] {
    position: relative;
    margin-bottom: 24px;
    border-radius: var(--ba-radius-lg);
    overflow: hidden;
}

.ba-exp-banner img[b-sec-expansion] {
    display: block;
    width: 100%;
    height: auto;
}

.ba-exp-banner-overlay[b-sec-expansion] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 32px;
    background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 55%);
}

.ba-exp-banner-titular[b-sec-expansion] {
    max-width: 760px;
    color: #FFFFFF;
}

.ba-exp-banner-h1[b-sec-expansion] {
    margin: 0;
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 700;
    text-wrap: balance;
}

.ba-exp-banner-sub[b-sec-expansion] {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 600;
}

.ba-exp-intro[b-sec-expansion] {
    max-width: 760px;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* El formulario queda libre del encabezado fijo al llegar por el botón. */
.ba-exp-formulario[b-sec-expansion] {
    scroll-margin-top: 96px;
}

/* ------------------------------ Bloques informativos ------------------------------ */

.ba-exp-seccion[b-sec-expansion] {
    margin-bottom: 56px;
}

.ba-exp-seccion-titulo[b-sec-expansion] {
    margin: 0 0 20px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ba-primary);
}

.ba-exp-criterios[b-sec-expansion] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.ba-exp-criterio[b-sec-expansion] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--ba-surface-alt);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
}

.ba-exp-criterio-etiqueta[b-sec-expansion] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ba-text-muted);
}

.ba-exp-criterio-valor[b-sec-expansion] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ba-text);
}

.ba-exp-criterio-detalle[b-sec-expansion] {
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

.ba-exp-zonas[b-sec-expansion] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}

.ba-exp-zonas-mapa[b-sec-expansion] {
    flex: 1.6 1 360px;
    min-width: 0;
    min-height: 400px;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    overflow: hidden;
    background: var(--ba-surface-alt);
}

.ba-exp-zonas-lista[b-sec-expansion] {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ba-exp-zonas-nota[b-sec-expansion] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ba-text-muted);
}

.ba-exp-estados[b-sec-expansion] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ba-exp-estados li[b-sec-expansion] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ba-border);
}

.ba-exp-estados li[b-sec-expansion]::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--ba-primary);
}

.ba-exp-proceso[b-sec-expansion] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.ba-exp-proceso li[b-sec-expansion] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ba-exp-proceso-numero[b-sec-expansion] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ba-radius-full);
    background: var(--ba-primary);
    color: #FFFFFF;
    font-weight: 600;
}

.ba-exp-proceso strong[b-sec-expansion] {
    display: block;
    margin-bottom: 4px;
}

.ba-exp-proceso span:not(.ba-exp-proceso-numero)[b-sec-expansion] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ba-text-muted);
}

/* ------------------------------ Formulario: piezas propias ------------------------------ */

.ba-exp-campo-ancho[b-sec-expansion] {
    flex: 1 1 100%;
}

.ba-exp-campo textarea[b-sec-expansion] {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    color: var(--ba-text);
    background: #FFFFFF;
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
    resize: vertical;
}

.ba-exp-campo textarea:focus-visible[b-sec-expansion] {
    outline: none;
    border-color: var(--ba-primary);
    box-shadow: inset 0 0 0 1px var(--ba-primary);
}

.ba-exp-campo input[readonly][b-sec-expansion] {
    background: var(--ba-surface-alt);
    border-color: var(--ba-border);
}

.ba-exp-campo select:disabled[b-sec-expansion] {
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
    cursor: not-allowed;
}

.ba-exp-campo [aria-invalid="true"][b-sec-expansion] {
    border-color: var(--ba-red-800);
}

.ba-exp-ayuda[b-sec-expansion] {
    display: block;
    margin: 6px 0 0;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

.ba-exp-ayuda.es-ok[b-sec-expansion] {
    color: var(--ba-success-text);
}

.ba-exp-mapa-caja[b-sec-expansion] {
    margin-top: 20px;
}

.ba-exp-mapa-etiqueta[b-sec-expansion] {
    display: block;
    margin-bottom: 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

.ba-exp-mapa-pin[b-sec-expansion] {
    width: 100%;
    height: 320px;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    overflow: hidden;
    background: var(--ba-surface-alt);
}

.ba-exp-mapa-caja.es-error .ba-exp-mapa-pin[b-sec-expansion],
.ba-exp-mapa-caja:focus-visible .ba-exp-mapa-pin[b-sec-expansion] {
    border-color: var(--ba-red-800);
}

.ba-exp-mapa-caja:focus-visible[b-sec-expansion] {
    outline: none;
}

.ba-exp-opciones[b-sec-expansion] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ba-exp-opcion[b-sec-expansion] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
    background: #FFFFFF;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-exp-opcion.es-marcada[b-sec-expansion] {
    border-color: var(--ba-primary);
    background: #F1F4F8;
    font-weight: 600;
}

.ba-exp-opcion input[b-sec-expansion] {
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--ba-primary);
}

.ba-exp-opcion:focus-within[b-sec-expansion] {
    outline: 2px solid var(--ba-primary);
    outline-offset: 1px;
}

.ba-exp-bloque[b-sec-expansion] {
    margin-top: 20px;
}

.ba-exp-fotos[b-sec-expansion] {
    border: 1px dashed var(--ba-border-input);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
    padding: 16px;
}

.ba-exp-fotos input[type="file"][b-sec-expansion] {
    width: 100%;
    font-size: 1rem;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
}

.ba-exp-fotos-lista[b-sec-expansion] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ba-exp-foto[b-sec-expansion] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 4px 4px 4px 12px;
    background: #FFFFFF;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-sm);
    font-size: 0.875rem;
}

.ba-exp-foto-nombre[b-sec-expansion] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ba-exp-foto-quitar[b-sec-expansion] {
    flex: none;
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--ba-primary);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--ba-radius-sm);
}

.ba-exp-foto-quitar:hover[b-sec-expansion] {
    background: #F1F4F8;
}

.ba-exp-aviso[b-sec-expansion] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font-size: 0.875rem;
    cursor: pointer;
}

.ba-exp-aviso input[b-sec-expansion] {
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--ba-primary);
}

.ba-exp-btn-principal:disabled[b-sec-expansion] {
    opacity: .65;
    cursor: progress;
}

.ba-exp-stepper-btn:focus-visible[b-sec-expansion],
.ba-exp-btn-secundario:focus-visible[b-sec-expansion],
.ba-exp-btn-principal:focus-visible[b-sec-expansion],
.ba-exp-foto-quitar:focus-visible[b-sec-expansion] {
    outline: 2px solid var(--ba-primary);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .ba-exp-aside[b-sec-expansion] {
        position: static;
        max-width: none;
        flex-basis: 100%;
    }

    .ba-exp-form[b-sec-expansion] {
        flex-basis: 100%;
    }

    .ba-exp-form-cuerpo[b-sec-expansion],
    .ba-exp-form-cabecera[b-sec-expansion] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ba-exp-acciones > *[b-sec-expansion] {
        flex: 1 1 100%;
    }

    .ba-exp-zonas-mapa[b-sec-expansion] {
        min-height: 300px;
    }

    .ba-exp-banner-overlay[b-sec-expansion] {
        padding: 16px;
    }

    .ba-exp-banner-h1[b-sec-expansion] {
        font-size: 1.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ba-exp-progreso-relleno[b-sec-expansion],
    .ba-exp-stepper-btn[b-sec-expansion],
    .ba-exp-btn-secundario[b-sec-expansion],
    .ba-exp-btn-principal[b-sec-expansion],
    .ba-exp-cta[b-sec-expansion],
    .ba-exp-opcion[b-sec-expansion] {
        transition: none;
    }
}
/* ---------------------------------------------------------------------------
   Facturacion.razor — rediseño sep 2026 (ver design_handoff_facturacion/README.md).

   Todo en HTML nativo (sin Radzen/MudBlazor): la tarjeta, el stepper y el FAQ
   son composicion fluida (flex-wrap + grid auto-fit), sin media queries fijas,
   igual que el prototipo de referencia. Los colores y radios vienen de
   wwwroot/css/tokens.css (--ba-*), no se repiten valores sueltos.
   --------------------------------------------------------------------------- */

.fact-wrap[b-sec-facturacion] {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 48px) var(--ba-space-20);
}

.fact-breadcrumb[b-sec-facturacion] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    margin: 0 0 20px;
}

.fact-breadcrumb a[b-sec-facturacion] {
    color: var(--ba-text-muted);
    text-decoration: underline;
}

.fact-breadcrumb__actual[b-sec-facturacion] {
    color: var(--ba-text);
}

.fact-h1[b-sec-facturacion] {
    color: var(--ba-text);
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 40px;
}

/* ------------------------------------------------------------- tarjeta -- */

.fact-tarjeta[b-sec-facturacion] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-lg);
    box-shadow: var(--ba-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.fact-tarjeta__imagen[b-sec-facturacion] {
    flex: 1 1 380px;
    background: var(--ba-surface);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fact-tarjeta__imagen img[b-sec-facturacion] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
}

.fact-tarjeta__contenido[b-sec-facturacion] {
    flex: 1 1 380px;
    padding: clamp(28px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* --------------------------------------------------------- stepper -- */

.fact-pasos[b-sec-facturacion] {
    display: flex;
    flex-direction: column;
}

.fact-paso[b-sec-facturacion] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    position: relative;
    padding-bottom: 22px;
}

.fact-paso:last-child[b-sec-facturacion] {
    padding-bottom: 0;
}

.fact-paso[b-sec-facturacion]::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--ba-border);
}

.fact-paso:last-child[b-sec-facturacion]::before {
    background: transparent;
}

.fact-paso__num[b-sec-facturacion] {
    width: 32px;
    height: 32px;
    border-radius: var(--ba-radius-full);
    background: var(--ba-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.fact-paso__texto[b-sec-facturacion] {
    margin: 5px 0 0;
    font-size: var(--ba-text-base);
    color: var(--ba-text);
    line-height: 1.4;
}

/* --------------------------------------------------------- acciones -- */

.fact-descripcion[b-sec-facturacion] {
    margin: 0 0 16px;
    font-size: var(--ba-text-base);
    color: var(--ba-text-muted);
    line-height: 1.5;
}

.fact-botones[b-sec-facturacion] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fact-btn[b-sec-facturacion] {
    flex: 1 1 200px;
    border-radius: var(--ba-radius-sm);
    height: 52px;
    padding: 0 24px;
    font-size: var(--ba-text-base);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--ba-duration-fast) var(--ba-easing);
    min-height: 44px;
}

.fact-btn--primario[b-sec-facturacion] {
    background: var(--ba-primary);
    color: #fff;
    border: none;
}

.fact-btn--primario:hover[b-sec-facturacion] {
    background: var(--ba-primary-hover);
}

.fact-btn--primario:active[b-sec-facturacion] {
    background: var(--ba-primary-dark);
}

.fact-btn--secundario[b-sec-facturacion] {
    background: var(--ba-surface);
    color: var(--ba-primary);
    border: 1.5px solid var(--ba-primary);
}

.fact-btn--secundario:hover[b-sec-facturacion] {
    background: var(--ba-blue-50);
}

.fact-btn:focus-visible[b-sec-facturacion] {
    outline: none;
    box-shadow: 0 0 0 var(--ba-focus-offset) var(--ba-focus-inner), 0 0 0 4px var(--ba-focus-outer);
}

.fact-contacto[b-sec-facturacion] {
    margin: 0;
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    line-height: 1.5;
    border-top: 1px solid var(--ba-border);
    padding-top: 20px;
}

.fact-contacto a[b-sec-facturacion] {
    color: var(--ba-primary);
    text-decoration: underline;
    font-weight: 600;
}

.fact-contacto a:hover[b-sec-facturacion] {
    color: var(--ba-primary-hover);
}

/* -------------------------------------------------------------- FAQ -- */

.fact-faq[b-sec-facturacion] {
    margin-top: 64px;
}

.fact-faq__titulo[b-sec-facturacion] {
    color: var(--ba-text);
    font-size: var(--ba-text-h2);
    font-weight: 600;
    text-align: center;
    margin: 0 0 24px;
}

.fact-faq__lista[b-sec-facturacion] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fact-faq__item[b-sec-facturacion] {
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    overflow: hidden;
}

.fact-faq__boton[b-sec-facturacion] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    background: var(--ba-surface);
    border: none;
    padding: 16px 20px;
    min-height: 48px;
    font-size: var(--ba-text-base);
    font-weight: 600;
    color: var(--ba-text);
    font-family: inherit;
    cursor: pointer;
}

.fact-faq__boton:hover[b-sec-facturacion] {
    background: var(--ba-surface-alt);
}

.fact-faq__boton:focus-visible[b-sec-facturacion] {
    outline: none;
    box-shadow: inset 0 0 0 var(--ba-focus-offset) var(--ba-focus-inner), inset 0 0 0 4px var(--ba-focus-outer);
}

.fact-faq__icono[b-sec-facturacion] {
    flex-shrink: 0;
    color: var(--ba-primary);
    font-size: 1.25rem;
    line-height: 1;
}

.fact-faq__respuesta[b-sec-facturacion] {
    margin: 0;
    padding: 0 20px 18px;
    font-size: 0.9375rem;
    color: var(--ba-text-muted);
    line-height: 1.5;
}

.fact-faq__cta[b-sec-facturacion] {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--ba-text-muted);
    margin: 20px 0 0;
}

.fact-faq__cta a[b-sec-facturacion] {
    color: var(--ba-primary);
    text-decoration: underline;
    font-weight: 600;
}

/* ------------------------------------------------------- formularios -- */
/* Compartido por FacturacionCrearFactura.razor y ReenvioFactura.razor
   (::deep porque esas hojas de estilo scoped propias no existen: viven
   dentro del mismo arbol visual que esta pagina). */

[b-sec-facturacion] .fact-form {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-lg);
    box-shadow: var(--ba-shadow-sm);
    overflow: hidden;
}

[b-sec-facturacion] .fact-form__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ba-border);
    background: var(--ba-surface-alt);
}

[b-sec-facturacion] .fact-form__titulo {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ba-primary);
}

[b-sec-facturacion] .fact-form__volver {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-radius: var(--ba-radius-sm);
    color: var(--ba-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

[b-sec-facturacion] .fact-form__volver:hover {
    background: var(--ba-blue-50);
}

[b-sec-facturacion] .fact-form__volver:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ba-focus-offset) var(--ba-focus-inner), 0 0 0 4px var(--ba-focus-outer);
}

[b-sec-facturacion] .fact-form__body {
    padding: 24px;
}

[b-sec-facturacion] .fact-alerta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--ba-red-50);
    border-radius: var(--ba-radius-md);
    padding: 12px 14px;
    margin-bottom: 20px;
}

[b-sec-facturacion] .fact-alerta svg {
    flex-shrink: 0;
    margin-top: 1px;
}

[b-sec-facturacion] .fact-alerta p {
    margin: 0;
    font-size: var(--ba-text-sm);
    color: var(--ba-danger);
    line-height: 1.4;
}

[b-sec-facturacion] .fact-form__subtitulo {
    margin: 0 0 16px;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--ba-border);
    padding-bottom: 8px;
}

[b-sec-facturacion] .fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 24px;
}

[b-sec-facturacion] .fact-campo {
    position: relative;
}

[b-sec-facturacion] .fact-campo__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-text);
    margin-bottom: 6px;
}

[b-sec-facturacion] .fact-campo__ayuda {
    width: 22px;
    height: 22px;
    border-radius: var(--ba-radius-full);
    border: 1.5px solid var(--ba-primary);
    color: var(--ba-primary);
    background: var(--ba-surface);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

[b-sec-facturacion] .fact-campo__ayuda:hover {
    background: var(--ba-blue-50);
}

[b-sec-facturacion] .fact-input {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 0 12px;
    border-radius: var(--ba-radius-sm);
    border: 1px solid var(--ba-border);
    font-size: 1rem;
    font-family: inherit;
    color: var(--ba-text);
    background: var(--ba-surface);
}

[b-sec-facturacion] .fact-input:focus-visible {
    outline: none;
    border-color: var(--ba-primary);
    box-shadow: 0 0 0 var(--ba-focus-offset) var(--ba-focus-inner), 0 0 0 4px var(--ba-focus-outer);
}

[b-sec-facturacion] .fact-input--error {
    border-color: var(--ba-danger);
}

[b-sec-facturacion] .fact-campo__error {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--ba-danger);
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-sec-facturacion] .fact-campo__error svg {
    flex-shrink: 0;
}

[b-sec-facturacion] .fact-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(300px, 90vw);
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    box-shadow: var(--ba-shadow-md);
    padding: 16px;
    z-index: var(--ba-z-dropdown);
    animation: fact-fade-in-b-sec-facturacion var(--ba-duration-base) var(--ba-easing);
}

[b-sec-facturacion] .fact-popover__titulo {
    margin: 0 0 8px;
    font-size: var(--ba-text-sm);
    font-weight: 700;
    color: var(--ba-text);
}

[b-sec-facturacion] .fact-popover__texto {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: var(--ba-text-muted);
    line-height: 1.5;
}

[b-sec-facturacion] .fact-popover__imagen {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--ba-border);
    background: var(--ba-surface-alt);
}

[b-sec-facturacion] .fact-popover__imagen img {
    width: 100%;
    height: auto;
    display: block;
}

[b-sec-facturacion] .fact-popover__cerrar {
    margin-top: 12px;
    background: transparent;
    border: none;
    color: var(--ba-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

[b-sec-facturacion] .fact-submit {
    margin-top: 28px;
    width: 100%;
    background: var(--ba-primary);
    color: #fff;
    border: none;
    border-radius: var(--ba-radius-sm);
    height: 52px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--ba-duration-fast) var(--ba-easing);
}

[b-sec-facturacion] .fact-submit:hover {
    background: var(--ba-primary-hover);
}

[b-sec-facturacion] .fact-submit:active {
    background: var(--ba-primary-dark);
}

[b-sec-facturacion] .fact-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ba-focus-offset) var(--ba-focus-inner), 0 0 0 4px var(--ba-focus-outer);
}

/* ---------------------------------------------------- estados (carga/éxito/error) -- */

[b-sec-facturacion] .fact-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 0;
}

[b-sec-facturacion] .fact-estado--resultado {
    text-align: center;
    gap: 12px;
    padding: 16px 0 8px;
}

[b-sec-facturacion] .fact-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--ba-border);
    border-top-color: var(--ba-primary);
    animation: fact-spin-b-sec-facturacion 800ms linear infinite;
}

[b-sec-facturacion] .fact-estado__texto {
    margin: 0;
    font-size: 1rem;
    color: var(--ba-text-muted);
}

[b-sec-facturacion] .fact-estado__icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-sec-facturacion] .fact-estado__icono--exito {
    background: var(--ba-success-bg);
}

[b-sec-facturacion] .fact-estado__icono--error {
    background: var(--ba-red-50);
}

[b-sec-facturacion] .fact-estado__titulo {
    margin: 8px 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ba-primary);
}

[b-sec-facturacion] .fact-estado__mensaje {
    margin: 0;
    font-size: 1rem;
    color: var(--ba-text);
    line-height: 1.5;
    max-width: 420px;
}

[b-sec-facturacion] .fact-estado__soporte {
    margin: 8px 0 0;
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

[b-sec-facturacion] .fact-estado__soporte a {
    color: var(--ba-primary);
    text-decoration: underline;
}

[b-sec-facturacion] .fact-estado__cerrar {
    margin-top: 16px;
    width: 100%;
    background: var(--ba-primary);
    color: #fff;
    border: none;
    border-radius: var(--ba-radius-sm);
    height: 48px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

[b-sec-facturacion] .fact-estado__cerrar:hover {
    background: var(--ba-primary-hover);
}

@keyframes fact-spin-b-sec-facturacion {
    to { transform: rotate(360deg); }
}

@keyframes fact-fade-in-b-sec-facturacion {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.ba-prov-pagina[b-sec-proveedor] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}

.ba-prov-migas[b-sec-proveedor] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
    margin-bottom: 24px;
}

.ba-prov-migas a[b-sec-proveedor] {
    color: var(--ba-primary);
}

.ba-prov-header[b-sec-proveedor] {
    max-width: 720px;
    margin-bottom: 32px;
}

.ba-prov-antetitulo[b-sec-proveedor] {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ba-red);
}

.ba-prov-h1[b-sec-proveedor] {
    margin: 0 0 12px;
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ba-primary);
    text-wrap: balance;
}

.ba-prov-bajada[b-sec-proveedor] {
    margin: 0;
    font-size: 1rem;
    color: var(--ba-text-muted);
}

.ba-prov-banner[b-sec-proveedor] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ba-radius-md);
    margin-bottom: 32px;
    box-shadow: var(--ba-shadow-sm);
}

/* ------------------------------ Éxito ------------------------------ */

.ba-prov-exito[b-sec-proveedor] {
    border: 1px solid var(--ba-success);
    border-radius: var(--ba-radius-md);
    background: #FFFFFF;
    overflow: hidden;
    margin-bottom: 64px;
}

.ba-prov-exito-cabecera[b-sec-proveedor] {
    background: var(--ba-success-bg);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.ba-prov-exito-cabecera svg[b-sec-proveedor] {
    flex: none;
    margin-top: 2px;
}

.ba-prov-exito-titulo[b-sec-proveedor] {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ba-success-text);
}

.ba-prov-exito-texto[b-sec-proveedor] {
    margin: 0;
    color: var(--ba-success-text);
}

.ba-prov-exito-cuerpo[b-sec-proveedor] {
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.ba-prov-exito-columna[b-sec-proveedor] {
    flex: 1 1 320px;
}

.ba-prov-exito-subtitulo[b-sec-proveedor] {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ba-primary);
}

.ba-prov-exito-pasos[b-sec-proveedor] {
    margin: 0;
    padding-left: 20px;
    color: var(--ba-text);
}

.ba-prov-exito-pasos li[b-sec-proveedor] {
    margin-bottom: 8px;
}

.ba-prov-exito-resumen[b-sec-proveedor] {
    flex: 1 1 260px;
    background: var(--ba-surface-alt);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    padding: 16px;
}

.ba-prov-exito-resumen-titulo[b-sec-proveedor] {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ba-text-muted);
}

.ba-prov-exito-fila[b-sec-proveedor] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ba-border);
    font-size: 0.875rem;
}

.ba-prov-exito-fila-etiqueta[b-sec-proveedor] {
    color: var(--ba-text-muted);
}

.ba-prov-exito-fila-valor[b-sec-proveedor] {
    font-weight: 500;
    text-align: right;
}

.ba-prov-exito-accion[b-sec-proveedor] {
    padding: 0 24px 24px;
}

/* ------------------------------ Layout ------------------------------ */

.ba-prov-layout[b-sec-proveedor] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 64px;
}

.ba-prov-aside[b-sec-proveedor] {
    flex: 1 1 260px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
}

.ba-prov-aside-tarjeta[b-sec-proveedor] {
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: #FFFFFF;
    padding: 16px;
}

.ba-prov-aside-titulo[b-sec-proveedor] {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ba-primary);
}

.ba-prov-aside-nota[b-sec-proveedor] {
    margin: 0 0 16px;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

.ba-prov-progreso[b-sec-proveedor] {
    height: 6px;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-border);
    overflow: hidden;
    margin-bottom: 16px;
}

.ba-prov-progreso-relleno[b-sec-proveedor] {
    height: 100%;
    background: var(--ba-primary);
    transition: width 250ms cubic-bezier(.4, 0, .2, 1);
}

.ba-prov-resumen-fila[b-sec-proveedor] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--ba-border);
}

.ba-prov-resumen-texto[b-sec-proveedor] {
    min-width: 0;
}

.ba-prov-resumen-etiqueta[b-sec-proveedor] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ba-text-muted);
}

.ba-prov-resumen-valor[b-sec-proveedor] {
    margin: 2px 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ba-prov-aside-contacto[b-sec-proveedor] {
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
    padding: 16px;
}

.ba-prov-aside-contacto p[b-sec-proveedor] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

.ba-prov-form[b-sec-proveedor] {
    flex: 4 1 560px;
    min-width: 0;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: #FFFFFF;
    box-shadow: var(--ba-shadow-sm);
}

.ba-prov-form-cabecera[b-sec-proveedor] {
    padding: 24px 24px 0;
}

.ba-prov-form-titulo[b-sec-proveedor] {
    margin: 0 0 16px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ba-primary);
}

.ba-prov-form-nota[b-sec-proveedor] {
    margin: 0 0 20px;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

/* ------------------------------ Stepper ------------------------------ */

.ba-prov-stepper[b-sec-proveedor] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ba-prov-stepper-item[b-sec-proveedor] {
    flex: 1 1 140px;
    min-width: 0;
}

.ba-prov-stepper-btn[b-sec-proveedor] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ba-text);
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-prov-stepper-btn.es-actual[b-sec-proveedor] {
    background: #F1F4F8;
    border-color: var(--ba-primary);
    font-weight: 600;
}

.ba-prov-stepper-btn.es-bloqueado[b-sec-proveedor] {
    cursor: not-allowed;
    opacity: .55;
    color: var(--ba-text-muted);
}

.ba-prov-stepper-numero[b-sec-proveedor] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--ba-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
    border: 1px solid var(--ba-border);
}

.ba-prov-stepper-numero.es-actual[b-sec-proveedor] {
    background: var(--ba-primary);
    color: #FFFFFF;
    border: 0;
}

.ba-prov-stepper-numero.es-listo[b-sec-proveedor] {
    background: var(--ba-success-bg);
    color: var(--ba-success-text);
    border: 0;
}

.ba-prov-stepper-titulo[b-sec-proveedor] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ba-prov-stepper-check[b-sec-proveedor] {
    flex: none;
    margin-left: auto;
}

/* ------------------------------ Campos ------------------------------ */

.ba-prov-form-cuerpo[b-sec-proveedor] {
    padding: 24px;
}

.ba-prov-campos[b-sec-proveedor] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ba-prov-campo[b-sec-proveedor] {
    flex: 1 1 240px;
    min-width: 0;
}

.ba-prov-campo-apilado[b-sec-proveedor] {
    margin-bottom: 12px;
}

.ba-prov-campo label[b-sec-proveedor] {
    display: block;
    margin-bottom: 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

.ba-prov-campo input[b-sec-proveedor] {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    font-size: 1rem;
    color: var(--ba-text);
    background: #FFFFFF;
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
}

.ba-prov-campo input:focus-visible[b-sec-proveedor] {
    outline: none;
    border-color: var(--ba-primary);
    box-shadow: inset 0 0 0 1px var(--ba-primary);
}

.ba-prov-rfc[b-sec-proveedor] {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ba-prov-error[b-sec-proveedor] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 6px 0 0;
    font-size: 0.875rem;
    color: var(--ba-red-800);
}

.ba-prov-error svg[b-sec-proveedor] {
    flex: none;
}

.ba-prov-fieldset[b-sec-proveedor] {
    border: 0;
    margin: 0;
    padding: 0;
}

.ba-prov-legend[b-sec-proveedor] {
    padding: 0;
    margin-bottom: 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

.ba-prov-categorias[b-sec-proveedor] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.ba-prov-categoria[b-sec-proveedor] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
    background: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-prov-categoria.es-marcada[b-sec-proveedor] {
    border-color: var(--ba-primary);
    background: #F1F4F8;
    font-weight: 600;
}

.ba-prov-categoria input[type="checkbox"][b-sec-proveedor] {
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--ba-primary);
}

.ba-prov-paso4[b-sec-proveedor] {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.ba-prov-paso4-columna[b-sec-proveedor] {
    flex: 1 1 240px;
    min-width: 0;
}

.ba-prov-paso4-titulo[b-sec-proveedor] {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ba-primary);
}

.ba-prov-catalogo[b-sec-proveedor] {
    margin-top: 16px;
    border: 1px dashed var(--ba-border-input);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
    padding: 16px;
}

.ba-prov-catalogo input[type="file"][b-sec-proveedor] {
    width: 100%;
    font-size: 1rem;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
}

.ba-prov-archivo-ok[b-sec-proveedor] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: var(--ba-success-text);
}

.ba-prov-archivo-ok svg[b-sec-proveedor] {
    flex: none;
}

.ba-prov-recaptcha[b-sec-proveedor] {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.ba-prov-error-general[b-sec-proveedor] {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    border: 1px solid var(--ba-red-800);
    background: var(--ba-red-50);
    border-radius: var(--ba-radius-sm);
    padding: 12px;
}

.ba-prov-error-general svg[b-sec-proveedor] {
    flex: none;
}

.ba-prov-error-general p[b-sec-proveedor] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ba-red-800);
}

/* ------------------------------ Acciones ------------------------------ */

.ba-prov-acciones[b-sec-proveedor] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ba-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ba-prov-btn-secundario[b-sec-proveedor] {
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--ba-primary);
    border-radius: var(--ba-radius-sm);
    background: #FFFFFF;
    color: var(--ba-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-prov-btn-secundario:hover[b-sec-proveedor] {
    background: #F1F4F8;
}

.ba-prov-btn-principal[b-sec-proveedor] {
    min-height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-primary);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-prov-btn-principal:hover[b-sec-proveedor] {
    background: var(--ba-primary-hover);
}

.ba-prov-btn-principal:active[b-sec-proveedor] {
    background: var(--ba-primary-dark);
}

.ba-prov-contador[b-sec-proveedor] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ba-text-muted);
}

/* ------------------------------ Institucional ------------------------------ */

.ba-prov-institucional[b-sec-proveedor] {
    border-top: 1px solid var(--ba-border);
    padding-top: 48px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}

.ba-prov-institucional-texto[b-sec-proveedor] {
    flex: 1 1 420px;
    min-width: 0;
    max-width: 70ch;
}

.ba-prov-institucional-titulo[b-sec-proveedor] {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ba-primary);
}

.ba-prov-institucional-texto p[b-sec-proveedor] {
    margin: 0;
    color: var(--ba-text);
}

.ba-prov-indicadores[b-sec-proveedor] {
    flex: 1 1 340px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 0;
}

.ba-prov-indicador[b-sec-proveedor] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 116px;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    padding: 16px;
    background: var(--ba-surface-alt);
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

.ba-prov-indicador.es-enlace:hover[b-sec-proveedor] {
    background: #F1F4F8;
    border-color: var(--ba-primary);
}

.ba-prov-indicador dd[b-sec-proveedor] {
    order: 1;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ba-red);
    white-space: nowrap;
}

.ba-prov-indicador dd a[b-sec-proveedor] {
    color: inherit;
    text-decoration: none;
}

.ba-prov-indicador-cubre[b-sec-proveedor] {
    position: absolute;
    inset: 0;
}

.ba-prov-indicador dt[b-sec-proveedor] {
    order: 2;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ba-primary);
}

@media (prefers-reduced-motion: reduce) {
    .ba-prov-progreso-relleno[b-sec-proveedor],
    .ba-prov-stepper-btn[b-sec-proveedor],
    .ba-prov-btn-secundario[b-sec-proveedor],
    .ba-prov-btn-principal[b-sec-proveedor],
    .ba-prov-indicador[b-sec-proveedor] {
        transition: none;
    }
}
/*
 * /graciasportuCompra — confirmación de compra.
 *
 * Todos los valores salen de wwwroot/css/tokens.css (tokens.css, MASTER v1.4
 * §2–§5). No hay un solo color, tamaño de texto, espaciado, radio ni duración
 * escritos aquí: si falta un valor, se propone al sistema en vez de declarar uno
 * local (MASTER §12, "Necesito un valor que no existe").
 *
 * Clases con prefijo `gp-` a propósito. site.css declara `.cards`, `.card`,
 * `.card-title`, `.card-desc` y `.body` de forma GLOBAL (y van dentro de
 * site.min.css, que se carga despues y con media="print"/onload): reusar esos
 * nombres aqui arrastraria sus sombras, radios y `overflow-y: scroll` del
 * Hover-cards original, que no tienen nada que ver con esta pagina. El CSS
 * scoped de Blazor ya ganaria por especificidad, pero depender de eso es
 * fragile si alguien cambia el orden de carga.
 */

/* --------------------------------------------------------------- Contenedor
   Medida de lectura de MASTER §4.7. El bloque es texto corrido, no reticula de
   catalogo, asi que le aplica el maximo de ~75 caracteres por linea. */
.gp-page[b-sec-graciasportucompra] {
    max-width: 46rem;
    margin-inline: auto;
    padding: var(--ba-space-4) var(--ba-space-4) var(--ba-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-6);
    font-family: var(--ba-font-base);
    color: var(--ba-text);
    font-size: var(--ba-text-base);
    line-height: 1.5;
    /* Contain para que las barras de las tarjetas anidadas no alteren el ancho
       del documento (MASTER §6.1: cero desplazamiento horizontal en 375px). */
    overflow-x: clip;
}

@media (min-width: 768px) {
    .gp-page[b-sec-graciasportucompra] {
        padding: var(--ba-space-8) var(--ba-space-6) var(--ba-space-20);
    }
}

/* --------------------------------------------------------------- Entrada
   MASTER §5.6: solo `transform` y `opacity`, que el compositor resuelve sin
   recalcular maquetacion. Nada de animar width/height/margin.
   El anulamiento por prefers-reduced-motion es GLOBAL en tokens.css; aqui no
   se redeclara y ningun componente tiene permiso de excluirse. */
.gp-enter[b-sec-graciasportucompra] {
    animation: gp-entra-b-sec-graciasportucompra 250ms var(--ba-easing) both;
}

.gp-enter--1[b-sec-graciasportucompra] { animation-delay: 40ms; }
.gp-enter--2[b-sec-graciasportucompra] { animation-delay: 80ms; }
.gp-enter--3[b-sec-graciasportucompra] { animation-delay: 120ms; }

@keyframes gp-entra-b-sec-graciasportucompra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------- Migas
   Componente compartido del sitio (Pages/Cuenta/BreadcrumbCuenta.razor), misma
   forma y mismos tokens. No se reconstruye aqui: MASTER §12 pide extender lo
   que ya existe antes de crear un duplicado. */
.gp-crumb[b-sec-graciasportucompra] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ba-space-1);
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

/* MASTER §7.3: el area activa se amplia con relleno transparente, nunca
   reduciendo el texto. Un enlace de breadcrumb mide ~21px de alto, por debajo
   del minimo tactil; el relleno lo sube a 44px sin engordar la tipografia. */
.gp-crumb__link[b-sec-graciasportucompra] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--ba-space-1);
    margin-inline-start: calc(var(--ba-space-1) * -1);
    border-radius: var(--ba-radius-sm);
    color: var(--ba-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--ba-duration-fast) var(--ba-easing);
}

.gp-crumb__link:hover[b-sec-graciasportucompra] {
    color: var(--ba-primary);
}

.gp-crumb__sep[b-sec-graciasportucompra] {
    color: var(--ba-text-muted);
}

.gp-crumb__actual[b-sec-graciasportucompra] {
    color: var(--ba-text);
}

/* --------------------------------------------------------------- Encabezado */

.gp-head[b-sec-graciasportucompra] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-3);
}

/* .gp-head es flex en columna con align-items: flex-start, asi que sus hijos se
   dimensionan a fit-content, y un hijo de flex trae ademas min-width: auto. Con
   un dato largo sin espacios —el correo de la sesion— el ancho min-content es el
   del correo completo, el par no encoge y .gp-page, con overflow-x: clip, lo
   recorta en silencio: el texto se pierde sin puntos suspensivos y sin scroll.
   max-width: 100% recorta el ancho contra el del contenedor y deja que
   overflow-wrap: break-word de cada caso reparta la linea, que es el orden que
   pide MASTER §4.9: partir solo como ultimo recurso, nunca como primera opcion. */
.gp-head > *[b-sec-graciasportucompra] {
    min-width: 0;
    max-width: 100%;
}

/* El trofeo SVG que ocupaba 300px se sustituyo por esta marca de estado.
   Fondo y texto usan el PAR de exito (--ba-success-bg / --ba-success-text,
   9.36:1), no el verde base: MASTER §3.2 prohibe usar el color base como
   texto, y aqui el verde es relleno de marca sobre el fondo sutil. */
.gp-mark[b-sec-graciasportucompra] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--ba-radius-full);
    background: var(--ba-success-bg);
    color: var(--ba-success-text);
}

.gp-mark svg[b-sec-graciasportucompra] {
    width: 1.75rem;
    height: 1.75rem;
}

/* Etiqueta de estado: icono + texto, nunca solo color (MASTER §3.4 — una de
   cada doce personas no distingue rojo de verde). */
.gp-badge[b-sec-graciasportucompra] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-2);
    padding: var(--ba-space-1) var(--ba-space-3);
    border-radius: var(--ba-radius-sm);
    background: var(--ba-success-bg);
    color: var(--ba-success-text);
    font-size: var(--ba-text-xs);
    font-weight: 600;
    line-height: 1.3;
}

.gp-badge svg[b-sec-graciasportucompra] {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.gp-title[b-sec-graciasportucompra] {
    margin: 0;
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.15;
    /* MASTER §4.9 "Composicion del texto": equilibrio de linea en titulos, para
       que la ultima linea no quede con una sola palabra. Es una mejora
       progresiva: donde no hay soporte, el texto se compone normal.
       No se anade overflow-wrap: anywhere porque romper el titulo en cualquier
       punto impediria que el equilibrio de linea actuara. */
    text-wrap: balance;
}

/* MASTER §4.9 marca el h1 de estas paginas con dos lineas en movil; el texto
   integro sigue en el DOM, asi que lo que se recorta es solo lo que se ve. La
   clase y su breakpoint los define tokens.css (.h1-truncate-mobile <=950px). */
/* min(70ch, 100%), no 70ch a secas: la medida de lectura se acota al ancho real
   del contenedor, como hacen las paginas de contenido del sitio. Un 70ch fijo
   supera el viewport en movil y el dato sin espacios se sale del cuadro. */
.gp-lead[b-sec-graciasportucompra] {
    margin: 0;
    max-width: min(70ch, 100%);
    color: var(--ba-text);
}

.gp-lead__correo[b-sec-graciasportucompra] {
    /* MASTER §4.9 "Nunca partir un codigo": el correo no se divide entre dos
       lineas. break-word parte solo en el ultimo recurso, cuando el correo no
       cabe entero en su propia linea; anywhere no, porque parte de entrada y
       ademas altera el ancho minimo del contenedor. */
    overflow-wrap: break-word;
    word-break: normal;
}

/* --------------------------------------------------------------- Referencia
   Superficie alterna, borde decorativo y radio de tarjeta (--ba-radius-md). */
.gp-ref[b-sec-graciasportucompra] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3) var(--ba-space-4);
    background: var(--ba-surface-alt);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    padding: var(--ba-space-4);
}

.gp-ref__datos[b-sec-graciasportucompra] {
    min-width: 0;
}

.gp-ref__label[b-sec-graciasportucompra] {
    margin: 0 0 var(--ba-space-1);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-text-muted);
}

/* .ba-tnum (site.css) aporta cifras tabulares, cero barrado y 'ss02'. El dato
   es un codigo del checkout: se lee, se copia y se dicta por telefono. */
.gp-ref__valor[b-sec-graciasportucompra] {
    margin: 0;
    font-size: var(--ba-text-h3);
    font-weight: 700;
    color: var(--ba-text);
    /* Solo 'tnum': el cero barrado lo aplica site.css con !important y no se
       anula aqui. Es el comportamiento correcto para un folio. */
    overflow-wrap: anywhere;
}

/* Anuncio del portapapeles. Se reserva su fila aunque este vacio, para que el
   texto appearing no empuje el boton hacia abajo y lo desalinee del valor. */
.gp-vivo[b-sec-graciasportucompra] {
    flex: 1 0 100%;
    min-height: 1.25rem;
    margin: 0;
    font-size: var(--ba-text-xs);
    color: var(--ba-text-muted);
}

/* --------------------------------------------------------------- Tarjetas */
.gp-card[b-sec-graciasportucompra] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    box-shadow: var(--ba-shadow-sm);
    padding: var(--ba-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
}

@media (min-width: 768px) {
    .gp-card[b-sec-graciasportucompra] {
        padding: var(--ba-space-6);
    }
}

.gp-card__titulo[b-sec-graciasportucompra] {
    margin: 0;
    font-size: var(--ba-text-h3);
    font-weight: 600;
    line-height: 1.3;
}

/* --------------------------------------------------------------- Proximos
   pasos. Cada paso es su propia fila de dos columnas: 24px de marca + cuerpo.
   Sin linea vertical que una los puntos: la retícula de dos columnas ya
   ordena la lectura, y dibujarla exigiria un pseudo-elemento anclado al <ol>
   cuya altura hay que recalcular cada vez que el texto del paso pasa de una a
   dos lineas en movil. La etapa actual se distingue por color de marca, icono
   y texto, no solo por la linea. */
.gp-pasos[b-sec-graciasportucompra] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
}

.gp-paso[b-sec-graciasportucompra] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--ba-space-3);
    align-items: start;
}

.gp-paso__punto[b-sec-graciasportucompra] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: var(--ba-radius-full);
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
    border: 1px solid var(--ba-border);
}

.gp-paso__punto svg[b-sec-graciasportucompra] {
    width: 1rem;
    height: 1rem;
}

/* El paso en curso se distingue por el par de informacion (fondo + texto), no
   solo por color: hay icono distinto y, sobre todo, el texto "En curso..." que
   dice lo mismo sin depender de la vista. */
.gp-paso--actual .gp-paso__punto[b-sec-graciasportucompra] {
    background: var(--ba-info-bg);
    color: var(--ba-info-text);
    border-color: var(--ba-info-bg);
}

.gp-paso__cuerpo[b-sec-graciasportucompra] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gp-paso__nombre[b-sec-graciasportucompra] {
    font-weight: 600;
}

.gp-paso__cuando[b-sec-graciasportucompra] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

/* --------------------------------------------------------------- Botones
   MASTER §7. Una sola accion principal por vista; el resto es enlace de texto
   (nivel 3 de §7.2), que es lo que corresponde a "Seguir comprando".
   NO se usan los nombres globales `.btn` / `.btn-primary` de Bootstrap ni los
   que site.css redefine: ver el comentario de cabecera del archivo. */
.gp-acciones[b-sec-graciasportucompra] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ba-space-3);
}

.gp-btn[b-sec-graciasportucompra] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    min-height: 48px;              /* §7.3: lg, el flujo de compra */
    padding: 0 var(--ba-space-6);
    font-family: inherit;
    font-size: var(--ba-text-base);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--ba-radius-sm);
    cursor: pointer;
    transition: background-color var(--ba-duration-fast) var(--ba-easing),
                color var(--ba-duration-fast) var(--ba-easing),
                border-color var(--ba-duration-fast) var(--ba-easing);
}

.gp-btn svg[b-sec-graciasportucompra] {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

.gp-btn--primario[b-sec-graciasportucompra] {
    background: var(--ba-primary);
    color: var(--ba-surface);
    border-color: var(--ba-primary);
}

@media (hover: hover) {
    .gp-btn--primario:hover[b-sec-graciasportucompra] {
        background: var(--ba-primary-hover);
        border-color: var(--ba-primary-hover);
    }
}

/* §7.4: presionado un paso mas oscuro, sin sombra y SIN transicion. */
.gp-btn--primario:active[b-sec-graciasportucompra] {
    background: var(--ba-primary-dark);
    border-color: var(--ba-primary-dark);
    transition: none;
}

.gp-btn--secundario[b-sec-graciasportucompra] {
    background: var(--ba-surface);
    color: var(--ba-primary);
    border-color: var(--ba-primary);
}

@media (hover: hover) {
    .gp-btn--secundario:hover[b-sec-graciasportucompra] {
        background: var(--ba-blue-50);
    }
}

.gp-btn--secundario:active[b-sec-graciasportucompra] {
    background: var(--ba-blue-50);
    color: var(--ba-primary-dark);
}

/* Anillo de foco de dos capas (MASTER §7.4): la oscura pegada al control y la
   clara por fuera. Invertir el orden produce un marco grueso flotante. El
   selector cubre el <a> y el <button> del bloque de referencia. */
.gp-btn:focus-visible[b-sec-graciasportucompra] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: 0;
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

/* En movil la accion principal ocupa el ancho completo (MASTER §7.6). */
@media (max-width: 480px) {
    .gp-btn--primario[b-sec-graciasportucompra] {
        width: 100%;
    }
}

/* Nivel 3 de §7.2: enlace de texto. min-height 44px conserva el area tactil
   aunque el texto sea de 16px (MASTER §7.3). */
.gp-enlace[b-sec-graciasportucompra] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-2);
    min-height: 44px;
    color: var(--ba-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--ba-duration-fast) var(--ba-easing);
}

.gp-enlace svg[b-sec-graciasportucompra] {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    transition: transform var(--ba-duration-fast) var(--ba-easing);
}

.gp-enlace:hover[b-sec-graciasportucompra] {
    color: var(--ba-primary-hover);
}

.gp-enlace:hover svg[b-sec-graciasportucompra] {
    transform: translateX(4px);
}

.gp-enlace:focus-visible[b-sec-graciasportucompra] {
    outline: 2px solid var(--ba-focus-outer);
    outline-offset: 0;
    box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

/* --------------------------------------------------------------- Confianza
   MASTER §1, prioridad 4: prueba de operacion, no testimoniales. */
.gp-confianza[b-sec-graciasportucompra] {
    margin: 0;
    padding: var(--ba-space-6) 0 0;
    list-style: none;
    border-top: 1px solid var(--ba-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ba-space-3) var(--ba-space-6);
}

.gp-confianza li[b-sec-graciasportucompra] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    font-size: var(--ba-text-sm);
    color: var(--ba-text);
}

.gp-confianza svg[b-sec-graciasportucompra] {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    color: var(--ba-primary);
}
.dv-page[b-sec-diasvacacionesv2] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--ba-text);
}

/* Header */
.dv-header[b-sec-diasvacacionesv2] {
    /* No sticky: los navs globales (banner + appbar, MainLayout.razor) son position:fixed
       con top ajustado dinámicamente por JS (ScrollToUp.js). No hay un offset fijo confiable
       para anclar este header sin quedar tapado o dejar un hueco, así que se deja fluir con
       el resto del contenido en vez de competir con esos navs. */
    z-index: 1;
    background: var(--ba-surface);
    border-bottom: 1px solid var(--ba-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ba-space-4) var(--ba-space-12);
    gap: var(--ba-space-6);
    flex-wrap: wrap;
}

.dv-header-left[b-sec-diasvacacionesv2] {
    display: flex;
    align-items: baseline;
    gap: var(--ba-space-3);
}

.dv-logo[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ba-primary);
}

.dv-logo-accent[b-sec-diasvacacionesv2] {
    color: var(--ba-red);
}

.dv-sep[b-sec-diasvacacionesv2] {
    width: 1px;
    height: 20px;
    background: var(--ba-border);
}

.dv-title[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-lg);
    font-weight: 600;
    margin: 0;
    color: var(--ba-text);
}

.dv-header-right[b-sec-diasvacacionesv2] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3);
}

/* Toggle Tarjetas/Calendario */
.dv-toggle[b-sec-diasvacacionesv2] {
    display: flex;
    gap: 4px;
    background: var(--ba-surface-alt);
    border-radius: var(--ba-radius-md);
    padding: 4px;
}

.dv-toggle-btn[b-sec-diasvacacionesv2] {
    border: none;
    background: transparent;
    padding: 6px var(--ba-space-4);
    border-radius: var(--ba-radius-sm);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    cursor: pointer;
    color: var(--ba-text-muted);
    transition: background var(--ba-duration-fast);
}

.dv-toggle-btn:hover[b-sec-diasvacacionesv2] {
    background: rgba(0, 0, 0, .05);
}

.dv-toggle-btn.active[b-sec-diasvacacionesv2] {
    background: var(--ba-surface);
    color: var(--ba-primary);
    box-shadow: var(--ba-shadow-sm);
}

/* Botones */
.dv-btn[b-sec-diasvacacionesv2] {
    height: 40px;
    padding: 0 var(--ba-space-4);
    border-radius: var(--ba-radius-sm);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ba-duration-fast);
    border: none;
}

.dv-btn-sm[b-sec-diasvacacionesv2] {
    height: 36px;
    padding: 0 var(--ba-space-3);
    font-size: 0.8125rem;
}

.dv-btn-primary[b-sec-diasvacacionesv2] {
    background: var(--ba-primary);
    color: #fff;
}

.dv-btn-primary:hover[b-sec-diasvacacionesv2] {
    background: var(--ba-primary-hover);
}

.dv-btn-outline[b-sec-diasvacacionesv2] {
    background: transparent;
    color: var(--ba-primary);
    border: 1px solid var(--ba-primary);
}

.dv-btn-outline:hover[b-sec-diasvacacionesv2] {
    background: var(--ba-surface-alt);
}

.dv-btn-ghost[b-sec-diasvacacionesv2] {
    background: var(--ba-surface);
    color: var(--ba-text);
    border: 1px solid var(--ba-border-input);
}

.dv-btn-ghost:hover[b-sec-diasvacacionesv2] {
    background: var(--ba-surface-alt);
}

.dv-icon-btn[b-sec-diasvacacionesv2] {
    width: 32px;
    height: 32px;
    border-radius: var(--ba-radius-sm);
    border: 1px solid var(--ba-border-input);
    background: var(--ba-surface);
    cursor: pointer;
    font-size: var(--ba-text-base);
}

/* Contenido */
.dv-content[b-sec-diasvacacionesv2] {
    flex: 1;
    padding: var(--ba-space-8) var(--ba-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-6);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.dv-muted[b-sec-diasvacacionesv2] {
    color: var(--ba-text-muted);
}

.dv-muted-sm[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-xs);
    color: var(--ba-text-muted);
}

/* Inputs */
.dv-input[b-sec-diasvacacionesv2] {
    height: 44px;
    padding: 0 var(--ba-space-3);
    border-radius: var(--ba-radius-sm);
    border: 1px solid var(--ba-border);
    font-size: var(--ba-text-base);
    color: var(--ba-text);
    width: 100%;
}

/*.dv-search {
    max-width: 480px;
}*/

.dv-textarea[b-sec-diasvacacionesv2] {
    height: auto;
    min-height: 56px;
    padding: var(--ba-space-2) var(--ba-space-3);
    resize: vertical;
}

.dv-label[b-sec-diasvacacionesv2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--ba-text-sm);
    font-weight: 600;
}

.dv-error[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-sm);
    color: var(--ba-danger);
}

/* Paneles (alta empleado / alta incidencia) */
.dv-panel[b-sec-diasvacacionesv2] {
    background: var(--ba-surface);
    border-radius: var(--ba-radius-md);
    margin-top: var(--ba-space-3);
    padding: var(--ba-space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.dv-panel-primary[b-sec-diasvacacionesv2] {
    border: 1px solid var(--ba-primary);
}

.dv-panel-title[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-md);
    font-weight: 600;
    margin: 0;
}

.dv-panel-title-sm[b-sec-diasvacacionesv2] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.dv-form-row[b-sec-diasvacacionesv2] {
    display: flex;
    gap: var(--ba-space-4);
}

.dv-form-grid[b-sec-diasvacacionesv2] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ba-space-3);
}

.dv-col-2[b-sec-diasvacacionesv2] {
    grid-column: 1 / -1;
}

.dv-form-actions[b-sec-diasvacacionesv2] {
    display: flex;
    justify-content: flex-end;
    gap: var(--ba-space-3);
}

/* Avatar */
.dv-avatar[b-sec-diasvacacionesv2] {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: var(--ba-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--ba-text-base);
}

.dv-avatar-lg[b-sec-diasvacacionesv2] {
    width: 72px;
    height: 72px;
    font-size: var(--ba-text-md);
}

/* Tarjetas de empleado */
.dv-emp-list[b-sec-diasvacacionesv2] {
    display: flex;
    flex-direction: column;
    padding-top: var(--ba-space-3);
    gap: var(--ba-space-4);
}

.dv-card[b-sec-diasvacacionesv2] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    box-shadow: var(--ba-shadow-sm);
    overflow: hidden;
}

.dv-card-head[b-sec-diasvacacionesv2] {
    cursor: pointer;
    padding: var(--ba-space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
}

.dv-card-top[b-sec-diasvacacionesv2] {
    display: flex;
    gap: var(--ba-space-3);
    align-items: center;
}

.dv-card-info[b-sec-diasvacacionesv2] {
    min-width: 0;
    flex: 1;
}

.dv-card-name[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-base);
    font-weight: 600;
    color: var(--ba-text);
}

.dv-card-puesto[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.dv-card-sucursal[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-xs);
    color: var(--ba-text-muted);
}

.dv-chevron[b-sec-diasvacacionesv2] {
    color: var(--ba-text-muted);
    font-size: var(--ba-text-xs);
    flex: none;
}

.dv-progress-row[b-sec-diasvacacionesv2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dv-progress-label[b-sec-diasvacacionesv2] {
    display: flex;
    justify-content: space-between;
    font-size: var(--ba-text-xs);
    color: var(--ba-text-muted);
}

.dv-progress[b-sec-diasvacacionesv2] {
    height: 8px;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-surface-alt);
    overflow: hidden;
}

.dv-progress-fill[b-sec-diasvacacionesv2] {
    height: 100%;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-primary);
}

.dv-badges[b-sec-diasvacacionesv2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.dv-badge[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-xs);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 99px;
    white-space: nowrap;
}

.dv-badge-extra[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-xs);
    font-weight: 500;
    color: var(--ba-text-muted);
}

.dv-card-body[b-sec-diasvacacionesv2] {
    border-top: 1px solid var(--ba-surface-alt);
    padding: var(--ba-space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-5, 20px);
    background: #FAFBFC;
}

.dv-edit-form[b-sec-diasvacacionesv2] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.dv-detail-row[b-sec-diasvacacionesv2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ba-space-4);
    flex-wrap: wrap;
}

.dv-detail-info[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dv-detail-actions[b-sec-diasvacacionesv2] {
    display: flex;
    gap: var(--ba-space-4);
}

.dv-link-danger[b-sec-diasvacacionesv2] {
    color: var(--ba-danger);
}

.dv-stats-row[b-sec-diasvacacionesv2] {
    display: flex;
    gap: var(--ba-space-3);
}

.dv-stat[b-sec-diasvacacionesv2] {
    flex: 1;
    background: var(--ba-surface-alt);
    border-radius: var(--ba-radius-md);
    padding: var(--ba-space-3);
    text-align: center;
}

.dv-stat-num[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-lg);
    font-weight: 700;
    color: var(--ba-primary);
}

.dv-stat-label[b-sec-diasvacacionesv2] {
    font-size: 0.6875rem;
    color: var(--ba-text-muted);
}

.dv-section-title[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-base);
    font-weight: 600;
    margin: 0;
}

.dv-incidents[b-sec-diasvacacionesv2] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.dv-incident-list[b-sec-diasvacacionesv2] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-2);
}

.dv-incident-item[b-sec-diasvacacionesv2] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3);
    padding: 10px var(--ba-space-3);
    border: 1px solid var(--ba-surface-alt);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface);
}

.dv-incident-info[b-sec-diasvacacionesv2] {
    flex: 1;
    min-width: 0;
    font-size: var(--ba-text-sm);
}

.dv-empty[b-sec-diasvacacionesv2] {
    text-align: center;
    padding: var(--ba-space-12) 0;
    color: var(--ba-text-muted);
}

/* Calendario */
.dv-panel-card[b-sec-diasvacacionesv2] {
    background: var(--ba-surface);
    border-radius: var(--ba-radius-lg);
    box-shadow: var(--ba-shadow-sm);
    padding: var(--ba-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-5, 20px);
}

.dv-cal-header[b-sec-diasvacacionesv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dv-cal-nav[b-sec-diasvacacionesv2] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3);
}

.dv-cal-title[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-xl);
    font-weight: 600;
    margin: 0;
    min-width: 200px;
    text-align: center;
}

.dv-cal-grid[b-sec-diasvacacionesv2] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--ba-border);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-sm);
    overflow: hidden;
}

.dv-cal-dayname[b-sec-diasvacacionesv2] {
    background: var(--ba-surface-alt);
    padding: var(--ba-space-2);
    font-size: var(--ba-text-xs);
    font-weight: 600;
    color: var(--ba-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
}

.dv-cal-cell[b-sec-diasvacacionesv2] {
    min-height: 110px;
    padding: var(--ba-space-2);
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.dv-cal-daynum[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-xs);
}

.dv-cal-item[b-sec-diasvacacionesv2] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border-radius: var(--ba-radius-sm);
    overflow: hidden;
}

.dv-cal-dot[b-sec-diasvacacionesv2] {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: currentColor;
    flex: none;
}

.dv-cal-code[b-sec-diasvacacionesv2] {
    font-size: 0.6875rem;
    font-weight: 700;
    flex: none;
}

.dv-cal-name[b-sec-diasvacacionesv2] {
    font-size: 0.6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-cal-extra[b-sec-diasvacacionesv2] {
    font-size: 0.6875rem;
    color: var(--ba-text-muted);
    font-weight: 600;
}

.dv-legend[b-sec-diasvacacionesv2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ba-space-4);
    padding-top: var(--ba-space-2);
    border-top: 1px solid var(--ba-surface-alt);
}

.dv-legend-item[b-sec-diasvacacionesv2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ba-text-xs);
    color: var(--ba-text-muted);
}

.dv-legend-dot[b-sec-diasvacacionesv2] {
    width: 10px;
    height: 10px;
    border-radius: 99px;
}

.dv-selected-day[b-sec-diasvacacionesv2] {
    border-top: 1px solid var(--ba-surface-alt);
    padding-top: var(--ba-space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.dv-selected-day-head[b-sec-diasvacacionesv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Reporte */
.dv-report-head[b-sec-diasvacacionesv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ba-space-3);
}

.dv-report-title[b-sec-diasvacacionesv2] {
    font-size: var(--ba-text-xl);
    font-weight: 600;
    margin: 0 0 4px;
}

.dv-table-wrap[b-sec-diasvacacionesv2] {
    overflow-x: auto;
}

.dv-table[b-sec-diasvacacionesv2] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ba-text-sm);
}

.dv-table th[b-sec-diasvacacionesv2] {
    text-align: left;
    padding: 10px 8px;
    color: var(--ba-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--ba-border);
}

.dv-table td[b-sec-diasvacacionesv2] {
    padding: 10px 8px;
    border-bottom: 1px solid var(--ba-surface-alt);
}

@media print {
    .dv-header[b-sec-diasvacacionesv2], .dv-report-head .dv-form-actions[b-sec-diasvacacionesv2] {
        display: none;
    }
}