/* ═══════════════════════════════════════════════════════════════
   Addon "Regalos y Entregas Programadas" — UI de regalo en carrito
   Compartido entre temas (usa tokens --color-*, solo --gift* es fijo
   y cada tema puede sobreescribirlo para que combine con su paleta).
   Port del diseño Dawn (claude-design/storefront/Regalos (Dawn).html)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --gift:        #d9694a;
  --gift-strong: #b14e32;
  --gift-soft:   #fdf2ec;
  --gift-soft2:  #fbe7dd;
  --gift-border: #f1d3c6;
  --gift-on:     #ffffff;
}
.dark {
  --gift-soft:   #2d1f1a;
  --gift-soft2:  #3a2520;
  --gift-border: #4a3028;
}

/* resumen de regalo en el checkout (.co-gift) */
.co-gift { margin-top: .6rem; padding: .7rem .85rem; background: var(--gift-soft); border: 1px solid var(--gift-border); border-radius: var(--radius); }
.co-gift__h { font-size: .74rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--gift-strong); display: flex; align-items: center; gap: .35rem; }
.co-gift__h svg { width: 13px; height: 13px; }
.co-gift__rows { margin-top: .5rem; display: grid; gap: .3rem; }
.co-gift__r { display: flex; gap: .5rem; font-size: .82rem; color: var(--color-text); align-items: center; }
.co-gift__r svg { width: 14px; height: 14px; color: var(--gift); flex-shrink: 0; }
.co-gift__r b { font-weight: var(--fw-semibold); color: var(--color-primary); }
.co-gift__chip { font-size: .72rem; padding: .12rem .5rem; border-radius: var(--radius-pill); background: var(--color-bg); border: 1px solid var(--gift-border); color: var(--gift-strong); }

/* línea de carrito como tarjeta (cuando hay addon de regalo activo) */
.gline { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; margin-bottom: 1.25rem; }
.gline.is-gift { border-color: var(--gift-border); box-shadow: 0 1px 2px rgba(217,105,74,.06); }
.gline__main { display: flex; gap: 1rem; padding: 1.1rem 1.25rem; align-items: flex-start; }
.gline__img { width: 84px; height: 84px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); flex-shrink: 0; }
.gline__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gline__info { flex: 1; min-width: 0; }
.gline__title { font-weight: var(--fw-semibold); color: var(--color-primary); margin-top: .15rem; text-decoration: none; display: block; }
.gline__variant { font-size: .82rem; color: var(--color-text-light); margin-top: .2rem; }
.gline__qty { margin-top: .6rem; }
.gline__price { text-align: right; flex-shrink: 0; }
.gline__price b { font-weight: var(--fw-bold); color: var(--color-primary); }
.gline__remove { background: none; border: none; cursor: pointer; color: var(--color-text-light); padding: .25rem; margin-top: .4rem; }
.gline__remove:hover { color: var(--color-error); }

/* invitación a marcar regalo */
.gift-invite { width: 100%; display: flex; align-items: center; gap: .8rem; text-align: left; padding: .8rem 1.25rem; border: none; border-top: 1px dashed var(--gift-border); background: linear-gradient(180deg, var(--gift-soft), var(--color-bg)); color: var(--gift-strong); cursor: pointer; font-family: inherit; transition: background .15s; }
.gift-invite:hover { background: var(--gift-soft); }
.gline.is-gift .gift-invite { display: none; }
.gift-invite__ic { width: 34px; height: 34px; border-radius: var(--radius); background: var(--color-bg); border: 1px solid var(--gift-border); display: grid; place-items: center; color: var(--gift); flex-shrink: 0; }
.gift-invite__ic svg { width: 18px; height: 18px; }
.gift-invite__t { flex: 1; }
.gift-invite__t b { font-weight: var(--fw-semibold); display: block; font-size: .92rem; }
.gift-invite__t span { font-size: .8rem; color: var(--gift); opacity: .85; }
.gift-invite__chev { transition: transform .25s; }
.gift-invite[aria-expanded="true"] .gift-invite__chev { transform: rotate(180deg); }
.gift-invite svg { width: 16px; height: 16px; }

/* panel colapsable */
.gift-panel { display: none; border-top: 1px solid var(--gift-border); background: var(--gift-soft); }
.gift-panel.is-open { display: block; }
.gift-panel__inner { overflow: hidden; }
.gift-panel__pad { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1.4rem; }

.gift-grp__label { display: flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .07em; color: var(--gift-strong); margin-bottom: .7rem; }
.gift-grp__label svg { width: 14px; height: 14px; }
.gift-grp__num { width: 18px; height: 18px; border-radius: 99px; background: var(--gift); color: #fff; font-size: .68rem; display: grid; place-items: center; font-weight: var(--fw-bold); }

/* ocasiones */
.gift-occs { display: flex; flex-wrap: wrap; gap: .5rem; }
.gift-occ { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 1px solid var(--color-border); background: var(--color-bg); border-radius: var(--radius-pill); font-size: .82rem; font-weight: var(--fw-medium); color: var(--color-text); cursor: pointer; font-family: inherit; transition: all .15s; }
.gift-occ svg { width: 15px; height: 15px; opacity: .7; }
.gift-occ:hover { border-color: var(--gift); color: var(--gift-strong); }
.gift-occ.is-sel { background: var(--gift); border-color: var(--gift); color: #fff; }
.gift-occ.is-sel svg { opacity: 1; }

/* campos */
.gift-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.gfield label { display: block; font-size: .8rem; font-weight: var(--fw-medium); color: var(--color-text); margin-bottom: .35rem; }
.gfield input { width: 100%; padding: .6rem .8rem; border: 1.5px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: .9rem; background: var(--color-bg); transition: border-color .15s, box-shadow .15s; }
.gfield input:focus { outline: none; border-color: var(--gift); box-shadow: 0 0 0 3px rgba(217,105,74,.13); }
.gfield__hint { font-size: .72rem; color: var(--color-text-light); margin-top: .3rem; }

/* calendario + franjas */
.gift-sched { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.gcal { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: .9rem; }
.gcal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.gcal__label { font-size: .88rem; font-weight: var(--fw-semibold); color: var(--color-primary); text-transform: capitalize; }
.gcal__nav { display: flex; gap: .25rem; }
.gcal__nav button { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--color-border); background: var(--color-bg); display: grid; place-items: center; cursor: pointer; color: var(--color-text-light); transition: all .15s; }
.gcal__nav button:hover { border-color: var(--gift); color: var(--gift); }
.gcal__nav svg { width: 16px; height: 16px; }
.gcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gcal__dow { text-align: center; font-size: .66rem; font-weight: var(--fw-semibold); color: var(--color-text-light); text-transform: uppercase; letter-spacing: .03em; padding: .35rem 0; }
.gcal__pad { aspect-ratio: 1; }
.gcal__day { position: relative; aspect-ratio: 1; border: none; background: var(--color-bg); border-radius: var(--radius); font-family: inherit; font-size: .82rem; font-weight: var(--fw-medium); color: var(--color-text); cursor: pointer; transition: all .12s; display: grid; place-items: center; }
.gcal__day:hover:not(.is-off):not(.is-sel) { background: var(--gift-soft); color: var(--gift-strong); }
.gcal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--gift-border); }
.gcal__day.is-sel { background: var(--gift); color: #fff; font-weight: var(--fw-bold); box-shadow: 0 2px 8px rgba(217,105,74,.35); }
.gcal__day.is-off { color: #cbd0d8; cursor: not-allowed; }
.gcal__day.is-off[data-st="holiday"], .gcal__day.is-off[data-st="full"] { color: #b9b1ad; }
.gcal__day.is-off:not([data-st="past"]):not([data-st="lead"]) { text-decoration: line-through; text-decoration-color: #d8c3ba; }
.gcal__dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 99px; }
.gcal__dot--h { background: var(--color-warning); }
.gcal__dot--f { background: var(--color-error); }
.gcal__legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .7rem; font-size: .68rem; color: var(--color-text-light); }
.gcal__legend span { display: inline-flex; align-items: center; gap: .3rem; }
.gcal__legend i { width: 7px; height: 7px; border-radius: 99px; display: inline-block; }

.gift-slots__out { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--color-text-light); margin-bottom: .8rem; }
.gift-slots__out.is-set { color: var(--color-success-text); font-weight: var(--fw-medium); }
.gift-slots__out svg { width: 15px; height: 15px; }
.gift-slots__out:not(.is-set) svg { display: none; }
.gift-slots__title { font-size: .8rem; font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: .55rem; }
.gift-slots { display: flex; flex-direction: column; gap: .5rem; }
.gift-slot { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border: 1.5px solid var(--color-border); background: var(--color-bg); border-radius: var(--radius); cursor: pointer; font-family: inherit; text-align: left; transition: all .15s; }
.gift-slot__rng { font-weight: var(--fw-semibold); color: var(--color-text); font-size: .9rem; flex: 1; }
.gift-slot__cupo { font-size: .74rem; padding: .15rem .5rem; border-radius: var(--radius-pill); background: var(--color-success-bg); color: var(--color-success-text); font-weight: var(--fw-medium); }
.gift-slot__cupo--low { background: var(--color-warning-bg); color: var(--color-warning-text); }
.gift-slot__radio { width: 18px; height: 18px; border-radius: 99px; border: 2px solid var(--color-border); flex-shrink: 0; transition: all .15s; position: relative; }
.gift-slot:hover:not([disabled]) { border-color: var(--gift); }
.gift-slot.is-sel { border-color: var(--gift); background: var(--gift-soft); }
.gift-slot.is-sel .gift-slot__radio { border-color: var(--gift); background: var(--gift); box-shadow: inset 0 0 0 3px #fff; }
.gift-slot[disabled] { opacity: .6; cursor: not-allowed; background: var(--color-bg-alt); }
.gift-slot[disabled] .gift-slot__cupo { background: var(--color-error-bg); color: var(--color-error-text); }

/* dedicatoria + plantillas */
.gift-ded { position: relative; }
.gift-ded textarea { width: 100%; min-height: 96px; padding: .8rem .9rem; border: 1.5px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: .9rem; line-height: 1.6; resize: vertical; background: var(--color-bg); transition: border-color .15s, box-shadow .15s; }
.gift-ded textarea:focus { outline: none; border-color: var(--gift); box-shadow: 0 0 0 3px rgba(217,105,74,.13); }
.gift-ded__count { position: absolute; right: .7rem; bottom: .7rem; font-size: .72rem; color: var(--color-text-light); background: var(--color-bg); padding: 0 .25rem; border-radius: 4px; }
.gift-ded__count.is-near { color: var(--color-warning-text); }
.gift-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .9rem; }
.gift-tpl { border: 2px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); padding: 0; cursor: pointer; overflow: hidden; font-family: inherit; transition: all .15s; }
.gift-tpl:hover { border-color: var(--gift); }
.gift-tpl.is-sel { border-color: var(--gift); box-shadow: 0 0 0 3px rgba(217,105,74,.15); }
.gift-tpl__mini { aspect-ratio: 5/4; display: grid; place-items: center; padding: .5rem; }
.gift-tpl__name { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .45rem; font-size: .76rem; font-weight: var(--fw-medium); color: var(--color-text); border-top: 1px solid var(--color-border); }
.gift-tpl.is-sel .gift-tpl__name { color: var(--gift-strong); }
.gift-tpl__name svg { width: 13px; height: 13px; }
.mini-clasica { background: #fbf7ef; }
.gift-tpl__mini.mini-clasica b { font-size: 1rem; color: #5a4632; font-weight: var(--fw-semibold); }
.gift-tpl__mini.mini-clasica span { display: block; width: 26px; height: 1px; background: #c9a86a; margin: .3rem auto; }
.gift-tpl__mini.mini-clasica em { font-style: normal; font-size: .56rem; color: #a08a66; letter-spacing: .12em; text-transform: uppercase; }
.mini-festiva { background: linear-gradient(135deg, #fde9e2, #fff3ec); position: relative; }
.gift-tpl__mini.mini-festiva b { font-size: .92rem; color: var(--gift-strong); font-weight: var(--fw-semibold); position: relative; z-index: 1; }
.mini-festiva::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--gift) 1px, transparent 1.4px); background-size: 11px 11px; opacity: .16; }
.gift-tpl__mini.mini-festiva em { font-style: normal; font-size: .55rem; color: var(--gift); position: relative; z-index: 1; }
.mini-minim { background: var(--color-bg); border: 1px solid #eee; }
.gift-tpl__mini.mini-minim i { font-style: normal; font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; color: #9aa1ab; display: block; margin-bottom: .25rem; }
.gift-tpl__mini.mini-minim b { font-weight: var(--fw-medium); font-size: .82rem; color: #1f2937; }

/* preview en vivo de la tarjeta */
.gift-card-preview {
  margin: .85rem 0; border-radius: 14px; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .65rem; padding: 2rem 1.75rem; text-align: center;
  position: relative; overflow: hidden;
}
/* etiqueta superior discreta + divisor decorativo en flujo
   (el divisor es el ::after del eyebrow, así siempre queda centrado bajo él) */
.gift-card-preview__eyebrow {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-size: .68rem; font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase;
  opacity: .6;
}
.gift-card-preview__eyebrow::after {
  content: ''; width: 40px; height: 2px; border-radius: 2px; opacity: .85;
  background: currentColor;
}
.gift-card-preview__msg {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 1.35rem; line-height: 1.55; font-weight: var(--fw-medium);
  max-width: 30ch; position: relative; z-index: 2; word-break: break-word;
}
/* estado vacío: el mensaje se ve apagado para que se note que es un placeholder */
.gift-card-preview.is-placeholder .gift-card-preview__msg { opacity: .5; font-size: 1.1rem; }

/* Clásica: marco crema con filo dorado */
.gift-card-preview.mini-clasica { border: 1px solid rgba(201, 168, 106, .45); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .65), 0 8px 22px rgba(90, 70, 50, .08); }
.gift-card-preview.mini-clasica .gift-card-preview__eyebrow { color: #a08a66; }
.gift-card-preview.mini-clasica .gift-card-preview__msg { color: #4a3f33; }
/* Festiva: mantiene el patrón de puntos coral */
.gift-card-preview.mini-festiva { border: 1px solid var(--gift-border, rgba(217, 105, 74, .3)); box-shadow: 0 8px 22px rgba(217, 105, 74, .1); }
.gift-card-preview.mini-festiva .gift-card-preview__eyebrow { color: var(--gift-strong); }
.gift-card-preview.mini-festiva .gift-card-preview__msg { color: var(--gift-strong); }
/* Minimalista: limpio, sans, divisor gris */
.gift-card-preview.mini-minim { border: 1px solid #e5e7eb; box-shadow: 0 8px 22px rgba(15, 23, 42, .06); }
.gift-card-preview.mini-minim .gift-card-preview__eyebrow { color: #94a3b8; }
.gift-card-preview.mini-minim .gift-card-preview__msg { font-family: inherit; font-style: normal; font-weight: var(--fw-semibold); color: #1f2937; }

/* opciones (switches) */
.gift-opts { display: flex; flex-direction: column; gap: .2rem; }
.gift-opt { display: flex; gap: .85rem; padding: .85rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); align-items: flex-start; }
.gift-opt + .gift-opt { margin-top: .6rem; }
.gift-opt__ic { width: 32px; height: 32px; border-radius: var(--radius); background: var(--gift-soft); color: var(--gift); display: grid; place-items: center; flex-shrink: 0; }
.gift-opt__ic svg { width: 17px; height: 17px; }
.gift-opt__body { flex: 1; }
.gift-opt__body b { font-size: .88rem; font-weight: var(--fw-semibold); color: var(--color-text); display: block; }
.gift-opt__body p { font-size: .78rem; color: var(--color-text-light); margin-top: .15rem; line-height: 1.5; }
.gift-switch { width: 42px; height: 24px; border-radius: 99px; border: none; background: #cbd0d8; position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s; padding: 0; }
.gift-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 99px; background: var(--color-bg); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; }
.gift-switch.is-on { background: var(--gift); }
.gift-switch.is-on::after { left: 21px; }
.gift-switch:focus-visible { outline: 2px solid var(--gift); outline-offset: 2px; }
.notify-note { display: none; margin-top: .6rem; padding: .6rem .8rem; background: var(--color-info-bg); border: 1px solid var(--color-info-border); border-radius: var(--radius); font-size: .78rem; color: var(--color-info-text); align-items: center; gap: .5rem; }
.notify-note.is-on { display: flex; }
.notify-note svg { width: 15px; height: 15px; flex-shrink: 0; }

/* error + acciones */
.gift-error { display: none; align-items: center; gap: .5rem; padding: .6rem .85rem; background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: var(--radius); font-size: .82rem; color: var(--color-error-text); }
.gift-error.is-on { display: flex; animation: giftShake .3s; }
.gift-error svg { width: 16px; height: 16px; flex-shrink: 0; }
@keyframes giftShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.gift-actions { display: flex; gap: .7rem; align-items: center; }
.gift-actions .spacer { flex: 1; }
.btn--gift { background: var(--gift); color: #fff; }
.btn--gift:hover { background: var(--gift-strong); }
.btn--ghost { background: transparent; color: var(--gift-strong); }
.btn--ghost:hover { background: var(--gift-soft2); }

/* estado marcado */
.gift-marked { display: none; align-items: flex-start; gap: .85rem; margin: 0 1.25rem 1.1rem; padding: .9rem 1rem; background: var(--gift-soft); border: 1px solid var(--gift-border); border-radius: var(--radius); }
.gift-marked.is-on { display: flex; }
.gift-marked__ic { width: 36px; height: 36px; border-radius: var(--radius); background: var(--color-bg); border: 1px solid var(--gift-border); display: grid; place-items: center; color: var(--gift); flex-shrink: 0; }
.gift-marked__ic svg { width: 19px; height: 19px; }
.gift-marked__body { flex: 1; min-width: 0; }
.gift-marked__head { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: var(--fw-bold); color: var(--gift-strong); text-transform: uppercase; letter-spacing: .05em; }
.gift-marked__line { font-size: .9rem; color: var(--color-text); margin-top: .25rem; line-height: 1.5; }
.gift-marked__line b { color: var(--color-primary); font-weight: var(--fw-semibold); }
.gift-marked__meta { font-size: .78rem; color: var(--color-text-light); margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.gift-marked__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.gift-marked__meta svg { width: 13px; height: 13px; }
.gift-marked__actions { display: flex; gap: .5rem; flex-shrink: 0; }
.gift-marked__actions button { font-size: .8rem; font-weight: var(--fw-medium); padding: .35rem .7rem; border-radius: var(--radius); border: 1px solid var(--gift-border); background: var(--color-bg); color: var(--gift-strong); cursor: pointer; font-family: inherit; transition: all .15s; }
.gift-marked__actions button:hover { background: var(--gift); color: #fff; border-color: var(--gift); }
.gift-marked__actions .rm:hover { background: var(--color-error); border-color: var(--color-error); }

/* toast global */
.gift-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 20px); z-index: 700; background: var(--color-primary); color: #fff; padding: .8rem 1.2rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: var(--fw-medium); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.gift-toast svg { width: 17px; height: 17px; color: #6ee7a8; }
.gift-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .gift-sched { grid-template-columns: 1fr; }
  .gift-fields { grid-template-columns: 1fr; }
}