/* ==========================================================================
   Avodah — zona de usuario: acceso, carrito, finalizar compra y mi cuenta
   Solo acomoda piezas de la guía (tokens, formularios, tarjetas, avisos).
   ========================================================================== */

/* Encabezado compacto con pasos de compra ------------------------------------ */
.u-head { padding: 26px 0 28px; background: var(--hero-bg) var(--paws); background-size: 160px; }
.u-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 14px; }
.steps { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li + li::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: #DCD5C9; }
.steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1.5px solid #DCD5C9; font-size: 12.5px; color: var(--muted); }
.steps .is-done b { background: var(--olive-100); border-color: var(--olive-100); color: var(--olive-700); }
.steps .is-current { color: var(--ink); }
.steps .is-current b { background: var(--olive-700); border-color: var(--olive-700); color: #fff; }
.steps .is-done + li::before, .steps .is-current::before { background: var(--olive-700); }

.u-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; padding-top: 34px; padding-bottom: var(--space-section); }
.panel { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.panel + .panel { margin-top: 18px; }
.panel__title { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 800 20px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.panel__title .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--olive-700); color: #fff; font-size: 14px; flex: none; }
.panel__title small { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }

/* Resumen de compra (carrito y checkout) */
.summary { position: sticky; top: 88px; }
.summary .panel { padding: 26px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; color: var(--text); }
.sum-row b { color: var(--ink); font-weight: 600; }
.sum-row.is-discount b { color: var(--ok); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.sum-total span { font-size: 15px; font-weight: 700; color: var(--ink); }
.sum-total strong { font: 800 26px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.sum-note { margin: 6px 0 18px; font-size: 12.5px; color: var(--muted); }
.summary .btn--block { height: 54px; font-size: 16px; }
.pay-logos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; font-size: 12px; color: var(--muted); }
.pay-logos span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; }
.guarantees { display: grid; gap: 12px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13px; color: var(--text); }
.guarantees li { display: flex; gap: 10px; align-items: center; }
.guarantees .ico { font-size: 19px; color: var(--olive-700); }
.coupon { display: flex; gap: 8px; margin: 14px 0 6px; }
.coupon .input { height: 44px; }
.coupon .btn { height: 44px; padding: 0 18px; }
.mini-items { display: grid; gap: 12px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line); list-style: none; max-height: 300px; overflow-y: auto; }
.mini-items li { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
.mini-items .thumb { position: relative; width: 54px; height: 54px; border-radius: 12px; background: #FAF7F2 center / 80% no-repeat; }
.mini-items .thumb i { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 11px/1 var(--sans); font-style: normal; }
.mini-items b { display: block; color: var(--ink); font-weight: 600; line-height: 1.35; }
.mini-items span { color: var(--muted); font-size: 12.5px; }

/* Carrito --------------------------------------------------------------------- */
.c-items { display: grid; gap: 0; }
.c-item { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); transition: opacity .3s, transform .3s var(--ease-out); }
.c-item:first-child { padding-top: 0; }
.c-item:last-child { border-bottom: 0; padding-bottom: 0; }
.c-item.is-removing { opacity: 0; transform: translateX(30px); }
.c-item__img { width: 104px; height: 104px; border-radius: 16px; background: #FAF7F2; display: grid; place-items: center; }
.c-item__img img { width: 82%; height: auto; }
.c-item__cat { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.c-item__name { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.c-item__meta { font-size: 13px; color: var(--muted); }
.c-item__ok { display: flex; width: max-content; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.c-item__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.c-item__row .stepper { height: 42px; }
.c-item__row .stepper button { width: 40px; height: 40px; }
.link-act { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.link-act:hover { color: var(--ink); }
.link-act .ico { font-size: 16px; }
.link-act--danger:hover { color: var(--err); }
.c-item__price { text-align: right; }
.c-item__price strong { display: block; font-size: 17px; font-weight: 800; color: var(--ink); }
.c-item__price s { display: block; font-size: 13px; color: #9A9A93; }
.c-item__price small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.c-remind { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--olive-100); font-size: 13.5px; color: var(--ink); }
.c-remind .ico { font-size: 20px; color: var(--olive-700); }
.c-remind .switch { margin-left: auto; }
.ship-zone { display: grid; gap: 8px; margin: 4px 0 4px; }
.ship-zone .select { height: 44px; font-size: 14px; }
.ship-msg { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); font-size: 13px; line-height: 1.45; color: var(--ok); }
.ship-msg .ico { font-size: 18px; margin-top: 1px; }
.ship-msg.is-later { background: var(--info-bg); color: var(--info); }
/* Fuera de cobertura: no hay entrega a domicilio en ese CP → WhatsApp o recoger en tienda */
.ship-msg.is-out { background: var(--warn-bg); color: var(--warn); }
.ship-msg__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 600px) { .ship-msg__acts .btn { flex: 1 1 100%; } }

/* Finalizar compra ------------------------------------------------------------ */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice__box { display: flex; gap: 14px; height: 100%; padding: 18px; border: 1.5px solid #E3DED5; border-radius: 16px; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s; }
.choice__box > .ico { font-size: 26px; color: var(--olive-700); flex: none; margin-top: 2px; }
.choice__box b { display: block; font-size: 15px; color: var(--ink); }
.choice__box span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.choice__box em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--olive-700); }
.choice:hover .choice__box { border-color: #C9C1B3; }
.choice input:checked + .choice__box { border-color: var(--olive-700); background: #FBFCF7; box-shadow: 0 0 0 3px rgba(74,86,45,.12); }
.choice input:focus-visible + .choice__box { box-shadow: 0 0 0 4px rgba(74,86,45,.22); }
.choice input:disabled + .choice__box { opacity: .55; cursor: not-allowed; }
.choice__check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #CFC8BC; flex: none; display: grid; place-items: center; }
.choice input:checked + .choice__box .choice__check { background: var(--olive-700); border-color: var(--olive-700); }
.choice input:checked + .choice__box .choice__check::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; }
.slot span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 78px; height: 62px; padding: 0 12px; border: 1.5px solid #E3DED5; border-radius: 14px; background: #fff; cursor: pointer; font-size: 12px; color: var(--muted); transition: border-color .15s, background .15s, color .15s; }
.slot span b { font-size: 15px; color: var(--ink); }
.slot span:hover { border-color: var(--olive-700); }
.slot input:checked + span { border-color: var(--olive-700); background: var(--olive-700); color: #DCE3CB; }
.slot input:checked + span b { color: #fff; }
.slot input:disabled + span { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.slot input:focus-visible + span { box-shadow: 0 0 0 4px rgba(74,86,45,.22); }
.slot--wide span { min-width: 150px; height: 52px; flex-direction: row; gap: 8px; }
.sub-label { margin: 20px 0 10px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.logged-as { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--sand); font-size: 14px; }
.logged-as b { display: block; color: var(--ink); }
.logged-as span { color: var(--muted); font-size: 13px; }
.logged-as .link-act { margin-left: auto; color: var(--olive-700); }
.bank { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--info-bg); font-size: 13.5px; line-height: 1.55; color: var(--info); }
.success { max-width: 760px; margin: 0 auto; padding: var(--space-section) 0; text-align: center; }
.success__ico { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 22px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-size: 44px; animation: pop-in .6s var(--ease-out); }
@keyframes pop-in { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
.success h1 { margin: 0 0 10px; font: 800 38px/1.1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.success > p { margin: 0 auto 28px; max-width: 520px; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.success .panel { text-align: left; }
.success__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 30px; text-align: left; }
.success__grid div { padding: 16px; border-radius: 14px; background: var(--sand); font-size: 13px; color: var(--muted); }
.success__grid b { display: block; margin-top: 3px; font-size: 15px; color: var(--ink); }

/* Acceso (iniciar sesión / crear cuenta) ------------------------------------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 122px); }
.auth__visual { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; overflow: hidden; color: #fff; background: var(--olive-900) center / cover no-repeat; isolation: isolate; }
.auth__visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(36,44,22,0) 30%, rgba(36,44,22,.88) 100%); }
.auth__visual .eyebrow { color: #F4D9A6; }
.auth__visual h2 { max-width: 460px; margin: 12px 0 22px; font: 800 38px/1.08 var(--sans); letter-spacing: -.03em; }
.auth__perks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.auth__perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.auth__perks .ico { display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 34px; color: #F4D9A6; }
.auth__main { display: grid; place-items: center; padding: 48px 24px; }
.auth__card { width: 100%; max-width: 440px; }
.auth__card .tabs { width: 100%; margin-bottom: 28px; }
.auth__card .tabs button { flex: 1; }
.auth__card h1 { margin: 0 0 6px; font: 800 30px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.auth__card > div > p { margin: 0 0 24px; font-size: 15px; color: var(--text); }
.auth__form { display: grid; gap: 16px; }
.auth__form .btn { height: 52px; font-size: 16px; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth__row a, .text-link { border: 0; background: none; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--olive-700); text-decoration: underline; text-underline-offset: 3px; }
.pass { position: relative; }
.pass .input { padding-right: 52px; }
.pass button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 19px; }
.pass button:hover { color: var(--ink); background: var(--field); }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.strength i { height: 4px; border-radius: 4px; background: #E6E0D6; transition: background .25s; }
.strength[data-level="1"] i:nth-child(-n+1) { background: var(--err); }
.strength[data-level="2"] i:nth-child(-n+2) { background: var(--warn); }
.strength[data-level="3"] i:nth-child(-n+3) { background: #7A9A3A; }
.strength[data-level="4"] i { background: var(--ok); }
.pw-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li.ok::before { content: "✓ "; }
.divider { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.demo-hint { padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); font-size: 13px; line-height: 1.5; color: var(--warn); }
.auth__legal { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.step-dots { display: flex; gap: 6px; margin-bottom: 18px; }
.step-dots i { width: 24px; height: 5px; border-radius: 4px; background: #E6E0D6; }
.step-dots i.on { background: var(--olive-700); }
.view { animation: msg-in .35s var(--ease-out); }

/* Mi cuenta ------------------------------------------------------------------- */
.acc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 30px; padding-bottom: var(--space-section); }
.acc-nav { position: sticky; top: 88px; padding: 20px; border-radius: 22px; background: var(--sand); }
.acc-user { display: flex; align-items: center; gap: 12px; padding: 4px 6px 18px; margin-bottom: 8px; border-bottom: 1px solid #E5DED1; }
.acc-user b { display: block; font-size: 16px; color: var(--ink); }
.acc-user span { font-size: 12.5px; color: var(--muted); }
.acc-nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.acc-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--text); transition: background .15s, color .15s; }
.acc-nav a .ico { font-size: 19px; color: var(--muted); }
.acc-nav a:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.acc-nav a[aria-current="page"] { background: #fff; color: var(--olive-700); box-shadow: 0 2px 8px rgba(23,34,26,.06); }
.acc-nav a[aria-current="page"] .ico { color: var(--olive-700); }
.acc-nav a em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--muted); }
.acc-nav a em.warn { background: var(--warn-bg); color: var(--warn); }
.acc-nav .logout { margin-top: 8px; padding-top: 10px; border-top: 1px solid #E5DED1; }
.acc-nav .logout button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: none; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.acc-nav .logout button:hover { color: var(--err); background: rgba(255,255,255,.6); }
.acc-main { min-width: 0; }
.acc-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.acc-title h1 { margin: 0; font: 800 32px/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.acc-title p { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.acc-title .btn { height: 44px; }
.acc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 20px; background: var(--s-bg, var(--sand)); }
.stat .ico { font-size: 26px; color: var(--olive-700); }
.stat small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5D6158; }
.stat b { font-size: 17px; line-height: 1.35; color: var(--ink); }
.stat span { font-size: 13.5px; color: #4E524B; }
.stat a { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--olive-700); }
.stat--sage { --s-bg: var(--cat-sage); } .stat--peach { --s-bg: var(--cat-peach); } .stat--mustard { --s-bg: var(--cat-mustard); }
.sec-label { margin: 34px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Seguimiento de pedido */
.track { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 4px; padding: 0; list-style: none; }
.track li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12.5px; color: var(--muted); }
.track li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: #E6E0D6; z-index: 0; }
.track li:first-child::before { display: none; }
.track li i { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #E6E0D6; font-style: normal; }
.track li i .ico { font-size: 15px; }
.track li.done::before, .track li.now::before { background: var(--olive-700); }
.track li.done i { background: var(--olive-700); border-color: var(--olive-700); color: #fff; }
.track li.now i { border-color: var(--olive-700); color: var(--olive-700); box-shadow: 0 0 0 5px rgba(74,86,45,.15); }
.track li.done, .track li.now { color: var(--ink); font-weight: 600; }

.order { padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.order + .order { margin-top: 14px; }
.order__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.order__head b { font-size: 16px; color: var(--ink); }
.order__head span { font-size: 13.5px; color: var(--muted); }
.order__head .total { margin-left: auto; font-size: 17px; font-weight: 800; color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--ok { background: var(--ok-bg); color: var(--ok); }
.status--info { background: var(--info-bg); color: var(--info); }
.status--warn { background: var(--warn-bg); color: var(--warn); }
.status--err { background: var(--err-bg); color: var(--err); }
.status--muted { background: var(--field); color: var(--muted); }
.order__thumbs { display: flex; gap: 8px; margin: 16px 0; }
.order__thumbs span { width: 56px; height: 56px; border-radius: 12px; background: #FAF7F2 center / 78% no-repeat; }
.order__thumbs em { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--field); font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }
.order__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.order__actions .btn { height: 42px; padding: 0 20px; font-size: 14px; }
.order__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.order.is-open .order__detail { grid-template-rows: 1fr; }
.order__detail > div { overflow: hidden; }
.order__lines { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 10px; font-size: 14px; }
.order__lines li { display: flex; justify-content: space-between; gap: 12px; color: var(--text); }
.order__lines b { color: var(--ink); }
.order__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.order__meta div { padding: 12px 14px; border-radius: 12px; background: var(--sand); font-size: 12.5px; color: var(--muted); }
.order__meta b { display: block; margin-top: 2px; font-size: 14px; color: var(--ink); }

/* Mascotas */
.pet-card { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: box-shadow .3s, transform .3s var(--ease-out); }
.pet-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(23,34,26,.2); }
.pet-card__top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pet-card__img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--peach); flex: none; }
.pet-card__ph { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--olive-100); color: var(--olive-700); font-size: 34px; flex: none; }
.pet-card h3 { margin: 0 0 2px; font: 800 21px/1.2 var(--sans); color: var(--ink); }
.pet-card__top span { font-size: 13.5px; color: var(--muted); }
.pet-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.pet-facts div { padding: 10px; border-radius: 12px; background: var(--sand); text-align: center; font-size: 11.5px; color: var(--muted); }
.pet-facts b { display: block; font-size: 15px; color: var(--ink); }
.pet-note { display: flex; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); font-size: 13px; color: var(--warn); }
.pet-card__actions { display: flex; gap: 8px; margin-top: auto; }
.pet-card__actions .btn { flex: 1; height: 40px; padding: 0 12px; font-size: 13.5px; }
.pet-card--add { align-items: center; justify-content: center; gap: 10px; min-height: 280px; border: 2px dashed #D9D2C6; background: #FCFBF8; color: var(--olive-700); font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; }
.pet-card--add .ico { display: grid; place-items: center; width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--olive-100); font-size: 56px; }
.pet-card--add:hover { border-color: var(--olive-700); background: #fff; }

/* Recordatorios y citas */
.remind { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.remind + .remind { margin-top: 12px; }
.remind.is-paused { opacity: .6; }
.remind__img { width: 72px; height: 72px; border-radius: 14px; background: #FAF7F2 center / 80% no-repeat; }
.remind b { display: block; font-size: 15px; color: var(--ink); }
.remind span { font-size: 13px; color: var(--muted); }
.remind .mock__bar { margin: 10px 0 6px; }
.remind__side { display: grid; justify-items: end; gap: 10px; }
.remind__side .btn { height: 40px; padding: 0 16px; font-size: 13.5px; }
.appt { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.appt + .appt { margin-top: 12px; }
.appt__date { display: grid; place-items: center; width: 76px; height: 80px; border-radius: 16px; background: var(--olive-700); color: #fff; text-align: center; line-height: 1; }
.appt__date small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.appt__date b { font-size: 28px; font-weight: 800; }
.appt.is-past .appt__date { background: var(--field); color: var(--muted); }
.appt b.t { display: block; font-size: 16px; color: var(--ink); }
.appt span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.appt__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.appt__side { display: grid; justify-items: end; gap: 8px; }
.appt__side .btn { height: 40px; padding: 0 16px; font-size: 13.5px; }

/* Direcciones */
.addr { position: relative; padding: 22px; border: 1.5px solid var(--line); border-radius: 20px; background: #fff; }
.addr.is-default { border-color: var(--olive-700); }
.addr h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.addr p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--text); }
.addr .tag { position: absolute; top: 20px; right: 20px; }

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1100px) {
	.u-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
	.acc { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
	.acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.u-layout { grid-template-columns: minmax(0, 1fr); }
	.summary { position: static; }
	.auth { grid-template-columns: 1fr; min-height: 0; }
	.auth__visual { min-height: 280px; padding: 32px 24px; }
	.auth__visual h2 { font-size: 28px; margin-bottom: 14px; }
	.auth__perks { display: none; }
	.acc { grid-template-columns: minmax(0, 1fr); }
	.acc-nav { position: static; padding: 14px; }
	.acc-nav ul { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
	.acc-nav ul::-webkit-scrollbar { display: none; }
	.acc-nav a { flex: none; padding: 10px 14px; white-space: nowrap; }
	.acc-nav .logout { display: none; }
	.success__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.steps span { display: none; }
	.steps li + li::before { width: 18px; }
	.panel { padding: 20px 16px; border-radius: 18px; }
	.c-item { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
	.c-item__img { width: 80px; height: 80px; }
	.c-item__price { grid-column: 2; text-align: left; }
	.c-item__price strong { display: inline; }
	.c-item__price s, .c-item__price small { display: inline; margin-left: 8px; }
	.c-remind { flex-wrap: wrap; }
	.choice-grid { grid-template-columns: 1fr; }
	.acc-grid, .acc-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.acc-title h1 { font-size: 26px; }
	.remind, .appt { grid-template-columns: 64px minmax(0, 1fr); }
	.remind__img { width: 64px; height: 64px; }
	.appt__date { width: 64px; height: 70px; }
	.remind__side, .appt__side { grid-column: 1 / -1; justify-items: stretch; }
	.track { font-size: 11px; }
	.track li { font-size: 11px; }
	.order__meta { grid-template-columns: 1fr; }
	.order__head .total { margin-left: 0; width: 100%; }
	.success h1 { font-size: 30px; }
}
.cross { margin-bottom: var(--space-section); }
.cross__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.acc-main .cross__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cross__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .acc-main .cross__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cross__grid, .acc-main .cross__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 600px) {
	.c-item__row { flex-wrap: nowrap; gap: 4px; }
	.c-item__row .link-act { width: 42px; height: 42px; justify-content: center; border-radius: 50%; font-size: 0; }
	.c-item__row .link-act .ico { font-size: 19px; }
	.c-item__row .link-act span { display: none; }
	.c-remind { flex-wrap: nowrap; font-size: 13px; }
}

/* Ventana de mascota: 560px en escritorio; en móvil queda la hoja inferior a todo lo ancho (components.css) */
@media (min-width: 601px) { #pet-modal { width: min(560px, calc(100vw - 32px)); } }