/* app.css — Safevity Rewards 2.0: cascarón de la app de la paciente.
   Encabezado con engrane, cuatro pestañas abajo (Tarjeta · Plan · Expediente · Citas),
   tarjetas, hojas (bottom sheets) para ajustes y avisos suaves, visor de fotos.
   Paleta de DraIA: oro #AC996C / #8b7355, crema #fdfbf7, magenta #8E1A5F para acentos. */
:root { --oro: #AC996C; --oro-osc: #8b7355; --crema: #fdfbf7; --tinta: #554c41; --gris: rgba(85, 76, 65, 0.6); --verde: #1f9d55; --rojo: #ef4444; --magenta: #8E1A5F; }
html, body { height: 100%; }
body.app-body { background: var(--crema); overflow: hidden; }
.app-shell { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; background: var(--crema); font-family: 'Montserrat', sans-serif; color: var(--tinta); }
.app-header { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; border-bottom: 1px solid rgba(172, 153, 108, 0.25); background: #fff; }
.app-logo { width: 34px; height: 34px; border-radius: 8px; }
.app-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.app-title strong { color: var(--oro); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.5px; }
.app-title span { color: var(--gris); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(172, 153, 108, 0.4); background: #fff; color: var(--oro-osc); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; flex: 0 0 40px; }
.icon-btn:active { transform: scale(0.95); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); border: 2px solid #fff; }
.icon-btn .dot[hidden] { display: none; }
.app-main { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.view[hidden] { display: none !important; }
.view { max-width: 480px; margin: 0 auto; }
.view-title { color: var(--oro); font-weight: 500; font-size: 1.15rem; margin: 4px 0 10px; }
.app-tabs { flex: 0 0 auto; display: flex; gap: 4px; background: #fff; border-top: 1px solid rgba(172, 153, 108, 0.3); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
.app-tabs button { flex: 1; min-width: 0; white-space: nowrap; letter-spacing: -0.1px; background: none; border: none; font: inherit; font-size: 0.68rem; color: var(--oro-osc); padding: 7px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.app-tabs button.activo { color: #fff; background: linear-gradient(135deg, #AC996C, #8b7355); }

/* --- la tarjeta que gira (front: QR y puntos; back: compras y puntos) ---
   Cómo gira, cómo se acomoda por dentro, sus materiales y efectos viven en css/tarjeta.css (COPIA IDÉNTICA de la
   vista previa del diseñador de DTB HUB). Aquí sólo lo de esta app: el tamaño y el modo compacto.
   `100vh` primero: iOS < 15.4 no conoce `dvh` y sin respaldo se quedaba sin alto. Si el frente no cabe (teléfono
   bajito, Safari con sus barras, nombre en dos renglones), ajustarAltoTarjeta() la hace crecer (app.js). */
.scene { width: 100%; max-width: 400px; height: min(600px, calc(100vh - 190px)); height: min(600px, calc(100dvh - 190px)); min-height: 520px; perspective: 1000px; margin: 0 auto; touch-action: pan-y; }
.card-back-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Pantallas bajitas (iPhone SE, Safari con sus barras a la vista): la tarjeta se compacta para que el QR se vea
   sin hacer scroll. El QR NO se achica (150 px): es lo que lee recepción. Con #flipCard para ganarle a tarjeta.css. */
@media (max-height: 740px) {
    .scene { min-height: 440px; }
    #flipCard .card-front { padding: 14px 16px 10px; }
    #flipCard .brand-logo { width: 38px; height: 38px; margin-bottom: 6px; }
    #flipCard .patient-name { font-size: 1.15rem; }
    #flipCard .patient-name.largo { font-size: 1rem; }
    #flipCard .patient-number { margin-bottom: 8px; font-size: 0.78rem; }
    #flipCard .points-box { padding: 8px 20px; margin-bottom: 10px; }
    #flipCard .points-box h1 { font-size: 2.1rem; }
    #flipCard .activar-plan-frente { margin-top: 5px; padding: 4px 12px; }
    #flipCard .qr-wrapper { padding: 10px; margin-bottom: 6px; }
    #flipCard .timer-bar { margin-top: 8px; }
    #flipCard .flip-indicator { width: 34px; height: 34px; padding: 6px; }
}
.history-title { text-align: center; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; color: var(--oro); font-weight: 500; font-size: 1.05rem; }
.history-head { position: relative; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.history-head .history-title { margin: 0; border: 0; padding: 4px 44px 0; }
.premios-btn { position: absolute; right: 0; top: 50%; transform: translateY(-60%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(172, 153, 108, 0.5); background: linear-gradient(135deg, #AC996C 0%, #8b7355 100%); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 3px 10px rgba(172, 153, 108, 0.35); }
.premios-btn:active { transform: translateY(-60%) scale(0.95); }
.premios-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--verde); color: #fff; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff; }
.premios-badge[hidden] { display: none; }
.tx-list { list-style: none; padding: 0; margin: 0; }
.tx-item { background: rgba(253, 251, 247, 0.9); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(172, 153, 108, 0.2); gap: 8px; }
.tx-details h4 { margin: 0 0 4px; font-size: 0.92rem; color: var(--oro); }
.tx-details p { margin: 0; font-size: 0.75rem; color: #888; }
.tx-amount { font-weight: bold; font-size: 1.05rem; white-space: nowrap; }
.tx-amount.positive { color: #65a30d; }
.tx-amount.negative { color: var(--rojo); }
.tx-item .tx-conceptos { margin: 0 0 4px; font-size: 0.9rem; color: var(--tinta); font-weight: 600; line-height: 1.25; }
.tx-pts-gris { color: rgba(85, 76, 65, 0.55); font-size: 0.74rem; text-align: right; max-width: 130px; line-height: 1.25; }
/* Sin plan de puntos (user 2.3.0): los puntos que NO sumó, en gris, con su leyenda y la pregunta. */
.tx-amount.gris { color: rgba(85, 76, 65, 0.4); }
.tx-item.sin-plan { border-style: dashed; }
.tx-details p.tx-pudo { margin-top: 3px; color: rgba(85, 76, 65, 0.6); font-style: italic; }
.plan-cta { list-style: none; background: #fff; border: 1px solid var(--oro); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; text-align: center; }
.plan-cta p { margin: 0 0 8px; font-size: 0.8rem; color: var(--tinta); line-height: 1.35; }
.plan-cta .btn { width: auto; }
.activar-plan-frente { margin-top: 8px; border: 1px solid var(--oro); background: #fff; color: var(--oro-osc); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.activar-plan-frente[hidden] { display: none; }
.plan-pudo { color: rgba(85, 76, 65, 0.7); }
.plan-pudo b { color: var(--oro-osc); }
.plan-listo { color: var(--verde); font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.tx-pts-gris b { color: rgba(85, 76, 65, 0.75); font-size: 0.95rem; }
.tx-canje { color: var(--oro-osc); font-size: 0.75rem; }
.sync-status { font-size: 0.72rem; color: #888; margin-top: 8px; text-align: center; }
.btn-refresh { background: #fff; border: 1px solid var(--oro); color: var(--oro); padding: 9px 18px; border-radius: 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.85rem; -webkit-tap-highlight-color: transparent; }
.btn-refresh:active { opacity: 0.7; transform: scale(0.96); }

/* --- tarjetas genéricas --- */
.card { background: #fff; border: 1px solid rgba(172, 153, 108, 0.22); border-radius: 16px; padding: 14px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); }
.card h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--oro); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card h3 .dra-ic { color: var(--oro-osc); }
.card h3 .cnt { margin-left: auto; font-size: 0.72rem; font-weight: 600; color: var(--gris); }
.card p { margin: 0; font-size: 0.85rem; color: var(--tinta); line-height: 1.4; }
.muted { color: var(--gris); font-size: 0.78rem; }
.vacio { color: var(--gris); font-size: 0.85rem; text-align: center; padding: 10px 0; margin: 0; line-height: 1.4; }
.aviso { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; border-radius: 10px; padding: 8px 10px; font-size: 0.8rem; margin-bottom: 10px; line-height: 1.35; display: flex; gap: 8px; align-items: flex-start; }
.aviso.gris { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }
.aviso.verde { background: #d1fae5; color: #065f46; border-color: #065f46; }
.aviso.rojo { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 22px; padding: 10px 16px; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; border: 1px solid var(--oro); background: #fff; color: var(--oro-osc); -webkit-tap-highlight-color: transparent; text-decoration: none; }
.btn.primario { background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(172, 153, 108, 0.35); }
.btn.bloque { width: 100%; }
.btn.chico { padding: 6px 12px; font-size: 0.76rem; }
.btn.peligro { color: var(--rojo); border-color: rgba(239, 68, 68, 0.5); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn:active { transform: scale(0.98); }

/* --- tip del día --- */
.tip { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(85, 76, 65, 0.08); }
.tip:first-child { border-top: 0; }
.tip-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f3ede0; color: var(--oro-osc); }
.tip.alto .tip-ic { background: #fee2e2; color: #b91c1c; }
.tip.medio .tip-ic { background: #fef3c7; color: #b45309; }
.tip h4 { margin: 0 0 2px; font-size: 0.88rem; color: var(--tinta); font-weight: 600; }
.tip p { font-size: 0.8rem; color: rgba(85, 76, 65, 0.8); }
.tip-teaser { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(172, 153, 108, 0.3); border-radius: 14px; padding: 10px 12px; margin: 10px auto 0; max-width: 400px; cursor: pointer; font-size: 0.82rem; color: var(--tinta); line-height: 1.3; }
.tip-teaser[hidden] { display: none; }
.tip-teaser .tip-ic { flex: 0 0 30px; width: 30px; height: 30px; }
.tip-teaser strong { color: var(--oro-osc); display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 1px; }
.tip-teaser .txt { flex: 1; min-width: 0; }
.clima-linea { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.76rem; color: var(--gris); margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(172, 153, 108, 0.3); }
.clima-linea span { display: inline-flex; align-items: center; gap: 4px; }

/* --- check-in --- */
.checkin-box { margin: 10px auto 0; max-width: 400px; }
.checkin-box[hidden] { display: none; }
.checkin-msg { font-size: 0.8rem; margin-top: 8px; text-align: center; color: var(--tinta); line-height: 1.4; }
/* Sus visitas registradas (user 2.22.0) */
.visitas-reg { background: #fff; border: 1px solid rgba(172, 153, 108, 0.3); border-radius: 14px; padding: 10px 12px; margin-top: 10px; }
.visitas-reg-tit { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--tinta); }
.visitas-reg ul { list-style: none; margin: 6px 0 0; padding: 0; }
.visitas-reg li { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid rgba(85, 76, 65, 0.08); font-size: 0.82rem; color: var(--tinta); }
.visitas-reg li:first-child { border-top: 0; }
.visitas-reg li small { color: var(--gris); font-size: 0.74rem; }

/* --- listas --- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid rgba(85, 76, 65, 0.08); font-size: 0.85rem; color: var(--tinta); }
.lista li:first-child { border-top: 0; }
.lista .num { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #f3ede0; color: var(--oro-osc); font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.lista .num.hecho { background: #d1fae5; color: #065f46; }
.lista .txt { flex: 1; min-width: 0; }
.lista .txt small { display: block; color: var(--gris); font-size: 0.76rem; margin-top: 1px; }
.lista .der { flex: 0 0 auto; text-align: right; font-size: 0.78rem; color: var(--gris); white-space: nowrap; }
.lista li.hecho .txt { color: var(--gris); text-decoration: line-through; }
.lista li.hecho .txt small { text-decoration: none; }

/* --- expediente --- */
.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #f3ede0; cursor: pointer; border: 1px solid rgba(172, 153, 108, 0.25); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .ad { position: absolute; left: 5px; top: 5px; background: rgba(142, 26, 95, 0.9); color: #fff; font-size: 0.62rem; font-weight: 700; border-radius: 6px; padding: 2px 6px; }
.foto .fecha { position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.6rem; border-radius: 6px; padding: 2px 5px; }
.foto.sin { display: flex; align-items: center; justify-content: center; color: var(--gris); font-size: 0.68rem; text-align: center; padding: 6px; line-height: 1.3; }
.doc { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(85, 76, 65, 0.08); cursor: pointer; }
.doc:first-child { border-top: 0; }
.doc-ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #f3ede0; color: var(--oro-osc); display: flex; align-items: center; justify-content: center; }
.doc .txt { flex: 1; min-width: 0; font-size: 0.86rem; color: var(--tinta); }
.doc .txt small { display: block; color: var(--gris); font-size: 0.74rem; }
.doc .der { color: var(--oro-osc); line-height: 0; }
.lock-card { text-align: center; }
.pin-input { width: 170px; font-size: 1.6rem; letter-spacing: 8px; text-align: center; padding: 10px; border: 1px solid var(--oro); border-radius: 12px; margin: 10px auto; display: block; font-family: inherit; background: #fff; color: var(--tinta); }
.pin-error { color: var(--rojo); font-size: 0.8rem; min-height: 1.2em; }

/* --- citas --- */
.cita { display: flex; gap: 12px; align-items: stretch; padding: 10px 0; border-top: 1px solid rgba(85, 76, 65, 0.08); }
.cita:first-child { border-top: 0; }
.cita-fecha { flex: 0 0 56px; border-radius: 12px; background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; text-align: center; padding: 6px 4px; display: flex; flex-direction: column; justify-content: center; }
.cita-fecha b { font-size: 1.3rem; line-height: 1; }
.cita-fecha small { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
.cita.pasada .cita-fecha { background: #e5e0d5; color: var(--tinta); }
.cita .txt { flex: 1; min-width: 0; font-size: 0.86rem; color: var(--tinta); }
.cita .txt strong { display: block; }
.cita .txt small { color: var(--gris); font-size: 0.76rem; display: block; }
.cita-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* --- hojas (bottom sheets): ajustes, avisos suaves, PIN --- */
.hoja-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 20, 20, 0.55); z-index: 2500; display: flex; align-items: flex-end; justify-content: center; }
.hoja-overlay[hidden] { display: none; }
.hoja { background: var(--crema); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25); animation: hojaSubir 0.22s ease; font-family: 'Montserrat', sans-serif; color: var(--tinta); }
@keyframes hojaSubir { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 600px) { .hoja-overlay { align-items: center; padding: 20px; } .hoja { border-radius: 20px; } }
.hoja-head { display: flex; align-items: center; gap: 8px; color: var(--oro-osc); border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px; }
.hoja-head h3 { margin: 0; flex: 1; font-size: 1.05rem; color: var(--oro); font-weight: 600; }
.hoja-close { background: none; border: 1px solid rgba(172, 153, 108, 0.4); color: var(--oro-osc); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: 0 0 32px; }
.hoja p { font-size: 0.86rem; line-height: 1.45; margin: 0 0 8px; }
.hoja-nota { margin: 10px 0 0; font-size: 0.74rem; color: var(--gris); text-align: center; }
.ajuste-sec { margin-bottom: 14px; }
.ajuste-sec h4 { margin: 0 0 4px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gris); font-weight: 600; }
.fila { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(85, 76, 65, 0.08); }
.fila:first-of-type { border-top: 0; }
.fila .txt { flex: 1; min-width: 0; font-size: 0.86rem; color: var(--tinta); }
.fila .txt small { display: block; color: var(--gris); font-size: 0.74rem; line-height: 1.35; }
.switch { position: relative; width: 44px; height: 26px; flex: 0 0 44px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #d6d3cd; border-radius: 26px; transition: 0.2s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.switch input:checked + span { background: var(--verde); }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:disabled + span { opacity: 0.5; cursor: default; }
.estado-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 9px; font-size: 0.72rem; font-weight: 600; background: #f3f4f6; color: #4b5563; white-space: nowrap; }
.estado-pill.ok { background: #d1fae5; color: #065f46; }
.estado-pill.mal { background: #fee2e2; color: #b91c1c; }
.estado-pill.ambar { background: #fef3c7; color: #92400e; }
.soft-ic { width: 52px; height: 52px; border-radius: 16px; background: #f3ede0; color: var(--oro-osc); display: flex; align-items: center; justify-content: center; margin: 4px auto 10px; }
.soft-botones { display: flex; gap: 8px; margin-top: 12px; }
.soft-botones .btn { flex: 1; }

/* --- visor de foto --- */
.visor { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.93); z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; }
.visor[hidden] { display: none; }
.visor img { max-width: 100%; max-height: 78vh; border-radius: 10px; object-fit: contain; }
.visor-cab { color: #fff; font-size: 0.85rem; margin-top: 10px; text-align: center; line-height: 1.4; }
.visor-cab small { color: rgba(255, 255, 255, 0.7); display: block; }
.visor-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; background: rgba(255, 255, 255, 0.15); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* --- toast --- */
/* Arriba, debajo del encabezado: abajo tapaba la barra del pedido y el botón de pagar. */
.toast { position: fixed; left: 50%; top: calc(62px + env(safe-area-inset-top)); transform: translateX(-50%); background: rgba(44, 34, 24, 0.94); color: #fff; font-size: 0.82rem; padding: 8px 8px 8px 14px; border-radius: 12px; z-index: 4000; width: max-content; max-width: min(92vw, 440px); display: flex; align-items: center; gap: 8px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); animation: toastBajar 0.2s ease; cursor: pointer; }
.toast-txt { flex: 1; min-width: 0; }
.toast-x { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
@keyframes toastBajar { from { transform: translate(-50%, -12px); opacity: 0; } }
.toast[hidden] { display: none; }

/* --- 2.1.0 --- */
/* Filas de acción de Ajustes: el botón no se encoge ni parte su texto; si no cabe, baja a su renglón. */
.fila.accion { flex-wrap: wrap; }
.fila.accion .txt { flex: 1 1 170px; }
.fila .btn { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
/* Tip del día compacto: clima arriba, el consejo principal, y "ver más" para el resto. */
.tip-card .clima-linea.arriba { margin: -2px 0 8px; padding: 0 0 8px; border-top: 0; border-bottom: 1px dashed rgba(172, 153, 108, 0.3); }
.tip.compacto p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tip-mas { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; background: none; border: 0; padding: 4px 0; color: var(--oro-osc); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
/* Agendar: botón verde de WhatsApp bajo la tarjeta y en Citas. */
.agendar-rapido { max-width: 400px; margin: 10px auto 0; }
.btn-wa.primario { background: linear-gradient(135deg, #25a55a, #1b8a4a); box-shadow: 0 3px 10px rgba(31, 157, 85, 0.3); }
/* Instalar la app: aviso con el estilo de la app, arriba de la tarjeta. */
.instalar-box { position: relative; display: flex; align-items: center; gap: 10px; max-width: 400px; margin: 0 auto 10px; background: #fff; border: 1px solid rgba(172, 153, 108, 0.35); border-radius: 14px; padding: 10px 34px 10px 10px; box-shadow: 0 4px 14px rgba(172, 153, 108, 0.12); }
.instalar-box[hidden] { display: none; }
.instalar-box .inst-ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; display: flex; align-items: center; justify-content: center; }
.instalar-box .txt { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--tinta); line-height: 1.3; }
.instalar-box .txt strong { display: block; color: var(--oro-osc); font-size: 0.86rem; }
.instalar-box .inst-x { position: absolute; top: 6px; right: 6px; background: none; border: 0; color: var(--gris); cursor: pointer; padding: 4px; line-height: 0; }
.pasos-ios { list-style: none; margin: 8px 0 12px; padding: 0; }
.pasos-ios li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 0.88rem; color: var(--tinta); line-height: 1.4; }
.paso-n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* Tu transformación: invitación a venir por la foto de hoy. */
.invita-foto { background: linear-gradient(135deg, rgba(172, 153, 108, 0.08), rgba(142, 26, 95, 0.05)); border: 1px solid rgba(172, 153, 108, 0.3); border-radius: 12px; padding: 12px; margin-top: 4px; }
.invita-foto p { margin: 0 0 8px; font-size: 0.86rem; line-height: 1.45; }
.sep-suave { height: 1px; background: rgba(85, 76, 65, 0.08); margin: 12px 0 10px; }

/* ---------- Programa, tienda y tomas (user 2.2.0, js/programa.js) ---------- */
.aviso[hidden], .offline-banner[hidden] { display: none; }
.offline-banner { background: #fef3c7; color: #92400e; font-size: 0.76rem; padding: 6px 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #f59e0b; }
.offline-banner > span { flex: 1; min-width: 0; }
.offline-banner .offline-reintentar { flex: none; width: auto; margin: 0; background: #fff; color: #92400e; border: 1px solid #f59e0b; border-radius: 999px; padding: 3px 11px; font: inherit; font-weight: 700; cursor: pointer; }
.offline-banner .offline-reintentar:disabled { opacity: 0.6; cursor: default; }
.programa-box { margin-top: 12px; }
.nivel-card .nivel-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.nivel-pill { color: #fff; font-weight: 700; font-size: 0.8rem; padding: 4px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.3px; }
.nivel-cab small { color: var(--gris); font-size: 0.72rem; }
.nivel-ben { margin-bottom: 8px !important; }
.nivel-barra { height: 8px; background: #f1ede4; border-radius: 99px; overflow: hidden; }
.nivel-barra span { display: block; height: 100%; border-radius: 99px; transition: width 0.6s ease; }
.nivel-falta { margin-top: 6px !important; font-size: 0.8rem !important; }
.saldo-num { font-size: 1.7rem !important; font-weight: 700; color: var(--verde) !important; margin: 2px 0 4px !important; }
.saldo-desc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px !important; }
.saldo-desc small { color: var(--gris); }
.invita-regla { font-size: 0.8rem !important; margin-bottom: 6px !important; padding-left: 10px; border-left: 3px solid rgba(172, 153, 108, 0.4); }
.invita-card .btn { margin-top: 6px; }
.invitadas { margin-top: 10px; font-size: 0.82rem; }
.invitadas summary { cursor: pointer; color: var(--oro-osc); font-weight: 600; }
.der.verde { color: var(--verde); font-size: 0.74rem; font-weight: 600; }
.tienda-teaser { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; cursor: pointer; }
.tienda-teaser .txt { flex: 1; min-width: 0; }
.tienda-teaser h3 { margin-bottom: 4px; }
.teaser-fotos { display: flex; }
.teaser-fotos span { width: 42px; height: 42px; border-radius: 10px; background: #f1ede4 center / cover no-repeat; border: 2px solid #fff; margin-left: -10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.view-cab { display: flex; align-items: center; gap: 10px; }
.view-cab .view-title { margin: 4px 0 10px; }
.tienda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.producto { background: #fff; border: 1px solid rgba(172, 153, 108, 0.22); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.producto.destacado { border-color: var(--oro); }
.producto-foto { aspect-ratio: 1 / 1; background: #f7f3ea center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--oro); }
.producto-txt { padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.producto-txt strong { font-size: 0.85rem; line-height: 1.2; }
.producto-desc { font-size: 0.72rem; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.producto-entrega { font-size: 0.68rem; color: var(--oro-osc); }
.producto-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px 10px; }
.producto-pie { flex-wrap: wrap; row-gap: 6px; }
.producto-pie .precio { white-space: nowrap; }
.producto-pie .btn.chico { white-space: nowrap; }
.precio { font-weight: 700; color: var(--tinta); font-size: 0.9rem; }
.cant { display: inline-flex; align-items: center; gap: 6px; }
.cant button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--oro); background: #fff; color: var(--oro-osc); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; }
.carrito .total { display: flex; justify-content: space-between; font-size: 0.95rem; margin-top: 8px; }
.carrito .total.chico { font-size: 0.8rem; color: var(--verde); }
.carrito .muted { margin-top: 8px; display: flex; gap: 6px; align-items: flex-start; }
.carrito .btn { margin-top: 10px; }
.carrito .aviso { margin-top: 8px; }
.usar-saldo { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; margin-top: 8px; }
.usar-saldo input { width: 18px; height: 18px; accent-color: var(--oro-osc); }
.tomas-card li.apagada { opacity: 0.5; }
/* common.css pone .btn a todo el ancho en celular; dentro de un renglón de lista va a su tamaño. */
.lista li .btn { width: auto; flex: 0 0 auto; align-self: center; }
.producto-foto.sin-foto { aspect-ratio: auto; height: 76px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chip { border: 1px solid var(--oro); background: #fff; color: var(--oro-osc); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.78rem; cursor: pointer; }
.campo { display: block; font-size: 0.8rem; color: var(--gris); margin-bottom: 10px; }
.campo input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 10px; border: 1px solid rgba(172, 153, 108, 0.4); border-radius: 10px; font: inherit; font-size: 16px; color: var(--tinta); background: #fff; }
#tomaHoras { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
#tomaHoras input { width: auto; display: inline-block; margin: 0; }
.ref-input { font-size: 1rem !important; letter-spacing: 0 !important; text-align: left !important; margin-bottom: 10px !important; }
.ref-para-ti { list-style: none; padding: 0; margin: 0 0 12px; font-size: 0.85rem; color: #065f46; }
.ref-para-ti li { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px; }

/* ===================== user 2.4.0 ===================== */
/* Encabezado: regalo (recompensas) y carrito junto al engrane */
.app-header { gap: 8px; }
.icon-btn.activo { background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; border-color: transparent; }
.icon-btn[hidden] { display: none; }
.badge-n { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--magenta); color: #fff; font-size: 0.66rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.badge-n[hidden] { display: none; }

/* Pestañas: "Tu / tarjeta", "Tu / transformación"… siempre a dos renglones, centradas y parejas */
.app-tabs button { white-space: normal; gap: 2px; padding: 6px 2px; }
.tab-l { display: flex; flex-direction: column; align-items: center; line-height: 1.08; font-size: 0.7rem; font-weight: 600; text-align: center; max-width: 100%; }
.tab-l small { font-size: 0.58rem; font-weight: 400; opacity: 0.8; letter-spacing: 0.3px; }
@media (max-width: 370px) { .tab-l { font-size: 0.64rem; } }

/* Instalar primero (pantalla de inicio sin instalar) */
.inst-grande { width: 100%; justify-content: center; background: linear-gradient(135deg, #AC996C, #8b7355) !important; color: #fff !important; padding: 14px 18px !important; font-size: 1rem !important; font-weight: 600; margin-top: 6px; border-radius: 14px !important; }
.inst-grande[hidden], .inst-listo[hidden] { display: none !important; }
.inst-pasos { text-align: left; }
.inst-listo { color: #065f46; background: #d1fae5; border-radius: 12px; padding: 10px 12px; font-size: 0.88rem; line-height: 1.45; margin: 10px 0 0; display: flex; gap: 8px; align-items: flex-start; text-align: left; }
.inst-nota { color: #666; font-size: 0.85rem; margin: 6px 0 0; }
.link-web { display: block; margin: 16px auto 0; background: none; border: none; color: #8b7355; font: inherit; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }

/* El reverso en tono oscuro: lo propio de esta app (los materiales, en css/tarjeta.css). */
#flipCard.tono-oscuro .history-head { border-bottom-color: rgba(255, 255, 255, 0.14); }
#flipCard.tono-oscuro .history-title { color: #f3e2b3; }
#flipCard.tono-oscuro .sync-status, #flipCard.tono-oscuro .uv-vacio, #flipCard.tono-oscuro .et-txt { color: rgba(239, 228, 208, 0.72); }

/* El diseño de la tarjeta de su nivel, en el reverso (sólo si DTB HUB deja elegir y hay más de uno) */
.estilo-tarjeta { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.estilo-tarjeta[hidden] { display: none; }
.et-txt { font-size: 0.78rem; color: var(--gris); text-align: center; }
.et-opciones { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 22px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(172, 153, 108, 0.35); max-width: 100%; }
.et-opciones button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--oro-osc); padding: 5px 14px 5px 5px; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.et-opciones button[aria-checked="true"] { background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; }
.et-opciones button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.et-muestra { width: 22px; height: 22px; border-radius: 50%; display: inline-block; flex: 0 0 22px; }


/* Sin plan de puntos (frente) */
.points-box { position: relative; }

/* Recompensas */
.niveles-todos { margin-top: 10px; }
.niveles-todos summary { cursor: pointer; color: var(--oro-osc); font-size: 0.82rem; font-weight: 600; }
.niveles-todos li.actual { background: #faf6ec; background: color-mix(in srgb, var(--nivel, #AC996C) 10%, #fff); border-radius: 10px; padding-left: 6px; padding-right: 6px; }
.niveles-todos li.logrado .txt strong { color: var(--gris); }
.nivel-punto { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.premios-card li.alcanza .txt small { color: var(--verde); font-weight: 600; }
.premios-card .cnt, .mensaje-clinica .cnt { white-space: nowrap; }
.metas { margin: 4px 0 12px; }
.metas-pista { position: relative; height: 10px; border-radius: 6px; background: #efe9dc; margin: 22px 12px 18px; }
.metas-lleno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #AC996C, #8E1A5F); transition: width 0.6s ease; }
.meta-hito { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.meta-hito b { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #d9cfb8; color: var(--oro-osc); font-size: 0.72rem; }
.meta-hito.logrado b { background: var(--verde); border-color: var(--verde); color: #fff; }
.metas-lista { list-style: none; margin: 0; padding: 0; }
.metas-lista li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(85, 76, 65, 0.08); font-size: 0.85rem; }
.metas-lista li:first-child { border-top: 0; }
.meta-n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #f7f3ea; color: var(--oro-osc); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.metas-lista li.logrado .meta-n { background: var(--verde); color: #fff; }
.metas-lista .txt { flex: 1; min-width: 0; }
.metas-lista .txt small { display: block; color: var(--gris); font-size: 0.76rem; }
.metas-nota { font-size: 0.8rem; color: var(--gris); margin: 8px 0 0; line-height: 1.4; }
.premio-plan-card .num.hecho { background: var(--verde); color: #fff; }

/* Mensaje de la clínica en Tu transformación: el texto manda; el botón (agendar / compartir) chico y de contorno, y
   "Quitar" a la derecha (loyalty 1.26.0). */
.mensaje-clinica.nuevo { border-color: var(--oro); box-shadow: 0 6px 22px rgba(172, 153, 108, 0.25); }
.mensaje-clinica .msg-texto { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.mensaje-clinica .msg-meta { margin: 6px 0 10px; }
.msg-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.msg-acciones .btn { width: auto; flex: 0 1 auto; } /* common.css pone .btn a lo ancho en celular */
.msg-quitar { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 8px 4px; color: var(--gris); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.msg-quitar:active { opacity: 0.6; }

/* Tienda */
.tienda-herr[hidden] { display: none; }
.tienda-herr { position: sticky; top: -12px; z-index: 3; background: var(--crema); padding: 4px 0 6px; margin: 0 -2px; }
.buscar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(172, 153, 108, 0.4); border-radius: 12px; padding: 0 12px; color: var(--oro-osc); }
.buscar input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit; font-size: 16px; padding: 10px 0; color: var(--tinta); }
.tienda-cats { flex-wrap: nowrap; overflow-x: auto; margin: 8px 0 4px; padding-bottom: 2px; scrollbar-width: none; }
.tienda-cats::-webkit-scrollbar { display: none; }
.tienda-cats .chip { flex: 0 0 auto; }
.chip.activo { background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; border-color: transparent; }
.producto-desc { -webkit-line-clamp: 2; }
.tienda-pie { margin: 10px 2px 70px; }
.carrito-barra { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(70px + env(safe-area-inset-bottom)); width: min(452px, calc(100% - 28px)); display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; border: none; background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; font: inherit; font-size: 0.9rem; box-shadow: 0 10px 28px rgba(139, 115, 85, 0.4); cursor: pointer; z-index: 20; }
.carrito-barra[hidden] { display: none; }
.carrito-barra .ver { margin-left: auto; font-weight: 700; }
.carrito .lista li { align-items: center; }
.carrito .cant b { min-width: 18px; text-align: center; }
.carrito-pts { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fdf6e3; color: var(--oro-osc); font-size: 0.86rem; line-height: 1.4; }
.carrito-pts.gris { background: #f4f2ee; color: rgba(85, 76, 65, 0.75); flex-direction: column; }
.carrito-pts.gris p { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.carrito-pts .btn { align-self: flex-start; }
.carrito-no-suman { display: block; margin: 6px 2px 0; font-size: 0.76rem; line-height: 1.35; color: rgba(85, 76, 65, 0.7); }
.opciones-lista li { align-items: center; }
.opciones-lista .btn { flex: 0 0 auto; }

/* --- 2.5.0: el reverso enseña SÓLO la última visita; tocarla abre el detalle (js/visitas.js) --- */
.chev { display: inline-flex; transform: rotate(-90deg); vertical-align: middle; }
.uv { background: rgba(253, 251, 247, 0.95); border: 1px solid rgba(172, 153, 108, 0.35); border-radius: 14px; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow 0.2s, transform 0.1s; }
.uv:active { transform: scale(0.99); }
.uv:hover { box-shadow: 0 4px 16px rgba(172, 153, 108, 0.2); }
.uv.sin-plan { border-style: dashed; }
.uv-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.uv-cab span { color: var(--oro-osc); font-weight: 600; font-size: 0.88rem; }
.uv-cab small { color: var(--gris); font-size: 0.72rem; text-align: right; }
.uv-lineas { list-style: none; margin: 0; padding: 0; }
.uv-lineas li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 0.86rem; color: var(--tinta); line-height: 1.3; }
.uv-lineas li b { font-weight: 600; white-space: nowrap; color: var(--tinta); }
.uv-lineas li.mas span, .uv-lineas li.canje span { color: var(--gris); font-size: 0.78rem; }
.uv-lineas li.canje span { display: inline-flex; gap: 5px; align-items: center; }
.uv-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid rgba(85, 76, 65, 0.1); margin-top: 6px; padding-top: 8px; font-size: 0.85rem; font-weight: 600; }
.uv-pts { display: flex; gap: 8px; }
.uv-pts .tx-amount { font-size: 0.95rem; }
.uv .tx-pudo { margin: 6px 0 0; font-size: 0.76rem; color: rgba(85, 76, 65, 0.6); font-style: italic; }
.uv-mas { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 0.76rem; color: var(--oro-osc); font-weight: 600; }
.uv-vacio { text-align: center; color: var(--gris); font-size: 0.85rem; line-height: 1.45; padding: 18px 8px; }
.puntos-perdidos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f4f2ee; border: 1px dashed rgba(85, 76, 65, 0.3); cursor: default; }
.puntos-perdidos .pp-num { font-size: 2rem; font-weight: 700; color: rgba(85, 76, 65, 0.45); line-height: 1; }
.puntos-perdidos .pp-txt { font-size: 0.85rem; font-weight: 600; color: rgba(85, 76, 65, 0.8); line-height: 1.3; }
.puntos-perdidos .pp-txt small { display: block; font-weight: 400; font-size: 0.74rem; color: var(--gris); margin-top: 2px; }
.puntos-perdidos .btn { grid-column: 1 / -1; justify-self: center; width: auto; margin-top: 6px; }
.puntos-perdidos.en-hoja { margin-top: 14px; }
.reverso-premio { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: #fdf6e3; cursor: pointer; }
.premio-prog p { margin: 0 0 6px; font-size: 0.82rem; color: var(--oro-osc); line-height: 1.35; }
.premio-prog small { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.74rem; color: var(--verde); }
.premio-prog .barra { height: 8px; border-radius: 99px; background: rgba(172, 153, 108, 0.2); overflow: hidden; }
.premio-prog .barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #AC996C, #8b7355); }
/* El detalle (hoja) */
.visita-fecha { margin: -4px 0 10px; font-size: 0.8rem; color: var(--gris); }
.visita-fecha::first-letter { text-transform: uppercase; }
.visita-lineas li .der { color: var(--tinta); font-size: 0.85rem; }
.visita-lineas li.canje .txt { color: var(--oro-osc); }
.der.neg, .der .neg { color: var(--rojo); }
.der.pos, .der .pos { color: #65a30d; font-weight: 700; }
.der .gris { color: rgba(85, 76, 65, 0.45); font-weight: 700; }
.hoja > .total { display: flex; justify-content: space-between; font-size: 0.95rem; margin: 8px 0 4px; padding-top: 8px; border-top: 1px solid rgba(85, 76, 65, 0.12); }
.visita-bloque { margin-top: 14px; }
.visita-bloque h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 0.9rem; color: var(--oro-osc); font-weight: 600; }
.visita-bloque h4 .cnt { margin-left: auto; font-size: 0.72rem; color: var(--gris); }
.visita-bloque.puntos { padding: 10px 12px; border-radius: 12px; background: #fdf6e3; }
.visita-bloque.puntos > p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; font-size: 0.86rem; color: var(--oro-osc); line-height: 1.4; }
.visita-bloque.puntos.gris { background: #f4f2ee; }
.visita-bloque.puntos.gris > p { color: rgba(85, 76, 65, 0.8); margin-bottom: 0; }
.visita-bloque.puntos .btn { width: auto; margin-top: 8px; }
.visita-bloque.retoque { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(172, 153, 108, 0.3); background: #fff; }
.visita-bloque.retoque .muted { margin: 6px 0 0; }
.visita-bloque.retoque .btn { margin-top: 10px; }
.visita-bloque.sesion h4 { text-transform: none; }
.visitas-lista li { cursor: pointer; align-items: center; }
.visitas-lista li .der { display: inline-flex; align-items: center; gap: 6px; }
.link-atras { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0 0 8px; color: var(--oro-osc); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.pill.ambar { background: #fef3c7; color: #92400e; font-size: 0.7rem; padding: 2px 8px; border-radius: 99px; white-space: nowrap; align-self: center; }
.sesion-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sesion-card .sesion-fecha { margin: -2px 0 4px; font-size: 0.8rem; color: var(--oro-osc); font-weight: 600; }
.sesion-card .sesion-retoque { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 0.76rem; color: var(--oro-osc); line-height: 1.35; }
/* Carrito: quitar una línea entera y vaciar */
.carrito .quitar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; border: 0; background: none; color: rgba(85, 76, 65, 0.5); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; align-self: center; }
.carrito .quitar:hover { color: var(--rojo); }
.carrito .vaciar { display: block; margin: 8px auto 0; background: none; border: 0; color: var(--gris); font: inherit; font-size: 0.78rem; text-decoration: underline; cursor: pointer; }
.opciones-lista li { align-items: center; }
.opciones-lista .cant { flex: 0 0 auto; }
.carrito .pago-nota { display: flex; gap: 6px; align-items: flex-start; margin: 8px 2px 0; font-size: 0.74rem; color: var(--gris); line-height: 1.35; }
/* Buscador de la tienda: ahora es un <form role="search"> (para que Chrome no lo tome por un inicio de sesión) */
form.buscar { margin: 0; }
/* Mis pedidos (user 2.6.0): el pedido con su número para copiar, WhatsApp, y retomar o cancelar lo pendiente */
.view-cab .mis-pedidos { margin-left: auto; flex: 0 0 auto; width: auto; white-space: nowrap; }
.view-cab .mis-pedidos[hidden], .tienda-pendiente[hidden] { display: none; }
.tienda-pendiente { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; font-size: 0.8rem; line-height: 1.35; }
.tienda-pendiente .pend-txt { display: flex; gap: 8px; align-items: flex-start; }
.tienda-pendiente .pedido-acciones { margin-top: 8px; }
.pedido { background: #fff; border: 1px solid rgba(172, 153, 108, 0.3); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.pedido.pendiente { border-color: #f59e0b; }
.pedido-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--oro-osc); }
.pedido-items { margin: 4px 0 2px; font-size: 0.84rem; color: var(--tinta); line-height: 1.35; overflow-wrap: anywhere; }
.pedido .muted { margin: 0; font-size: 0.76rem; }
.pedido-ids { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; background: var(--crema); border: 1px dashed rgba(172, 153, 108, 0.5); border-radius: 10px; }
.pedido-ids > div { flex: 1; min-width: 0; }
.pedido-ids small { display: block; font-size: 0.68rem; color: var(--gris); text-transform: uppercase; letter-spacing: 0.04em; }
.pedido-ids span { display: block; font-size: 0.8rem; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pedido-ids .btn { flex: 0 0 auto; width: auto; } /* common.css pone .btn a lo ancho en celular */
.pedido-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pedido-acciones .btn { flex: 1 1 140px; width: auto; }
.pill { display: inline-block; font-size: 0.7rem; padding: 2px 8px; border-radius: 99px; white-space: nowrap; background: #f3f4f6; color: #4b5563; }
.pill.verde { background: #d1fae5; color: #065f46; }
.btn-wa-sec { border-color: #1f9d55; color: #1b8a4a; }
/* El punto rojo del regalo: el mismo punto marca la sección de Recompensas que lo prendió */
.punto-rojo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); flex: 0 0 9px; margin-left: 6px; vertical-align: middle; }
/* Diálogos de la app (js/dialogos.js): nunca alert/confirm/prompt del navegador. Encima de las hojas (2500)
   y debajo del aviso (4000). */
.dlg-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3500; background: rgba(20, 20, 20, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; animation: dlgFondo 0.15s ease; }
.dlg { background: var(--crema); color: var(--tinta); width: 100%; max-width: 380px; border-radius: 20px; padding: 20px 18px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); font-family: 'Montserrat', sans-serif; animation: dlgSubir 0.18s ease; }
.dlg-titulo { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; color: var(--oro-osc); }
.dlg-msg { margin: 0 0 14px; font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; }
.dlg-form { margin: 0 0 12px; }
.dlg-campo { display: block; margin-bottom: 10px; font-size: 0.8rem; color: var(--oro-osc); }
.dlg-campo span { display: block; margin-bottom: 4px; font-weight: 600; }
.dlg-campo input, .dlg-campo textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(172, 153, 108, 0.5); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--tinta); background: #fff; outline: none; }
.dlg-campo input:focus, .dlg-campo textarea:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(172, 153, 108, 0.18); }
.dlg-err { margin: 0; font-size: 0.78rem; color: #991b1b; }
.dlg-err[hidden] { display: none; }
.dlg-botones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dlg-btn { flex: 1 1 120px; border-radius: 22px; padding: 10px 14px; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; border: 1px solid var(--oro); background: #fff; color: var(--oro-osc); -webkit-tap-highlight-color: transparent; }
.dlg-btn.primario { background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; border-color: transparent; }
.dlg-btn.primario.peligro { background: #b91c1c; }
.dlg-opciones { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.dlg-opciones .dlg-btn { flex: none; width: 100%; text-align: left; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.dlg-opcion.peligro:not(.primario) { color: #b91c1c; border-color: #b91c1c; }
.dlg.dlg-elegir:focus { outline: none; }
.dlg-btn:active { transform: scale(0.98); }
@keyframes dlgFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgSubir { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
[aria-invalid="true"] { border-color: #b91c1c !important; box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15) !important; }
/* Mis pedidos: el botón sólo cuenta lo que espera pago; adentro, por estado */
.mis-pedidos .mp-pend { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: #fef3c7; color: #92400e; font-size: 0.7rem; font-weight: 700; }
.pedidos-grupo { margin: 12px 0 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--oro-osc); display: flex; align-items: center; gap: 6px; }
.pedidos-grupo:first-of-type { margin-top: 2px; }
.pedidos-grupo span { font-weight: 600; color: var(--gris); }
.pedidos-grupo.pend { color: #92400e; }
/* Tarjetas de regalo: elegir monto, el código para copiar/compartir y canjear en Recompensas */
.regalo-montos .txt small { display: block; font-size: 0.7rem; color: var(--gris); }
.regalo-libre { margin: 10px 0 0; }
.regalo-libre label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--oro-osc); margin-bottom: 4px; }
.regalo-libre label small { font-weight: 400; color: var(--gris); }
.regalo-libre-fila { display: flex; gap: 8px; align-items: center; }
.regalo-libre-fila input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; border: 1px solid rgba(172, 153, 108, 0.5); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 16px; background: #fff; color: var(--tinta); }
.regalo-libre-fila .btn { flex: 0 0 auto; width: auto; }
.regalo-libre .aviso { margin-top: 8px; }
.regalo-nota { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: 0.78rem; line-height: 1.4; }
.regalo-codigos { display: grid; gap: 8px; margin-top: 8px; }
.regalo-codigo { background: linear-gradient(135deg, #fff, #fdf6ef); border: 1px dashed rgba(142, 26, 95, 0.45); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.regalo-codigo.usada { opacity: 0.7; border-style: solid; border-color: rgba(172, 153, 108, 0.35); }
.regalo-codigo .rc-cab { display: flex; align-items: center; gap: 6px; color: var(--magenta); font-size: 0.84rem; flex-wrap: wrap; }
.regalo-codigo .rc-num { display: block; margin: 6px 0 4px; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; color: var(--tinta); user-select: all; overflow-wrap: anywhere; font-family: 'Montserrat', monospace; }
.regalo-codigo small { display: block; font-size: 0.74rem; color: var(--gris); line-height: 1.35; }
.regalo-card .regalo-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.regalo-card .regalo-acciones .btn { flex: 1 1 150px; width: auto; }
.usar-saldo small { display: block; font-size: 0.72rem; color: var(--gris); }
/* ¿En qué clínica lo recoges? (se elige en el pedido; hoy puede haber una sola, pero se enseña) */
.recoger-en { margin: 10px 0 4px; padding: 10px 12px; background: var(--crema); border: 1px solid rgba(172, 153, 108, 0.35); border-radius: 12px; }
.recoger-en label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--oro-osc); margin-bottom: 6px; }
.recoger-en select { width: 100%; box-sizing: border-box; border: 1px solid rgba(172, 153, 108, 0.5); border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 16px; background: #fff; color: var(--tinta); }
.recoger-en small { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--gris); }
.pedido-recoger { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 2px; font-size: 0.8rem; color: var(--tinta); }
/* Regalos por usar (tarjetas de regalo de un tratamiento o producto ya canjeadas) — user 2.10.0 */
.regalos-card { border: 1px solid rgba(142, 26, 95, 0.25); background: linear-gradient(135deg, #fff, #fdf2f8); }
.regalos-card h3 { color: var(--magenta); }
.regalos-lista li { align-items: center; gap: 8px; }
.regalos-lista li .txt { min-width: 0; overflow-wrap: anywhere; }
.regalos-lista li .txt strong { display: block; color: var(--tinta); font-size: 0.92rem; }
.regalos-lista .regalo-como { display: flex; gap: 4px; align-items: flex-start; margin-top: 3px; color: var(--oro-osc) !important; }
.regalos-lista .btn { flex-shrink: 0; width: auto !important; }
.regalo-otra { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 0.8rem; color: var(--tinta); }
.regalo-otra .link { background: none; border: 0; padding: 0; font: inherit; color: var(--magenta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Mensajes de la clínica (user 2.15.0): la campana del encabezado y su hoja */
.avisos-lista { display: flex; flex-direction: column; gap: 10px; }
.aviso-item { border: 1px solid rgba(172, 153, 108, 0.3); border-radius: 14px; padding: 12px 14px; background: #fff; }
.aviso-item.nuevo { border-color: var(--magenta); box-shadow: 0 0 0 1px rgba(142, 26, 95, 0.15); background: #fffafc; }
.aviso-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.72rem; color: var(--gris); }
.aviso-cat { text-transform: uppercase; letter-spacing: 0.5px; color: var(--oro-osc); font-weight: 600; }
.aviso-fecha { margin-left: auto; }
.aviso-nuevo { background: var(--magenta); color: #fff; border-radius: 8px; padding: 1px 7px; font-weight: 700; font-size: 0.66rem; }
.aviso-item h4 { margin: 6px 0 4px; font-size: 0.98rem; color: #3b342b; font-weight: 600; line-height: 1.3; }
.aviso-item p { margin: 0 0 10px; font-size: 0.88rem; color: #554c41; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.aviso-item .aviso-accion { width: auto; padding: 8px 16px; font-size: 0.85rem; }
/* La imagen 2:1 de un mensaje (DTB HUB 0.51.0): de orilla a orilla de la tarjeta, arriba del texto. */
.aviso-item.con-img { overflow: hidden; }
.aviso-img { display: block; width: calc(100% + 28px); max-width: none; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin: -12px -14px 10px; background: #f1ebde; }
/* Con la campana son cuatro botones: en un teléfono angosto se achican un poco. "Safevity Rewards" es más largo que el
   nombre de antes: el título mide lo que le deja el encabezado (container query) y, si no cabe, se achica la letra y,
   en el más angosto, queda "Safevity". Sin container queries (iOS < 16) se corta con "…", como antes. */
.app-title { container-type: inline-size; }
.app-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-title strong .rw { color: inherit; font-size: inherit; overflow: visible; white-space: inherit; }
@container (max-width: 150px) { .app-title strong { font-size: 0.86rem; letter-spacing: 0.2px; } }
@container (max-width: 132px) { .app-title strong { font-size: 0.8rem; letter-spacing: 0; } }
@container (max-width: 112px) { .app-title strong .rw { display: none; } .app-title strong { font-size: 0.95rem; letter-spacing: 0.5px; } }
@media (max-width: 380px) { .app-header .icon-btn { width: 36px; height: 36px; flex-basis: 36px; } .app-header { gap: 6px; } }

/* Promociones relámpago (user 2.16.0): el aviso de arriba de la tienda, el sello en cada pieza y el precio tachado */
.tienda-promos { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.tienda-promos[hidden] { display: none; }
.promo-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #8E1A5F, #b0467f); color: #fff; }
.promo-banner.gris { background: #f4f2ee; color: #554c41; border: 1px dashed rgba(85, 76, 65, 0.3); }
.promo-banner.activa { box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #8E1A5F; }
.promo-banner-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; line-height: 1.35; }
.promo-banner-txt b { font-size: 0.95rem; }
.promo-banner-txt small { opacity: 0.9; font-size: 0.74rem; }
.promo-banner .btn.chico { width: auto; flex: 0 0 auto; background: #fff; color: #8E1A5F; border-color: #fff; }
.promo-banner.gris .btn.chico { color: #554c41; border-color: rgba(85, 76, 65, 0.3); }
.promo-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.9; }
.producto-foto { position: relative; }
.promo-sello { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px; background: #8E1A5F; color: #fff; font-size: 0.66rem; font-weight: 700; }
.promo-sello.gris { background: #9ca3af; }
.producto.con-promo { border-color: rgba(142, 26, 95, 0.45); }
.promo-linea { display: block; margin-top: 3px; font-size: 0.72rem; font-weight: 600; color: #8E1A5F; line-height: 1.3; }
.promo-linea.gris { color: var(--gris); font-weight: 400; }
.lista-tachada { color: var(--gris); font-weight: 400; font-size: 0.85em; text-decoration: line-through; }
.promo-mini { color: #8E1A5F; font-weight: 600; }
.aviso.promo-aviso { display: flex; gap: 8px; align-items: flex-start; }

/* ---- user 2.18.0: el código de entrega de un pedido pagado ---- */
.pedido-codigo { margin-top: 8px; padding: 10px 12px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px; color: #065f46; text-align: center; }
.pedido-codigo small { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #047857; }
.pedido-codigo .pc-num { display: block; font-size: 1.7rem; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; margin: 2px 0 4px; color: #064e3b; }
.pedido-codigo span { display: block; font-size: 0.78rem; line-height: 1.35; }

/* ---- user 2.18.0: compartir con el equipo médico ---- */
.uso-medico { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 10px; padding: 8px 10px; background: #fdfbf7; border: 1px solid #e8dfc9; border-radius: 10px; color: #8b7355; font-size: 0.78rem; line-height: 1.35; }
.uso-medico svg { flex: none; margin-top: 1px; }
.compartidos-h { margin: 14px 0 2px; font-size: 0.82rem; color: var(--oro-osc); display: flex; align-items: center; gap: 6px; }
.doc.compartido { cursor: default; }
.form-archivo { display: grid; gap: 10px; }
.form-archivo label { display: grid; gap: 4px; font-size: 0.84rem; color: var(--tinta); }
.form-archivo select, .form-archivo textarea, .form-archivo input[type="file"] { width: 100%; font: inherit; font-size: 0.9rem; padding: 8px 10px; border: 1px solid rgba(172, 153, 108, 0.45); border-radius: 10px; background: #fff; box-sizing: border-box; }
.form-archivo textarea { resize: vertical; min-height: 54px; }
.arch-estado { margin: 0; min-height: 1em; font-size: 0.82rem; color: var(--gris); }
.arch-estado.error { color: #b91c1c; }
.arch-elegir { display: grid; gap: 4px; font-size: 0.84rem; color: var(--tinta); }
.arch-fila { display: flex; align-items: center; gap: 10px; min-width: 0; }
.arch-fila .btn { flex: 0 0 auto; width: auto; } /* common.css pone .btn a lo ancho en celular */
.arch-nombre { min-width: 0; overflow-wrap: anywhere; color: var(--gris); font-size: 0.8rem; }
/* Cuentas de prueba (user 2.20.0, DTB HUB → Cuentas de prueba): pagar sin cobrar y el nivel puesto para pruebas */
.carrito .pago-nota.pago-prueba, .pedido-prueba { color: #92400e; }
.pedido-prueba { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0 !important; padding: 6px 10px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 10px; font-size: 0.78rem; line-height: 1.35; }
.prueba-aviso { display: flex; gap: 6px; align-items: flex-start; background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; border-radius: 10px; padding: 8px 10px; font-size: 0.8rem; line-height: 1.35; }
.nivel-cab .nivel-prueba { color: #92400e; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 999px; padding: 2px 8px; font-weight: 600; white-space: nowrap; }

/* --- Contactar a mi médico (user 2.22.0) --- */
.contacto-card .btn { margin-top: 8px; }
.contacto-urgencia { background: #fef2f2; border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 14px; padding: 10px 12px; margin: 8px 0 12px; }
.contacto-urgencia strong { display: flex; align-items: center; gap: 6px; color: #b91c1c; font-size: 0.9rem; }
.contacto-urgencia p { font-size: 0.8rem; color: var(--tinta); margin: 4px 0 8px; }
.contacto-tels { display: flex; flex-direction: column; gap: 8px; }
.contacto-tels .btn { width: 100%; justify-content: center; text-decoration: none; }
.contacto-form .etq { display: block; margin-bottom: 4px; color: var(--tinta); font-weight: 600; font-size: 0.8rem; }
.contacto-form textarea { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid rgba(172, 153, 108, 0.4); border-radius: 10px; font: inherit; font-size: 16px; color: var(--tinta); background: #fff; resize: vertical; }
.contacto-error { color: #b91c1c; font-size: 0.8rem; min-height: 1em; margin: 2px 0 8px; }
.contacto-error:empty { display: none; }
.contacto-nota { margin-top: 8px; font-size: 0.74rem; text-align: center; }
.contacto-estado { background: #fff; border: 1px solid rgba(172, 153, 108, 0.35); border-radius: 14px; padding: 10px 12px; margin: 10px 0; }
.contacto-estado.urgente { border-color: rgba(239, 68, 68, 0.45); }
.contacto-estado-tit { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--tinta); }
.contacto-estado-msg { font-size: 0.8rem; color: var(--gris); margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.contacto-pasos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.contacto-pasos li { font-size: 0.68rem; color: var(--gris); text-align: center; padding-top: 8px; border-top: 3px solid rgba(172, 153, 108, 0.25); line-height: 1.25; overflow-wrap: anywhere; }
.contacto-pasos li.hecho { color: var(--oro-osc); border-top-color: var(--oro); font-weight: 600; }
.citas-contacto { display: block; text-align: center; margin: 4px auto 10px; max-width: 400px; font-size: 0.8rem; }
.contacto-tels .btn.peligro { background: #dc2626; color: #fff; border-color: transparent; }

/* "Tus pasos" en Mi plan (user 2.23.0): 7 barras (tocar una = anotar/corregir ese día), el campo y el recordatorio. */
.pasos-card .cnt { font-size: 0.75rem; }
.pasos-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; }
.pasos-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 1px solid transparent; border-radius: 10px; padding: 4px 0; cursor: pointer; font: inherit; color: #8a7f70; min-height: 44px; }
.pasos-dia.activo { border-color: rgba(172, 153, 108, 0.6); background: #fdfbf7; color: #3f382f; }
.pasos-barra { display: flex; align-items: flex-end; width: 100%; max-width: 26px; height: 56px; border-radius: 6px; background: #f3ede0; overflow: hidden; }
.pasos-barra i { display: block; width: 100%; background: linear-gradient(180deg, #AC996C, #8b7355); border-radius: 6px 6px 0 0; }
.pasos-dia.vacio .pasos-barra { background: repeating-linear-gradient(45deg, #f6f1e6, #f6f1e6 4px, #efe7d6 4px, #efe7d6 8px); }
.pasos-dia small { font-size: 0.72rem; text-transform: uppercase; }
.pasos-form label { display: block; font-size: 0.88rem; font-weight: 600; color: #3f382f; margin-bottom: 6px; }
.pasos-fila { display: flex; gap: 8px; }
.pasos-fila input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid rgba(172, 153, 108, 0.45); border-radius: 12px; background: #fff; color: #3f382f; box-sizing: border-box; }
.pasos-fila input:focus { outline: 2px solid rgba(172, 153, 108, 0.55); outline-offset: 1px; border-color: #AC996C; }
.pasos-fila .btn { width: auto; flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }
.pasos-error { color: #b91c1c; font-size: 0.82rem; min-height: 1em; margin-top: 4px; }
.pasos-donde, .pasos-rec { font-size: 0.8rem; margin-top: 6px; }
.pasos-rec .link { background: none; border: 0; padding: 0; font: inherit; color: var(--oro-osc); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ===================================================================================================================
   MI PLAN DE CONTROL DE PESO (user 2.24.0, js/peso.js) — copia el look de las maquetas de la guía técnica v2:
   selector grande Hoy · Avance · Tratamiento, tarjeta dorada de la inyección con 6 sitios, "Tu día" con barras y "+",
   la caja roja de señales de alarma, la tabla de puntos, la gráfica de músculo y grasa, la fase con sus 4 tramos.
   Todo con prefijo pz- (nada de esto toca lo demás de la app). Sin color-mix (iOS < 16.2).
   =================================================================================================================== */
:root { --pz-oro: #ac9557; --pz-oro-claro: #e4d8b6; --pz-oro-osc: #85702f; --pz-crema: #f4f3ef; --pz-crema2: #ebe8e0; --pz-tinta: #3a3a3a; --pz-gris: #6f6a62; --pz-borde: #d9d4c8; --pz-rojo: #a33a2c; --pz-verde: #1e6b46; }
/* Entrada en "Mi plan" (sólo con programa activo) */
.pz-entrada { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--pz-oro); color: var(--pz-tinta); border: none; border-radius: 18px; padding: 16px 16px 16px 18px; margin: 0 0 12px; font: inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(172, 149, 87, 0.28); -webkit-tap-highlight-color: transparent; }
.pz-entrada:active { transform: scale(0.99); }
.pz-entrada-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pz-entrada-txt strong { font-size: 1.45rem; font-weight: 600; color: var(--pz-tinta); line-height: 1.15; }
.pz-entrada-aviso { font-size: 0.82rem; font-weight: 600; color: #2f2a20; }
.pz-entrada .pz-ceja { color: #3d351f; }
.pz-entrada-flecha { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--pz-tinta); display: flex; align-items: center; justify-content: center; }
.pz-entrada-flecha .dra-ic, .pz-entrada-flecha svg, .pz-flecha svg, .pz-der svg { transform: rotate(180deg); }
/* La vista: sin el encabezado de la app (trae el suyo, "‹ Safevity Rewards"), fondo blanco como en la maqueta */
body.en-peso .app-header { display: none; }
body.en-peso .app-main { background: #fff; padding-top: calc(10px + env(safe-area-inset-top)); }
.pz { color: var(--pz-tinta); font-family: 'Montserrat', sans-serif; padding-bottom: 8px; }
.pz-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; }
.pz-volver { background: none; border: none; font: inherit; font-size: 0.92rem; color: var(--pz-gris); display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px 8px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pz-campana { position: relative; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; border: 1px solid var(--pz-borde); background: #fff; color: var(--pz-tinta); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pz-campana .pz-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); border: 2px solid #fff; }
.pz-ceja { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pz-oro-osc); }
.pz-titulo { margin: 2px 0 14px; font-size: 1.9rem; font-weight: 600; color: var(--pz-tinta); line-height: 1.1; }
.pz-secciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--pz-crema); border-radius: 18px; padding: 6px; margin-bottom: 14px; }
.pz-secciones button { border: none; background: none; font: inherit; font-size: 0.98rem; font-weight: 500; color: var(--pz-gris); padding: 14px 4px; border-radius: 14px; cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent; }
.pz-secciones button.activo { background: var(--pz-oro); color: var(--pz-tinta); font-weight: 600; }
.pz-cola { display: flex; gap: 8px; align-items: flex-start; background: #f3f4f6; color: #4b5563; border-radius: 12px; padding: 9px 11px; font-size: 0.8rem; margin-bottom: 12px; line-height: 1.35; }
.pz-cola[hidden] { display: none; }
/* Tarjetas y piezas */
.pz-card { background: var(--pz-crema); border-radius: 22px; padding: 18px 16px; margin-bottom: 14px; }
.pz-card-blanca { background: #fff; border: 1px solid var(--pz-borde); }
.pz-card h2 { margin: 0 0 10px; font-size: 1.08rem; font-weight: 600; color: var(--pz-tinta); }
.pz-card-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pz-card-cab h2, .pz-card-cab .pz-etq { margin: 0; }
.pz-etq { margin: 0 0 10px; font-size: 0.98rem; font-weight: 500; color: var(--pz-tinta); }
.pz-sutil { color: var(--pz-gris); font-size: 0.82rem; font-weight: 400; }
.pz-sep { height: 1px; background: var(--pz-borde); margin: 16px 0; }
.pz-grid2, .pz-grid3, .pz-grid4, .pz-grid5 { display: grid; gap: 10px; }
.pz-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pz-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pz-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.pz-grid5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pz-opc { min-height: 50px; border: 1px solid var(--pz-borde); background: #fff; color: var(--pz-tinta); border-radius: 14px; font: inherit; font-size: 0.86rem; font-weight: 500; padding: 8px 6px; cursor: pointer; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; hyphens: auto; -webkit-tap-highlight-color: transparent; }
.pz-opc.activo { background: var(--pz-oro); border-color: var(--pz-oro); color: var(--pz-tinta); font-weight: 600; }
.pz-opc:active { transform: scale(0.98); }
.pz-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: none; border-radius: 16px; background: var(--pz-oro); color: var(--pz-tinta); font: inherit; font-size: 0.98rem; font-weight: 600; cursor: pointer; margin-top: 12px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pz-btn:disabled { opacity: 0.5; cursor: default; }
.pz-btn-linea { background: #fff; border: 1px solid var(--pz-oro); font-weight: 500; }
.pz-btn-chico { width: auto; min-height: 38px; padding: 6px 14px; font-size: 0.84rem; margin-top: 8px; }
.pz-link { background: none; border: none; color: var(--pz-oro-osc); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; padding: 4px 0; }
.pz-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 12px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.pz-pill.verde { background: var(--pz-verde); color: #fff; }
.pz-pill.ambar { background: #fef3c7; color: #92400e; }
.pz-circulo { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; border: 1px solid var(--pz-borde); background: #fff; color: var(--pz-tinta); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pz-circulo:disabled { opacity: 0.35; cursor: default; }
.pz-error { color: var(--pz-rojo); font-size: 0.84rem; font-weight: 600; min-height: 1px; margin-top: 8px; }
.pz-error:empty { display: none; }
/* Inyección */
.pz-iny { background: var(--pz-oro); border-radius: 22px; padding: 18px 16px; margin-bottom: 14px; color: var(--pz-tinta); }
.pz-iny-ceja { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2f2a20; display: flex; align-items: center; gap: 6px; }
.pz-iny-tit { font-size: 1.55rem; font-weight: 600; margin: 4px 0 6px; line-height: 1.15; }
.pz-iny-linea { margin: 0 0 12px; font-size: 0.88rem; font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.pz-iny-aviso { margin: 0 0 12px; background: rgba(255, 255, 255, 0.55); border-radius: 12px; padding: 9px 11px; font-size: 0.84rem; font-weight: 600; display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.pz-iny-fila { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; }
.pz-iny-ant { font-weight: 500; font-size: 0.82rem; }
.pz-sitios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pz-sitio { position: relative; border: 1.5px solid #8f7a3f; background: transparent; color: var(--pz-tinta); border-radius: 16px; padding: 10px 4px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; -webkit-tap-highlight-color: transparent; }
.pz-sitio b { font-size: 0.95rem; font-weight: 600; }
.pz-sitio small { font-size: 0.78rem; }
.pz-sitio.activo { background: #fff; border-color: #fff; }
.pz-sitio.anterior::after { content: 'anterior'; position: absolute; top: -8px; right: 6px; background: #3d351f; color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; padding: 1px 6px; }
.pz-iny-btn { width: 100%; min-height: 56px; border: none; border-radius: 16px; background: #fff; color: var(--pz-tinta); font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.pz-iny-btn:active { transform: scale(0.99); }
.pz-iny-lista .pz-iny-linea { margin-bottom: 0; }
.pz-iny-una { display: flex; gap: 10px; align-items: center; background: var(--pz-crema); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; font-size: 0.9rem; font-weight: 500; color: var(--pz-tinta); }
.pz-iny-una .dra-ic, .pz-iny-una svg { color: var(--pz-oro-osc); flex: 0 0 auto; }
/* Tu día */
.pz-dias-reg { display: inline-flex; background: #fff; border: 1px solid var(--pz-borde); border-radius: 999px; padding: 3px; margin: -2px 0 14px; }
.pz-dias-reg button { border: none; background: none; font: inherit; font-size: 0.8rem; padding: 5px 14px; border-radius: 999px; color: var(--pz-gris); cursor: pointer; }
.pz-dias-reg button.activo { background: var(--pz-oro); color: var(--pz-tinta); font-weight: 600; }
.pz-medida { display: flex; align-items: center; gap: 12px; }
.pz-medida-txt { flex: 1; min-width: 0; }
.pz-medida-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.pz-medida-cab .pz-etq { margin: 0; }
.pz-barra { height: 10px; border-radius: 999px; background: var(--pz-crema2); overflow: hidden; }
.pz-barra i { display: block; height: 100%; background: var(--pz-oro); border-radius: 999px; transition: width 0.25s; }
.pz-segs { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 5px; }
.pz-segs i { height: 10px; border-radius: 999px; background: var(--pz-crema2); }
.pz-segs i.lleno { background: var(--pz-oro); }
.pz-mas-menos { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pz-mas { width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--pz-oro); color: var(--pz-tinta); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.pz-mas:active, .pz-menos:active { transform: scale(0.94); }
.pz-menos { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pz-borde); background: #fff; color: var(--pz-tinta); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; }
.pz-menos:disabled { opacity: 0.35; cursor: default; }
.pz-nota-paso { margin: 8px 0 0; font-size: 0.74rem; }
.pz-fila-ej { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pz-fila-ej .pz-etq { margin: 0; }
.pz-sino { display: flex; gap: 8px; }
.pz-sino .pz-opc { min-width: 74px; }
/* Molestias y alarma */
.pz-intensidad { margin-top: 14px; }
.pz-tip { margin: 10px 0 0; font-size: 0.84rem; color: var(--pz-gris); line-height: 1.45; }
.pz-tip b { color: var(--pz-tinta); font-weight: 600; }
.pz-alarma { margin-top: 16px; border: 1.5px solid var(--pz-rojo); border-radius: 18px; background: #fff; padding: 14px; }
.pz-alarma h3 { margin: 0 0 6px; color: var(--pz-rojo); font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.pz-alarma ul { margin: 0 0 12px; padding-left: 20px; font-size: 0.88rem; line-height: 1.45; color: var(--pz-tinta); }
.pz-alarma-btn { width: 100%; min-height: 56px; border: none; border-radius: 14px; background: var(--pz-rojo); color: #fff; font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; }
.pz-alarma-btn:active { transform: scale(0.99); }
.pz-alarma-tels { background: #fbeeec; border: 1px solid #e7b6ae; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pz-alarma-tels p { margin: 0; color: var(--pz-rojo); }
.pz-tel { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px; border: 1px solid var(--pz-rojo); background: #fff; color: var(--pz-rojo); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.pz-tel.rojo { background: var(--pz-rojo); color: #fff; }
.pz-alarma-estado { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; background: var(--pz-crema); border-radius: 12px; padding: 10px 12px; font-size: 0.86rem; line-height: 1.4; }
.pz-senales { display: grid; gap: 8px; }
.pz-senales .pz-opc { text-align: left; padding: 10px 12px; min-height: 44px; }
/* Tu semana (tarjeta), avisos */
.pz-semana-card { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1.5px solid var(--pz-oro); border-radius: 18px; padding: 16px; margin-bottom: 14px; font: inherit; color: var(--pz-tinta); cursor: pointer; }
.pz-semana-card > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pz-semana-card b { font-size: 1rem; font-weight: 600; }
.pz-semana-card small { color: var(--pz-gris); font-size: 0.82rem; }
.pz-flecha { color: var(--pz-oro-osc); display: inline-flex; }
.pz-avisos-linea { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fef3c7; color: #92400e; border-radius: 14px; padding: 11px 13px; margin-bottom: 14px; font-size: 0.84rem; line-height: 1.35; }
.pz-avisos-linea > span { flex: 1 1 200px; }
.pz-avisos-linea .pz-btn { margin-top: 0; }
.pz-switch input:checked + span { background: var(--pz-oro); }
/* Pantallas de apoyo */
.pz-sub-cab { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.pz-sub-cab .pz-titulo { margin: 2px 0 0; font-size: 1.6rem; }
.pz-sub > .pz-sutil { display: block; margin-bottom: 12px; }
.pz-contador { display: flex; align-items: center; gap: 10px; }
.pz-contador b { font-size: 1.15rem; min-width: 48px; text-align: center; }
.pz-contador .pz-mas { width: 46px; height: 46px; }
.pz-contador .pz-menos { width: 46px; height: 46px; }
.pz-cajas { margin-bottom: 4px; }
.pz-caja { background: var(--pz-crema); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pz-caja > span:first-child { font-size: 0.82rem; color: var(--pz-gris); }
.pz-caja small { font-size: 0.74rem; color: var(--pz-gris); }
.pz-entrada-num { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pz-entrada-num input { flex: 1; min-width: 0; width: 100%; border: none; border-bottom: 1.5px solid var(--pz-borde); background: transparent; font: inherit; font-size: 1.25rem; font-weight: 600; color: var(--pz-tinta); padding: 4px 0; border-radius: 0; }
.pz-entrada-num input:focus { outline: none; border-bottom-color: var(--pz-oro); }
.pz-entrada-num input[aria-invalid="true"] { border-bottom-color: var(--pz-rojo); }
.pz-entrada-num b { font-size: 0.85rem; color: var(--pz-gris); font-weight: 500; }
.pz-ib-doc { display: flex; align-items: center; gap: 10px; background: var(--pz-crema); border-radius: 14px; padding: 12px; margin-top: 12px; }
.pz-ib-doc span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pz-ib-doc b { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-ib-doc small { color: var(--pz-gris); font-size: 0.74rem; }
.pz-ib-doc > .dra-ic, .pz-ib-doc > svg { color: var(--pz-oro-osc); }
.pz-ib-estado { color: var(--pz-gris); font-size: 0.82rem; margin: 10px 2px; }
.pz-ib-estado:empty { display: none; }
.pz-ib-valores { margin-top: 12px; }
.pz-ib-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--pz-borde); font-size: 0.88rem; }
.pz-ib-fila:last-of-type { border-bottom: none; }
.pz-ib-fila > span:first-child { flex: 1; min-width: 0; }
.pz-ib-fila .pz-entrada-num { flex: 0 0 auto; width: 118px; }
.pz-ib-fila .pz-entrada-num input { font-size: 1rem; text-align: right; }
.pz-ib-fila input[type="date"] { font-size: 0.9rem; text-align: right; }
.pz-prep { border: 1px solid var(--pz-borde); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--pz-gris); line-height: 1.4; }
.pz-prep b { color: var(--pz-tinta); font-size: 0.86rem; }
/* Avance */
.pz-flechas { display: flex; gap: 8px; flex: 0 0 auto; }
.pz-iny-semana { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; background: #fff; border-radius: 14px; padding: 13px 14px; margin-bottom: 14px; font-size: 0.9rem; }
.pz-iny-semana > .dra-ic, .pz-iny-semana > svg { color: var(--pz-oro-osc); }
.pz-tabla-wrap { overflow-x: auto; }
.pz-tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.pz-tabla th { font-weight: 500; color: var(--pz-gris); padding: 6px 2px; text-align: center; font-size: 0.78rem; }
.pz-tabla th.hoy { color: var(--pz-oro-osc); font-weight: 700; }
.pz-tabla tbody th { text-align: left; color: var(--pz-tinta); font-size: 0.88rem; font-weight: 500; padding: 10px 6px 10px 0; }
.pz-tabla td { text-align: center; padding: 10px 2px; border-top: 1px solid var(--pz-borde); }
.pz-tabla tbody th { border-top: 1px solid var(--pz-borde); }
.pz-tabla tbody tr:first-child th, .pz-tabla tbody tr:first-child td { border-top: none; }
.pz-dot { display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; box-sizing: border-box; }
.pz-dot-0 { border: 1.5px solid #8b8478; background: #fff; }
.pz-dot-1 { background: var(--pz-oro-claro); }
.pz-dot-2 { background: var(--pz-oro-osc); }
.pz-dot-nada { width: 10px; height: 2px; border-radius: 1px; background: #c9c3b6; }
.pz-dot-fut { width: 6px; height: 6px; background: #ddd8cd; }
.pz-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 0.78rem; color: var(--pz-gris); }
.pz-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.pz-leyenda .pz-dot { width: 14px; height: 14px; }
.pz-leyenda .pz-dot-nada { width: 10px; height: 2px; }
.pz-inbody-barra { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--pz-oro); color: var(--pz-tinta); border: none; border-radius: 18px; padding: 18px; margin-bottom: 14px; font: inherit; cursor: pointer; text-align: left; }
.pz-inbody-barra b { font-size: 1.08rem; font-weight: 600; }
.pz-inbody-barra span { font-size: 0.84rem; }
.pz-grafica { background: #fff; border: 1px solid var(--pz-borde); }
.pz-g-ley { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; color: var(--pz-gris); margin-bottom: 4px; }
.pz-g-ley span { display: inline-flex; align-items: center; gap: 7px; }
.pz-g-lm { width: 22px; height: 3px; background: var(--pz-oro); border-radius: 2px; display: inline-block; }
.pz-g-lg { width: 22px; height: 0; border-top: 3px dashed #6b6b6b; display: inline-block; }
.pz-g { width: 100%; height: auto; display: block; overflow: visible; }
.pz-g-reja { stroke: #e4e0d6; stroke-width: 1; }
.pz-g-eje { font-size: 10px; fill: #8b8478; font-family: 'Montserrat', sans-serif; }
.pz-g-musc { fill: none; stroke: var(--pz-oro); stroke-width: 2.5; }
.pz-g-grasa { fill: none; stroke: #6b6b6b; stroke-width: 2.5; stroke-dasharray: 6 5; }
.pz-g-pm { fill: var(--pz-oro); }
.pz-g-pg { fill: #6b6b6b; }
.pz-g-val { font-size: 11px; font-weight: 700; fill: var(--pz-tinta); font-family: 'Montserrat', sans-serif; }
.pz-g-mes { font-size: 11px; font-weight: 600; fill: var(--pz-tinta); font-family: 'Montserrat', sans-serif; }
.pz-g-fecha { font-size: 10px; fill: #8b8478; font-family: 'Montserrat', sans-serif; }
.pz-g-mes.fut, .pz-g-fecha.fut { fill: var(--pz-oro-osc); }
.pz-g-prox { stroke: #b9b2a3; stroke-width: 1; stroke-dasharray: 4 4; }
.pz-g-proxt { font-size: 10px; font-weight: 700; fill: var(--pz-oro-osc); font-family: 'Montserrat', sans-serif; }
.pz-inds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.pz-ind { background: var(--pz-crema); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pz-ind b { font-size: 1.35rem; font-weight: 600; color: var(--pz-tinta); }
.pz-ind small { font-size: 0.78rem; color: var(--pz-gris); }
.pz-ind-chip { align-self: flex-start; background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 0.78rem; font-weight: 600; margin-top: 6px; }
.pz-spark { width: 100%; height: 40px; margin-top: 6px; }
.pz-spark path { fill: none; stroke: var(--pz-oro); stroke-width: 2; }
.pz-spark circle { fill: var(--pz-oro-osc); }
/* Tratamiento */
.pz-fase { background: var(--pz-oro); border-radius: 22px; padding: 18px 16px; margin-bottom: 14px; color: var(--pz-tinta); }
.pz-fase-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #2f2a20; }
.pz-fase-cab span + span { text-transform: none; letter-spacing: 0.04em; }
.pz-fase-tit { font-size: 1.7rem; font-weight: 600; margin: 6px 0 6px; }
.pz-fase p { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.45; }
.pz-fase-barra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.pz-fase-barra i { height: 7px; border-radius: 999px; background: #8f7a3f; }
.pz-fase-barra i.lleno { background: #fff; }
.pz-fase-pie { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; }
.pz-escalera { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.pz-dosis { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--pz-borde); background: #fff; border-radius: 12px; font-size: 0.9rem; font-weight: 500; color: var(--pz-tinta); min-width: 0; }
.pz-dosis.pasada { background: var(--pz-crema2); border-color: var(--pz-crema2); color: var(--pz-gris); }
.pz-dosis.actual { background: var(--pz-oro); border-color: var(--pz-oro); font-weight: 700; }
.pz-nota-dosis { margin: 0; line-height: 1.45; }
.pz-fila-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pz-fila-sw > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pz-fila-sw b { font-size: 0.95rem; font-weight: 500; }
.pz-fila-sw small { font-size: 0.8rem; color: var(--pz-gris); line-height: 1.35; }
[data-card="banderas"] .pz-fila-sw + .pz-fila-sw { border-top: 1px solid var(--pz-borde); padding-top: 14px; margin-top: 14px; }
.pz-caja-blanca { background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.pz-caja-blanca b { font-size: 1rem; font-weight: 600; }
.pz-apl { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid var(--pz-borde); font-size: 0.9rem; }
.pz-card-cab + .pz-apl { border-top: none; }
.pz-apl.omitida { color: var(--pz-gris); }
@media (max-width: 380px) {
    .pz-titulo { font-size: 1.65rem; }
    .pz-opc { font-size: 0.78rem; min-height: 46px; padding: 6px 4px; }
    .pz-sitio b { font-size: 0.86rem; }
    .pz-mas { width: 52px; height: 52px; }
    .pz-secciones button { font-size: 0.9rem; }
    .pz-escalera { gap: 5px; }
    .pz-dosis { font-size: 0.82rem; }
    .pz-ind b { font-size: 1.15rem; }
}

/* ── PROMOCIONES (js/promos.js, loyalty 1.33.0): Recompensas → Promociones y el detalle a pantalla completa ──
   Contrato PROMOS-PRO §8 (la vista previa de DTB HUB pinta lo mismo): tarjeta 16:9 con radio 18 px, velo oscuro abajo,
   etiqueta y "Quedan N" arriba, nombre y beneficio abajo; detalle con la imagen 4:5 que se desvanece hacia el fondo, la
   tarjeta del contenido que sube 48 px y el botón fijo de abajo (52 px, magenta). Sin imagen: el degradado de la marca. */
.promos-box:empty { display: none; }
.pr-seccion { margin-bottom: 14px; }
.pr-titulo { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 1rem; color: var(--oro); font-weight: 600; }
.pr-titulo .dra-ic { color: var(--oro-osc); }
.pr-titulo .cnt { margin-left: auto; font-size: 0.72rem; font-weight: 600; color: var(--gris); }
.pr-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pr-card { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; color: #fff; background: linear-gradient(135deg, #AC996C, #8b7355); box-shadow: 0 6px 18px rgba(43, 36, 25, 0.16); -webkit-tap-highlight-color: transparent; isolation: isolate; transition: transform 0.15s ease, box-shadow 0.15s ease; }
@supports not (aspect-ratio: 16 / 9) { .pr-card { height: 0; padding-top: 56.25%; } }
.pr-card:active { transform: scale(0.985); }
.pr-card:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.pr-fondo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(135deg, #AC996C, #8b7355); z-index: -2; }
.pr-card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; display: block; }
.pr-velo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(20, 14, 8, 0.78) 0%, rgba(20, 14, 8, 0.38) 42%, rgba(20, 14, 8, 0) 70%); }
.pr-card.gris .pr-card-img, .pr-card.gris .pr-fondo, .pr-det-img.gris img, .pr-det-img.gris .pr-fondo { filter: grayscale(0.85); }
.pr-pill { position: absolute; top: 12px; background: rgba(255, 255, 255, 0.92); color: #3a2f1e; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; line-height: 1.2; max-width: calc(50% - 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-etq { left: 12px; }
.pr-quedan { right: 12px; }
.pr-nueva { position: absolute; top: 14px; right: 12px; margin: 0; width: 11px; height: 11px; border: 2px solid #fff; }
.pr-quedan ~ .pr-nueva { top: 36px; }
.pr-card-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; gap: 7px; }
.pr-card-nombre { font-size: 19px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); overflow-wrap: anywhere; }
.pr-card-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.pr-ben { background: #fff; color: var(--magenta); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pr-cuando { color: rgba(255, 255, 255, 0.85); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-card.gris .pr-ben { color: #6b6257; }
.pr-ver-todas { margin-top: 12px; }
.pr-vacio { margin: 0; }
.pr-mis-cupones { margin-top: 14px; }
.pr-mis-cupones h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 0.86rem; color: var(--oro-osc); }
.pr-cupon-mini { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 8px; background: #fff; border: 1px dashed var(--oro); border-radius: 14px; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.pr-cupon-cod { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-weight: 700; color: var(--magenta); font-size: 0.9rem; letter-spacing: 0.04em; white-space: nowrap; }
.pr-cupon-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-cupon-txt b { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-cupon-txt small { color: var(--gris); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-flecha { color: var(--oro-osc); line-height: 0; transform: rotate(-90deg); }

/* El detalle: pantalla completa, fondo crema; en computadora, una columna de teléfono centrada. */
.pr-detalle { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2400; background: #fdfbf7; color: #2b2419; font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; animation: prEntrar 0.22s ease; }
.pr-detalle[hidden] { display: none; }
@keyframes prEntrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.pr-abierta .app-shell { visibility: hidden; }
.pr-det-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.pr-det-img { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 62vh; overflow: hidden; isolation: isolate; }
.pr-det-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; display: block; }
.pr-desvanece { position: absolute; left: 0; right: 0; bottom: 0; height: 35%; background: linear-gradient(to bottom, rgba(253, 251, 247, 0) 0%, #fdfbf7 100%); }
.pr-det-cerrar, .pr-det-compartir { position: absolute; top: calc(12px + env(safe-area-inset-top)); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.38); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2; -webkit-tap-highlight-color: transparent; }
.pr-det-cerrar { left: 12px; }
.pr-det-compartir { right: 12px; }
.pr-det-cerrar:focus-visible, .pr-det-compartir:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pr-det-card { position: relative; margin-top: -48px; background: #fdfbf7; border-radius: 24px 24px 0 0; padding: 20px 18px 24px; }
.pr-det-card .pr-pill { position: static; display: inline-block; max-width: 100%; margin-bottom: 8px; background: #f3ede0; }
.pr-det-card h2 { margin: 0 0 6px; font-size: 26px; font-weight: 700; line-height: 1.15; color: #2b2419; overflow-wrap: anywhere; }
.pr-det-ben { margin: 0 0 10px; font-size: 1.3rem; font-weight: 700; color: var(--magenta); line-height: 1.2; }
.pr-det-desc { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pr-det-cuando { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; font-size: 0.86rem; color: #5b5146; line-height: 1.35; }
.pr-det-cuando .dra-ic { color: var(--oro-osc); margin-top: 1px; flex: 0 0 auto; }
.pr-cupo { height: 8px; border-radius: 999px; background: #efe7d6; overflow: hidden; }
.pr-cupo span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--magenta), #b8437f); transition: width 0.4s ease; }
.pr-cupo-txt { margin: 6px 0 12px; font-size: 0.8rem; font-weight: 600; color: var(--magenta); }
.pr-det-sub { margin: 16px 0 6px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--oro-osc); }
.pr-cats { margin: 0 0 6px; font-size: 0.84rem; font-weight: 600; }
.pr-piezas .pr-pieza { display: flex; align-items: center; gap: 10px; }
.pr-pieza .txt { flex: 1; min-width: 0; }
.pr-pieza .txt strong { display: block; font-size: 0.88rem; font-weight: 600; overflow-wrap: anywhere; }
.pr-pieza .txt small { color: var(--gris); font-size: 0.74rem; }
.pr-pieza-precio { white-space: nowrap; font-size: 0.88rem; text-align: right; }
.pr-pieza-precio b { color: var(--magenta); }
.pr-pieza .btn.chico { white-space: nowrap; }
.pr-det-quien { margin: 12px 0 8px; font-size: 0.8rem; color: var(--gris); }
.pr-condiciones { margin: 6px 0 4px; border-top: 1px solid #eee5d3; padding-top: 8px; }
.pr-condiciones summary { cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--oro-osc); padding: 4px 0; }
.pr-condiciones p { margin: 6px 0 0; font-size: 0.76rem; line-height: 1.5; color: #6b6257; white-space: pre-line; overflow-wrap: anywhere; }
.pr-boleto { position: relative; margin: 14px 0 6px; padding: 16px 16px 14px; border-radius: 16px; background: #fff; border: 2px dashed var(--magenta); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pr-boleto::before, .pr-boleto::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fdfbf7; border: 2px dashed var(--magenta); }
.pr-boleto::before { left: -11px; clip-path: inset(0 0 0 50%); }
.pr-boleto::after { right: -11px; clip-path: inset(0 50% 0 0); }
.pr-boleto-tit { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oro-osc); font-weight: 700; }
.pr-boleto-cod { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--magenta); }
.pr-boleto-txt { font-size: 0.8rem; line-height: 1.4; color: #5b5146; max-width: 300px; }
.pr-boleto.brilla { animation: prBrilla 0.9s ease; }
@keyframes prBrilla { 0% { box-shadow: 0 0 0 0 rgba(142, 26, 95, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(142, 26, 95, 0); } }
.pr-det-barra { flex: 0 0 auto; width: 100%; max-width: 520px; margin: 0 auto; display: flex; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(253, 251, 247, 0.9), #fdfbf7); border-top: 1px solid #eee5d3; }
.pr-boton { flex: 1 1 auto; min-height: 52px; border-radius: 26px; border: 0; background: var(--magenta); color: #fff; font: inherit; font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; padding: 0 18px; text-align: center; box-shadow: 0 6px 16px rgba(142, 26, 95, 0.28); -webkit-tap-highlight-color: transparent; }
.pr-boton:active { transform: scale(0.985); }
.pr-boton:focus-visible { outline: 3px solid #2b2419; outline-offset: 2px; }
.pr-boton.sec { flex: 0 0 auto; background: #fff; color: var(--magenta); border: 1px solid var(--magenta); box-shadow: none; font-size: 0.86rem; }
.pr-boton[disabled] { background: #e9e3d6; color: #6b6257; box-shadow: none; cursor: default; font-size: 0.86rem; line-height: 1.3; padding: 8px 18px; }
@media (min-width: 900px) { .pr-det-scroll, .pr-det-barra { max-width: 480px; } }
@media (prefers-reduced-motion: reduce) { .pr-detalle, .pr-boleto.brilla { animation: none; } .pr-card, .pr-cupo span { transition: none; } }

/* ── El modo equipo (js/equipo.js, user 2.26.0): una capa aparte, encima de la tarjeta, para el personal de la clínica ── */
.eq-app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2450; background: #f6f3ee; color: var(--tinta); font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; overflow: hidden; }
.eq-app[hidden] { display: none; }
body.en-equipo { overflow: hidden; }
.eq-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: #2c2218; color: #fdfbf7; flex: 0 0 auto; }
.eq-volver { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px 6px 6px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, 0.1); color: inherit; font: inherit; font-size: 0.78rem; cursor: pointer; max-width: 100%; }
.eq-volver span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-volver .eq-corto { display: none; }
@media (max-width: 480px) { .eq-volver .eq-largo { display: none; } .eq-volver .eq-corto { display: inline; } }
.eq-cab-txt { text-align: center; min-width: 0; }
.eq-cab-txt small { display: block; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #d9c9a3; }
.eq-cab-txt strong { display: block; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.eq-icono { justify-self: end; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.1); color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.eq-icono-vacio { width: 40px; justify-self: end; }
.eq-cuerpo { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); width: 100%; max-width: 1040px; margin: 0 auto; box-sizing: border-box; }
.eq-angosto { max-width: 440px; }
.eq-centro { text-align: center; }
.eq-logo { width: 60px; height: 60px; border-radius: 50%; margin: 10px auto 10px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--oro-osc); box-shadow: 0 6px 18px rgba(139, 115, 85, 0.18); }
.eq-h2 { text-align: center; font-size: 1.2rem; margin: 0 0 6px; color: #2c2218; }
.eq-nota { text-align: center; font-size: 0.85rem; color: var(--gris); margin: 0 0 14px; line-height: 1.45; }
.eq-nota.chica { font-size: 0.75rem; text-align: left; margin-top: 12px; }
.eq-aviso { background: #fef3c7; color: #92400e; border-radius: 12px; padding: 10px 12px; font-size: 0.82rem; margin: 0 0 14px; text-align: left; line-height: 1.4; }
.eq-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.eq-campo { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; font-weight: 600; color: #4a3f33; }
.eq-campo input { font: inherit; font-size: 16px; font-weight: 500; padding: 12px 14px; border-radius: 12px; border: 1px solid #d6cdbb; background: #fff; color: #2c2218; width: 100%; box-sizing: border-box; }
.eq-campo input:focus { outline: 2px solid var(--oro); outline-offset: 1px; border-color: var(--oro); }
.eq-campo input[aria-invalid="true"] { border-color: var(--rojo); outline-color: var(--rojo); }
.eq-pass { position: relative; display: block; }
.eq-pass input { padding-right: 48px; }
.eq-ver { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: var(--gris); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.eq-ver.activo { color: var(--oro-osc); }
.eq-error { color: #b91c1c; font-size: 0.82rem; margin: 0; min-height: 1em; line-height: 1.4; }
.eq-puntos { display: flex; justify-content: center; gap: 12px; margin: 14px 0 6px; }
.eq-puntos i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--oro); background: transparent; transition: background 0.1s; }
.eq-puntos i.lleno { background: var(--oro-osc); border-color: var(--oro-osc); }
.eq-puntos.mal { animation: eqTemblar 0.35s; }
@keyframes eqTemblar { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.eq-pin-oculto { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.eq-teclado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 300px; margin: 8px auto 4px; }
.eq-tecla { height: 62px; border-radius: 18px; border: 1px solid #e3dccd; background: #fff; color: #2c2218; font: inherit; font-size: 1.4rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.eq-tecla:active { background: #f1ebde; }
.eq-tecla.suave { background: transparent; border-color: transparent; color: var(--gris); }
.eq-tecla.ok { background: linear-gradient(135deg, #AC996C, #8b7355); color: #fff; border-color: transparent; }
.eq-tecla:disabled { opacity: 0.45; cursor: default; }
.eq-ligas { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 6px; }
.eq-ligas .link-web { margin-top: 8px; }
.eq-entrada { display: inline-flex; align-items: center; gap: 6px; }
.eq-cargando { text-align: center; color: var(--gris); margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.eq-falla { background: #fff; border-radius: 16px; padding: 18px; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.eq-falla p { margin: 0 0 12px; }
.eq-quien { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.eq-rol { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 12px; background: #ede5d4; color: #6b5a3e; }
.eq-push { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e8e0cf; border-radius: 14px; padding: 10px 12px; font-size: 0.82rem; margin: 0 0 14px; line-height: 1.4; }
.eq-push > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.eq-push.ok { background: #ecfdf3; border-color: #bfe8cf; color: #065f46; }
.eq-push .btn { flex: 0 0 auto; width: auto; }
.eq-link { background: none; border: 0; color: var(--oro-osc); font: inherit; font-size: 0.78rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.eq-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.eq-card { background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 2px 10px rgba(44, 34, 24, 0.06); border-left: 4px solid #d8cdb5; min-width: 0; }
.eq-card.tono-urgente { border-left-color: #dc2626; }
.eq-card.tono-aviso { border-left-color: #f59e0b; }
.eq-card.tono-ok { border-left-color: #1f9d55; }
.eq-card header { display: flex; align-items: center; gap: 8px; }
.eq-card-ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: #f4eee2; color: var(--oro-osc); display: inline-flex; align-items: center; justify-content: center; }
.eq-card.tono-urgente .eq-card-ic { background: #fee2e2; color: #b91c1c; }
.eq-card.tono-aviso .eq-card-ic { background: #fef3c7; color: #92400e; }
.eq-card h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.92rem; color: #2c2218; line-height: 1.3; }
.eq-valor { flex: 0 0 auto; font-size: 1.15rem; color: #2c2218; font-variant-numeric: tabular-nums; }
.eq-card.tono-urgente .eq-valor { color: #b91c1c; }
.eq-detalle { margin: 8px 0 0; font-size: 0.8rem; color: var(--gris); line-height: 1.4; }
.eq-items { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eq-items li { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: #faf7f1; font-size: 0.82rem; overflow-wrap: anywhere; }
.eq-items li small { color: var(--gris); font-size: 0.72rem; }
.eq-items li.tono-urgente { background: #fef2f2; }
.eq-items li.tono-urgente > span { color: #991b1b; font-weight: 600; }
.eq-items li.tono-aviso { background: #fffbeb; }
.eq-card-vacio { margin: 8px 0 0; font-size: 0.8rem; color: var(--gris); }
.eq-liga { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 0.8rem; font-weight: 600; color: var(--oro-osc); text-decoration: none; padding: 6px 0; }
.eq-vacio { text-align: center; color: var(--gris); background: #fff; border-radius: 16px; padding: 20px; }
.eq-avisos { background: #fff; border-radius: 16px; padding: 14px; margin-top: 16px; box-shadow: 0 2px 10px rgba(44, 34, 24, 0.06); }
.eq-avisos h2 { font-size: 0.95rem; margin: 0 0 4px; color: #2c2218; }
.eq-avisos .eq-nota.chica { margin: 0 0 10px; }
.eq-aviso-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #f0eadf; }
.eq-aviso-fila .txt { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; }
.eq-aviso-fila .txt b { display: block; color: #2c2218; }
.eq-aviso-fila .txt small { display: block; color: var(--gris); font-size: 0.74rem; line-height: 1.35; margin-top: 2px; }
.eq-pie { text-align: center; font-size: 0.72rem; color: var(--gris); margin: 16px 0 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .eq-puntos.mal { animation: none; } }

/* --- La RIFA del evento en Recompensas (js/mi-rifa.js, user 2.28.0): negro y oro como la pantalla de la rifa --- */
.rifa-box:empty { display: none; }
.rifa-seccion { margin: 0 0 14px; }
.rifa-card { position: relative; border-radius: 18px; padding: 16px 16px 14px; margin: 0 0 10px; color: #f3e7c6; overflow: hidden;
    background: radial-gradient(120% 90% at 100% 0%, rgba(201, 169, 106, 0.28), transparent 60%), linear-gradient(160deg, #1a150e, #0b0906);
    border: 1px solid rgba(201, 169, 106, 0.55); box-shadow: 0 8px 22px rgba(20, 14, 6, 0.22); }
.rifa-card.gano { border-color: #e6cf95; box-shadow: 0 10px 26px rgba(172, 153, 108, 0.35), inset 0 0 0 1px rgba(255, 243, 207, 0.15); }
.rifa-etq { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; letter-spacing: 1px; text-transform: uppercase; color: #d9c08a; font-weight: 700; }
.rifa-etq .dra-ic { color: #e6cf95; }
.rifa-etq .punto-rojo { margin-left: auto; }
.rifa-premio { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.55rem; font-weight: 600; line-height: 1.15; margin: 8px 0 4px;
    background: linear-gradient(180deg, #fff6d8, #d8bc7e 60%, #b8975d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rifa-detalle, .rifa-p { margin: 4px 0 8px; font-size: 0.86rem; color: #e9dcbc; line-height: 1.4; }
.rifa-codigo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 243, 207, 0.06); border: 1px dashed rgba(230, 207, 149, 0.55); }
.rifa-codigo span { font-size: 0.74rem; color: #cdb57f; text-transform: uppercase; letter-spacing: 1px; }
.rifa-codigo b { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 1.35rem; letter-spacing: 3px; color: #fff3cf; }
.rifa-nota { margin: 6px 0 0; font-size: 0.8rem; color: #dccca3; display: flex; align-items: flex-start; gap: 6px; line-height: 1.35; }
.rifa-nota b { color: #fff3cf; }
.rifa-card .btn { margin-top: 6px; background: linear-gradient(135deg, #f1dea9, #c9a96a); color: #1a140c; border-color: transparent; }