/* AWP Power Social — mobile-first app styles */
:root {
  --navy: #0b1e3a;
  --navy-2: #122c54;
  --navy-3: #1a3a6b;
  --amber: #f5a623;
  --amber-dark: #d98a0b;
  --ink: #0f172a;
  --muted: #64748b;
  --bg: #f1f5f9;
  --card: #ffffff;
  --line: #e2e8f0;
  --ok: #16a34a;
  --danger: #dc2626;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(11, 30, 58, 0.12);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  /* Sin franja fija ya no se reserva espacio global abajo: el aire
     inferior lo da cada vista (las de la app, por la pastilla). */
  padding-bottom: 0;
}
button { font: inherit; cursor: pointer; }
input, select, textarea {
  font: inherit; width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,.18); }
textarea { min-height: 96px; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.hidden { display: none !important; }

/* ---------- cover ---------- */
.cover {
  min-height: 100svh;
  background: linear-gradient(160deg, #081426 0%, var(--navy) 55%, var(--navy-2) 100%);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px calc(96px + var(--safe-b));
  position: relative; overflow: hidden;
}
.cover::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 12%, rgba(245,166,35,.16), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(56,130,246,.14), transparent 46%);
  pointer-events: none;
}
/* ---------- la portada ES la Tarjeta Llave (diseño fiel de su app) ---------- */
.card-stage { perspective: 1400px; display: flex; justify-content: center; width: min(480px, 100%); position: relative; z-index: 1; }
.keycard {
  position: relative; width: 100%; aspect-ratio: 1.586/1; border-radius: 22px;
  background:
    radial-gradient(600px 300px at 110% -20%, rgba(224,170,30,.35), transparent 55%),
    radial-gradient(500px 380px at -20% 120%, rgba(38,84,180,.35), transparent 55%),
    linear-gradient(135deg,#0c1526 0%, #0a1120 55%, #131f38 100%);
  color: #eef2f8; padding: 26px 28px; overflow: hidden; text-align: left;
  box-shadow: 0 34px 70px rgba(5,10,22,.45), inset 0 0 0 1px rgba(224,170,30,.35);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.keycard:active { transform: scale(.985); }
.keycard:focus-visible { outline: 3px solid #f2c33c; outline-offset: 4px; }
.keycard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.10) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: cardshine 9s ease-in-out infinite;
}
@keyframes cardshine {
  0% { transform: translateX(-130%); }
  42% { transform: translateX(130%); }
  50% { transform: translateX(130%); }
  92% { transform: translateX(-130%); }
  100% { transform: translateX(-130%); }
}
.kc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kc-brand { font-weight: 900; letter-spacing: .06em; font-size: 15px; line-height: 1.15; }
.kc-brand small { display: block; font-weight: 600; letter-spacing: .3em; font-size: 10px; color: #f2c33c; margin-top: 3px; }
.kc-nfc { opacity: .9; }
.kc-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 6px; }
.kc-chip { width: 52px; height: 38px; flex: none; }
.kc-qr-mini {
  background: #fff; border-radius: 8px; padding: 3px; width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; opacity: .98;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.kc-qr-mini svg { width: 40px; height: 40px; display: block; }
.kc-corner { display: flex; align-items: flex-start; gap: 9px; }
.kc-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(15px, 2.4vw, 19px); letter-spacing: .14em; color: #dbe4f2; margin-top: 14px;
}
.kc-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 10px; }
.kc-field small { display: block; font-size: 9px; letter-spacing: .22em; color: #8fa2c0; text-transform: uppercase; margin-bottom: 3px; }
.kc-field b { font-size: 13px; letter-spacing: .08em; }
.kc-verified {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(29,157,95,.16); color: #4ade80;
  border: 1px solid rgba(74,222,128,.4); font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 6px 10px; border-radius: 999px; text-transform: uppercase; white-space: nowrap;
}
.cover-tap {
  margin: 22px 0 0; color: #f2c33c; font-weight: 700; font-size: 15.5px;
  position: relative; z-index: 1; animation: tapPulse 2.2s ease-in-out infinite;
}
@keyframes tapPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
#cover-gate { animation: fade .25s ease; }
.cover .tagline {
  margin: 14px 0 30px; font-size: 17px; font-weight: 600; letter-spacing: .02em; line-height: 1.5;
  max-width: 360px; position: relative; z-index: 1;
  color: #f2c33c;
  background: linear-gradient(100deg, #d9a92c 0%, #f7dc8a 38%, #f2c33c 62%, #c8901d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cover .tagline .tl { display: block; }
.cover .cta { display: flex; flex-direction: column; gap: 12px; width: min(340px, 100%); position: relative; z-index: 1; }
.btn {
  border: none; border-radius: 14px; padding: 15px 20px; font-size: 16px; font-weight: 700;
  transition: transform .08s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--amber); color: #201503; box-shadow: 0 8px 22px rgba(245,166,35,.35); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-outline { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.btn-danger { background: #fff; color: var(--danger); border: 1.5px solid #fecaca; }
.btn-block { width: 100%; margin-top: 18px; }
.trust-row { display: flex; gap: 16px; margin-top: 26px; color: #94a3b8; font-size: 12.5px; position: relative; z-index: 1; flex-wrap: wrap; justify-content: center; }
.trust-row span::before { content: "✓ "; color: var(--amber); font-weight: 800; }

/* ---------- top bar + hamburger ---------- */
/* ---------- top bar + hamburger ----------
   Estructura de la principal (Ronda Pantalla Principal Bonita):
   barra BLANCA y limpia sobre el fondo claro — fuera la barra azul.
   La marca manda arriba: ALPHA WORKERS PRO, con AWP POWER SOCIAL
   en dorado debajo. Los controles conservan sus ids y funciones. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: #fff;
  color: var(--ink); display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(11,30,58,.07);
}
.burger {
  background: #f1f5f9; border: 1px solid var(--line);
  border-radius: 12px; width: 44px; height: 44px; color: var(--navy); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.brand-mini { font-weight: 900; font-size: 15.5px; letter-spacing: .045em; color: var(--navy); line-height: 1.12; }
.brand-mini small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .34em; color: var(--amber-dark); text-transform: uppercase; margin-top: 2px; }
.topbar .spacer { flex: 1; }
.lang-pill {
  background: #fff; color: var(--navy); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 11px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.user-chip { font-size: 13px; color: var(--muted); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sellito de verificado: pastilla dorada discreta junto al nickname
   (cajón, chip, Feed) — solo perfiles con verified=true */
.verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: linear-gradient(145deg, var(--amber), var(--amber-dark));
  color: var(--navy); font-size: 10px; font-weight: 900; line-height: 1;
  vertical-align: -2px;
  box-shadow: inset 0 0 0 1px rgba(11,30,58,.28), 0 1px 2px rgba(11,30,58,.25);
}

/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(2,8,23,.55); z-index: 48; opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 84vw); z-index: 50;
  background: #fff; transform: translateX(-105%); transition: transform .25s ease;
  display: flex; flex-direction: column; box-shadow: 8px 0 30px rgba(0,0,0,.25);
}
.drawer.open { transform: translateX(0); }
.drawer header { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; padding: 22px 18px; }
.drawer header b { font-size: 18px; }
.drawer header small { display: block; color: #94a3b8; margin-top: 4px; font-size: 12px; }
.drawer nav { padding: 10px; overflow-y: auto; flex: 1; }
.drawer nav button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; padding: 14px 12px; border-radius: 12px;
  font-size: 16px; font-weight: 600; color: var(--ink); text-align: left;
}
.drawer nav button:active { background: var(--bg); }
.drawer nav button .ico { font-size: 20px; width: 28px; text-align: center; }
.drawer footer { padding: 14px; border-top: 1px solid var(--line); }

/* ---------- views ---------- */
.view { max-width: 720px; margin: 0 auto; padding: 20px 16px 24px; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view h2 { margin: 6px 0 4px; font-size: 24px; color: var(--navy); }
.view.cover { max-width: none; padding: 48px 24px calc(96px + var(--safe-b)); }
.view .sub { color: var(--muted); margin: 0 0 16px; font-size: 14.5px; }

/* ---------- el menú completo de Inicio (tarjetas con imagen) ---------- */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.menu-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0; overflow: hidden; text-align: left;
  display: flex; flex-direction: column;
  touch-action: none; user-select: none; -webkit-user-select: none; position: relative;
}
.menu-card:active { transform: scale(.985); }
.menu-card.dragging { opacity: .55; transform: scale(1.03); z-index: 30; box-shadow: 0 14px 34px rgba(11,30,58,.25); }
.menu-card.wide { grid-column: 1 / -1; }
.menu-media { position: relative; height: 104px; background: linear-gradient(150deg, var(--navy-3), var(--navy)); flex: none; }
.menu-card.wide .menu-media { height: 158px; }
.menu-media img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.menu-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,20,38,.28));
  pointer-events: none;
}
.menu-art {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(240px 120px at 88% -10%, rgba(224,170,30,.30), transparent 60%),
    radial-gradient(220px 160px at -10% 115%, rgba(38,84,180,.35), transparent 60%),
    linear-gradient(140deg, #12294f 0%, #0a1120 60%, #131f38 100%);
}
.menu-art svg { width: 54px; height: 54px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.menu-mini-card {
  position: absolute; inset: 0; padding: 14px 16px; color: #eef2f8; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(300px 160px at 110% -20%, rgba(224,170,30,.35), transparent 55%),
    radial-gradient(260px 200px at -20% 120%, rgba(38,84,180,.35), transparent 55%),
    linear-gradient(135deg,#0c1526 0%, #0a1120 55%, #131f38 100%);
  box-shadow: inset 0 0 0 1px rgba(224,170,30,.35);
}
.mmc-top b { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: .07em; }
.mmc-top small { display: block; font-size: 7.5px; font-weight: 600; letter-spacing: .3em; color: #f2c33c; margin-top: 2px; }
.mmc-chip { width: 34px; height: 25px; }
.mmc-num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .14em; color: #dbe4f2; }
.menu-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.menu-body b { font-size: 15px; font-weight: 800; color: var(--navy); }
.menu-body span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.menu-media .lock {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(8,20,38,.72); color: #fff; border: 1px solid rgba(242,195,60,.5);
  border-radius: 999px; font-size: 11px; padding: 3px 8px; line-height: 1.2;
}
.menu-media .soon-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  background: linear-gradient(145deg, var(--amber), var(--amber-dark)); color: #201503;
  border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 9px; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hint { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- LA PANTALLA PRINCIPAL (estructura de la principal) ----------
   Ronda «Pantalla Principal Bonita» (orden de Adolph, 16/oct 06:15):
   la principal de la real copia la estructura aprobada del prototipo —
   LA TARJETA ENFRENTE (banner con los datos reales del miembro) y
   EL RÍO DE LA GENTE ENFRENTE (las publicaciones reales, con el
   compositor real encima), sobre el fondo claro de la casa. El menú
   completo vive en su lugar: al final de esta página y en el cajón.
   Sin asistente, sin bloque de bienvenida, sin nada del sistema
   revuelto entre las publicaciones. */
body.in-app .view:not(.cover) { padding-bottom: calc(88px + var(--safe-b)); } /* aire pa' la pastilla flotante — antes 108px: incluía la franja fija ya retirada */
.home-kc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 10px; }
.home-kc-title { margin: 0; font-size: 24px; color: var(--navy); }
.home-open-link {
  background: none; border: none; padding: 6px 2px; flex: none;
  color: var(--amber-dark); font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.home-keycard {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  border: none; border-radius: 22px; padding: 20px 22px; overflow: hidden; color: #eef2f8;
  background:
    radial-gradient(600px 300px at 110% -20%, rgba(224,170,30,.35), transparent 55%),
    radial-gradient(500px 380px at -20% 120%, rgba(38,84,180,.35), transparent 55%),
    linear-gradient(135deg,#0c1526 0%, #0a1120 55%, #131f38 100%);
  box-shadow: 0 22px 44px rgba(5,10,22,.32), inset 0 0 0 1px rgba(224,170,30,.35);
  -webkit-tap-highlight-color: transparent;
}
.home-keycard:active { transform: scale(.99); }
.home-keycard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.10) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: cardshine 9s ease-in-out infinite;
}
.hk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hk-qr {
  background: #fff; border-radius: 9px; padding: 4px; width: 56px; height: 56px; flex: none;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hk-qr svg { width: 48px; height: 48px; display: block; }
.hk-qr:empty { display: none; }
.hk-mid { display: flex; align-items: center; gap: 13px; margin-top: 16px; min-height: 54px; }
.hk-avatar { flex: none; display: flex; }
.hk-avatar .mini-avatar { width: 54px; height: 54px; font-size: 23px; }
.hk-avatar .kc-chip { width: 52px; height: 38px; }
.hk-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hk-who b { font-size: 18px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-who small { font-size: 12.5px; color: #9fb0cc; letter-spacing: .04em; }
.hk-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 14px; }
.hk-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15.5px; letter-spacing: .14em; color: #dbe4f2;
}
.hk-phrase { display: block; margin-top: 12px; color: #f2c33c; font-size: 12.5px; font-weight: 700; }
.hk-join { display: block; margin-top: 6px; color: #cbd5e1; font-size: 13px; }
#view-home #guest-note { margin: 12px 2px 0; }
.home-river { margin-top: 22px; }
.home-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.home-feed-head h3 { margin: 0; font-size: 19px; color: var(--navy); }
.home-composer {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 14px; margin: 0 0 14px;
  border: 1.5px solid var(--line); border-radius: 16px; background: #fff;
  box-shadow: var(--shadow); color: var(--muted); text-align: left; cursor: text;
}
.home-composer .avatar-slot { display: flex; flex: none; }
.home-composer-ph { flex: 1; font-size: 15px; }
.home-composer-cam { font-size: 18px; flex: none; }
#home-feed-list .post-card { margin-bottom: 14px; }
.home-feed-guest { margin: 2px 2px 10px; }
.home-menu-title { font-size: 19px; color: var(--navy); margin: 26px 0 0; }

/* ---------- navegación inferior (pastilla de la principal) ---------- */
.botnav {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 45;
  width: min(680px, calc(100vw - 16px));
  display: flex; gap: 2px; padding: 6px;
  background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 14px 34px rgba(11,30,58,.20);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.botnav button {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; border-radius: 999px; padding: 7px 1px 6px;
  color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.1; cursor: pointer;
}
.botnav button .bn-ico { font-size: 18px; line-height: 1.15; }
.botnav button span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botnav button.on { background: rgba(245,166,35,.18); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--amber); }
/* Insignia de Avisos en la pastilla (ronda v31): el MISMO total de
   la campana (novedades + mensajes no leídos), flotando sobre el
   botón sin mover su layout de columna. La de Mensajes (v33) es su
   propio conteo — el total de mensajes no leídos — con el mismo
   vestido. */
.botnav button { position: relative; }
.botnav .nt-dock-badge, .botnav .ms-dock-badge {
  position: absolute; top: 2px; right: calc(50% - 23px); z-index: 1;
  margin-left: 0; border: 2px solid #fff; min-width: 20px; height: 20px;
  padding: 0 5px; display: flex; align-items: center; justify-content: center;
}

/* ---------- perfil público de miembro (v33) ----------
   La ficha de una persona, estilo Facebook, con el lenguaje visual
   de la casa: avatar grande, nickname con su sellito, su línea de
   miembro (zona · nº · desde), su bio y las acciones en fila.
   .mp-hit es la zona tocable (avatar/nombre) que abre la ficha en
   cualquier superficie: cursor y foco visibles, nada más. */
.mp-hit { cursor: pointer; border-radius: 999px; }
.mp-hit:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mp-card { text-align: left; }
.mp-head { display: flex; align-items: center; gap: 15px; }
.mp-avatar { width: 84px; height: 84px; }
.mp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-name { color: var(--navy); font-size: 21px; }
.mp-meta { color: var(--muted); font-size: 13.5px; }
.mp-bio { margin: 14px 0 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.mp-line { margin: 10px 0 0; font-size: 14.5px; color: var(--navy); }
.mp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.mp-actions .btn { margin: 0; }
.mp-qr { margin-top: 14px; }

/* héroes de las fichas «en su fase» (Reels / En vivos / Mensajes / Tienda) */
.phase-hero {
  position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px;
  box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--navy);
}
.phase-hero img { width: 100%; height: 180px; object-fit: cover; display: block; }
.phase-hero .phase-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: linear-gradient(145deg, var(--amber), var(--amber-dark)); color: #201503;
  border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 11px; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.art-hero {
  height: 180px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(340px 170px at 88% -10%, rgba(224,170,30,.30), transparent 60%),
    radial-gradient(320px 220px at -10% 115%, rgba(38,84,180,.35), transparent 60%),
    linear-gradient(140deg, #12294f 0%, #0a1120 60%, #131f38 100%);
}
.art-hero svg { width: 92px; height: 92px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.art-hero .phase-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; }

/* la Tarjeta dentro de «Mi Tarjeta» es estática (no abre la puerta) */
.keycard.static { cursor: default; }
.keycard.static::after { animation: none; }
.keycard.static:active { transform: none; }

/* la página de la Tarjeta del miembro: frase fija en dorado (solo
   inglés, como la portada), su QR en placa blanca escaneable y los
   renglones de datos de miembro */
.card-tagline {
  margin: 16px auto 18px; max-width: 480px; text-align: center;
  font-size: 16.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.5;
  color: #f2c33c;
  background: linear-gradient(100deg, #d9a92c 0%, #f7dc8a 38%, #f2c33c 62%, #c8901d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.qr-card { text-align: center; }
.qr-card h3 { text-align: center; }
.qr-card .meta { max-width: 420px; margin-left: auto; margin-right: auto; }
.qr-plaque {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  width: min(248px, 82%); margin: 12px auto 4px; padding: 12px;
  box-shadow: 0 10px 26px rgba(5,10,22,.14);
}
.qr-plaque svg { width: 100%; height: auto; display: block; }
.qr-plaque:empty { display: none; }
.qr-url {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--muted); word-break: break-all; margin: 8px 0 2px;
}
.qr-url:empty { display: none; }
#card-share { margin-top: 12px; }
.drows { display: grid; }
.drow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.drow:last-child { border-bottom: none; }
.drow span { color: var(--muted); font-size: 14px; }
.drow b { font-size: 14.5px; color: var(--ink); text-align: right; }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; }
.card h3 { margin: 0 0 8px; color: var(--navy); font-size: 17px; }
.card p { margin: 6px 0; font-size: 14.5px; color: #334155; }
.job-card { border-left: 5px solid var(--amber); }
.job-card .phone { font-size: 19px; font-weight: 800; color: var(--navy); }
.job-card .phone a { color: inherit; text-decoration: none; }
.meta { font-size: 13px; color: var(--muted); }
.disclaimer { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: #92400e; margin-bottom: 14px; }

/* profile */
.photo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }

/* foto de perfil pública (Mi Tarjeta): junto a la tarjeta, jamás
   encima del arte; sin foto manda la inicial con el color de la casa */
.avatar-slot { display: inline-flex; flex: none; }
.card-photo-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.card-avatar { border: 3px solid rgba(245,166,35,.55); box-shadow: var(--shadow); }
.avatar.avatar-letter { display: inline-flex; align-items: center; justify-content: center; background: var(--navy-2); color: #fff; font-weight: 800; font-size: 30px; }
.card-photo-actions { flex: 1; min-width: 0; }
.card-photo-actions > b { color: var(--navy); }
.card-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#card-to-profile { margin-top: 16px; }
.avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--line); border: 3px solid #fff; box-shadow: var(--shadow); flex: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.multi-row { display: flex; gap: 8px; margin-bottom: 8px; }
.multi-row input { flex: 1; }
.mini-btn { flex: none; width: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 18px; color: var(--danger); }
.mini-btn.add { color: var(--ok); font-size: 22px; }
.hist-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #f8fafc; }
.hist-row .num { font-weight: 800; color: var(--amber-dark); font-size: 13px; }
.cert-chip { display: inline-flex; align-items: center; gap: 8px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; border-radius: 999px; padding: 7px 8px 7px 14px; font-size: 14px; margin: 0 8px 8px 0; }
.cert-chip button { border: none; background: none; color: #1d4ed8; font-size: 16px; line-height: 1; }

/* documents */
.doc-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.doc-item:last-child { border-bottom: none; }
.doc-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--line); flex: none; }
.doc-item .grow { flex: 1; min-width: 0; }
/* VISOR DE DOCUMENTOS (v39): el archivo se ve dentro de la app,
   en la misma familia de modales — nunca en la dirección del proveedor */
.doc-viewer-modal { max-width: 560px; height: min(92svh, 860px); display: flex; flex-direction: column; overflow: hidden; }
.doc-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.doc-viewer-head b { font-size: 17px; color: var(--navy); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-viewer-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding-top: 12px; }
.doc-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.doc-viewer-frame { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #fff; }
.doc-item .grow b { display: block; font-size: 14.5px; color: var(--navy); }
.doc-item .grow small { color: var(--muted); font-size: 12.5px; }
.icon-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; width: 42px; height: 42px; font-size: 17px; }

/* auth modal */
.modal-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.modal-wrap .scrim2 { position: absolute; inset: 0; background: rgba(2,8,23,.6); }
.modal { position: relative; background: #fff; width: 100%; max-width: 440px; border-radius: 22px 22px 0 0; padding: 24px 22px calc(28px + var(--safe-b)); animation: up .22s ease; max-height: 92svh; overflow-y: auto; }
@keyframes up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.modal h3 { margin: 0 0 4px; color: var(--navy); font-size: 21px; }
.modal .tabs { display: flex; background: var(--bg); border-radius: 12px; padding: 4px; margin: 14px 0; }
.modal .tabs button { flex: 1; border: none; background: none; padding: 10px; border-radius: 9px; font-weight: 700; color: var(--muted); }
.modal .tabs button.on { background: #fff; color: var(--navy); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.form-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-top: 12px; }
.form-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-top: 12px; }

/* auth: signup acceptance + password recovery + legal docs */
.btn:disabled { opacity: .45; box-shadow: none; }
.check-row {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600; color: var(--ink);
  margin: 14px 0 4px;
}
.check-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--amber-dark); }
.link-btn { background: none; border: none; padding: 0; color: var(--amber-dark); font-weight: 700; text-decoration: underline; font-size: inherit; }
.forgot-link { display: inline-block; margin-top: 14px; font-size: 14px; }
.legal-body { margin-top: 10px; }
.legal-body h3 { font-size: 15.5px; margin: 16px 0 6px; }
.legal-body p { font-size: 14px; color: #334155; margin: 6px 0; }
.legal-body ul { margin: 6px 0 6px 18px; padding: 0; }
.legal-body li { font-size: 14px; color: #334155; margin: 4px 0; }
.legal-copy { font-size: 12.5px !important; color: var(--muted) !important; margin-top: 16px !important; }

/* aviso sin backend — visible solo si el servicio de cuentas no inicia */
.backend-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: #b45309; color: #fff; font-size: 13.5px; font-weight: 600; text-align: center;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

/* privacy bar — always visible */
/* El aviso de privacidad YA NO es una franja fija: era un overlay
   global (position:fixed, z-45, al final del body) que tapaba la
   pastilla de navegación y el compositor del chat en TODAS las
   vistas — el dueño lo marcó en su iPhone (16/oct): «no se quita y
   me estorba», y su precisión final: «Que salga donde esté
   estorbando, no se necesita». Regla de la casa desde esta ronda:
   CERO franjas fijas al pie de pantalla en el interior de la app.
   El texto sobrevive SOLO como contenido normal dentro de Mi
   Perfil (donde nació la doctrina): fluye con la página, no flota,
   no cubre botones ni teclados, y en Mensajes y en el chat NO
   existe. */
.privacy-bar {
  position: static;
  background: var(--navy); color: #e2e8f0; font-size: 12.5px;
  padding: 12px 14px; text-align: center;
  border: 1.5px solid var(--amber); border-radius: 14px;
  margin: 14px 0 4px;
}
.privacy-bar b { color: var(--amber); }

.toast {
  position: fixed; left: 50%; bottom: calc(76px + var(--safe-b)); transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px;
  z-index: 70; box-shadow: 0 8px 24px rgba(0,0,0,.3); max-width: 90vw; text-align: center;
  animation: fade .2s ease;
}
.course-soon { text-align: center; padding: 26px 12px; color: var(--muted); }
.course-soon .big { font-size: 44px; margin-bottom: 10px; }

/* ---------- AWP Go (tablero de raites REAL + fichas de fase) ---------- */
.go-hero { text-align: center; padding: 26px 12px; }
.go-hero .big { font-size: 44px; margin-bottom: 10px; }
.go-hero h3 { margin: 0 0 6px; font-size: 22px; color: var(--navy); }
.go-hero p { margin: 0; }

/* Tablero de raites gratis (js/rides.js) */
.rd-safety { border-left: 4px solid var(--amber); }
.rd-safety h3 { margin-top: 0; color: var(--navy); }
.rd-safety p { margin: 0; line-height: 1.5; }
#rd-form-card .btn-block { margin-top: 16px; }
.rd-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px;
}
.rd-row .friend-row { margin: 0; }
.rd-chips { margin-left: auto; flex: none; }
.rd-chip {
  display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.rd-chip-open { background: rgba(46,160,80,.14); color: #1e7a3c; }
.rd-chip-full { background: rgba(245,166,35,.18); color: var(--amber-dark); }
.rd-chip-done { background: var(--bg); color: var(--muted); }
.rd-chip-cancelled { background: rgba(220,60,60,.12); color: var(--danger); }
.rd-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 15.5px; color: var(--navy); }
.rd-arrow { color: var(--amber-dark); font-weight: 800; }
.rd-when { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.rd-note { margin: 8px 0 0; font-size: 14px; color: var(--ink); line-height: 1.45; }
.rd-seats { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--amber-dark); }
.rd-who { margin-top: 8px; font-size: 13.5px; color: var(--ink); }
.rd-who small { color: var(--muted); font-weight: 700; }
.rd-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.rd-actions .btn { padding: 8px 14px; font-size: 13.5px; }

/* Eventos y cumpleaños (js/events.js) */
#ev-form-card .btn-block { margin-top: 16px; }
.ev-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px;
}
.ev-row .friend-row { margin: 0; }
.ev-chips { margin-left: auto; flex: none; display: flex; gap: 6px; }
.ev-chip {
  display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.ev-chip-mine { background: rgba(245,166,35,.18); color: var(--amber-dark); }
.ev-chip-past { background: var(--bg); color: var(--muted); }
.ev-title { margin-top: 10px; font-size: 16.5px; font-weight: 800; color: var(--navy); }
.ev-where { margin-top: 4px; font-size: 14.5px; color: var(--ink); }
.ev-when { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.ev-note { margin: 8px 0 0; font-size: 14px; color: var(--ink); line-height: 1.45; }
.ev-count { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--amber-dark); }
.ev-who { margin-top: 8px; font-size: 13.5px; color: var(--ink); }
.ev-who small { color: var(--muted); font-weight: 700; }
.ev-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.ev-actions .btn { padding: 8px 14px; font-size: 13.5px; }
.ev-bday-card h3 { margin-top: 0; color: var(--navy); }
.ev-bday-h { margin: 16px 0 8px; color: var(--navy); font-size: 15px; }
.ev-bday-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.ev-bday-row .friend-who { display: flex; flex-direction: column; }
.ev-bday-row .friend-who small { color: var(--muted); font-size: 13px; }
.ev-bday-today { background: rgba(245,166,35,.12); border-radius: 10px; padding: 7px 10px; margin: 0 -10px; }
.ev-bday-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- feed / Inicio social (el Feed) ---------- */
.mini-avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--navy-2); border: 2px solid rgba(245,166,35,.55);
}
.mini-avatar-letter {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px;
}
.composer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.composer-head b { color: var(--navy); font-size: 15.5px; }
.composer textarea { min-height: 64px; }
.composer-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.composer-flex { flex: 1; }
.photo-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #fff; color: var(--navy); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 700;
  text-transform: none; letter-spacing: 0; margin: 0;
}
.photo-btn:active { background: var(--bg); }
.composer-publish { padding: 10px 22px; font-size: 15px; }
.photo-preview { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.photo-preview img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.post-card { padding: 16px 18px; }
.post-head { display: flex; align-items: center; gap: 11px; }
.post-who { min-width: 0; }
.post-who b { display: block; color: var(--navy); font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-who small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.post-body { margin: 12px 0 4px; font-size: 15px; color: var(--ink); line-height: 1.5; white-space: normal; word-wrap: break-word; }
.post-img { width: 100%; border-radius: 12px; margin-top: 10px; display: block; border: 1px solid var(--line); }
.post-actions { display: flex; gap: 8px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.post-act {
  background: none; border: none; border-radius: 999px; padding: 7px 12px;
  font-size: 14px; font-weight: 700; color: var(--muted);
}
.post-act:active { background: var(--bg); }
.post-act.like-btn.on { color: var(--danger); }
.thread { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 12px; }
.comment { display: flex; gap: 9px; margin-bottom: 10px; }
.comment .mini-avatar { width: 32px; height: 32px; font-size: 13px; }
.comment-body {
  background: var(--bg); border-radius: 12px; padding: 8px 12px; font-size: 14px;
  color: var(--ink); line-height: 1.45; flex: 1; min-width: 0; word-wrap: break-word;
}
.comment-body b { color: var(--navy); }
.comment-time { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.thread-form { display: flex; gap: 8px; align-items: center; }
.thread-form input { flex: 1; padding: 10px 12px; }
.thread-send { padding: 10px 16px; font-size: 14px; flex: none; }
.post-video { background: #000; }
.post-media { position: relative; }
.post-media .post-img { margin-top: 10px; }
.video-count {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  background: rgba(5, 11, 22, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}

/* ---- Reels (Fase 2: videos cortos reales de la comunidad) ---- */
.reel-composer h3 { margin: 2px 0 4px; color: var(--navy); }
.reel-composer textarea { min-height: 52px; }
.reel-file-info {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
  font-size: 14px;
}
.reel-file-info #reel-file-name { flex: 1; min-width: 0; font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-dur { flex: none; color: var(--muted); font-size: 13px; }
.reel-preview-wrap {
  position: relative; margin-top: 10px; border-radius: 12px; overflow: hidden;
  background: #000; border: 1px solid var(--line);
}
.reel-preview-wrap video { width: 100%; max-height: 340px; display: block; background: #000; }
.reel-count {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  background: rgba(5, 11, 22, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
  font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.reel-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 5;
  background: rgba(255, 255, 255, .22);
}
.reel-progress i { display: block; height: 100%; width: 0%; background: var(--amber); transition: width .2s linear; }
.reels-track {
  margin-top: 14px; height: min(760px, calc(100dvh - 96px)); min-height: 430px;
  overflow-y: auto; scroll-snap-type: y mandatory; border-radius: 18px;
  background: #050b16; scrollbar-width: none;
}
.reels-track::-webkit-scrollbar { display: none; }
.reel-slide {
  position: relative; height: 100%; overflow: hidden; background: #000;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.reel-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.reel-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(transparent, rgba(3, 8, 18, .8)); pointer-events: none;
}
.reel-meta {
  position: absolute; left: 12px; right: 78px; bottom: 12px;
  display: flex; gap: 10px; align-items: flex-start; color: #fff; pointer-events: none;
}
.reel-meta .mini-avatar { flex: none; }
.reel-who { min-width: 0; }
.reel-who b { display: block; color: #fff; font-size: 15.5px; }
.reel-who small { color: rgba(255, 255, 255, .78); font-size: 12.5px; }
.reel-body { margin: 5px 0 0; font-size: 14px; line-height: 1.4; color: #fff; word-wrap: break-word; }
.reel-side {
  position: absolute; right: 10px; bottom: 88px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.reel-act {
  width: 52px; height: 52px; border-radius: 999px; padding: 0;
  background: rgba(5, 11, 22, .55); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  font-size: 19px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.reel-act span { font-size: 11.5px; font-weight: 700; line-height: 1.1; }
.reel-act.on { color: #ff6b81; border-color: rgba(255, 107, 129, .75); }
.reel-comments {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 64%; z-index: 6;
  overflow-y: auto; background: rgba(255, 255, 255, .98);
  border-radius: 16px 16px 0 0; padding: 12px 14px calc(12px + var(--safe-b));
}
.reel-comments .thread-list { max-height: 30vh; overflow-y: auto; margin-bottom: 10px; }

/* ---- Amigos (Fase 2, Ronda B1) ---- */
.fr-search-row { display: flex; gap: 8px; align-items: center; }
.fr-search-row input { flex: 1; padding: 11px 12px; }
.fr-search-row .btn { flex: none; padding: 11px 18px; }
.fr-hint { margin: 10px 0 0; }
#fr-results .friend-row:first-child { margin-top: 6px; }
.fr-h { color: var(--navy); margin: 22px 0 8px; font-size: 17px; }
.friend-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.friend-row:last-child { border-bottom: none; }
.friend-who { flex: 1; min-width: 0; }
.friend-who b { color: var(--navy); font-size: 15.5px; }
.friend-who small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.friend-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.friend-actions .btn { padding: 8px 14px; font-size: 14px; margin: 0; }
.fr-state { color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
/* Quitar amigo: acción discreta en la fila (rojo apagado, sin botón
   gigante) y confirmación en su modal con el botón de la casa. */
.friend-actions .btn.fr-remove-btn { color: #b3261e; border-color: rgba(179,38,30,.45); }
.btn-danger { background: #b3261e; color: #fff; border: 1.5px solid #b3261e; }
.nav-count {
  background: var(--amber); color: #201503; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 1px 7px; margin-left: 6px;
}

/* ---------- buscador total (patrón Facebook, estética de la casa) ---------- */
.topbar-search {
  background: #f8fafc; border: 1px solid var(--line);
  border-radius: 12px; width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.feed-search-open {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; margin: 0 0 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  color: var(--muted); text-align: left;
}
.search-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.search-head .icon-btn { flex: none; color: var(--navy); }
.search-head input { flex: 1; font-size: 16px; border-radius: 999px; padding: 12px 18px; }
.search-hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.search-hrow .fr-h { margin-top: 14px; }
#search-history { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sr-chip {
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 7px 13px; font-size: 14px; color: var(--navy);
}
.sr-sec-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; margin: 0 0 8px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px; text-align: left;
}
.sr-sec-row:active { transform: scale(.99); }
.sr-thumb {
  position: relative; width: 46px; height: 46px; border-radius: 12px;
  overflow: hidden; flex: none; background: linear-gradient(150deg, var(--navy-3), var(--navy));
}
.sr-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-thumb .menu-art svg { width: 26px; height: 26px; }
.sr-thumb .menu-mini-card { padding: 5px 6px; }
.sr-thumb .mmc-top b { font-size: 5.5px; }
.sr-thumb .mmc-top small, .sr-thumb .mmc-num { display: none; }
.sr-thumb .mmc-chip { width: 20px; height: 15px; }
.sr-sec-body { flex: 1; min-width: 0; }
.sr-sec-body b { display: block; color: var(--navy); font-size: 15.5px; }
.sr-sec-body small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.sr-phase {
  flex: none; background: linear-gradient(145deg, var(--amber), var(--amber-dark));
  color: #201503; border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; padding: 3px 8px; text-transform: uppercase;
}
#search-people { padding: 4px 16px; }
#search-people .friend-row { cursor: pointer; }
.sr-post-row {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  text-align: left; margin: 0 0 10px;
}
.sr-post-body { flex: 1; min-width: 0; }
.sr-post-who { display: block; }
.sr-post-who b { color: var(--navy); font-size: 15px; }
.sr-post-who small { color: var(--muted); font-size: 12.5px; }
.sr-excerpt { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.4; margin-top: 2px; overflow-wrap: break-word; }

/* ---------- Notificaciones: la campana de la barra y su panel ---------- */
.topbar-bell {
  position: relative;
  background: #f8fafc; border: 1px solid var(--line);
  border-radius: 12px; width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.topbar-bell .bell-ico { font-size: 19px; line-height: 1; }
.notif-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--amber); color: #201503; border: 2px solid #fff;
  border-radius: 999px; font-size: 11px; font-weight: 800;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
}
.nt-title { color: var(--navy); font-size: 20px; margin: 0; }
.nt-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; background: #fff; border: 1.5px solid var(--line);
  border-radius: 14px; padding: 11px 13px; margin: 0 0 9px; color: var(--ink);
}
.nt-row:active { transform: scale(.99); }
.nt-row.nt-new { border-color: var(--amber); background: #fffdf4; }
.nt-ico { font-size: 19px; flex: none; }
.nt-body { flex: 1; min-width: 0; }
.nt-text { display: block; font-size: 14.5px; line-height: 1.4; overflow-wrap: break-word; }
.nt-text b { color: var(--navy); }
.nt-ctx { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; overflow-wrap: break-word; }
.nt-time { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.nt-chip {
  flex: none; background: linear-gradient(145deg, var(--amber), var(--amber-dark));
  color: #201503; border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; padding: 3px 8px; text-transform: uppercase;
}

/* ---------- Mensajes (Ronda B2): lista, chat 1-a-1 y compositor ---------- */
#ms-new-btn { margin: 2px 0 12px; }
#ms-panel-new { padding: 4px 18px 10px; }
#ms-panel-new .fr-h { margin-top: 14px; }
.ms-list { padding: 4px 18px; }
.ms-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 11px 0; color: var(--ink);
}
.ms-row:last-child { border-bottom: none; }
.ms-row-main { flex: 1; min-width: 0; }
.ms-row-main b { color: var(--navy); font-size: 15.5px; }
.ms-preview {
  display: block; color: var(--muted); font-size: 13px; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-preview.unread { color: var(--ink); font-weight: 700; }
.ms-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ms-row-side small { color: var(--muted); font-size: 11.5px; }
.ms-unread {
  background: var(--amber); color: #201503; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 1px 7px;
}
.ms-photos-note { margin-top: 16px; }
.ms-chat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ms-chat-head .btn { margin: 0; flex: none; }
.ms-chat-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-chat-who b { color: var(--navy); font-size: 16.5px; }
#ms-panel-chat { display: flex; flex-direction: column; }
.ms-thread {
  /* dvh = el viewport VISIBLE real de iOS; con vh el hilo se comía
     la pantalla y empujaba el compositor fuera de vista (v32). */
  height: 46vh; height: 44dvh; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; flex: none;
}
.ms-bubble-row { display: flex; max-width: 100%; }
.ms-bubble-row.mine { justify-content: flex-end; }
.ms-bubble {
  max-width: 78%; min-width: 0; background: #e8eef7; color: var(--ink);
  border-radius: 16px; padding: 8px 12px 6px;
}
.ms-bubble-row.mine .ms-bubble { background: var(--navy); color: #fff; }
.ms-body { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.ms-time { display: block; text-align: right; font-size: 10.5px; opacity: .65; margin-top: 2px; }
/* Acuse de envío (ronda «envío blindado»): el estado vive bajo la
   hora de la burbuja PROPIA — enviando (discreto) o no enviado
   (rojo, y la burbuja entera es el botón de reintento). */
.ms-state { display: block; text-align: right; font-size: 10.5px; font-weight: 700; margin-top: 1px; }
.ms-state.sending { font-weight: 600; font-style: italic; opacity: .7; }
.ms-state.failed { color: #ffb0a6; }
.ms-bubble-row.failed .ms-bubble { outline: 1.5px dashed rgba(255, 110, 95, .85); outline-offset: -1.5px; cursor: pointer; }
/* Aviso «↓ Mensaje nuevo»: solo aparece si estás leyendo arriba
   cuando entra un mensaje — jamás te mueve el hilo a la fuerza. */
.ms-new-pill {
  display: block; margin: 8px auto 0; border: none; cursor: pointer;
  background: var(--navy); color: #fff; border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(10, 25, 60, .25);
}
.ms-new-pill.hidden { display: none; }
/* Barra del compositor: en reposo (sin chat abierto) es una
   tarjeta más de la columna; con un chat abierto manda el MODO
   CONVERSACIÓN de abajo — bloque único, sin sticky ni fixed. */
.ms-composerbar {
  position: sticky; bottom: calc(86px + var(--safe-b)); z-index: 6;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px; margin-top: 10px; box-shadow: 0 10px 26px rgba(10, 25, 60, .16);
}
.ms-composerbar .ms-new-pill { margin: 0 auto 8px; }
/* MODO CONVERSACIÓN (v39, tras la captura del dueño en su iPhone:
   burbujas cortadas, último mensaje tapado por la píldora, huecos
   muertos y la barra inferior flotando sobre el teclado). Con un
   chat abierto, Mensajes es UNA sola pantalla limpia, estándar
   Messenger: la vista ocupa el viewport VISIBLE completo, el
   hilo es lo único que se mueve (flex:1) y el compositor es la
   última fila del bloque, en flujo — por construcción el último
   mensaje jamás queda tapado y no hay píldoras encimadas. La
   altura de la vista sigue al teclado: js/messages.js pone
   --ms-vvh/--ms-vvt desde visualViewport, así el compositor
   queda PEGADO al teclado abierto y baja limpio al cerrarse.
   La barra inferior y el topbar se esconden mientras dura el
   chat, y la página de atrás no se mueve (overflow hidden). */
body.ms-chatting { overflow: hidden; }
body.ms-chatting #topbar, body.ms-chatting #botnav { display: none; }
body.ms-chatting #view-messages {
  position: fixed; left: 0; right: 0; top: var(--ms-vvt, 0px);
  height: var(--ms-vvh, 100dvh); max-width: none; margin: 0; padding: 0;
  background: var(--bg); z-index: 44; animation: none;
  display: flex; flex-direction: column;
}
body.ms-chatting #view-messages > h2,
body.ms-chatting #view-messages > .sub { display: none; }
body.ms-chatting #ms-panel-chat {
  flex: 1; min-height: 0; width: 100%; max-width: 720px; margin: 0 auto;
}
body.ms-chatting .ms-chat-head {
  margin: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px;
}
body.ms-chatting .ms-thread {
  flex: 1; min-height: 0; height: auto;
  border: none; border-radius: 0; box-shadow: none; margin: 0;
  background: transparent;
}
body.ms-chatting .ms-composerbar {
  position: static; flex: none; margin: 0; border-radius: 0;
  border-left: none; border-right: none; border-bottom: none;
  box-shadow: none; padding-bottom: calc(8px + var(--safe-b));
}
.ms-composer { display: flex; gap: 8px; align-items: center; }
/* min-width:0 — la caja SÍ puede encogerse: sin esto, en 360px
   la fila (Foto + caja + Enviar) se desbordaba y el botón
   Enviar quedaba fuera de pantalla. font-size 16px: iOS no
   hace zoom automático al enfocar (el zoom descuadraba la
   barra y «no se veía lo que se escribía»). */
.ms-composer input { flex: 1; width: auto; min-width: 0; font-size: 16px; }
.ms-composer .btn { margin: 0; flex: none; }
.ms-composer .photo-btn { flex: none; margin: 0; }

/* Fotos que desaparecen: burbuja con su relojito de caducidad */
/* min-width:0 y max-width:100% (v39): el min-width:150px viejo
   podía forzar la burbuja de foto más ancha que su fila en
   pantallas angostas — parte del corte de burbujas de la
   captura del dueño. La foto manda en su burbuja, no al revés. */
.ms-photo { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.ms-photo-img { width: 100%; max-width: min(240px, 100%); border-radius: 10px; display: block; }
.ms-photo-chip { font-size: 11px; font-weight: 800; letter-spacing: .02em; opacity: .85; }
.ms-photo-state { font-size: 10.5px; font-weight: 700; opacity: .65; text-align: right; }
.ms-photo.cover {
  align-items: flex-start; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.55); border: 1.5px dashed var(--amber-dark);
  border-radius: 10px; padding: 10px 12px; color: var(--ink); font: inherit;
}
.ms-photo.cover .ms-photo-cover-t { font-weight: 800; font-size: 14.5px; }
.ms-photo.cover .ms-photo-tap { font-size: 11.5px; font-weight: 700; color: var(--amber-dark); }
.ms-photo.gone { opacity: .75; }
.ms-photo-gone { font-size: 13.5px; font-style: italic; }

/* Borrador de fotos (v39): vive DENTRO de la barra anclada —
   miniaturas chicas en su fila propia (con scroll horizontal
   si no caben: la página jamás se desborda), cada una con su ✕,
   y el selector de caducidad + acciones en la misma barra.
   La previa gigante a todo ancho quedó RETIRADA: tapaba la
   caja de escribir y el envío en el iPhone. */
.ms-photo-draft { padding: 2px 2px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.ms-thumbs { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px 2px 8px; }
.ms-thumb { position: relative; flex: none; width: 56px; height: 56px; }
.ms-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; display: block; }
.ms-thumb-x {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(10, 25, 60, .3); padding: 0;
}
.ms-exp-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.ms-exp-chip {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.ms-exp-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.ms-draft-actions { display: flex; gap: 8px; }
.ms-draft-actions .btn { margin: 0; }

/* Visor de la foto «una sola vez» */
.ms-viewer {
  position: fixed; inset: 0; z-index: 60; background: rgba(4, 8, 16, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px;
}
.ms-viewer.hidden { display: none; }
.ms-viewer img { max-width: 100%; max-height: 78vh; border-radius: 12px; }

/* ---------- The Forge — el examen de la Academia ---------- */
.forge-hero { width: 100%; height: 130px; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 10px; }
.forge-brand { margin: 0 0 2px; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-dark); }
.forge-resume { border: 1.5px solid var(--amber); background: rgba(245,166,35,.08); border-radius: 12px; padding: 12px; margin: 12px 0; }
.forge-resume p { margin: 0 0 10px; font-weight: 700; color: var(--navy); }
#forge-home .btn { margin-top: 10px; }
.forge-progress { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; font-weight: 800; color: var(--navy); font-size: 14px; }
.forge-tag { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--amber-dark); text-align: right; }
.forge-bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 8px 0 14px; }
.forge-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--amber-dark)); border-radius: 99px; transition: width .3s ease; }
.forge-q { font-size: 18px; line-height: 1.45; color: var(--ink); margin: 4px 0 12px; }
.forge-img { width: 100%; border-radius: 12px; border: 1.5px solid var(--line); margin: 0 0 14px; cursor: zoom-in; background: #fff; }
.forge-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 12px; padding: 12px 14px; margin: 8px 0; font-size: 15.5px;
}
.forge-opt:not(:disabled):active { border-color: var(--amber); }
.forge-opt:disabled { opacity: 1; cursor: default; }
.forge-opt.correct { border-color: var(--ok); background: rgba(22,163,74,.09); }
.forge-opt.wrong { border-color: var(--danger); background: rgba(220,38,38,.07); }
.forge-letter {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800;
}
.forge-opt.correct .forge-letter { background: var(--ok); }
.forge-opt.wrong .forge-letter { background: var(--danger); }
.forge-num { margin: 4px 0 10px; font-size: 17px; }
#forge-body .btn { margin-top: 2px; }
.forge-expl { border-radius: 12px; padding: 12px 14px; margin: 14px 0; font-size: 15px; line-height: 1.5; }
.forge-expl.ok { background: rgba(22,163,74,.09); border: 1.5px solid var(--ok); }
.forge-expl.bad { background: rgba(220,38,38,.06); border: 1.5px solid var(--danger); }
#forge-next { margin: 4px 0 10px; }
.forge-score { font-size: 56px; font-weight: 900; color: var(--navy); text-align: center; line-height: 1; margin: 10px 0 2px; }
.forge-rdetail { text-align: center; font-weight: 800; color: var(--amber-dark); margin: 0 0 8px; }
#forge-rmsg { text-align: center; }
#forge-rmsg p { margin: 4px 0 12px; }
#forge-demo-invite { border: 1.5px solid var(--amber); background: rgba(245,166,35,.08); border-radius: 12px; padding: 12px; margin: 12px 0; }
#forge-demo-invite h4 { margin: 0 0 6px; color: var(--navy); }
#forge-demo-invite p { margin: 0 0 10px; }
.forge-missed { border: 1.5px solid var(--line); border-left: 4px solid var(--danger); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.forge-missed b { display: block; margin-bottom: 4px; }
.forge-missed .ya { color: var(--danger); font-size: 14px; }
.forge-missed .ok { color: var(--ok); font-weight: 700; font-size: 14px; }
.forge-missed .muted { color: var(--muted); font-size: 14px; margin-top: 4px; }
#forge-result .btn { margin-top: 10px; }
.forge-lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(4,10,22,.92);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.forge-lightbox img { max-width: 100%; max-height: 88vh; border-radius: 10px; background: #fff; }
.forge-lightbox-x {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px;
  background: rgba(255,255,255,.14); color: #fff; border: none; width: 40px; height: 40px;
  border-radius: 50%; font-size: 17px;
}

@media (min-width: 640px) {
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-card.wide { grid-column: span 2; }
  .modal-wrap { align-items: center; }
  .modal { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Tienda A.W.P real (ronda 16/oct): la vitrina de la principal
   traída a esta app — tarjetas estilo Amazon (la foto domina, producto
   COMPLETO sin recortes con object-fit: contain, nombre en franja
   compacta abajo), buscador con sugerencias, chips de departamento,
   rieles horizontales y parrilla de 2 columnas con pintado por tandas. */
.store-count { color: var(--muted); font-size: 13.5px; margin: 2px 0 12px; }
.store-searchbar { display: flex; gap: 8px; align-items: stretch; }
.store-search-field { position: relative; flex: 1; min-width: 0; }
.store-search-field input { padding-right: 40px; }
.store-clear {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: var(--bg); color: var(--muted); font-size: 14px; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.store-go { flex: 0 0 auto; padding-left: 20px; padding-right: 20px; font-weight: 800; letter-spacing: .03em; }
.store-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; padding: 4px;
}
.store-suggest-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 12px; font-size: 14.5px; color: var(--ink); border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.store-suggest-item:active { background: var(--bg); }
.store-chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.store-chips::-webkit-scrollbar { display: none; }
.store-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--line); background: #fff; color: var(--navy);
  border-radius: 999px; padding: 8px 13px; font-size: 13.5px; font-weight: 700;
}
.store-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.store-chip-num {
  font-size: 11px; font-weight: 800; background: rgba(245,166,35,.22); color: inherit;
  border-radius: 999px; padding: 1px 7px;
}
.store-chip.on .store-chip-num { background: rgba(245,166,35,.35); }
.store-h { color: var(--navy); margin: 20px 0 10px; font-size: 17px; }
.store-rail {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.store-rail::-webkit-scrollbar { display: none; }
.store-rail .amz-card { flex: 0 0 158px; }
.store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store-grid .amz-card { min-width: 0; }
.store-more { margin-top: 14px; }
.store-rescount { font-weight: 700; color: var(--navy); margin: 16px 0 10px; }
.store-aff { font-size: 11.5px; line-height: 1.5; color: var(--muted); text-align: center; margin: 26px 4px 4px; }

/* tarjetas de producto (las .amz-* de la principal, con las variables
   de esta app: el dorado de estrellas/marca = --amber-dark) */
.amz-card {
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto;
  column-gap: 6px; row-gap: 3px; align-content: start;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 12px 10px; box-shadow: var(--shadow); cursor: pointer;
  content-visibility: auto; contain-intrinsic-size: auto 158px auto 300px;
}
.amz-photo {
  margin: -12px -12px 7px; border-radius: 11px 11px 0 0; overflow: hidden;
  aspect-ratio: 3/4; background: #fff; display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
}
.amz-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 5px; box-sizing: border-box; display: block; }
.amz-photo-tile { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(145deg,#ffffff,#e7edf1); }
.amz-photo-tile span { font-size: 64px; font-weight: 800; color: #b9cbd6; line-height: 1; }
.amz-card > .amz-photo, .amz-card > .amz-brand, .amz-card > .amz-badge, .amz-card > .amz-name { grid-column: 1 / -1; }
.amz-card > .amz-badge { justify-self: start; }
.amz-card > .amz-stars { justify-self: end; align-self: center; }
.amz-rank { position: absolute; top: 10px; right: 10px; z-index: 3; background: var(--navy); color: #fff; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 900; }
.amz-brand { font-size: 9.5px; line-height: 1.1; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--amber-dark); }
.amz-card.trend .amz-brand { padding-right: 44px; }
.amz-badge { align-self: flex-start; background: var(--navy); color: #ffc75c; border-radius: 999px; padding: 2px 7px; font-size: 9.5px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.amz-name { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amz-dept { font-size: 10.5px; line-height: 1.15; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.amz-stars { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--amber-dark); }
.amz-star-row { position: relative; display: inline-block; color: #d8dee2; font-size: 13px; line-height: 1; letter-spacing: 1px; }
.amz-star-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--amber-dark); white-space: nowrap; letter-spacing: 1px; }
.amz-star-num { font-size: 12px; font-weight: 800; color: var(--amber-dark); }
.amz-save {
  position: absolute; z-index: 4; top: 9px; left: 9px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.94);
  color: #5a6a72; display: grid; place-items: center; padding: 0;
  box-shadow: 0 3px 8px rgba(5,25,43,.16);
}
.amz-save svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.amz-save.saved { color: #d92344; border-color: #f3b3c0; }
.amz-save.saved svg { fill: #e41e3f; stroke: #e41e3f; }

/* ---------- Reportar y Revisión del Fundador (Ronda Reportes) ---------- */
/* El botón «Reportar»: discreto en el Feed (al final de las acciones)
   y como acción outline en las filas de personas — sin color de
   alarma: reportar no castiga a nadie, solo avisa al fundador. */
.post-act.rp-act { margin-left: auto; font-size: 13px; }
.rp-act { flex: none; }
.rp-reasons { margin: 4px 0 12px; }
.rp-reasons .check-row { padding: 7px 0; }
#rp-note { min-height: 64px; margin-bottom: 14px; }
#rp-target { color: var(--navy); font-weight: 700; margin: 2px 0 10px; }
/* La cola del fundador: tarjeta de entrada en Ajustes y filas. */
.rv-entry-card .rv-open-n { color: var(--amber-dark); font-weight: 800; }
.rv-row { margin: 0 0 10px; }
.rv-row-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.rv-chip {
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; padding: 3px 8px; text-transform: uppercase;
}
.rv-chip-reason { background: #fff7e0; border-color: var(--amber); color: #7a5200; }
.rv-time { color: var(--muted); font-size: 12px; margin-left: auto; }
.rv-line { margin: 0 0 4px; font-size: 14.5px; color: var(--ink); overflow-wrap: break-word; }
.rv-line b { color: var(--navy); }
.rv-excerpt { margin: 0 0 4px; font-size: 14px; color: var(--ink); background: var(--bg); border-radius: 10px; padding: 8px 11px; overflow-wrap: break-word; }
.rv-note { margin: 0 0 4px; font-size: 13.5px; color: var(--muted); overflow-wrap: break-word; }
.rv-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* RECUERDOS («un día como hoy»): la caja vive arriba del Feed y solo
   se pinta si hay recuerdos de verdad — sin recuerdos, ni la caja. */
.mem-box { padding: 14px 18px; }
.mem-title { margin: 0 0 2px; font-size: 17px; color: var(--navy); }
.mem-sub { margin: 0 0 10px; }
.mem-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; background: #fff; border: 1.5px solid var(--line);
  border-radius: 14px; padding: 10px 12px; margin: 0 0 8px; color: var(--ink);
}
.mem-row:last-child { margin-bottom: 0; }
.mem-row:active { transform: scale(.99); }
.mem-thumb { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; }
.mem-thumb-video { position: relative; overflow: hidden; background: #0d1526; display: inline-block; padding: 0; }
.mem-thumb-video video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mem-reel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(9, 13, 24, .72); color: #ffd98a;
  font-size: 9px; font-weight: 700; text-align: center; padding: 2px 0;
}
.mem-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mem-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mem-stamp {
  background: var(--amber); color: #23180a; font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.mem-date { color: var(--muted); font-size: 11.5px; }
.mem-text {
  font-size: 13.5px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* El resalte del post al abrirlo desde un recuerdo. */
.post-card.mem-flash { animation: memFlash 2.6s ease; }
@keyframes memFlash {
  0%, 55% { box-shadow: 0 0 0 3px var(--amber); }
  100% { box-shadow: var(--shadow); }
}

/* AVISOS QUE SUENAN (v34): el botón de activación push es de
   ancho completo — en Ajustes va tras el interruptor del sonido
   y en Mensajes vive sobre la lista de chats. */
.fx-push-btn { width: 100%; margin-top: 10px; }
#ms-panel-list .fx-push-btn { margin: 0 0 10px; }
#ms-push-status { margin: -4px 0 10px; }

/* ACCESO DEL FUNDADOR (v36) — la puerta vive bajo la Tarjeta en
   Mi Tarjeta (solo se construye pa' la cuenta nº 1) y el Panel
   es un overlay a pantalla completa, marino con el dorado de la
   casa con medida: premium y tranquilo, nada de neones. */
.fd-gate-card { text-align: center; }
.fd-gate-btn {
  background: linear-gradient(135deg, #0c1526, #131f38);
  color: #f2c33c; border: 1px solid rgba(217, 169, 44, .65);
  font-weight: 800; letter-spacing: .01em;
}
.fd-gate-btn:disabled { opacity: .55; }
.fd-gate-status { min-height: 1.2em; margin: 8px 0 0; color: var(--navy); font-weight: 600; }
.fd-gate-status:empty { margin: 0; min-height: 0; }
.fd-gate-note { margin: 6px 0 0; }

/* ENTRADA CON LA TARJETA + FACE ID (v37) — la puerta vive en su
   propia pantalla de entrada (la Tarjeta en grande, como la
   portada), con la frase de la memo bajo la Tarjeta; la tarjeta
   de la opción en Ajustes y el botón del login heredan los
   estilos de la casa. Nada de neones: marino/dorado tranquilo. */
.ce-guide {
  margin: 22px 0 0; position: relative; z-index: 1; max-width: 340px;
  color: #eef2f8; font-weight: 700; font-size: 16px; line-height: 1.45; text-align: center;
}
.ce-status { position: relative; z-index: 1; margin: 12px 0 0; min-height: 1.2em; color: #f7dc8a; font-weight: 600; text-align: center; }
.ce-status:empty { min-height: 0; margin: 0; }
#ce-enter-btn:disabled { opacity: .55; }
.ce-note { margin: 8px 0 0; }
.ce-login-btn { margin-top: 10px; color: var(--navy); border-color: var(--line); background: #fff; }
.ce-login-hint { margin: 8px 0 0; }

/* EL INDICADOR DE ESCANEO DE LA TARJETA (v37; refinamiento del
   dueño 16/oct ~19:01: la Tarjeta va LIMPIA) — la marca MÍNIMA:
   óvalo de rostro con su anillo, SIN caja ni letrero, lo más
   pequeño que se pueda. En la puerta va ARRIBA de la Tarjeta,
   casi invisible en reposo; SOLO se activa al tocar la Tarjeta
   o el propio indicador. Los estados los controla SOLO
   js/cardentry.js, atados a los eventos reales del Face ID del
   teléfono: .scanning = el anillo se va llenando (dorado)
   mientras el teléfono verifica; .ok = anillo COMPLETO y
   VERDE, únicamente tras la confirmación real de la cara —
   sin confirmación, el anillo nunca se completa ni se pone
   verde. El tamaño NO toca la fiabilidad: la llamada sigue
   siendo la estricta (UV obligada, id exacto). */
.ce-scan {
  position: relative; display: block; width: 26px; height: 26px;
  transition: width .35s ease, height .35s ease;
}
/* Durante la verificación el indicador se presenta un poco más
   grande pa' que el escaneo SE VEA — bonito y normal, sin
   exagerar (refinamiento del dueño 16/oct ~19:23): la línea de
   escaneo suave recorre el óvalo y el anillo se va llenando;
   en reposo todo vuelve a la marca mínima, casi invisible. */
.ce-scan.scanning, .ce-scan.ok { width: 64px; height: 64px; }
.ce-scan::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: 16%;
  height: 2px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242, 195, 60, .95), transparent);
  box-shadow: 0 0 6px rgba(242, 195, 60, .5);
}
.ce-scan.scanning::after {
  opacity: 1; animation: ceScanLine 1.7s ease-in-out infinite alternate;
}
@keyframes ceScanLine { from { top: 16%; } to { top: 80%; } }
.ce-scan.ok::after { opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ce-scan.scanning::after { animation: none; top: 48%; }
}
.ce-scan-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ce-ring-track { fill: none; stroke: rgba(127, 147, 180, .4); stroke-width: 8; }
.ce-ring-fill {
  fill: none; stroke: #f2c33c; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset .45s ease, stroke .3s ease;
}
.ce-scan.scanning .ce-ring-fill { animation: ceScanSweep 1.15s ease-in-out infinite alternate; }
@keyframes ceScanSweep { from { stroke-dashoffset: 327; } to { stroke-dashoffset: 62; } }
.ce-scan.ok .ce-ring-fill { animation: none; stroke-dashoffset: 0; stroke: #4ade80; }
.ce-face { position: absolute; inset: 0; width: 100%; height: 100%; color: #7d92b8; transition: color .3s ease; }
.ce-scan.scanning .ce-face { color: #f2c33c; }
.ce-scan.ok .ce-face { color: #4ade80; }
/* En la puerta el indicador se apacha: en reposo casi ni se ve
   (opacidad baja) y solo toma presencia cuando se activa. */
.ce-scan-btn {
  display: block; margin: 0 auto 8px; padding: 6px; background: none;
  border: none; cursor: pointer; line-height: 0; opacity: .5;
  transition: opacity .3s ease; -webkit-tap-highlight-color: transparent;
}
.ce-scan-btn:has(.ce-scan.scanning), .ce-scan-btn:has(.ce-scan.ok) { opacity: 1; }
.ce-scan-btn:disabled { cursor: default; }
/* La Tarjeta de la puerta es el toque que arranca la sesión. */
#view-cardentry .keycard { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#view-cardentry .keycard:active { transform: scale(.99); }
/* La salida con contraseña, discreta bajo la Tarjeta. */
.ce-pass-link {
  display: block; margin: 12px auto 0; padding: 6px 10px; background: none;
  border: none; color: #9db1d4; font: inherit; font-size: .92rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ce-scan-slot { display: flex; justify-content: center; }
.ce-scan-slot .ce-scan { margin: 4px auto 10px; }
@media (prefers-reduced-motion: reduce) {
  .ce-scan.scanning .ce-ring-fill { animation: none; stroke-dashoffset: 160; }
}
.fd-panel {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto;
  background:
    radial-gradient(700px 340px at 110% -10%, rgba(224, 170, 30, .16), transparent 55%),
    linear-gradient(160deg, #0b1e3a 0%, #071426 60%, #050d1a 100%);
  padding: calc(20px + env(safe-area-inset-top, 0px)) 18px calc(30px + env(safe-area-inset-bottom, 0px));
}
.fd-panel-inner { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.fd-eyebrow {
  margin: 4px 0 0; text-align: center; color: #f2c33c;
  font-size: 12px; font-weight: 800; letter-spacing: .34em;
}
.fd-goldcard { border: 1.5px solid rgba(217, 169, 44, .8); box-shadow: 0 30px 64px rgba(0, 0, 0, .5), 0 0 0 1px rgba(247, 220, 138, .25), inset 0 0 0 1px rgba(224, 170, 30, .35); }
.fd-gold-tag {
  color: #23180a; font-size: 11px; font-weight: 900; letter-spacing: .18em;
  background: linear-gradient(100deg, #d9a92c, #f7dc8a 55%, #c8901d);
  border-radius: 999px; padding: 4px 10px;
}
.fd-role { margin: 0; text-align: center; color: #eef2f8; font-weight: 800; font-size: 16.5px; letter-spacing: .04em; }
.fd-nick { margin: -6px 0 0; text-align: center; color: #cbd5e1; }
.fd-stats { background: rgba(255, 255, 255, .97); }
.fd-links { display: flex; flex-direction: column; gap: 10px; }
.fd-ghost { color: #eef2f8; border-color: rgba(238, 242, 248, .45); background: transparent; }
.fd-close-btn {
  background: linear-gradient(100deg, #d9a92c, #f2c33c 55%, #c8901d);
  color: #23180a; border: none; font-weight: 900;
}
.fd-remove {
  align-self: center; background: none; border: none; cursor: pointer;
  color: #fca5a5; font-size: 13.5px; font-weight: 700; padding: 6px 10px;
}
.fd-panel-note { text-align: center; color: #94a3b8; margin: 0; }

/* ===== TARJETA LLAVE — diseño fiel de la memo (ronda v38) ===== */
.kc-card{position:relative;border-radius:18px;padding:17px 17px 14px;color:#f4f7fa;background:linear-gradient(128deg,#0a2036 0%,#0e2f4d 42%,#173d5e 68%,#0a1c30 100%);box-shadow:0 18px 38px rgba(5,25,43,.32),inset 0 1px 0 rgba(255,255,255,.16);overflow:hidden;transform:perspective(900px) rotateX(var(--kc-rx,0deg)) rotateY(var(--kc-ry,0deg));transition:transform .25s ease;text-align:left}
.kc-card:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 190% at 4% -20%,rgba(253,237,211,.34),rgba(253,237,211,0) 55%),radial-gradient(120% 200% at 34% 120%,rgba(253,230,239,.26),rgba(253,230,239,0) 60%),radial-gradient(130% 190% at 66% -30%,rgba(236,229,253,.30),rgba(236,229,253,0) 58%),radial-gradient(120% 200% at 97% 115%,rgba(224,244,236,.26),rgba(224,244,236,0) 55%);pointer-events:none}
.kc-sheen{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.20) 50%,transparent 58%);transform:translateX(var(--kc-sheen,-70%));animation:kcSheen 7s ease-in-out infinite;pointer-events:none}
@keyframes kcSheen{0%,100%{transform:translateX(-70%)}50%{transform:translateX(70%)}}
.kc-card .kc-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}
.kc-card .kc-brand{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;font-size:13px;letter-spacing:.24em;color:#ffd77e}
.kc-mono{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;color:#0c1b28;background:linear-gradient(120deg,#fbd9a8,#fbc2d9 38%,#d9c8fb 62%,#c2ecd9);border-radius:7px;padding:4px 8px}
.kc-card .kc-mid{position:relative;display:flex;gap:13px;align-items:center;margin-top:16px}
.kc-avatar{width:58px;height:58px;flex:none;border-radius:50%;background:linear-gradient(140deg,#f5a81c,#d98c00);color:#211705;display:grid;place-items:center;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;font-size:21px;border:2px solid rgba(255,255,255,.4);box-shadow:0 6px 16px rgba(0,0,0,.3);overflow:hidden}
.kc-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.kc-id{min-width:0;flex:1}
.kc-id strong{display:block;font-size:19px;line-height:1.15;overflow-wrap:anywhere}
.kc-id>span{display:block;color:#bcd0df;font-size:12.5px;margin-top:3px;overflow-wrap:anywhere}
.kc-id .kc-member{display:block;color:#ffd77e;font-weight:800;letter-spacing:.1em;font-size:12px;margin-top:6px}
.kc-id .kc-verified{margin-top:6px}
.kc-qr{width:86px;height:86px;flex:none;background:#fff;border-radius:11px;padding:6px;box-shadow:0 8px 20px rgba(0,0,0,.32)}
.kc-qr svg{width:100%;height:100%;display:block}
.kc-qr-cap{position:relative;margin:11px 0 0;color:#fff;font-size:11.5px;font-weight:700;line-height:1.4;background:rgba(3,12,22,.42);border-radius:8px;padding:7px 9px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.kc-foot{position:relative;display:flex;align-items:center;gap:7px;margin-top:9px;color:#ffd77e;font-size:11px;font-weight:800;letter-spacing:.08em}
.kc-foot svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kc-motto{font-weight:700;letter-spacing:.045em;line-height:1.45;color:#ffd77e}
#home-keycard.kc-card{width:100%;border:0}
.home-kc-wrap{position:relative}
.kc-info-oncard{position:absolute;bottom:10px;right:10px;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;z-index:3}
.kc-info-oncard svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.kc-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kc-head-row h2{font-size:24px;margin:0}
.home-kc-head .home-kc-title{font-size:24px}
.kc-info-btn{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--muted);display:grid;place-items:center;padding:0;cursor:pointer;flex:none}
.kc-info-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.kc-keybox{position:relative;margin-top:14px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 13px}
.kc-keylabel{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:9px}
.kc-keywarn{margin:0 0 9px;font-size:12.5px;line-height:1.45;color:var(--ink);font-weight:700}
.kc-masked{font-size:15px;letter-spacing:.18em;color:var(--muted);padding:9px 11px;border:1px dashed var(--line);border-radius:9px;background:var(--bg);text-align:center}
.kc-code{width:100%;margin-top:9px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:9px 11px;font-family:ui-monospace,Menlo,monospace;font-weight:600;font-size:11.5px;line-height:1.5;word-break:break-all;resize:vertical;min-height:0}
.kc-btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.kc-btnrow .btn{flex:1;min-width:130px}
.kc-sharerow{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.kc-info-list{margin:10px 0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.5;color:var(--ink)}
#view-cardentry .kc-card{cursor:pointer;-webkit-tap-highlight-color:transparent}
#view-cardentry .kc-card:active{transform:scale(.99)}
#cover-card{cursor:pointer}
@media (prefers-reduced-motion:reduce){.kc-sheen{animation:none}.kc-card{transition:none}}

/* ROSTRO LLAVE / AWP FACE KEY (v39) — la pantalla de la cara y
   el panel de escaneo de la puerta hablan el MISMO idioma que
   el resto de la app: la tarjeta .card de siempre, el marco de
   escaneo de la Tarjeta (.ce-scan, aquí en su tamaño grande) y
   los botones de la casa. Nada de estilos sueltos. */
.fk-card { max-width: 480px; margin: 0 auto; }
.fk-stage {
  position: relative; width: 232px; height: 290px; margin: 14px auto 6px;
  border-radius: 50%; overflow: hidden; background: #0b1e3a;
  box-shadow: inset 0 0 0 1px rgba(242, 195, 60, .25);
}
.fk-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1); /* la vista previa, como un espejo */
}
.fk-ring { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ce-scan.fk-big { width: 196px; height: 196px; }
.ce-scan.fk-big.scanning, .ce-scan.fk-big.ok { width: 196px; height: 196px; }
.fk-status { text-align: center; font-weight: 700; margin: 10px 0 2px; min-height: 1.3em; }
.fk-hint { text-align: center; margin: 0 0 6px; min-height: 1.2em; }
.fk-progress { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 0 14px; min-height: 12px; }
.fk-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(127, 147, 180, .4); }
.fk-dot.on { background: #f2c33c; }
.fk-count { font-size: .85rem; color: #9db1d4; margin-left: 4px; }
/* El panel de escaneo de la puerta: la misma ventana por niveles
   del panel del Fundador (.fd-panel) — fondo marino de la casa,
   el rostro grande al centro y su línea de estado. */
.fk-panel {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto;
  background:
    radial-gradient(700px 340px at 110% -10%, rgba(224, 170, 30, .16), transparent 55%),
    linear-gradient(160deg, #0b1e3a 0%, #071426 60%, #050d1a 100%);
  padding: calc(20px + env(safe-area-inset-top, 0px)) 18px calc(30px + env(safe-area-inset-bottom, 0px));
}
.fk-panel-inner { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.fk-eyebrow {
  margin: 4px 0 0; text-align: center; color: #f2c33c;
  font-size: 12px; font-weight: 800; letter-spacing: .34em;
}
.fk-door-line { text-align: center; font-weight: 700; min-height: 1.4em; margin: 4px 0; }
/* El video DENTRO del indicador de la puerta no cabe (es un
   botón): el escaneo de la puerta vive en este panel, y el
   anillo de la Tarjeta refleja el mismo estado. */
/* El flash de pantalla: luz cálida a pantalla completa; lo
   enciende la MEDICIÓN (brillo bajo), nunca un adorno. */
.fk-flash {
  position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background: #fff6e6; opacity: 0; transition: opacity .25s ease;
}
.fk-flash.on { opacity: 1; }

/* ================================================================
   RONDA v40 «PERFIL A–Z» — privacidad por pieza y bloqueos.
   El selector de audiencia (.pv-sel) es UNA sola pieza visual en
   toda la plataforma: en la vista de Privacidad, sobre mis
   publicaciones y Reels (.pv-chip), en los compositores, junto a
   la foto de Mi Tarjeta y junto a Teléfonos/Correos de Mi Perfil.
   ================================================================ */
.pv-sel {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--navy);
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 5px 8px; max-width: 150px;
}
.pv-sel:disabled { opacity: .55; }
.pv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink-soft, #5b6b80);
  margin-left: auto;
}
.pv-chip .pv-sel { padding: 3px 6px; font-size: 12.5px; }
.post-actions .pv-chip { margin-left: auto; }
.pv-composer-chip { margin-left: 0; }
.reel-side .pv-chip {
  flex-direction: column; margin-left: 0; gap: 2px;
  background: rgba(6, 17, 32, .45); border-radius: 14px; padding: 7px 5px;
  color: #fff; font-size: 12px;
}
.reel-side .pv-chip .pv-sel {
  max-width: 86px; font-size: 11.5px; padding: 2px 4px;
  background: rgba(255,255,255,.92);
}
.reel-side .rp-act { font-size: 19px; }
/* La vista de Privacidad: un renglón por dato, selector a la
   derecha, nota discreta debajo — el orden de la casa. */
.pv-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pv-row:last-child { border-bottom: none; }
.pv-row-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.pv-row-main label { font-weight: 700; margin: 0; }
.pv-row-main input {
  flex: 1 1 200px; font: inherit; font-size: 14.5px;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.pv-note { margin: 6px 0 0; }
.pv-docs { margin: 12px 2px; }
.pv-quick-label {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 13.5px; font-weight: 600;
}
.pf-label-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px;
}
.pf-label-row label { margin: 0; }
/* La ficha: la sección de contacto publicado. */
.mp-contact { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.mp-contact h4 { margin: 0 0 6px; font-size: 14px; }
/* Bloquear dentro del chat: botón compacto en el encabezado. */
.ms-chat-acts { margin-left: auto; flex: none; }
.ms-chat-acts .btn { padding: 6px 10px; font-size: 13px; }
.ms-chat-acts .fr-state { font-size: 12.5px; margin-right: 6px; }
/* La 🚩 de reportar un mensaje: discreta, junto a la hora. */
.ms-rp {
  background: none; border: none; cursor: pointer;
  font-size: 10.5px; padding: 0 0 0 5px; opacity: .55; line-height: 1;
}
.ms-rp:active { opacity: 1; }