/* Carrito, mini-carrito, checkout y estado de pedido.
   Sigue la paleta del sitio (navbar-completo-fravega.css / tienda-ui.css). */
:root {
    --tc-accent: #00B1F0;
    --tc-primary: #2095CE;
    --tc-secondary: #186489;
    --tc-bg: #EDF1EE;
    --tc-text: #333;
    --tc-muted: #646464;
    --tc-border: #e4e4e4;
    --tc-border-soft: #eef1ef;
    --tc-soft: #f7fbff;
    --tc-success: #1e9e62;
    --tc-warning: #8a5300;
    --tc-danger: #ef3e55;
    --tc-radius: 10px;
    --tc-shadow: 0 2px 4px #00000014;
    --tc-shadow-up: 0 -6px 18px #00000014;
}

/* Solo arriba y abajo: los costados son los del .container de Bootstrap. Con "padding: 0 0 56px" se perdían
   y la .row (márgenes de -15px) quedaba 15px más ancha que la pantalla en el celular. */
.tc-page {
    padding-top: 0;
    padding-bottom: 56px;
    min-height: 60vh;
}

/* El carrito va con el navbar completo del sitio: necesita aire arriba */
.tc-page.tc-page-carrito {
    padding-top: 32px;
}

/* Página del pedido: separa la tarjeta principal del header */
.tc-page.tc-page-pedido {
    padding-top: 32px;
}

@media (max-width: 767.98px) {
    /* En el celular el .container del sitio queda sin padding lateral: las tarjetas tocaban el borde */
    .container.tc-page.tc-page-pedido {
        padding-top: 20px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

.tc-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--tc-text);
    margin: 0 0 2px;
    letter-spacing: -.2px;
}

.tc-subtitle {
    color: var(--tc-muted);
    font-size: .81rem;
    margin: 0;
}

.tc-card {
    background: #fff;
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow);
    padding: 20px;
    margin-bottom: 16px;
}

.tc-card+.tc-card {
    margin-top: 0;
}

.tc-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--tc-text);
}

.tc-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tc-secondary);
    color: #fff;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tc-card.is-done .tc-step-num {
    background: var(--tc-success);
}

/* ---------- Carrito: encabezado ---------- */
.tc-cart-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tc-cart-back {
    display: none;
    font-size: .84rem;
    font-weight: 600;
    color: var(--tc-secondary);
    white-space: nowrap;
}

.tc-cart-back:hover {
    color: var(--tc-primary);
    text-decoration: none;
}

/* ---------- Carrito: grilla (móvil: resumen primero / escritorio: resumen a la derecha) ---------- */
.tc-cart-grid {
    display: grid;
    gap: 14px;
}

.tc-cart-summary {
    grid-row: 1;
    min-width: 0;
}

.tc-cart-products {
    grid-row: 2;
    min-width: 0;
}

@media (min-width: 992px) {
    .tc-title {
        font-size: 1.625rem;
    }

    .tc-cart-head {
        margin-bottom: 18px;
    }

    .tc-cart-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .tc-cart-grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 24px;
        align-items: start;
    }

    .tc-cart-products {
        grid-column: 1;
        grid-row: 1;
    }

    .tc-cart-summary {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 16px;
    }
}

/* ---------- Carrito: tarjeta de productos ---------- */
.tc-products {
    padding: 0 16px;
}

.tc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tc-border);
}

.tc-card-head h2 {
    font-size: .94rem;
    font-weight: 600;
    margin: 0;
}

.tc-card-hint {
    font-size: .75rem;
    color: var(--tc-muted);
}

/* selección de productos para eliminar */
.tc-check {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--tc-secondary);
    cursor: pointer;
}

.tc-item-check {
    grid-area: check;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 64px;
    margin: 0;
    cursor: pointer;
}

.tc-item.is-selected {
    background: var(--tc-soft);
    box-shadow: -16px 0 0 var(--tc-soft), 16px 0 0 var(--tc-soft);
}

.tc-bulk-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tc-danger);
    border-radius: 6px;
    background: #fff;
    color: var(--tc-danger);
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background .15s, color .15s;
}

.tc-bulk-remove:hover {
    background: var(--tc-danger);
    color: #fff;
}

.tc-bulk-remove[hidden],
.tc-card-hint[hidden] {
    display: none;
}

.tc-products-foot {
    padding: 12px 0;
    border-top: 1px solid var(--tc-border-soft);
}

.tc-products-foot a {
    font-size: .82rem;
    font-weight: 600;
    color: var(--tc-secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tc-products-foot a:hover {
    color: var(--tc-primary);
    text-decoration: none;
}

/* ---------- Carrito: línea de producto ----------
   Celular y tablet: dos columnas. La foto (con la casilla de selección encima) a la izquierda; a la derecha el
   nombre a todo el ancho y debajo la cantidad con el total al lado. Escritorio: una fila (ver min-width: 992px). */
.tc-item {
    display: grid;
    grid-template-columns: 76px auto minmax(0, 1fr);
    grid-template-areas:
        "img main main"
        "img actions price";
    gap: 10px 12px;
    padding: 14px 0;
    border-top: 1px solid var(--tc-border);
    align-items: start;
}

.tc-item:first-child {
    border-top: 0;
}

.tc-item-img {
    grid-area: img;
    width: 76px;
    height: 76px;
    object-fit: contain;
    border: 1px solid var(--tc-border-soft);
    border-radius: 10px;
    background: #fff;
}

.tc-item-main {
    grid-area: main;
    min-width: 0;
}

.tc-item-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.3;
    color: var(--tc-text);
}

.tc-item-name:hover {
    color: var(--tc-primary);
    text-decoration: none;
}

.tc-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: .78rem;
    color: var(--tc-muted);
    margin-top: 5px;
}

.tc-item-unit {
    font-variant-numeric: tabular-nums;
}

.tc-item-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    color: var(--tc-warning);
}

.tc-item-price {
    grid-area: price;
    align-self: center;
    text-align: right;
    white-space: nowrap;
}

.tc-item-price .tc-price {
    font-size: 1.06rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tc-item-price del {
    display: block;
    font-size: .72rem;
    color: var(--tc-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

.tc-item-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Casilla de selección sobre la esquina de la foto (en escritorio vuelve a su columna) */
@media (max-width: 991.98px) {
    .tc-item-check {
        grid-area: img;
        z-index: 1;
        justify-self: start;
        align-self: start;
        width: 28px;
        height: 28px;
        margin: -6px 0 0 -6px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 3px #0000001f;
    }

    .tc-item .tc-qty {
        height: 36px;
    }

    .tc-item-price {
        padding-right: 6px;
    }

    .tc-item-price .tc-price {
        font-size: 1rem;
    }
}

.tc-item-error {
    color: var(--tc-danger);
    font-size: .78rem;
    font-weight: 500;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tc-item.has-error .tc-item-img {
    opacity: .55;
}

@media (min-width: 992px) {
    .tc-item {
        grid-template-columns: 22px 72px minmax(0, 1fr) 132px 124px;
        grid-template-areas: "check img main qty price";
        gap: 16px;
        align-items: center;
        padding: 16px 0;
    }

    .tc-item-img {
        width: 72px;
        height: 72px;
    }

    .tc-item-main {
        align-self: center;
    }

    .tc-item-name {
        font-size: .94rem;
    }

    .tc-item-meta {
        font-size: .8rem;
    }

    .tc-item-actions {
        display: contents;
    }

    .tc-item .tc-qty {
        grid-area: qty;
    }

    .tc-item-check {
        height: 72px;
    }

    /* Aire entre el total del producto y el borde derecho de la tarjeta */
    .tc-item-price {
        padding-right: 20px;
    }

    .tc-item-price .tc-price {
        font-size: 1.06rem;
    }
}

/* cantidad */
.tc-qty {
    display: inline-flex;
    align-items: center;
    height: 40px;
    width: 132px;
    border: 1px solid #dfe3e1;
    border-radius: 6px;
    overflow: hidden;
    background: #F7F8F7;
}

.tc-qty button {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--tc-text);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.tc-qty button:hover:not(:disabled) {
    background: var(--tc-secondary);
    color: #fff;
}

.tc-qty button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.tc-qty input {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 700;
    font-size: .87rem;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.tc-qty input::-webkit-outer-spin-button,
.tc-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tc-qty input:focus {
    outline: 2px solid var(--tc-accent);
    outline-offset: -2px;
}

/* diálogo de confirmación */
.tc-dialog {
    width: calc(100% - 32px);
    max-width: 380px;
    padding: 0;
    border: 0;
    border-radius: var(--tc-radius);
    box-shadow: 0 18px 48px #00000033;
    color: var(--tc-text);
}

.tc-dialog::backdrop {
    background: #0f2a3a73;
}

.tc-dialog[open] {
    animation: tc-dialog-in .2s cubic-bezier(.2, .7, .3, 1);
}

@keyframes tc-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
}

.tc-dialog form {
    padding: 22px 20px 18px;
    text-align: center;
}

.tc-dialog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fdecef;
    color: var(--tc-danger);
    font-size: 1.1rem;
}

.tc-dialog-title {
    margin: 12px 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
}

.tc-dialog-list {
    max-height: 160px;
    overflow-y: auto;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: .82rem;
    color: var(--tc-muted);
}

.tc-dialog-list li {
    padding: 2px 0;
}

.tc-dialog-actions {
    display: flex;
    gap: 10px;
}

.tc-dialog-actions .tc-btn {
    padding: 11px 14px;
}

.tc-btn-danger {
    background: var(--tc-danger);
}

.tc-btn-danger:hover:not(:disabled) {
    background: #d12a40;
    box-shadow: 0 4px 10px #ef3e5540;
}

@media (prefers-reduced-motion: reduce) {
    .tc-dialog[open] {
        animation: none;
    }
}

/* etiquetas */
.tc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    background: #e6f7fd;
    color: var(--tc-secondary);
    white-space: nowrap;
}

.tc-tag-combo {
    background: var(--tc-secondary);
    color: #fff;
}

.tc-tag-free {
    background: #e8f6ef;
    color: var(--tc-success);
}

/* ---------- Resumen (carrito y checkout) ---------- */
.tc-summary {
    position: relative;
    background: var(--tc-soft);
    border-top: 3px solid var(--tc-secondary);
    border-radius: var(--tc-radius);
    padding: 18px;
}

.tc-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.tc-summary-head h2 {
    font-size: .92rem;
    font-weight: 500;
    color: var(--tc-muted);
    margin: 0;
}

.tc-summary-count {
    font-size: .72rem;
    color: var(--tc-muted);
}

.tc-summary-total {
    display: block;
    margin-top: 6px;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.8px;
    color: var(--tc-secondary);
    font-variant-numeric: tabular-nums;
}

/* Total + chip con la diferencia al cambiar método de pago / envío */
.tc-summary-total-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 6px;
}

.tc-summary-total-wrap .tc-summary-total {
    margin-top: 0;
}

.tc-summary-total.is-baja {
    animation: tc-total-baja .9s cubic-bezier(.2, .7, .3, 1);
}

.tc-summary-total.is-sube {
    animation: tc-total-sube .9s cubic-bezier(.2, .7, .3, 1);
}

@keyframes tc-total-baja {
    0% {
        color: var(--tc-success);
        transform: translateY(-5px);
    }

    60% {
        color: var(--tc-success);
        transform: none;
    }
}

@keyframes tc-total-sube {
    0% {
        color: var(--tc-warning);
        transform: translateY(5px);
    }

    60% {
        color: var(--tc-warning);
        transform: none;
    }
}

.tc-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    pointer-events: none;
}

.tc-delta:empty {
    display: none;
}

.tc-delta.is-baja {
    color: var(--tc-success);
    background: #e3f5ec;
}

.tc-delta.is-sube {
    color: var(--tc-warning);
    background: #fdf0de;
}

.tc-delta.is-visible.is-baja {
    animation: tc-delta-baja 2.4s ease forwards;
}

.tc-delta.is-visible.is-sube {
    animation: tc-delta-sube 2.4s ease forwards;
}

@keyframes tc-delta-baja {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }

    12%,
    75% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: translateY(4px);
    }
}

@keyframes tc-delta-sube {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    12%,
    75% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* Variante sin color (carrito): solo el movimiento y el chip en el tono de la marca */
.tc-summary-total-wrap.is-neutral .tc-summary-total.is-baja {
    animation-name: tc-total-baja-neutro;
}

.tc-summary-total-wrap.is-neutral .tc-summary-total.is-sube {
    animation-name: tc-total-sube-neutro;
}

.tc-summary-total-wrap.is-neutral .tc-delta {
    color: var(--tc-secondary);
    background: #e8f1f7;
}

@keyframes tc-total-baja-neutro {
    0% {
        transform: translateY(-5px);
    }

    60% {
        transform: none;
    }
}

@keyframes tc-total-sube-neutro {
    0% {
        transform: translateY(5px);
    }

    60% {
        transform: none;
    }
}

/* Filas del resumen que aparecen / desaparecen (ej. descuento por método de pago) */
.tc-row.is-entrando {
    overflow: hidden;
    animation: tc-fila-entra .3s ease;
}

.tc-row.is-saliendo {
    overflow: hidden;
    animation: tc-fila-sale .25s ease forwards;
}

@keyframes tc-fila-entra {
    from {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }

    to {
        max-height: 40px;
        opacity: 1;
    }
}

@keyframes tc-fila-sale {
    from {
        max-height: 40px;
        opacity: 1;
    }

    to {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tc-summary-total.is-baja,
    .tc-summary-total.is-sube,
    .tc-summary-total-wrap.is-neutral .tc-summary-total.is-baja,
    .tc-summary-total-wrap.is-neutral .tc-summary-total.is-sube {
        animation: none;
    }

    .tc-delta.is-visible.is-baja,
    .tc-delta.is-visible.is-sube {
        animation-name: tc-delta-fade;
    }

    @keyframes tc-delta-fade {

        0%,
        100% {
            opacity: 0;
        }

        10%,
        80% {
            opacity: 1;
        }
    }
}

.tc-summary-note {
    margin: 6px 0 0;
    font-size: .75rem;
    color: var(--tc-muted);
}

.tc-summary-lines {
    margin-top: 14px;
    border-top: 1px solid #d6e4ee;
    padding-top: 4px;
}

.tc-summary-coupon {
    margin-top: 12px;
    margin-bottom: 12px;
    border-top: 1px solid #d6e4ee;
    padding-top: 12px;
}

/* "¿Tenés un código de descuento?": abre el campo del cupón */
.tc-cupon-abrir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: var(--tc-secondary);
    cursor: pointer;
}

.tc-cupon-abrir i {
    color: var(--tc-primary);
}

.tc-cupon-abrir:hover {
    color: var(--tc-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tc-cupon-abrir:focus-visible {
    outline: 2px solid var(--tc-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.tc-cupon-abrir[hidden],
.tc-cupon-campo[hidden] {
    display: none;
}

.tc-cupon-campo {
    animation: tc-cupon-aparece .2s ease-out;
}

@keyframes tc-cupon-aparece {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-cupon-campo {
        animation: none;
    }
}

.tc-summary-coupon label {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: var(--tc-muted);
    margin-bottom: 6px;
}

.tc-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .84rem;
    padding: 6px 0;
}

.tc-row .tc-muted {
    color: var(--tc-muted);
}

.tc-row.tc-discount {
    color: var(--tc-success);
}

.tc-row.tc-shipping .tc-muted {
    color: var(--tc-muted);
}

.tc-row.tc-gratis span:last-child {
    color: var(--tc-success);
    font-weight: 700;
}

.tc-row.tc-gratis i {
    margin-right: 4px;
    font-size: .9em;
}

.tc-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-top: 1px solid #d6e4ee;
    margin-top: 10px;
    padding-top: 12px;
}

.tc-total span:first-child {
    font-weight: 600;
}

.tc-total strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tc-secondary);
    font-variant-numeric: tabular-nums;
}

/* Cargando: una barra recorre el borde superior. No cambia la posición del resumen (en el checkout es sticky:
   antes pasaba a relative y el resumen saltaba de lugar mientras recalculaba). El recorte deja ver la barra sobre
   el borde y la corta en los costados. */
.tc-summary.is-loading {
    clip-path: inset(0 round var(--tc-radius));
}

.tc-summary.is-loading::after {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    height: 3px;
    width: 40%;
    background: var(--tc-accent);
    animation: tc-loading 1s linear infinite;
}

@keyframes tc-loading {
    from {
        left: -40%;
    }

    to {
        left: 100%;
    }
}

/* mini item del resumen del checkout */
.tc-mini-item {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: .8rem;
    padding: 6px 0;
}

.tc-mini-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    flex-shrink: 0;
}

.tc-mini-item .tc-mini-name {
    flex: 1;
    line-height: 1.25;
}

.tc-mini-item .tc-mini-qty {
    color: var(--tc-muted);
}

.tc-mini-opinar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--tc-secondary);
}

.tc-mini-opinar:hover {
    color: var(--tc-primary);
    text-decoration: none;
}

.tc-mini-opinar.is-done {
    color: var(--tc-success);
    font-weight: 500;
}

.tc-mini-item .tc-mini-opinar {
    display: flex;
    width: max-content;
}

/* Productos del pedido */
.tc-card-count {
    margin-left: 2px;
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--tc-bg);
    font-size: .75rem;
    font-weight: 600;
    color: var(--tc-muted);
}

.tc-pedido-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-pedido-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
}

.tc-pedido-item+.tc-pedido-item {
    border-top: 1px solid var(--tc-border-soft);
}

.tc-pedido-item:first-child {
    padding-top: 4px;
}

.tc-pedido-item-media {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--tc-border-soft);
    background: #fff;
}

.tc-pedido-item-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Sin foto: el mismo ícono y texto que la card de producto */
.tc-sin-imagen {
    display: grid;
    justify-items: center;
    gap: 2px;
    font-size: 9.5px;
    line-height: 1.1;
    color: var(--tc-muted);
}

.tc-sin-imagen[hidden] {
    display: none;
}

.tc-sin-imagen i {
    font-size: 20px;
    color: #C9D5D9;
}

.tc-pedido-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.tc-pedido-item-name {
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tc-text);
}

a.tc-pedido-item-name:hover {
    color: var(--tc-secondary);
}

.tc-pedido-item-qty {
    font-size: .8rem;
    color: var(--tc-muted);
}

.tc-pedido-item-total {
    flex-shrink: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tc-text);
    white-space: nowrap;
}

/* Calificar: cinco estrellas grises que se pintan al pasar el mouse.
   Van en orden inverso (5..1) con row-reverse para pintar la estrella y las de su izquierda con ~ */
.tc-rate {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 6px 8px 6px 12px;
    border-radius: 8px;
    background: #FFF7E3;
    border: 1px solid #F6E2AE;
}

.tc-rate-label {
    font-size: .8rem;
    font-weight: 600;
    color: #7A4B00;
}

.tc-rate-stars {
    display: inline-flex;
    flex-direction: row-reverse;
}

.tc-rate-stars a {
    padding: 0 2px;
    font-size: 1.15rem;
    line-height: 1;
    color: #EBD49A;
    transition: color .12s ease, transform .12s ease;
}

.tc-rate-stars a:hover,
.tc-rate-stars a:hover~a,
.tc-rate-stars a:focus-visible,
.tc-rate-stars a:focus-visible~a {
    color: #F2A200;
}

.tc-rate-stars a:hover {
    transform: scale(1.15);
}

.tc-rate-stars a:focus-visible {
    outline: 2px solid var(--tc-primary);
    outline-offset: 1px;
    border-radius: 3px;
}

.tc-rate-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: .8rem;
    font-weight: 500;
    color: #17794f;
}

@media (max-width: 575.98px) {
    .tc-pedido-item {
        flex-wrap: wrap;
    }

    .tc-pedido-item-total {
        margin-left: 78px;
        margin-top: -6px;
    }
}

.tc-mini-hint {
    margin: 6px 0 0;
    font-size: .75rem;
    color: var(--tc-muted);
}

.tc-coupon {
    display: flex;
    gap: 8px;
}

.tc-coupon input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    padding: 0 12px;
    font-size: .82rem;
    background: #fff;
    text-transform: uppercase;
}

.tc-coupon input:focus {
    outline: none;
    border-color: var(--tc-accent);
    box-shadow: 0 0 0 3px #00b1f026;
}

.tc-coupon .btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid var(--tc-primary);
    color: var(--tc-secondary);
    font-size: .82rem;
    font-weight: 600;
    background: transparent;
    white-space: nowrap;
}

.tc-coupon .btn:hover {
    background: var(--tc-secondary);
    border-color: var(--tc-secondary);
    color: #fff;
}

.tc-coupon-msg {
    font-size: .78rem;
    margin-top: 6px;
}

.tc-coupon-msg.ok {
    color: var(--tc-success);
}

.tc-coupon-msg.error {
    color: var(--tc-danger);
}

/* ---------- Botones ---------- */
.tc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-radius: 6px;
    padding: 13px 18px;
    font-weight: 600;
    font-size: .94rem;
    background: var(--tc-primary);
    color: #fff;
    transition: background .2s, box-shadow .2s;
}

.tc-btn:hover:not(:disabled) {
    background: var(--tc-secondary);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 10px #18648940;
}

.tc-btn:disabled,
.tc-btn.disabled {
    background: #b3b3b3;
    cursor: not-allowed;
}

.tc-btn-outline {
    background: #fff;
    color: var(--tc-secondary);
    border: 1px solid var(--tc-primary);
}

.tc-btn-outline:hover:not(:disabled) {
    background: var(--tc-secondary);
    color: #fff;
    border-color: var(--tc-secondary);
}

.tc-btn-mp {
    background: #009ee3;
}

.tc-btn-mp:hover:not(:disabled) {
    background: #007eb5;
}

.tc-btn .lds-ring,
.tc-btn .tc-spinner {
    display: none;
}

.tc-btn.is-loading .tc-spinner {
    display: inline-block;
}

.tc-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff80;
    border-top-color: #fff;
    border-radius: 50%;
    animation: tc-spin .7s linear infinite;
}

@keyframes tc-spin {
    to {
        transform: rotate(360deg);
    }
}

.tc-link {
    color: var(--tc-secondary);
    font-weight: 500;
}

.tc-link:hover {
    color: var(--tc-primary);
}

.tc-terms-note {
    margin: 6px 0 0;
    text-align: center;
    color: var(--tc-muted);
    font-size: .7rem;
}

.tc-terms-note a {
    color: inherit;
    text-decoration: underline;
}

.tc-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--tc-muted);
    font-size: .72rem;
    margin-top: 10px;
}

/* ---------- Alertas ---------- */
.tc-alert {
    border-radius: 8px;
    padding: 12px 14px;
    font-size: .85rem;
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.tc-alert i {
    margin-top: 2px;
}

.tc-alert-danger {
    background: #fdecef;
    color: #a3192d;
}

.tc-alert-success {
    background: #e8f6ef;
    color: #146b43;
}

.tc-alert-info {
    background: #e6f7fd;
    color: var(--tc-secondary);
}

.tc-alert-warning {
    background: #fff5e6;
    color: var(--tc-warning);
}

/* ---------- Opciones (envío / pago) ---------- */
.tc-options {
    display: grid;
    gap: 10px;
}

/* Opciones de envío mientras se recalculan (cambió el código postal, la provincia o la localidad) */
.tc-option-esqueleto {
    height: 66px;
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    background: linear-gradient(90deg, #EEF3F5 0%, #EEF3F5 35%, #F8FAFB 50%, #EEF3F5 65%, #EEF3F5 100%);
    background-size: 300% 100%;
    animation: tc-esqueleto 1.3s cubic-bezier(.4, 0, .2, 1) infinite;
}

.tc-option-esqueleto:nth-child(2) {
    animation-delay: .1s;
}

.tc-option-esqueleto:nth-child(3) {
    animation-delay: .2s;
}

@keyframes tc-esqueleto {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-option-esqueleto {
        animation: none;
    }
}

.tc-option {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
}

.tc-option:hover {
    border-color: #b7dcec;
}

.tc-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tc-option .tc-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #b3b3b3;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
}

.tc-option input:checked~.tc-radio {
    border-color: var(--tc-primary);
}

.tc-option input:checked~.tc-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--tc-primary);
}

.tc-option input:focus-visible~.tc-radio {
    box-shadow: 0 0 0 3px #2095ce40;
}

.tc-option.is-checked {
    border-color: var(--tc-primary);
    box-shadow: 0 0 0 1px var(--tc-primary);
    background: #fbfdff;
}

.tc-option-body {
    flex: 1;
    min-width: 0;
}

.tc-option-title {
    font-weight: 600;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tc-option-desc {
    font-size: .78rem;
    color: var(--tc-muted);
    margin-top: 2px;
}

.tc-option-price {
    font-weight: 600;
    white-space: nowrap;
    font-size: .9rem;
}

.tc-option-price.free {
    color: var(--tc-success);
}

.tc-option-logo {
    width: 76px;
    height: auto;
    flex-shrink: 0;
    align-self: center;
}

.tc-option-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e6f7fd;
    color: var(--tc-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tc-badge-off {
    background: var(--tc-success);
    color: #fff;
    font-size: .7rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
}

.tc-badge-up {
    background: #fff5e6;
    color: var(--tc-warning);
    font-size: .7rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
}

/* ---------- Formularios del checkout ---------- */
.tc-form label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--tc-muted);
    margin-bottom: 4px;
}

.tc-form .form-control {
    border-radius: 6px;
    border-color: #d8d8d8;
    font-size: .87rem;
    height: 44px;
}

.tc-form textarea.form-control {
    height: auto;
}

.tc-form .form-control:focus {
    border-color: var(--tc-accent);
    box-shadow: 0 0 0 3px #00b1f026;
}

.tc-form .is-invalid {
    border-color: var(--tc-danger) !important;
}

.tc-empty-note {
    font-size: .82rem;
    color: var(--tc-muted);
    padding: 10px 0;
}

/* Zipnova no respondió: se avisa arriba de las opciones que quedaron (retiro, coordinar) */
.tc-aviso-envio {
    margin-bottom: 10px !important;
    padding: 10px 12px;
    border-radius: 8px;
    background: #FFF6E5;
    color: #8A5300;
}

.tc-aviso-envio i {
    margin-right: 4px;
}

/* ---------- Carrito vacío ---------- */
.tc-empty {
    text-align: center;
    padding: 36px 20px;
    max-width: 520px;
    margin: 0 auto;
}

.tc-empty-icon {
    color: var(--tc-primary);
    font-size: 1.9rem;
    display: inline-flex;
    margin-bottom: 14px;
}

.tc-empty h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.tc-empty p {
    color: var(--tc-muted);
    font-size: .84rem;
    margin-bottom: 0;
}

.tc-empty-actions {
    display: grid;
    gap: 8px;
    margin-top: 22px;
}

@media (min-width: 576px) {
    .tc-empty-actions {
        display: flex;
        justify-content: center;
    }

    .tc-empty-actions .tc-btn {
        width: auto;
        padding-left: 28px;
        padding-right: 28px;
    }
}

/* ---------- Estado del pedido ---------- */
.tc-hero {
    text-align: center;
    padding: 28px 20px 24px;
}

.tc-hero-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 12px;
    color: #fff;
    background: var(--tc-accent);
}

.tc-hero-icon.ok {
    background: var(--tc-success);
}

.tc-hero-icon.wait {
    background: #EF7F00;
}

.tc-hero-icon.bad {
    background: var(--tc-danger);
}

.tc-hero h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.tc-hero p {
    color: var(--tc-muted);
    margin: 0;
}

.tc-code {
    display: inline-block;
    margin-top: 10px;
    background: var(--tc-bg);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .5px;
}

/* Estado actual del pedido, al lado del código */
.tc-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.tc-hero-meta .tc-code {
    margin-top: 0;
}

.tc-estado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .85rem;
    font-weight: 600;
    background: var(--tc-soft);
    color: var(--tc-secondary);
}

.tc-estado-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.tc-estado.is-ok {
    background: #e8f6ef;
    color: #17794f;
}

.tc-estado.is-wait {
    background: #fff3e3;
    color: #8a5300;
}

.tc-estado.is-bad {
    background: #fdecef;
    color: #b4453a;
}

.tc-estado.is-off {
    background: var(--tc-bg);
    color: var(--tc-muted);
}

/* Datos de entrega */
.tc-envio {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 10px 0 0;
    font-size: .85rem;
}

.tc-envio dt {
    font-weight: 500;
    color: var(--tc-muted);
}

.tc-envio dd {
    margin: 0;
    color: var(--tc-text);
}

.tc-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 10px 0 4px;
    padding: 0;
    list-style: none;
}

.tc-timeline::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--tc-border);
}

.tc-timeline li {
    position: relative;
    flex: 1;
    text-align: center;
    font-size: .75rem;
    color: var(--tc-muted);
}

.tc-timeline .dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--tc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    position: relative;
    z-index: 1;
    font-size: .7rem;
}

.tc-timeline li.done {
    color: var(--tc-text);
    font-weight: 500;
}

.tc-timeline li.done .dot {
    background: var(--tc-success);
    border-color: var(--tc-success);
    color: #fff;
}

.tc-timeline li.current .dot {
    border-color: var(--tc-primary);
    color: var(--tc-primary);
}

.tc-bank {
    background: var(--tc-soft);
    border-radius: 8px;
    padding: 6px 16px;
}

.tc-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e3edf4;
    font-size: .9rem;
}

.tc-bank-row:last-child {
    border-bottom: 0;
}

.tc-bank-row span {
    color: var(--tc-muted);
}

.tc-bank-row strong {
    word-break: break-all;
    text-align: right;
}

.tc-copy {
    border: 0;
    background: transparent;
    color: var(--tc-primary);
    padding: 0 0 0 8px;
}

.tc-copy:hover {
    color: var(--tc-secondary);
}

.tc-upload {
    border: 2px dashed #c9dbe6;
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    display: block;
    color: var(--tc-muted);
    font-size: .88rem;
    margin: 0;
}

.tc-upload:hover,
.tc-upload.is-dragover {
    border-color: var(--tc-accent);
    background: #fbfdff;
}

.tc-upload {
    transition: border-color .15s ease, background-color .15s ease;
}

.tc-upload.is-dragover {
    border-style: solid;
    background: #eef8fd;
}

.tc-upload.has-file {
    border-style: solid;
    border-color: var(--tc-success);
    color: var(--tc-text);
}

.tc-upload-hint {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
}

.tc-upload input {
    display: none;
}

/* ---------- Layout del checkout ---------- */
.tc-header {
    background: #fff;
    border-bottom: 1px solid var(--tc-border);
}

.tc-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.tc-header img {
    max-height: 42px;
    max-width: 180px;
}

.tc-header-secure {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tc-muted);
    font-size: .85rem;
}

.tc-header-secure i {
    color: var(--tc-success);
}

.tc-steps {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    color: var(--tc-muted);
    margin: 18px 0 6px;
    flex-wrap: wrap;
}

.tc-steps span.active {
    color: var(--tc-secondary);
    font-weight: 600;
}

.tc-steps i {
    font-size: .6rem;
    color: #b3b3b3;
}

.tc-footer {
    text-align: center;
    font-size: .78rem;
    color: var(--tc-muted);
    padding: 24px 0 32px;
}

.tc-footer a {
    color: var(--tc-muted);
}

/* ---------- Resumen del checkout ---------- */
@media (min-width: 992px) {
    .tc-checkout-summary {
        position: sticky;
        top: 20px;
    }
}

.tc-summary-products {
    margin-top: 12px;
    border-top: 1px solid #d6e4ee;
    padding-top: 10px;
}

.tc-summary-products>summary,
.tc-summary-products>button {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tc-secondary);
    cursor: pointer;
}

.tc-summary-products>summary::-webkit-details-marker {
    display: none;
}

.tc-summary-products .tc-summary-products-body {
    padding-top: 8px;
}

.tc-summary-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 12px;
    font-size: .78rem;
    color: var(--tc-text);
    font-weight: 400;
}

.tc-summary-terms input {
    margin: 2px 0 0;
    flex-shrink: 0;
}

.tc-summary-products.is-open .tc-chevron {
    transform: rotate(180deg);
}

.tc-chevron {
    transition: transform .18s ease;
}

/* El mini-carrito tiene su propia hoja: public/css/tienda-mini-carrito.css */

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .tc-summary {
        padding: 16px;
    }

    .tc-summary-total {
        font-size: 1.75rem;
    }
}

@media (max-width: 575.98px) {
    .tc-page {
        padding-top: 10px;
    }

    .tc-page.tc-page-carrito {
        padding-top: 20px;
    }

    .tc-card {
        padding: 16px;
        border-radius: 8px;
    }

    .tc-products {
        padding: 0 14px;
    }

    .tc-card-hint {
        display: none;
    }

    .tc-summary {
        border-radius: 8px;
    }

    .tc-header-secure span {
        display: none;
    }

    .tc-timeline li {
        font-size: .68rem;
    }

    .tc-mobile-bar {
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: #fff;
        box-shadow: var(--tc-shadow-up);
        padding: 12px 16px;
        margin: 0 -15px;
    }
}

/* ---------- Barra inferior del carrito (móvil) ---------- */
.tc-cart-grid[hidden],
.tc-cart-mobile-bar[hidden],
.tc-empty[hidden] {
    display: none !important;
}

.tc-cart-mobile-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .tc-cart-mobile-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        background: #fff;
        box-shadow: var(--tc-shadow-up);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .tc-cart-mobile-bar .tc-btn {
        height: 46px;
    }

    .tc-page {
        padding-bottom: 96px;
    }

    #btn-iniciar {
        display: none;
    }
}

/* Contenedor en escritorio: mismo ancho que el resto de la tienda (ver tienda-ui.css).
   El checkout usa su propio layout y no carga tienda-ui.css, por eso se repite acá. */
@media (min-width: 992px) {
    .container {
        max-width: 1280px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .tc-page {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Promo por cantidad: unidades con descuento y a precio normal */
.tc-item-desglose {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--tc-muted);
}

.tc-item-desglose li {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.tc-desglose-promo {
    font-weight: 700;
    color: #17794F;
}

.tc-desglose-sin {
    color: var(--tc-muted);
}

.tc-mini-desglose {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    color: #17794F;
}

/* ---------- Errores del checkout: todos juntos arriba del formulario ----------
   Misma tarjeta blanca que los pasos; el rojo queda solo en el ícono y el borde de arriba, sin teñir todo el bloque. */
.tc-errores {
    margin-bottom: 16px;
    border-radius: var(--tc-radius);
    background: #fff;
    box-shadow: var(--tc-shadow), inset 0 3px 0 var(--tc-danger);
    overflow: hidden;
    outline: 0;
    animation: tc-errores-entra .22s ease-out;
}

.tc-errores:focus-visible {
    box-shadow: var(--tc-shadow), inset 0 3px 0 var(--tc-danger), 0 0 0 3px #ef3e5533;
}

@keyframes tc-errores-entra {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.tc-errores-cabecera {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 18px 20px 14px;
}

.tc-errores-icono {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FEECEE;
    color: var(--tc-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.tc-errores-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tc-text);
}

.tc-errores-sub {
    margin: 3px 0 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--tc-muted);
}

.tc-errores-grupo {
    border-top: 1px solid var(--tc-border-soft);
}

.tc-errores-paso {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 12px 20px 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tc-muted);
}

.tc-errores-paso .tc-step-num {
    width: 20px;
    height: 20px;
    font-size: .68rem;
    letter-spacing: 0;
}

.tc-errores ul {
    list-style: none;
    margin: 0;
    padding: 0 8px 8px;
}

.tc-errores li>a,
.tc-errores-general {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px 9px 40px;
    border-radius: 8px;
    font-size: .88rem;
    line-height: 1.35;
    color: var(--tc-text);
    text-decoration: none;
    position: relative;
}

/* Punto rojo en lugar de viñeta, alineado con el número del paso */
.tc-errores li>a::before,
.tc-errores-general::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--tc-danger);
}

.tc-errores li>a i {
    flex: none;
    font-size: .7rem;
    color: #b5b5b5;
    transition: transform .15s ease, color .15s ease;
}

.tc-errores li>a:hover,
.tc-errores li>a:focus-visible {
    background: var(--tc-soft);
    color: var(--tc-secondary);
    outline: 0;
}

.tc-errores li>a:hover i,
.tc-errores li>a:focus-visible i {
    color: var(--tc-primary);
    transform: translateX(2px);
}

@media (max-width: 575.98px) {
    .tc-errores-cabecera {
        padding: 16px 16px 12px;
    }

    .tc-errores-paso {
        padding: 10px 16px 4px;
    }

    .tc-errores ul {
        padding: 0 4px 6px;
    }

    .tc-errores li>a,
    .tc-errores-general {
        padding: 11px 12px 11px 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-errores {
        animation: none;
    }

    .tc-errores li>a i {
        transition: none;
    }
}

/* Paso con un dato de opciones sin elegir (forma de entrega, método de pago) */
.tc-card.tc-card-invalida {
    box-shadow: var(--tc-shadow), 0 0 0 2px #ef3e5540;
}

/* Debajo del botón de confirmar: cuántos datos faltan */
.tc-faltan {
    margin: 10px 0 0;
    font-size: .8rem;
    text-align: center;
    color: var(--tc-muted);
}

.tc-faltan i {
    color: var(--tc-danger);
    margin-right: 2px;
}

.tc-faltan a {
    color: var(--tc-primary);
    font-weight: 600;
    text-decoration: none;
}

.tc-faltan a:hover {
    text-decoration: underline;
}

/* ---------- Datos ya cargados: resumen con botón para editarlos ---------- */
.tc-resumen {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    background: #fbfdff;
}

.tc-resumen[hidden] {
    display: none;
}

.tc-resumen-texto {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
    font-size: .84rem;
    line-height: 1.4;
    color: var(--tc-muted);
    overflow-wrap: anywhere;
}

.tc-resumen-texto strong {
    font-size: .92rem;
    font-weight: 600;
    color: var(--tc-text);
}

.tc-resumen-editar {
    flex: none;
    margin: -4px -6px 0 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    color: var(--tc-primary);
    cursor: pointer;
}

.tc-resumen-editar:hover {
    background: var(--tc-soft);
    color: var(--tc-secondary);
}

.tc-resumen-editar:focus-visible {
    outline: 2px solid var(--tc-primary);
    outline-offset: 1px;
}

/* En el celular el resumen corta línea entre datos, no en medio de uno ("CP 3300", "Tel. 3764 123456") */
.tc-nw {
    white-space: nowrap;
}

/* Transportista debajo del servicio ("Entrega a domicilio" / "Correo Argentino") */
.tc-option-transportista {
    font-weight: 600;
    color: var(--tc-text);
}

/* Opciones de entrega y pago en el celular: el texto no entra en tres columnas (radio, ícono, texto, precio).
   Sin el ícono, el título comparte la fila con el precio y la descripción usa todo el ancho por debajo. */
@media (max-width: 575.98px) {
    .tc-option {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 3px;
        align-items: start;
        padding: 14px;
    }

    .tc-option>.tc-option-icon {
        display: none;
    }

    .tc-option>.tc-radio {
        grid-column: 1;
        grid-row: 1;
    }

    .tc-option>.tc-option-body {
        display: contents;
    }

    .tc-option-title {
        grid-column: 2;
        grid-row: 1;
        line-height: 1.35;
    }

    .tc-option>.tc-option-price {
        grid-column: 3;
        grid-row: 1;
        line-height: 1.35;
    }

    .tc-option>.tc-option-logo {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        width: 56px;
    }

    .tc-option-desc {
        grid-column: 2 / -1;
        margin-top: 0;
        line-height: 1.4;
    }
}
/* ---------- Buscador de provincia (checkout) ----------
   Campo con la misma apariencia que los demás; al enfocarlo se despliega la lista debajo, filtrada por lo escrito. */
.tc-combo {
    position: relative;
}

.tc-form .tc-combo-input {
    padding-right: 40px;
    cursor: pointer;
    text-overflow: ellipsis;
}

.tc-form .tc-combo-input:focus {
    cursor: text;
}

.tc-combo-flecha {
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -6px;
    font-size: .75rem;
    color: var(--tc-muted);
    cursor: pointer;
    transition: transform .2s ease;
}

.tc-combo.is-abierto .tc-combo-flecha {
    transform: rotate(180deg);
    color: var(--tc-primary);
}

/* Con error, el ícono de Bootstrap ocupa el lugar de la flecha */
.tc-combo-input.is-invalid ~ .tc-combo-flecha {
    display: none;
}

.tc-combo-lista {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: 0 12px 28px #0000001f;
    animation: tc-combo-abre .15s ease-out;
}

.tc-combo-lista[hidden] {
    display: none;
}

@keyframes tc-combo-abre {
    from { opacity: 0; transform: translateY(-4px); }
}

.tc-combo-lista [role="option"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .9rem;
    color: var(--tc-text);
    cursor: pointer;
}

.tc-combo-lista [role="option"].is-activa {
    background: var(--tc-soft);
    color: var(--tc-secondary);
}

.tc-combo-lista [aria-selected="true"] {
    font-weight: 600;
}

.tc-combo-lista [role="option"] i {
    font-size: .75rem;
    color: var(--tc-primary);
}

.tc-combo-lista mark {
    padding: 0;
    background: none;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--tc-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.tc-combo-vacio {
    padding: 12px;
    font-size: .86rem;
    color: var(--tc-muted);
}

@media (prefers-reduced-motion: reduce) {
    .tc-combo-lista { animation: none; }
    .tc-combo-flecha { transition: none; }
}

/* Cupón aplicado: tarjeta con el código en lugar del campo */
.tc-cupon-aplicado {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    border: 1px dashed #8fd3b3;
    border-radius: 8px;
    background: #f1faf5;
    animation: tc-cupon-aparece .2s ease-out;
}

.tc-cupon-aplicado-icono {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dcf3e7;
    color: var(--tc-success);
    font-size: .8rem;
}

.tc-cupon-aplicado-texto {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 1px;
    font-size: .78rem;
    line-height: 1.35;
    color: #17794F;
}

.tc-cupon-aplicado-texto strong {
    font-size: .88rem;
    letter-spacing: .04em;
    color: var(--tc-text);
    overflow-wrap: anywhere;
}

.tc-cupon-quitar {
    flex: none;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tc-muted);
    cursor: pointer;
}

.tc-cupon-quitar:hover {
    background: #dcf3e7;
    color: var(--tc-text);
}

.tc-cupon-quitar:focus-visible {
    outline: 2px solid var(--tc-primary);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .tc-cupon-aplicado { animation: none; }
}