/* ==========================================================================
   Reactiva Colombia — zona pública: perfil, listado, mapa, filtros
   Se carga después de components.css.
   ========================================================================== */

/* El toque de rojo: reservado para donar (y para reportar). Un rojo cálido,
   no de emergencia. */
.btn--donate { background: var(--white); color: #b42318; border-color: #f2b8b5; }
.btn--donate:hover { background: #fdf1f0; border-color: #b42318; color: #8f1a12; }
.btn--donate .icon { stroke: #b42318; }

.hide-desktop { display: inline-flex; }
@media (min-width: 768px) { .hide-desktop { display: none; } }

/* --- Barra de filtros ----------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.filter-bar__count { margin-left: auto; font-size: 14px; color: var(--ink-soft); }
.chip .icon--sm { width: 14px; height: 14px; }

/* --- Hoja de filtros (bottom sheet con <dialog>) -------------------------- */
.sheet { border: 0; padding: 0; margin: 0; max-width: 100vw; width: 100vw; max-height: 100dvh; background: transparent; }
.sheet::backdrop { background: rgba(9,28,64,.45); }
.sheet[open] { position: fixed; inset: auto 0 0 0; }
.sheet__inner {
    background: var(--white); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
    max-height: 88dvh; overflow-y: auto; margin-inline: auto; max-width: 720px;
}
.sheet__head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.sheet__head h2 { flex: 1; }
.sheet__foot { position: sticky; bottom: 0; background: var(--white); padding-top: var(--s4); margin-top: var(--s5); }
/* Sin JS el diálogo no se abre: se muestra como formulario normal al final. */
.sheet:not([open]) { display: block; position: static; width: auto; max-width: none; }
.sheet:not([open]) .sheet__inner { border: 1px solid var(--line); border-radius: var(--radius-lg); margin-top: var(--s8); }
.js .sheet:not([open]) { display: none; }
@media (min-width: 768px) {
    .sheet[open] { inset: 0; display: grid; place-items: center; }
    .sheet[open] .sheet__inner { border-radius: var(--radius-lg); width: min(560px, 92vw); }
}

/* --- Perfil --------------------------------------------------------------- */
.profile__cover { aspect-ratio: 16/7; background: linear-gradient(150deg, #123774, #1f4fa3 60%, #2d63bd); overflow: hidden; max-height: 420px; }
.profile__cover img { width: 100%; height: 100%; object-fit: cover; }

.profile__head { display: flex; gap: var(--s4); align-items: flex-end; margin-top: -40px; position: relative; }
.profile__logo { width: 88px; height: 88px; border-radius: 18px; border: 4px solid var(--white); background: var(--sand-deep); object-fit: cover; box-shadow: var(--shadow); flex: none; }
.profile__title { padding-bottom: var(--s1); min-width: 0; }
.profile__title h1 { font-size: 26px; }
.profile__badge { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.profile__badge a { text-decoration: none; }
.profile__meta { margin-top: var(--s2); font-size: 15px; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.profile__meta a { color: inherit; }

.profile__cta { display: grid; gap: var(--s3); margin-top: var(--s6); }
.profile__cta-note { font-size: 13px; color: var(--ink-soft); margin-top: var(--s3); }
.profile__channels { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

.profile__grid { display: grid; gap: var(--s8); margin-top: var(--s8); }
.profile__section { margin-top: var(--s8); }
.profile__section:first-child { margin-top: 0; }
.profile__h2 { font-size: 20px; margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.profile__facts { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s2); }
.profile__facts li { display: flex; align-items: center; gap: var(--s2); color: var(--ink-soft); font-size: 15px; }
.profile__facts .icon { color: var(--primary); }

.story { border-left: 4px solid var(--accent); padding: var(--s2) 0 var(--s2) var(--s5); font-size: 17px; line-height: 1.6; }
.story p + p { margin-top: var(--s3); }
.story footer { margin-top: var(--s3); font-size: 14px; color: var(--ink-soft); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.gallery img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); width: 100%; }

.l-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.l-card__media { aspect-ratio: 1; background: var(--sand-deep); }
.l-card__media img { width: 100%; height: 100%; object-fit: cover; }
.l-card__body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.l-card__name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.l-card__desc { font-size: 13px; color: var(--ink-soft); }
.l-card__price { font-family: var(--font-display); font-weight: 700; color: var(--primary-dark); margin-top: auto; }
.l-card__meta { margin-bottom: var(--s2); }

.share-box { background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
.share-box--platform { margin-top: var(--s4); background: #fdf1f0; border-color: #f2b8b5; }
.share-box__text { margin: var(--s3) 0; padding: var(--s3); background: var(--white); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-soft); }
.share-box__buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }

.profile__foot { margin-top: var(--s12); padding-top: var(--s5); border-top: 1px solid var(--line); }
.report summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--s1); color: var(--ink-faint); margin-top: var(--s3); }
.report summary:hover { color: #b42318; }
.report__form { max-width: 520px; margin-top: var(--s4); padding: var(--s5); background: var(--sand); border-radius: var(--radius); }

/* Barra fija inferior con los CTA (aparece tras un poco de scroll) */
.sticky-contact { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--white); border-top: 1px solid var(--line); padding: var(--s2) 0 calc(var(--s2) + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .2s; }
.sticky-contact.is-visible { transform: none; }
.sticky-contact__inner { display: flex; gap: var(--s2); }
.sticky-contact__inner .btn { flex: 1; min-height: 44px; }
.profile { padding-bottom: 80px; }

@media (min-width: 640px) {
    .profile__cta { grid-template-columns: 1fr 1fr; max-width: 640px; }
    .gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
    .profile__title h1 { font-size: 34px; }
    .profile__grid { grid-template-columns: 1fr 340px; align-items: start; }
    .profile__side { position: sticky; top: calc(var(--header-h) + var(--s5)); }
    .profile { padding-bottom: 0; }
    .sticky-contact { display: none; }
}

/* --- Regiones (mapa) ------------------------------------------------------ */
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.region { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5); border-radius: var(--radius-lg); text-decoration: none; color: var(--white);
    background: color-mix(in srgb, var(--primary) calc(var(--w) * 100%), #7fa1e0); border: 1px solid rgba(255,255,255,.2); transition: transform .15s; }
.region:hover { transform: translateY(-2px); color: var(--white); }
.region__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.region__count { font-size: 14px; opacity: .9; }
.region__cities { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); font-size: 12px; opacity: .85; }
.region__cities span { background: rgba(255,255,255,.15); padding: 2px 8px; border-radius: var(--radius-pill); }

/* --- Bloque donar a la plataforma en home ---------------------------------- */
.donate-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s6); background: #fdf1f0; border: 1px solid #f2b8b5; border-radius: var(--radius-lg); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }
.site-footer__cta--donate { color: #b42318; }
.site-footer__cta--donate .icon { stroke: #b42318; }

/* --- Páginas legales ------------------------------------------------------ */
.legal h2 { font-size: 20px; margin-top: var(--s10); margin-bottom: var(--s3); }
.legal p + p { margin-top: var(--s3); }
.legal ul { margin-top: var(--s3); }

/* --- Zona afectada y apoyo discreto ---------------------------------------- */
.badge--affected { background: #fdf1f0; color: #b42318; }
.badge--affected .icon { width: 12px; height: 12px; fill: #b42318; stroke: none; }
.b-card__badge--right { left: auto; right: var(--s3); }
.support-link { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--s2); color: var(--ink-faint); text-decoration: none; font-size: 12px; white-space: nowrap; }
.support-link:hover { color: #b42318; }
.support-link .icon { stroke: currentColor; }

/* --- Mensajes de apoyo (comentarios moderados) ----------------------------- */
.comments { display: grid; gap: var(--s3); margin-top: var(--s4); }
.comment { padding: var(--s4) var(--s5); background: var(--sand); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.comment__body { white-space: pre-line; line-height: 1.55; }
.comment__meta { margin-top: var(--s2); font-size: 13px; color: var(--ink-soft); }
.comment__meta strong { color: var(--ink); }
.comment-form { margin-top: var(--s6); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.comment-form .field + .field { margin-top: var(--s3); }

/* --- Preguntas frecuentes -------------------------------------------------- */
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.faq__item + .faq__item { margin-top: var(--s3); }
.faq__q { cursor: pointer; padding: var(--s4) var(--s5); font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: '+'; color: var(--primary); font-weight: 700; flex: none; }
.faq__item[open] .faq__q::after { content: '–'; }
.faq__a { padding: 0 var(--s5) var(--s5); color: var(--ink-soft); }
.faq__a p + p { margin-top: var(--s3); }

/* --- WhatsApp flotante de la plataforma ------------------------------------
   Móvil: botón + burbuja "¿Cómo te puedo ayudar?". Escritorio: al pasar el
   ratón se abre el QR. Se sube (--raised) cuando la barra del negocio está
   visible en un perfil.                                                     */
.wa-float { position: fixed; right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 90; display: flex; align-items: center; gap: var(--s2); transition: bottom .2s; }
.wa-float--raised { bottom: calc(76px + env(safe-area-inset-bottom)); }
.wa-float__btn { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: var(--white); box-shadow: 0 6px 18px rgba(0,0,0,.22); transition: transform .15s; }
.wa-float__btn:hover { transform: scale(1.06); }
.wa-float__btn .icon { width: 30px; height: 30px; stroke: var(--white); }
.wa-float__bubble { order: -1; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; padding: var(--s2) var(--s3); border-radius: var(--radius-pill); box-shadow: var(--shadow); white-space: nowrap; animation: wa-pop .5s .8s both; }
.wa-float__qr { display: none; }
@keyframes wa-pop { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) {
    .wa-float__bubble { display: none; }
    .wa-float__qr { display: block; position: absolute; right: 0; bottom: 68px; width: 190px; padding: var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: center; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .15s, transform .15s; }
    .wa-float__qr img { width: 150px; height: 150px; display: block; margin: 0 auto; }
    .wa-float__qr p { margin-top: var(--s2); font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
    .wa-float:hover .wa-float__qr, .wa-float:focus-within .wa-float__qr { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .wa-float__bubble { animation: none; } .wa-float__btn:hover { transform: none; } }