/* ==========================================================
   Rejuvene Medical Spa · Tienda
   Respeta la paleta del sitio (verde #b3d95d).
   Si tu styles.css ya define estas variables, puedes borrar
   este bloque :root y heredarlas.
   ========================================================== */
:root {
    --tn-green: #b3d95d;
    --tn-green-dark: #7d9f2e;
    --tn-green-soft: #f1f8de;
    --tn-ink: #2a3321;
    --tn-muted: #6b7560;
    --tn-line: #e4ead6;
    --tn-radius: 18px;
    --tn-shadow: 0 8px 28px rgba(60, 80, 20, .10);
}

.tn-main { background: #fff; color: var(--tn-ink); }

/* Hero */
.tn-hero {
    background: linear-gradient(135deg, var(--tn-green-soft) 0%, #ffffff 70%);
    padding: 3rem 0 2.2rem;
    border-bottom: 1px solid var(--tn-line);
}
.tn-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: .3rem 0 .5rem; }
.tn-lead { color: var(--tn-muted); margin: 0; max-width: 560px; }
.tn-hero .kicker { color: var(--tn-green-dark); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }

/* Botones (compatibles con .btn-green del sitio) */
.btn-green { background: var(--tn-green); border-color: var(--tn-green); color: #1f2a10; font-weight: 700; }
.btn-green:hover, .btn-green:focus { background: var(--tn-green-dark); border-color: var(--tn-green-dark); color: #fff; }
.btn-outline-success { color: var(--tn-green-dark); border-color: var(--tn-green-dark); }
.btn-outline-success:hover { background: var(--tn-green-dark); border-color: var(--tn-green-dark); }

/* Barra de herramientas */
.tn-catalog { padding-top: 2rem; padding-bottom: 3.5rem; }
.tn-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.tn-search { position: relative; flex: 1 1 320px; max-width: 520px; }
.tn-search > .bi-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tn-muted); pointer-events: none; }
.tn-search .form-control { border-radius: 999px; padding: .7rem 2.6rem; border-color: var(--tn-line); }
.tn-search .form-control:focus, .tn-sort .form-select:focus { border-color: var(--tn-green-dark); box-shadow: 0 0 0 .2rem rgba(179, 217, 93, .35); }
.tn-search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--tn-muted); padding: 4px 6px; }
.tn-sort { flex: 0 0 auto; min-width: 220px; }
.tn-sort .form-select { border-radius: 999px; border-color: var(--tn-line); padding: .7rem 1.2rem; }
.tn-results { color: var(--tn-muted); font-size: .92rem; margin: 1rem 0 1.2rem; min-height: 1.4em; }

/* Tarjeta de producto */
.tn-card {
    height: 100%; display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--tn-line); border-radius: var(--tn-radius); overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease; cursor: pointer;
}
.tn-card:hover, .tn-card:focus-visible { transform: translateY(-4px); box-shadow: var(--tn-shadow); outline: none; }
.tn-card-media { position: relative; aspect-ratio: 1 / 1; background: var(--tn-green-soft); overflow: hidden; }
.tn-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tn-card:hover .tn-card-media img { transform: scale(1.05); }
.tn-badge-photos { position: absolute; right: 10px; bottom: 10px; background: rgba(42, 51, 33, .72); color: #fff; font-size: .72rem; padding: 3px 9px; border-radius: 999px; }
.tn-card-body { padding: 1rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.tn-card-name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.02rem; margin: 0; line-height: 1.25; }
.tn-card-desc { color: var(--tn-muted); font-size: .88rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tn-card-foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tn-price { font-weight: 800; font-size: 1.15rem; color: var(--tn-ink); }
.tn-add { border-radius: 999px; padding: .4rem .95rem; font-size: .88rem; white-space: nowrap; }

/* Estados */
.tn-empty { text-align: center; padding: 3.5rem 1rem; color: var(--tn-muted); }
.tn-empty > .bi { font-size: 3rem; color: var(--tn-green-dark); }
.tn-skeleton { aspect-ratio: 3 / 4; border-radius: var(--tn-radius); background: linear-gradient(90deg, #f3f6ea 25%, #fafdf2 37%, #f3f6ea 63%); background-size: 400% 100%; animation: tn-shimmer 1.3s infinite; }
@keyframes tn-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Paginación */
.tn-pagination { margin-top: 2.5rem; }
.tn-pagination .pagination { justify-content: center; flex-wrap: wrap; gap: .3rem; margin: 0; }
.tn-pagination .page-link { border-radius: 999px !important; border: 1px solid var(--tn-line); color: var(--tn-ink); min-width: 42px; text-align: center; }
.tn-pagination .page-link:hover { background: var(--tn-green-soft); }
.tn-pagination .page-item.active .page-link { background: var(--tn-green); border-color: var(--tn-green); color: #1f2a10; font-weight: 700; }
.tn-pagination .page-item.disabled .page-link { opacity: .45; }

/* Carrito (offcanvas) */
#carritoOffcanvas { --bs-offcanvas-width: 420px; }
#carritoOffcanvas .offcanvas-header { border-bottom: 1px solid var(--tn-line); background: var(--tn-green-soft); }
.tn-cart-empty { text-align: center; color: var(--tn-muted); padding: 3rem 1rem; }
.tn-cart-empty .bi { font-size: 2.6rem; color: var(--tn-green-dark); }
.tn-cart-item { display: grid; grid-template-columns: 68px 1fr auto; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--tn-line); align-items: center; }
.tn-cart-item img { width: 68px; height: 68px; object-fit: cover; border-radius: 12px; }
.tn-cart-name { font-weight: 700; font-size: .93rem; line-height: 1.2; margin: 0 0 .15rem; }
.tn-cart-unit { color: var(--tn-muted); font-size: .8rem; }
.tn-qty { display: inline-flex; align-items: center; border: 1px solid var(--tn-line); border-radius: 999px; overflow: hidden; margin-top: .35rem; }
.tn-qty button { border: 0; background: #fff; width: 30px; height: 30px; font-weight: 700; color: var(--tn-ink); }
.tn-qty button:hover { background: var(--tn-green-soft); }
.tn-qty span { min-width: 28px; text-align: center; font-weight: 700; font-size: .9rem; }
.tn-cart-line { text-align: right; font-weight: 800; }
.tn-cart-remove { border: 0; background: transparent; color: var(--tn-muted); font-size: .8rem; padding: 0; margin-top: .3rem; }
.tn-cart-remove:hover { color: #b33; }
.tn-delivery { border: 1px solid var(--tn-line); border-radius: 14px; padding: .8rem .9rem; margin-top: 1rem; }
.tn-delivery .form-check { margin-bottom: .35rem; }
.tn-delivery .form-check-input:checked { background-color: var(--tn-green-dark); border-color: var(--tn-green-dark); }
.tn-delivery small { color: var(--tn-muted); }
.tn-cart-foot { border-top: 1px solid var(--tn-line); padding: 1rem 1.25rem; background: #fff; }
.tn-total-row { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: .3rem; }
.tn-total-row.big { font-size: 1.15rem; font-weight: 800; }

/* Modal de producto */
.tn-modal-price { font-size: 1.6rem; font-weight: 800; }
.tn-modal-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
#productCarousel .carousel-control-prev-icon, #productCarousel .carousel-control-next-icon { background-color: rgba(42, 51, 33, .55); border-radius: 50%; background-size: 55%; padding: 18px; }
.tn-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.tn-thumbs img { width: 58px; height: 58px; object-fit: cover; border-radius: 10px; border: 2px solid transparent; cursor: pointer; opacity: .75; }
.tn-thumbs img.active { border-color: var(--tn-green-dark); opacity: 1; }

/* Sesión */
.tn-user-chip { display: none; align-items: center; gap: .4rem; font-weight: 600; }
.tn-user-chip.show { display: inline-flex; }

/* Toast */
.tn-toast-wrap { z-index: 1100; }
.tn-toast { background: var(--tn-ink); color: #fff; border: 0; border-radius: 14px; }
.tn-toast .bi { color: var(--tn-green); }

@media (max-width: 575.98px) {
    .tn-sort { flex: 1 1 100%; }
    .tn-card-body { padding: .8rem; }
    .tn-card-name { font-size: .95rem; }
    .tn-add span { display: none; }
    .tn-add { padding: .4rem .7rem; }
}

/* ===== Resultado del pedido (transferencia) ===== */
#ckModal .modal-content { border: 0; border-radius: var(--tn-radius); box-shadow: var(--tn-shadow); }
.tn-order-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.tn-order-folio { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--tn-ink); }
.tn-order-folio i { color: var(--tn-green-dark); margin-right: .25rem; }
.tn-badge-wait { background: #fff4d6; color: #8a6100; font-size: .75rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; }
.tn-order-total { background: var(--tn-green-soft); border: 1px solid var(--tn-line); border-radius: 14px; padding: .8rem 1rem; margin-bottom: 1.1rem; }
.tn-total-pay { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--tn-green); margin-top: .4rem; padding-top: .5rem; color: var(--tn-muted); font-weight: 600; }
.tn-total-pay strong { font-family: 'Manrope', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--tn-green-dark); }
.tn-pay-title { font-family: 'Manrope', sans-serif; font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tn-muted); margin: 0 0 .5rem; }
.tn-pay-title i { color: var(--tn-green-dark); margin-right: .3rem; }
.tn-pay-card { border: 1px solid var(--tn-line); border-radius: 14px; margin-bottom: 1.1rem; overflow: hidden; }
.tn-pay-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; }
.tn-pay-row + .tn-pay-row { border-top: 1px solid var(--tn-line); }
.tn-pay-ico { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; background: var(--tn-green-soft); color: var(--tn-green-dark); border-radius: 50%; }
.tn-pay-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tn-pay-label { font-size: .72rem; color: var(--tn-muted); }
.tn-pay-value { font-weight: 700; color: var(--tn-ink); word-break: break-all; letter-spacing: .02em; }
.tn-copy { border: 1px solid var(--tn-line); background: #fff; color: var(--tn-ink); border-radius: 999px; padding: .3rem .7rem; font-size: .78rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s; }
.tn-copy:hover { border-color: var(--tn-green-dark); color: var(--tn-green-dark); }
.tn-copy i { margin-right: .25rem; }
.tn-copy.copiado { background: var(--tn-green); border-color: var(--tn-green); color: #1f2a10; }
.tn-steps { padding-left: 1.2rem; margin: 0 0 1rem; font-size: .88rem; color: var(--tn-muted); }
.tn-steps li { margin-bottom: .25rem; }
.btn-wa { background: #25d366; border-color: #25d366; color: #fff; font-weight: 700; border-radius: 999px; padding: .65rem 1rem; }
.btn-wa:hover, .btn-wa:focus { background: #1ebd5a; border-color: #1ebd5a; color: #fff; }
@media (max-width: 420px) { .tn-copy span { display: none; } .tn-copy i { margin: 0; } }

/* ===== Historial de pedidos ===== */
.tn-ped-list { display: flex; flex-direction: column; gap: .75rem; }
.tn-ped { border: 1px solid var(--tn-line); border-radius: 14px; overflow: hidden; background: #fff; }
.tn-ped-head { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: #fff; border: 0; text-align: left; cursor: pointer; flex-wrap: wrap; }
.tn-ped-head:hover { background: var(--tn-green-soft); }
.tn-ped-main { flex: 1 1 140px; display: flex; flex-direction: column; }
.tn-ped-main strong { font-family: 'Manrope', sans-serif; color: var(--tn-ink); }
.tn-ped-main small { color: var(--tn-muted); }
.tn-ped-estado { font-size: .75rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; }
.tn-ped-estado.wait { background: #fff4d6; color: #8a6100; }
.tn-ped-estado.ok   { background: #e3f4d0; color: #3d6b10; }
.tn-ped-estado.bad  { background: #fde2e1; color: #a12622; }
.tn-ped-total { font-weight: 800; font-family: 'Manrope', sans-serif; color: var(--tn-ink); }
.tn-ped-chev { color: var(--tn-muted); transition: transform .2s; }
.tn-ped-head[aria-expanded="true"] .tn-ped-chev { transform: rotate(180deg); }
.tn-ped-body { padding: 1rem; border-top: 1px solid var(--tn-line); background: #fcfdf9; }
.tn-ped-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: .9rem; margin-bottom: .8rem; }
.tn-ped-meta span { display: block; font-size: .72rem; color: var(--tn-muted); }
.tn-ped-sum { max-width: 280px; margin-left: auto; }