/* UNA sola familia en toda la app (1-ago-2026): Plus Jakarta Sans, la del rediseño F7b.
   Antes convivían tres (Manrope de base, Cormorant serif en títulos, Jakarta en las
   pantallas nuevas) y al saltar de Inicio a Redes cambiaba la letra — lo vio la agencia. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --brand-pink:#C9CDD3; --brand-violet:#9EA3AA; --brand-blue:#6E737A;
  --grad: linear-gradient(90deg,#C9CDD3 0%,#9EA3AA 50%,#6E737A 100%);
  --grad-br: linear-gradient(135deg,#C9CDD3 0%,#9EA3AA 55%,#6E737A 100%);
  --bg:#08080b;
  /* glass */
  --glass: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  --glass-2: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  --glass-brd: rgba(255,255,255,.10);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.10);
  --glass-sh: 0 10px 34px rgba(0,0,0,.42);
  --text:#f6f6f9; --muted:#a2a2af; --muted2:#8a8a97;   /* muted2 subido: antes 3,9:1, por debajo del mínimo legible */
  --gold:#f0b578; --gold-s:rgba(240,181,120,.16);
  --blue:#5cb6ec; --blue-s:rgba(92,182,236,.16);
  --red:#f56a89; --red-s:rgba(245,106,137,.16);
  --green:#57d69b; --green-s:rgba(87,214,155,.16);
  --amber:#f0c04e; --amber-s:rgba(240,192,78,.16);
  /* superficies tokenizadas (para soportar tema claro) */
  --nav-bg:rgba(16,16,22,.72); --nav-brd:rgba(255,255,255,.08);
  --sheet-bg:linear-gradient(180deg, rgba(26,26,34,.96), rgba(14,14,19,.98)); --sheet-brd:rgba(255,255,255,.12);
  --sheet-ov:rgba(0,0,0,.55); --grip:rgba(255,255,255,.22);
  --chip-on-bg:#fff; --chip-on-fg:#0a0a0c;
  --toast-bg:rgba(26,26,34,.92); --toast-brd:rgba(255,255,255,.12);
  --sep:rgba(255,255,255,.06);          /* separadores de lista (B19) */
  --media-bg:#0e0e13; --media-bg2:#0b0b10;  /* fondos de vídeo/miniatura (B19) */
  color-scheme:dark;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

.estado-red {
  position:fixed; z-index:1200; top:calc(8px + var(--safe-t)); left:50%;
  width:min(calc(100% - 24px), 520px); transform:translateX(-50%);
  padding:10px 14px; border:1px solid var(--glass-brd); border-radius:12px;
  background:var(--toast-bg); color:var(--text); box-shadow:var(--glass-sh);
  text-align:center; font:700 12px/1.35 var(--sans);
}
.estado-red.offline { border-color:var(--amber); }
.estado-red.online { border-color:var(--green); }
/* ================= TEMA CLARO (personalizable por la modelo) ================= */
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f2f1f7;
  --glass:linear-gradient(160deg, rgba(255,255,255,.80), rgba(255,255,255,.52));
  --glass-2:linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.40));
  --glass-brd:rgba(30,22,60,.10);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.85);
  --glass-sh:0 10px 30px rgba(90,70,130,.13);
  --text:#1b1a24; --muted:#6a6976; --muted2:#6f6e7c;   /* muted2 subido: antes 2,2:1 sobre el fondo claro, ilegible */
  --gold:#c1832f; --gold-s:rgba(193,131,47,.15);
  --blue:#2f8fd0; --blue-s:rgba(47,143,208,.14);
  --red:#dd3f68; --red-s:rgba(221,63,104,.13);
  --green:#22a06e; --green-s:rgba(34,160,110,.14);
  --amber:#bd8f18; --amber-s:rgba(189,143,24,.15);
  --nav-bg:rgba(255,255,255,.74); --nav-brd:rgba(30,22,60,.08);
  --sheet-bg:linear-gradient(180deg, rgba(255,255,255,.97), rgba(245,244,250,.99)); --sheet-brd:rgba(30,22,60,.10);
  --sheet-ov:rgba(40,30,70,.34); --grip:rgba(30,22,60,.22);
  --chip-on-bg:#1b1a24; --chip-on-fg:#fff;
  --toast-bg:rgba(255,255,255,.94); --toast-brd:rgba(30,22,60,.12);
  --sep:rgba(30,22,60,.10);
  --media-bg:#e8e6f0; --media-bg2:#ddd9ea;
}
:root[data-theme="light"] body::before { background:radial-gradient(circle, rgba(201,205,211,.20), transparent 65%); }
:root[data-theme="light"] body::after  { background:radial-gradient(circle, rgba(110,115,122,.16), transparent 65%); }
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { background:var(--bg); }
body {
  font:400 15px/1.5 var(--hm-f),system-ui,sans-serif; color:var(--text);
  max-width:480px; margin:0 auto; min-height:100dvh; position:relative; overflow-x:hidden;
}
/* ambiente: glows de marca detrás del contenido (dan profundidad al glass) */
body::before, body::after {
  content:''; position:fixed; z-index:-2; border-radius:50%; filter:blur(70px); pointer-events:none;
}
body::before { width:70vw; height:70vw; top:-14vh; left:-24vw; background:radial-gradient(circle, rgba(201,205,211,.30), transparent 65%); }
body::after  { width:78vw; height:78vw; bottom:-8vh; right:-30vw; background:radial-gradient(circle, rgba(110,115,122,.24), transparent 65%); }

button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input { font-family:inherit; }
a { color:inherit; text-decoration:none; }

/* ---------- pantallas + entrada escalonada ---------- */
.screen { display:none; padding:calc(4px + var(--safe-t)) 16px calc(92px + var(--safe-b)); max-width:100%; overflow-x:clip; }
.screen.active { display:block; }
/* La animación de entrada solo al CAMBIAR de pantalla (B17). Antes se disparaba en cada
   re-render (cambiar de chip repintaba y la pantalla entera volvía a entrar en cascada),
   lo que daba sensación de web lenta en vez de app. */
/* O5: solo los 8 primeros elementos entran animados. Antes se animaban TODOS los hijos:
   en Biblioteca con muchas tarjetas eran decenas de animaciones a la vez, justo en el
   momento más caro (recién pintada la pantalla). A partir del octavo ya no se percibe. */
.screen.active.entrando > *:nth-child(-n+8) { animation:rise .55s cubic-bezier(.2,.85,.25,1) both; }
.screen.active > *:nth-child(1){animation-delay:.00s}
.screen.active > *:nth-child(2){animation-delay:.05s}
.screen.active > *:nth-child(3){animation-delay:.10s}
.screen.active > *:nth-child(4){animation-delay:.15s}
.screen.active > *:nth-child(5){animation-delay:.20s}
.screen.active > *:nth-child(6){animation-delay:.25s}
.screen.active > *:nth-child(7){animation-delay:.30s}
.screen.active > *:nth-child(n+8){animation-delay:.34s}
@keyframes rise { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ---------- esqueleto de carga ----------
   Biblioteca, Inspo y Redes piden datos antes de pintar: sin esto son hasta un segundo de
   pantalla en blanco con datos móviles. Se enseña la FORMA de lo que viene, con un brillo
   que recorre — el movimiento es lo que dice «está cargando» y no «se ha colgado». */
.sk { background:var(--glass); border-radius:10px; position:relative; overflow:hidden; }
.sk::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation:brillo 1.3s infinite; }
@keyframes brillo { to { transform:translateX(100%); } }
/* quien tenga el movimiento reducido ve el bloque quieto, no un destello constante */
@media (prefers-reduced-motion:reduce){ .sk::after { animation:none; } }
@media (prefers-reduced-motion:reduce){ .screen.active > *{animation:none!important;} }

/* ---------- appbar (logo arriba, estilo egirls) ---------- */
/* Logo arriba a la DERECHA, pequeño, en TODA la app (referencia egirls). Mismo tamaño y
   misma posición en cada pantalla, incluido el feed a pantalla completa. */
.appbar { display:flex; align-items:center; justify-content:flex-end; padding:10px 0 4px; }
.appbar .wlogo { height:16px; width:auto; opacity:.98; }
.avatar { width:42px; height:42px; border-radius:50%; flex:0 0 42px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font:800 17px var(--hm-f); color:#0a0a0c;
  background:var(--grad-br); box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 6px 18px rgba(201,205,211,.35);
  transition:transform .15s; }
.avatar:active { transform:scale(.92); }
.avatar img { width:100%; height:100%; object-fit:cover; }

/* ---------- saludo / títulos ---------- */
.pagetitle { padding:6px 0 16px; }
.pagetitle .hi { font:800 25px/1.15 var(--hm-f); letter-spacing:-.03em; }
.pagetitle .sub { color:var(--muted); font-size:13px; margin-top:3px; }

/* (la tira de días vieja y el saludo .greet se retiraron con la Home v6: ahora son hm-week /
   hm-head, al final de este fichero) */

/* ---------- secciones ---------- */
.sec-h { display:flex; align-items:center; justify-content:space-between; margin:17px 2px 9px; }
.sec-h h2 { font:800 16.5px var(--hm-f); letter-spacing:-.02em; }
.sec-h a { color:var(--brand-violet); font:700 12.5px var(--hm-f); display:flex; align-items:center; gap:3px;
  min-height:44px; padding:0 2px; }
.eyebrow { font:800 10px var(--hm-f); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---------- GLASS card base ---------- */
.card { background:var(--glass); border:1px solid var(--glass-brd); border-radius:20px;
  padding:17px 19px; backdrop-filter:blur(22px) saturate(135%); -webkit-backdrop-filter:blur(22px) saturate(135%);
  box-shadow:var(--glass-sh), var(--glass-hi); }
.card.stat { padding:14px 16px; }
.stat .lbl { color:var(--muted); font-size:11.5px; margin-top:2px; }
.stat .val { font:800 20px/1 var(--hm-f); letter-spacing:-.5px; }

.strip { display:flex; align-items:center; gap:10px; margin-top:10px; padding:12px 14px;
  background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:18px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:var(--glass-hi); }
.strip .m { min-width:0; }
.strip .m .v { font:800 14px var(--hm-f); white-space:nowrap; letter-spacing:-.2px; }
.strip .m .l { color:var(--muted); font-size:9.5px; letter-spacing:.02em; white-space:nowrap; margin-top:1px; }
.strip .sep { width:1px; align-self:stretch; background:var(--glass-brd); flex:none; margin:1px 0; }

/* ---------- lista de tareas (glass, con tap) ---------- */
.task { display:flex; align-items:center; gap:12px; padding:11px 6px; border-bottom:1px solid var(--sep); transition:transform .12s; }
.task:last-child { border-bottom:none; }
.task:active { transform:scale(.985); }
.dot { width:9px; height:9px; border-radius:50%; flex:0 0 9px; box-shadow:0 0 10px currentColor; }
.dot.alta{background:var(--red);color:var(--red);} .dot.media{background:var(--amber);color:var(--amber);} .dot.baja{background:var(--green);color:var(--green);}
.task .tt { flex:1; min-width:0; }
.task .tt .n { font:600 14px var(--hm-f); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task .tt .d { color:var(--muted); font-size:11.5px; margin-top:1px; }
.task .chev { color:var(--muted2); font-size:18px; }

/* ---------- analíticas (glass) ---------- */
/* (la rejilla .analytics/.ana se retiró con la Home v6 — las tarjetas de redes ahora son
   hm-nets. .brandi se queda: lo usan los iconos de red del resto de pantallas.) */
.brandi { width:14px; height:14px; flex:none; }
/* la firma de TikTok: su doble sombra cian/rosa, también en las listas pequeñas */
.brandi.tk { filter:drop-shadow(-0.6px -0.35px 0 #25F4EE) drop-shadow(0.6px 0.35px 0 #FE2C55); }

/* ---------- nav inferior (glass + indicador animado) ---------- */
.nav { position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:480px;
  display:flex; justify-content:space-around; align-items:center; z-index:40;
  padding:9px 10px calc(9px + var(--safe-b));
  background:var(--nav-bg); backdrop-filter:blur(26px) saturate(140%); -webkit-backdrop-filter:blur(26px) saturate(140%);
  border-top:1px solid var(--nav-brd); }
.nav button { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted2);
  font:700 10px var(--hm-f); padding:8px 6px 6px; flex:1; transition:color .2s, transform .15s; border-radius:14px; }
.nav button[hidden] { display:none; }
.nav button:active { transform:scale(.9); }
.nav button .ni { position:relative; line-height:0; transition:transform .25s; }
/* Puntito rojo con número: tareas activas que aún no ha abierto. Se apaga al entrar en Tareas. */
.nav .nb { position:absolute; top:-5px; right:-9px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--hm-red, #FF5C5C); color:#fff;
  font:800 9.5px var(--hm-f, 'Plus Jakarta Sans'); display:flex; align-items:center;
  justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.nav button .ni svg { width:23px; height:23px; display:block; }
.nav button.on { color:var(--text); }
.nav button.on .ni { color:var(--brand-pink); transform:translateY(-2px) scale(1.08); filter:drop-shadow(0 0 9px rgba(201,205,211,.75)); }
.nav button.on span:last-child { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav button.on::before { content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:var(--grad); box-shadow:0 0 10px rgba(201,205,211,.9); }

/* Pestaña de Perfil: su FOTO y su NOMBRE, no un icono genérico (referencia egirls) */
.nav button .ni-foto { width:23px; height:23px; border-radius:50%; overflow:hidden; display:block;
  background:var(--grad-br); box-shadow:0 0 0 1.5px var(--nav-brd); }
.nav button .ni-foto img { width:100%; height:100%; object-fit:cover; display:block; }
/* sin foto: su inicial dentro del círculo de marca */
.nav button .ni-foto .nf-ini { display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font:800 11px var(--hm-f); color:#fff; }
/* el nombre puede ser largo: se recorta en vez de romper la fila de la barra */
.nav button .nf-nom { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* al estar activa, aro de marca alrededor de la foto (el drop-shadow rosa del icono
   no se aprecia sobre una imagen, así que el estado activo se marca con el aro) */
.nav button.on .ni-foto { box-shadow:0 0 0 2px var(--brand-pink), 0 0 10px rgba(201,205,211,.6); }

/* ---------- Tareas ---------- */
.tabs { display:flex; gap:4px; margin:4px 0 14px; background:var(--glass-2); border:1px solid var(--glass-brd);
  border-radius:16px; padding:5px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
/* (los .tab/.chips/.chip y la familia .tcard/.prio de la Tareas vieja se retiraron con la
   fase B del rediseño: ahora son tk-tabs / tk-chips / tk-card, al final de este fichero.
   El mínimo táctil de 44px que documentaban vive ahora en los tk-acts/tk-btn.) */

/* ---------- hoja deslizante ---------- */
.sheet-bg { position:fixed; inset:0; background:var(--sheet-ov); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:50; opacity:0; pointer-events:none; transition:opacity .3s; }
.sheet-bg.open { opacity:1; pointer-events:auto; }
.sheet { position:fixed; left:50%; transform:translateX(-50%) translateY(100%); bottom:0; width:100%; max-width:480px;
  background:var(--sheet-bg);
  backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); border-radius:28px 28px 0 0; border-top:1px solid var(--sheet-brd);
  padding:12px 22px calc(28px + var(--safe-b)); z-index:51; transition:transform .42s cubic-bezier(.16,1,.3,1);
  max-height:88dvh; overflow-y:auto; box-shadow:0 -20px 60px rgba(0,0,0,.5); }
.sheet.open { transform:translateX(-50%) translateY(0); }
.sheet .grip { width:44px; height:5px; border-radius:3px; background:var(--grip); margin:2px auto 18px; }
.sheet-cerrar{ position:absolute; z-index:2; top:13px; right:15px; width:36px; height:36px;
  border-radius:50%; color:var(--text); background:var(--hm-chip); border:1px solid var(--hm-brdchip);
  font:400 25px/1 var(--hm-f); }
.sheet-cerrar:focus-visible,.sheet :focus-visible{ outline:3px solid var(--hm-blue); outline-offset:2px; }
.sheet h2 { font:800 21px var(--hm-f); letter-spacing:-.02em; }
.sheet .row { display:flex; align-items:center; gap:10px; margin:10px 0 4px; }

.sheet .row span { font:600 12.5px var(--hm-f); color:var(--muted); }
.sheet .desc { color:var(--muted); font-size:14px; line-height:1.65; margin:15px 0; }
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important; }
.sop { display:flex; align-items:center; gap:12px; padding:14px; background:var(--glass); border:1px solid var(--glass-brd); border-radius:15px; margin-bottom:8px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.sop .g { width:36px; height:36px; border-radius:11px; background:var(--grad-br); display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
.sop .t { font:700 13px var(--hm-f); } .sop .s { color:var(--muted); font-size:11.5px; }
.reel-ref .g { background:var(--grad-br); }
.reel-ref { align-items:center; cursor:pointer; }
.rr-poster { width:48px; height:68px; border-radius:10px; flex:none; background-size:cover; background-position:center; position:relative; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.rr-play { position:absolute; bottom:4px; right:4px; width:17px; height:17px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:8px; display:flex; align-items:center; justify-content:center; }
.reel-ref.playing { display:block; padding:6px; background:#000; }
.reel-ref video { width:100%; max-height:64vh; border-radius:12px; display:block; background:#000; }
/* mismo aviso de pausa que en Biblioteca: solo el ▶, sin controles */
.reel-ref.playing { position:relative; }
.reel-ref.pausado::after{ content:'▶'; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:34px; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6); background:rgba(0,0,0,.22);
  border-radius:12px; pointer-events:none; }
.btn { display:block; width:100%; padding:16px; border-radius:16px; font:700 15px var(--hm-f); text-align:center; margin-top:10px; transition:transform .12s; }
.btn:active { transform:scale(.98); }
.btn-ghost { background:var(--glass); border:1px solid var(--glass-brd); color:var(--text); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.btn-grad { background:var(--grad); color:#0a0a0c; box-shadow:0 10px 26px rgba(201,205,211,.4); }

/* ---------- estado vacío ---------- */
.empty { text-align:center; color:var(--muted); padding:64px 24px; animation:rise .6s both; }
.empty .ico { font-size:46px; margin-bottom:16px; display:inline-block; filter:drop-shadow(0 6px 20px rgba(201,205,211,.4)); }
.empty h3 { font:800 19px var(--hm-f); letter-spacing:-.02em; color:var(--text); margin-bottom:7px; }
.empty p { font-size:13.5px; line-height:1.65; max-width:280px; margin:0 auto; }

/* ---------- Inspiración (feed de reels a pantalla completa) ---------- */
#s-inspo.inspo-full { padding:0; }
/* SOLO el logo, pequeño, arriba a la DERECHA — igual que en el resto de la app. Nada más:
   ni título ni contador; el vídeo manda y el logo solo recuerda que estás dentro de la app. */
.reel-topbar { position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:flex-end;
  padding:calc(10px + var(--safe-t)) 16px 22px;
  background:linear-gradient(180deg, rgba(0,0,0,.5), transparent); pointer-events:none; }
.reel-topbar .rt-logo { height:16px; width:auto; flex:none; filter:drop-shadow(0 2px 8px rgba(0,0,0,.7)); }
.inspo-redes { position:absolute; left:50%; top:9px; transform:translateX(-50%); display:flex;
  gap:3px; padding:3px; border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:rgba(13,13,16,.72); backdrop-filter:blur(12px); }
.inspo-redes button { min-height:30px; padding:0 12px; border:0; border-radius:999px;
  color:rgba(255,255,255,.68); background:transparent; font:700 11px/1 var(--font); }
.inspo-redes button.on { color:#fff; background:linear-gradient(135deg,#e83e98,#895cff); }
.hm-notices{display:grid;gap:8px;margin:0 16px 16px}.hm-notice{display:grid;grid-template-columns:34px 1fr 14px;align-items:center;gap:10px;width:100%;padding:12px;border:1px solid rgba(239,92,170,.25);border-radius:14px;background:linear-gradient(135deg,rgba(239,92,170,.1),rgba(126,95,255,.06));color:var(--text);text-align:left}.hm-notice>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--hm-grad);color:#0a0a0c;font-weight:900}.hm-notice p{display:grid;gap:3px;margin:0}.hm-notice b{font-size:12px}.hm-notice small{color:var(--muted);font-size:10px;line-height:1.35}.hm-notice i{color:var(--muted);font-style:normal}
/* Altavoz siempre visible: el sonido del feed dejó de ser un secreto (31-jul) */
.reel-sound { position:absolute; top:calc(48px + var(--safe-t)); right:12px; z-index:3;
  width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.42); color:#fff;
  font-size:16px; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:0; }
.reel-sound:active { transform:scale(.88); }
/* 74 = alto real de .nav (9 + 56 + 9); con 66 la barra tapaba los últimos 8 px del reel */
.inspo-feed { height:calc(100dvh - 74px - var(--safe-b)); overflow-y:auto; overflow-anchor:none; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; background:#000; scrollbar-width:none; }
.inspo-feed::-webkit-scrollbar { display:none; }
.reel { position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; background:#000; overflow:hidden; }
.reel-vid { width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.reel-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:34px; text-align:center; background:radial-gradient(120% 90% at 50% 30%, rgba(158,163,170,.28), transparent 60%), #0b0b10; }
.reel-fallback .rf-play { width:60px; height:60px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; margin:0 auto 16px; }
.reel-fallback .rf-cap { color:rgba(255,255,255,.9); font-size:15px; line-height:1.5; max-height:120px; overflow:hidden; }
/* Sin salida a Instagram (regla de la agencia: se trabaja SOLO en la plataforma): si el vídeo
   no va, se dice y punto — no se manda a la modelo a otra app. */
.reel-fallback .rf-nota { display:inline-block; margin-top:14px; color:rgba(255,255,255,.55); font:600 12px var(--hm-f); }
/* Overlay estilo referencia: info abajo a la izquierda, acciones en columna a la derecha.
   Los iconos son SVG de línea (no emoji) para que se vean igual en iOS y Android. */
.reel-overlay { position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:24px 14px calc(16px + var(--safe-b)); display:flex; align-items:flex-end; gap:10px;
  background:linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.28) 45%, transparent); }
.reel-info { flex:1; min-width:0; padding-bottom:4px; }
.reel-cuenta { font:800 15px var(--hm-f); color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.reel-cap { color:rgba(255,255,255,.92); font-size:13px; line-height:1.4; margin-top:4px;
  max-height:37px; overflow:hidden; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.reel-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; }
.reel-tags span { color:rgba(255,255,255,.72); font:600 12px var(--hm-f); text-shadow:0 1px 6px rgba(0,0,0,.5); }

/* columna de acciones */
/* La columna medía 52 px fijos, pero la píldora «Guardar» mide ~90: se salía por los dos
   lados y por la derecha la cortaba el borde de la pantalla — junto con el contador de
   comentarios. Ahora la columna se ajusta a su elemento más ancho, así que nada se sale y
   el botón queda dentro del margen (lo vio la agencia el 1-ago). */
.reel-actions { display:flex; flex-direction:column; align-items:center; gap:16px; flex:none;
  min-width:52px; }
.ra-item { display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; text-decoration:none; }
.ra-ic { line-height:0; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)); transition:transform .15s; }
.ra-ic svg { width:28px; height:28px; display:block; }
.ra-n { font:700 11px var(--hm-f); color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.6);
  min-height:13px; white-space:nowrap; }
/* Guardar: el único con fondo, porque es la ÚNICA acción que de verdad hace algo aquí */
.ra-save { display:flex; align-items:center; gap:5px; padding:7px 12px; border-radius:30px;
  background:var(--grad); color:#0a0a0c; font:800 11.5px var(--hm-f); box-shadow:0 5px 16px rgba(201,205,211,.45);
  transition:transform .15s, filter .2s; }
.ra-save svg { width:14px; height:14px; }
.ra-save:active { transform:scale(.92); }
.ra-save.on { filter:saturate(.5) brightness(.85); }
/* Botón "tocar para reproducir": solo aparece si el navegador bloquea el autoplay (B52).
   Antes, ese caso se confundía con un vídeo roto y se ocultaba el reel para siempre. */
.reel-tap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:78px; height:78px; border-radius:50%; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.5); color:#fff; font-size:28px; display:flex; align-items:center; justify-content:center; }
.reel-tap[hidden] { display:none; }
/* sin esto, [hidden] no gana a display:flex y el aviso de "vídeo no disponible" tapa TODOS los reels */
.reel-fallback[hidden] { display:none; }
.reel-mute { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:74px; height:74px; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; opacity:0; transition:opacity .25s; pointer-events:none; }
.reel-mute.show { opacity:1; }

/* ---------- Biblioteca ---------- */
/* (la .libcard/.libgrid vieja se retiró con la fase D: ahora es lb-card/lb-grid, al final
   de este fichero) */

/* ---------- Redes / analíticas ("Ver todas") ---------- */
.volver { display:inline-flex; align-items:center; color:var(--brand-violet); font:700 13px var(--hm-f);
  min-height:44px; padding:6px 8px 6px 0; }
.red-bloque { margin-bottom:6px; }
/* Cuentas en solo lectura (las gestiona el equipo). Lo que ve la modelo es cómo van sus
   números, para motivarse — nada de botones de gestión. */
.sec-n { color:var(--muted2); font:600 11.5px var(--hm-f); }
.redes-hero { background:var(--glass); border:1px solid var(--glass-brd); border-radius:18px;
  padding:18px 20px; margin-bottom:14px; text-align:center;
  font:800 30px var(--hm-f); color:var(--green); letter-spacing:-.02em; }
.redes-hero span { display:block; font:600 12px var(--hm-f); color:var(--muted); letter-spacing:0; margin-top:2px; }
.cta-v.sube { color:var(--green); } .cta-v.baja { color:var(--brand-pink); }
/* fila compacta de cuenta en Perfil */
.cta-ro { display:flex; align-items:center; gap:11px; background:var(--glass);
  border:1px solid var(--glass-brd); border-radius:14px; padding:12px 14px; margin-bottom:8px; }
.cta-ro .ic { line-height:0; flex:none; } .cta-ro .ic svg { width:19px; height:19px; }
.cta-ro.vacia { opacity:.55; }
.cta-t { flex:1; min-width:0; }
.cta-t b { display:block; font:700 14px var(--hm-f); }
.cta-t span { color:var(--muted2); font-size:11px; }
.cta-s { text-align:right; font:800 15px var(--hm-f); }
.cta-s span { display:block; font:600 10px var(--hm-f); color:var(--muted2); }
.cta-nota { color:var(--muted); font-size:12px; line-height:1.5; margin:4px 2px 6px; }
.cta { background:var(--glass); border:1px solid var(--glass-brd); border-radius:18px; padding:14px 16px; margin-bottom:11px;
  backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%); box-shadow:var(--glass-hi); }
.cta-interactiva { display:block; width:100%; color:var(--text); text-align:left; font:inherit; cursor:pointer; }
.cta-interactiva:focus-visible { outline:2px solid var(--brand-blue); outline-offset:2px; }
.cta-h { display:flex; align-items:center; gap:11px; }
.cta-ic { line-height:0; flex:none; }
.cta-ic svg { width:20px; height:20px; }
.cta-n { flex:1; min-width:0; }
.cta-at { font:700 15px var(--hm-f); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cta-red { color:var(--muted2); font-size:11px; margin-top:1px; }
.cta-badge { color:var(--brand-pink); font-size:16px; flex:none; }
.cta-m { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; padding-top:12px; border-top:1px solid var(--sep); }
.cta-v { font:800 16px var(--hm-f); letter-spacing:-.3px; }
.cta-v.cta-fecha { font:700 11.5px var(--hm-f); color:var(--muted); padding-top:4px; }
.cta-l { color:var(--muted2); font-size:10px; margin-top:2px; }
.cta-vacia { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; line-height:1.45; }
.nota-scan { color:var(--muted2); font-size:11.5px; line-height:1.55; margin:14px 2px 0; }
.red-hist-cargando,.red-hist-vacio { color:var(--muted); padding:32px 8px; text-align:center; }
.red-hist-identidad { display:flex; align-items:center; gap:13px; margin:4px 0 13px; }
.red-hist-avatar { display:grid; place-items:center; width:56px; height:56px; flex:0 0 56px;
  overflow:hidden; border:1px solid rgba(185,145,235,.42); border-radius:50%;
  background:linear-gradient(145deg,rgba(158,163,170,.30),rgba(120,124,130,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 7px 22px rgba(92,54,136,.25);
  color:#BBBFC5; font:800 20px var(--hm-f); }
.red-hist-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.red-hist-identidad-texto { min-width:0; }
.red-hist-identidad-texto h2 { overflow:hidden; margin:0 0 5px; font:800 19px/1.15 var(--hm-f);
  text-overflow:ellipsis; white-space:nowrap; }
.red-hist-verificacion { display:inline-flex; align-items:center; gap:5px; color:var(--muted2);
  font:700 10.5px/1.2 var(--hm-f); }
.red-hist-verificacion.verificada { color:var(--brand-blue); }
.red-hist-verificacion.verificada>span { display:grid; place-items:center; width:15px; height:15px;
  border-radius:50%; background:var(--brand-blue); color:#0a0a0c; font-size:9px; }
.red-hist-verificacion.no-verificada>span { color:var(--muted2); font-size:15px; }
.red-hist-nombre { color:var(--muted); font-size:13px; margin:0 0 12px; }
.red-hist-web { display:block; color:var(--brand-blue); font-size:12px; margin:10px 0; overflow-wrap:anywhere; }
.red-hist-metricas { margin:16px 0 20px; }
.red-hist-resumen { display:flex; align-items:baseline; gap:8px; margin:8px 0; }
.red-hist-resumen b { color:var(--green); font:800 22px var(--sans); }
.red-hist-resumen span { color:var(--muted2); font-size:10px; }
.red-hist-grafica { display:block; width:100%; height:140px; overflow:visible; }
.red-hist-grafica polyline { stroke:var(--brand-blue); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.red-hist-tabla { display:grid; gap:9px; margin-top:18px; }
.red-hist-dia { display:grid; grid-template-columns:minmax(84px,.9fr) minmax(0,2.25fr); align-items:center;
  gap:10px; min-height:64px; padding:8px 10px; border:1px solid var(--glass-brd); border-radius:16px;
  background:var(--glass-2); box-shadow:var(--glass-hi); }
.red-hist-fecha { display:flex; align-items:center; justify-content:center; min-height:38px; padding:8px 10px;
  border:1px solid rgba(185,145,235,.40); border-radius:12px;
  background:linear-gradient(145deg,rgba(158,163,170,.30),rgba(120,124,130,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 7px 20px rgba(92,54,136,.18);
  color:#BBBFC5; font:800 11px/1.15 var(--hm-f); text-align:center; text-transform:lowercase;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.red-hist-dia-metricas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; }
.red-hist-dia-metricas>span { min-width:0; padding:2px 5px; text-align:center; }
.red-hist-dia-metricas>span+span { border-left:1px solid var(--sep); }
.red-hist-dia-metricas b { display:block; overflow:hidden; color:var(--text); font:800 12px/1.2 var(--hm-f);
  text-overflow:ellipsis; white-space:nowrap; }
.red-hist-dia-metricas b.sube { color:var(--green); }
.red-hist-dia-metricas b.baja { color:var(--red); }
.red-hist-dia-metricas small { display:block; margin-top:3px; color:var(--muted2); font:600 8px/1.2 var(--hm-f); }
:root[data-theme="light"] .red-hist-fecha { color:#65418f; border-color:rgba(118,73,164,.28);
  background:linear-gradient(145deg,rgba(158,163,170,.27),rgba(201,205,211,.10)); }
@media(max-width:370px){
  .red-hist-dia { grid-template-columns:78px minmax(0,1fr); gap:6px; padding-inline:7px; }
  .red-hist-dia-metricas>span { padding-inline:3px; }
  .red-hist-dia-metricas b { font-size:11px; }
  .red-hist-dia-metricas small { font-size:7.5px; }
}

/* ---------- Perfil ---------- */
.prof-top { display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 0 6px; }
.prof-top .avatar-lg { flex:none; width:100px; height:100px; border-radius:50%; font-size:40px; margin-bottom:14px;
  box-shadow:0 0 0 3px rgba(255,255,255,.14), 0 14px 40px rgba(201,205,211,.45); }
.prof-top h2 { font:800 22px var(--hm-f); letter-spacing:-.03em; }
.prof-top .em { color:var(--muted); font-size:13px; }
.push-ajustes { margin-top:10px; padding:15px; border:1px solid var(--glass-brd); border-radius:18px;
  background:var(--glass-2); box-shadow:var(--glass-hi); }
.push-ajustes-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding-bottom:11px; border-bottom:1px solid var(--sep); }
.push-ajustes-cab > div { min-width:0; }
.push-ajustes-cab b { display:block; font:800 13.5px var(--hm-f); }
.push-ajustes-cab > div > span { display:block; margin-top:2px; color:var(--muted2); font:500 10.5px/1.4 var(--hm-f); }
.push-activo { flex:none; display:inline-flex; align-items:center; gap:5px; padding:5px 8px;
  border-radius:999px; background:var(--green-s); color:var(--green); font:700 9.5px var(--hm-f); }
.push-activo i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.push-preferencias { margin:0; padding:0; border:0; }
.push-preferencia { position:relative; display:flex; align-items:center; gap:12px; min-height:68px;
  padding:12px 1px; border-bottom:1px solid var(--sep); cursor:pointer; }
.push-preferencia > span { flex:1; min-width:0; }
.push-preferencia b,.push-preferencia small { display:block; }
.push-preferencia b { font:750 12.5px var(--hm-f); color:var(--text); }
.push-preferencia small { margin-top:3px; color:var(--muted2); font:500 10.5px/1.4 var(--hm-f); }
.push-preferencia input { position:absolute; right:0; width:44px; height:28px; opacity:0; }
.push-switch { position:relative; flex:none; width:44px; height:26px; border:1px solid var(--glass-brd);
  border-radius:999px; background:rgba(128,128,140,.25); transition:background .2s,border-color .2s; }
.push-switch::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.3); transition:transform .2s; }
.push-preferencia input:checked + .push-switch { border-color:transparent; background:var(--grad); }
.push-preferencia input:checked + .push-switch::after { transform:translateX(18px); }
.push-preferencia input:focus-visible + .push-switch { outline:3px solid var(--hm-blue); outline-offset:3px; }
.push-preferencias:disabled .push-preferencia { cursor:wait; opacity:.58; }
.push-estado { min-height:18px; margin:9px 2px 0; color:var(--muted); font:600 10.5px/1.4 var(--hm-f); }
.push-guardar { margin-top:4px; }
.push-desactivar { margin-top:8px; color:var(--muted); font-size:12px; }
.push-error { margin-top:12px; padding:11px 12px; border:1px solid rgba(245,106,137,.3);
  border-radius:12px; background:var(--red-s); color:var(--red); font:600 11px/1.45 var(--hm-f); }
.push-error button { display:block; min-height:44px; margin-top:4px; color:inherit; font:800 11px var(--hm-f);
  text-decoration:underline; text-underline-offset:3px; }
.field { margin-bottom:13px; }
.field label { display:block; font:700 11px var(--hm-f); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field .inp { display:flex; align-items:center; gap:10px; background:var(--glass); border:1px solid var(--glass-brd); border-radius:15px; padding:0 15px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:border-color .2s; }
.field .inp:focus-within { border-color:rgba(201,205,211,.5); }
.field .inp .at { color:var(--muted2); font-weight:700; }

/* 16px mínimo: por debajo, iOS hace zoom automático al enfocar el campo (B23) */
.field .inp input { flex:1; background:none; border:none; outline:none; color:var(--text); padding:15px 0; font:500 16px var(--hm-f); }

/* ---------- login ---------- */
.auth { display:flex; flex-direction:column; min-height:100dvh; padding:calc(var(--safe-t) + 10px) 26px calc(34px + var(--safe-b)); }
.auth .brand { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; animation:rise .7s both; }
.auth .brand img { height:44px; filter:drop-shadow(0 8px 30px rgba(201,205,211,.5)); }
.auth .brand .tag { color:var(--muted); font-size:14px; text-align:center; }
.auth .form { animation:rise .7s .1s both; }
.auth h1 { font:800 25px var(--hm-f); letter-spacing:-.03em; margin-bottom:20px; text-align:center; }
.auth .card-form { background:var(--glass); border:1px solid var(--glass-brd); border-radius:22px; padding:20px 18px 22px; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:var(--glass-sh), var(--glass-hi); }
.auth .switch { text-align:center; color:var(--muted); font-size:13.5px; margin-top:20px; }
.auth .switch b { color:var(--brand-violet); font-weight:700; }
.msg { padding:12px 15px; border-radius:13px; font:600 13px var(--hm-f); margin-bottom:14px; display:none; animation:rise .3s both; }
.msg.show { display:block; }
.msg.err { background:var(--red-s); color:var(--red); border:1px solid rgba(245,106,137,.3); }
.msg.ok { background:var(--green-s); color:var(--green); border:1px solid rgba(87,214,155,.3); }
.spin { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-3px; }
@keyframes sp { to { transform:rotate(360deg); } }

/* ---------- toast (tokenizado: funciona en claro y oscuro · B18) ---------- */
#toast {
  position:fixed; left:50%; bottom:calc(92px + var(--safe-b));
  transform:translateX(-50%) translateY(8px); opacity:0;
  background:var(--toast-bg); border:1px solid var(--toast-brd); color:var(--text);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:13px 20px; border-radius:30px; font:600 13px var(--hm-f); z-index:60;
  max-width:88%; text-align:center; box-shadow:var(--glass-sh);
  transition:opacity .32s, transform .32s; pointer-events:none;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- cola durable de subidas ----------
   Es global (no pertenece a una pantalla) y queda por encima del nav, pero por debajo de
   la hoja de tarea. Asi una entrega sigue visible al navegar y no tapa controles modales. */
.up-outbox { position:fixed; z-index:45; left:50%; bottom:calc(82px + var(--safe-b));
  transform:translateX(-50%); width:calc(100% - 24px); max-width:456px;
  background:var(--toast-bg); border:1px solid var(--toast-brd); border-radius:18px;
  box-shadow:var(--glass-sh); overflow:hidden; backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%); }
.up-outbox[hidden] { display:none; }
.up-cab { width:100%; min-height:46px; padding:9px 13px; display:flex; align-items:center;
  gap:8px; text-align:left; font:800 12.5px var(--hm-f); }
.up-ico { width:25px; height:25px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#0a0a0c; background:var(--grad-br); font-size:16px; }
.up-cont { min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:flex;
  align-items:center; justify-content:center; color:var(--text); background:var(--glass-2);
  border:1px solid var(--glass-brd); font:800 10px var(--hm-f); }
.up-chev { margin-left:auto; color:var(--muted); font-size:16px; }
.up-lista { max-height:min(34dvh, 270px); overflow:auto; border-top:1px solid var(--sep); }
.up-outbox.cerrado .up-lista { display:none; }
.up-fila { display:flex; gap:10px; align-items:center; padding:11px 13px;
  border-bottom:1px solid var(--sep); }
.up-fila:last-child { border-bottom:0; }
.up-main { flex:1; min-width:0; }
.up-nombre { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:700 11.5px var(--hm-f); color:var(--text); }
.up-estado { margin-top:2px; font:600 10px/1.35 var(--hm-f); color:var(--muted); }
.up-fila.error .up-estado { color:var(--red); }
.up-fila.completando .up-estado { color:var(--blue); }
.up-barra { height:3px; margin-top:6px; border-radius:999px; overflow:hidden;
  background:var(--glass-brd); }
.up-barra span { display:block; height:100%; border-radius:inherit; background:var(--grad);
  transition:width .2s; }
.up-acciones { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.up-acciones button { min-height:28px; padding:4px 7px; color:var(--blue);
  font:700 9.5px var(--hm-f); border-radius:8px; }
.up-acciones button.peligro { color:var(--red); }
.up-acciones button:disabled { opacity:.45; }
.up-inline { margin-top:10px; padding:11px 13px; border-radius:13px; color:var(--blue);
  background:var(--blue-s); border:1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  font:700 11.5px/1.45 var(--hm-f); }

/* Bloquea el scroll del fondo mientras la hoja está abierta (B24) */
body.sin-scroll { overflow:hidden; }

/* ---------- selector de tema (Apariencia) ---------- */
.seg { display:flex; gap:5px; background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:16px; padding:5px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.seg-b { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px 4px; font:700 13.5px var(--hm-f); color:var(--muted); border-radius:12px; transition:.22s; }
.seg-b .si { font-size:16px; }
.seg-b:active { transform:scale(.96); }
.seg-b.on { background:var(--grad-br); color:#0a0a0c; box-shadow:0 6px 16px rgba(201,205,211,.4); }

/* ============================================================
   HOME v6 (F7b·A, aprobada por la agencia el 29-jul-2026) — tokens y
   componentes `hm-`. Solo la Home: el resto de pantallas siguen
   con el estilo anterior hasta su fase (B…E de PLAN.md §F7b).
   La paridad con la referencia vive en cliente/PARIDAD_HOME.md.
   ============================================================ */
:root{
  --hm-pink:#F9479F;
  --hm-grad:linear-gradient(135deg,#C9CDD3 0%,#BEC2C8 100%);
  --hm-green:#31C97E; --hm-red:#FF5C5C; --hm-amber:#FFAE1F;
  --hm-f:'Plus Jakarta Sans',system-ui,sans-serif;
}
[data-theme="light"]{
  --hm-card:#FFFFFF; --hm-chip:#FBFBFD; --hm-strip:#4A4A52;
  --hm-brd:rgba(20,20,30,.05); --hm-brdchip:rgba(20,20,30,.065);
  --hm-sombra:0 12px 32px rgba(24,24,34,.06);
  --hm-sombra-mini:0 6px 18px rgba(24,24,34,.05);
  --hm-striptext:#fff; --hm-stripmuted:#9E9EA8; --hm-chev:#C7C7CD;
}
[data-theme="dark"]{
  --hm-card:#161619; --hm-chip:#19191D; --hm-strip:#1F1F25;
  --hm-brd:rgba(255,255,255,.05); --hm-brdchip:rgba(255,255,255,.055);
  --hm-sombra:none; --hm-sombra-mini:none;
  --hm-striptext:#fff; --hm-stripmuted:#84848E; --hm-chev:#4E4E57;
}
#s-inicio{ font-family:var(--hm-f); }

.hm-top{ display:flex; justify-content:flex-end; padding:10px 0 2px; }
.hm-top img{ height:16px; display:block; }

.hm-head{ display:flex; align-items:flex-start; justify-content:space-between; padding-top:10px; }
.hm-head h1{ font:800 25px/1.24 var(--hm-f); letter-spacing:-.03em; color:var(--text); }
.hm-head .hm-nombre{ color:var(--hm-pink); }
.hm-head .hm-sub{ font:500 12.5px var(--hm-f); color:var(--muted); margin-top:4px; letter-spacing:-.01em; }
.hm-avatar{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none; margin-top:2px;
  outline:2px solid var(--hm-pink); outline-offset:2.5px; background:var(--hm-chip);
  display:flex; align-items:center; justify-content:center;
  font:800 17px var(--hm-f); color:var(--hm-pink); }
.hm-avatar img{ width:100%; height:100%; object-fit:cover; }

/* tira de días CUADRADA (decisión de la agencia r4): los 7 enteros, sin recortes ni scroll */
.hm-week{ display:flex; flex-wrap:nowrap; gap:7px; margin-top:16px; padding:6px 0 8px; }
.hm-day{ flex:1; min-width:0; background:var(--hm-chip); border:1px solid var(--hm-brdchip);
  border-radius:15px; padding:11px 0 12px; text-align:center; }
.hm-day .d{ font:700 8px var(--hm-f); letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.hm-day .n{ font:800 15px var(--hm-f); color:var(--text); margin-top:3px; letter-spacing:-.02em; }
.hm-day.on{ background:var(--hm-grad); border-color:transparent;
  transform:scale(1.06) translateY(-1.5px);
  box-shadow:0 10px 24px rgba(169,173,180,.42); }
.hm-day.on .d{ color:rgba(255,255,255,.88); } .hm-day.on .n{ color:#fff; }

.hm-sec{ display:flex; align-items:baseline; justify-content:space-between; margin:24px 0 12px; }
.hm-sec h2{ font:800 16.5px var(--hm-f); letter-spacing:-.025em; color:var(--text); }
.hm-sec :is(a,button){ font:700 12px var(--hm-f); color:var(--hm-pink); text-decoration:none;
  letter-spacing:-.01em; min-height:44px; padding:0 2px; }
.hm-sec :is(a,button)::after{ content:' ›'; }

.hm-balances{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.hm-bal{ background:var(--hm-card); border:1px solid var(--hm-brd); border-radius:18px;
  padding:17px 17px 15px; box-shadow:var(--hm-sombra); }
.hm-bal .v{ font:800 21px var(--hm-f); letter-spacing:-.035em; color:var(--text);
  font-variant-numeric:tabular-nums; }
.hm-bal .l{ font:500 11px var(--hm-f); color:var(--muted); margin-top:4px; }

.hm-strip{ display:flex; align-items:center; gap:16px; background:var(--hm-strip); border-radius:18px;
  padding:14px 15px 14px 18px; margin-top:11px; box-shadow:var(--hm-sombra-mini); }
.hm-st .v{ font:800 15px var(--hm-f); color:var(--hm-striptext); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.hm-st .l{ font:500 9.5px var(--hm-f); color:var(--hm-stripmuted); margin-top:2px; white-space:nowrap; }
.hm-st .v.up{ color:var(--hm-green); }
.hm-cta{ margin-left:auto; background:var(--hm-grad); color:#0a0a0c; border:none; border-radius:999px;
  font:700 11.5px var(--hm-f); padding:10px 16px; white-space:nowrap; letter-spacing:-.01em;
  box-shadow:0 8px 20px rgba(169,173,180,.42); }
.hm-cta:active{ transform:scale(.96); }

.hm-tasks{ display:flex; flex-direction:column; gap:9px; }
.hm-task{ display:flex; align-items:center; gap:13px; padding:16px 17px;
  background:var(--hm-card); border:1px solid var(--hm-brd); border-radius:16px;
  box-shadow:var(--hm-sombra-mini); }
.hm-task:active{ transform:scale(.985); }
.hm-task .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.hm-task .dot.alta{ background:var(--hm-red); }
.hm-task .dot.media{ background:var(--hm-amber); }
.hm-task .dot.baja{ background:var(--hm-green); }
.hm-task .tt{ flex:1; min-width:0; }
.hm-task .tt .n{ font:700 13.5px var(--hm-f); color:var(--text); letter-spacing:-.015em; }
.hm-task .tt .d{ font:500 11px var(--hm-f); color:var(--muted); margin-top:2px; }
.hm-task .chev{ color:var(--hm-chev); font:600 16px var(--hm-f); transform:scaleY(1.25); }
.hm-vacio{ background:var(--hm-card); border:1px solid var(--hm-brd); border-radius:16px;
  box-shadow:var(--hm-sombra-mini); padding:22px; text-align:center; color:var(--muted);
  font:500 13px var(--hm-f); }

/* Estilos legacy del resumen expandido; la Home compacta usa el bloque final `hm-overview`. */
.hm-of{ margin-top:24px; padding:16px; border:1px solid var(--hm-brd);
  border-radius:20px; background:var(--hm-card); box-shadow:var(--hm-sombra); }
.hm-of-title{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hm-of-title h2{ color:var(--text); font:800 16.5px var(--hm-f); letter-spacing:-.025em; }
.hm-of-title p{ margin-top:3px; color:var(--muted); font:500 10.5px var(--hm-f); }
.hm-of-refresh{ flex:none; min-width:92px; min-height:44px; padding:0 14px; border-radius:999px;
  color:var(--hm-pink); background:var(--hm-chip); border:1px solid var(--hm-brdchip);
  font:750 11.5px var(--hm-f); }
.hm-of-refresh:active:not(:disabled){ transform:scale(.96); }
.hm-of-notice{ margin-top:10px; padding:9px 11px; border-radius:11px;
  color:var(--muted); background:rgba(61,155,255,.1); font:600 10.5px/1.4 var(--hm-f); }
.hm-of-notice.error{ background:rgba(255,174,31,.1); }
.hm-of-loading,.hm-of-error,.hm-of-empty{ margin-top:13px; padding:18px 12px; border-radius:14px;
  color:var(--muted); background:var(--hm-chip); text-align:center; font:600 11.5px/1.5 var(--hm-f); }
.hm-of-loading{ display:flex; align-items:center; justify-content:center; gap:9px; }
.hm-of-totals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:9px; margin-top:14px; }
.hm-of-total{ position:relative; min-width:0; padding:13px; border:1px solid var(--hm-brdchip);
  border-radius:14px; background:var(--hm-chip); }
.hm-of-total .hm-of-currency{ position:absolute; top:10px; right:10px; padding:2px 6px;
  border-radius:999px; color:var(--muted); background:var(--hm-card); font:800 8px var(--hm-f); }
.hm-of-total strong,.hm-of-total>span,.hm-of-total small{ display:block; }
.hm-of-total strong{ padding-right:30px; overflow:hidden; color:var(--text);
  font:800 16px var(--hm-f); letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.hm-of-total>span:not(.hm-of-currency){ margin-top:2px; color:var(--muted); font:600 9.5px var(--hm-f); }
.hm-of-total small{ margin-top:7px; color:var(--muted); font:600 9.5px var(--hm-f); }
.hm-of-accounts{ display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.hm-of-account{ padding:13px; border:1px solid var(--hm-brdchip); border-left:3px solid var(--muted);
  border-radius:14px; background:var(--hm-chip); }
.hm-of-account.fresh{ border-left-color:var(--hm-green); }
.hm-of-account.stale{ border-left-color:var(--hm-amber); }
.hm-of-account.unavailable{ border-left-color:var(--muted); }
.hm-of-account-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.hm-of-account-head h3{ overflow-wrap:anywhere; color:var(--text); font:750 12.5px var(--hm-f); }
.hm-of-account-head h3+span{ display:block; margin-top:2px; color:var(--muted);
  font:550 9.5px var(--hm-f); }
.hm-of-pill{ flex:none; padding:4px 7px; border-radius:999px; color:var(--muted);
  background:var(--hm-card); font:750 8.5px var(--hm-f); }
.hm-of-pill.fresh{ color:var(--hm-green); background:rgba(49,201,126,.1); }
.hm-of-pill.stale{ color:var(--hm-amber); background:rgba(255,174,31,.1); }
.hm-of-money{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.hm-of-money>div{ min-width:0; }
.hm-of-money strong,.hm-of-money span{ display:block; }
.hm-of-money strong{ overflow:hidden; text-overflow:ellipsis; color:var(--text);
  font:800 14px var(--hm-f); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hm-of-money span{ margin-top:2px; color:var(--muted); font:550 9px var(--hm-f); }
.hm-of-account .hm-of-empty{ margin-top:10px; padding:11px 9px; text-align:left; font-size:10px; }
.hm-of-metrics{ display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:11px; color:var(--muted);
  font:550 9px var(--hm-f); }
.hm-of-metrics strong{ color:var(--text); font-weight:750; }
.hm-of-updated{ margin-top:10px; color:var(--muted); font:550 8.5px/1.35 var(--hm-f); }

.hm-nets{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.hm-net{ background:var(--hm-card); border:1px solid var(--hm-brd); border-radius:15px;
  padding:12px 12px 11px; box-shadow:var(--hm-sombra-mini); }
.hm-net .top{ display:flex; align-items:center; gap:6px; }
/* los MISMOS iconos NET que la pantalla de Redes, un punto más grandes en la tarjeta */
.hm-net .brandi{ width:16px; height:16px; }
.hm-net .h{ font:700 10px var(--hm-f); color:var(--text); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; letter-spacing:-.01em; }
.hm-net .row{ display:flex; align-items:baseline; gap:5px; margin-top:7px; }
.hm-net .v{ font:800 12.5px var(--hm-f); color:var(--text); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.hm-net .dl{ font:700 9.5px var(--hm-f); }
.hm-net .dl.sube{ color:var(--hm-green); } .hm-net .dl.baja{ color:var(--hm-red); }
.hm-net .dl.neutro{ color:var(--muted); font-weight:500; }

/* ============================================================
   TAREAS v1 (F7b·B) — la lista y la hoja, con la estética de la
   referencia. Paridad en cliente/PARIDAD_TAREAS.md. Reutiliza los
   tokens hm- de la Home; el azul es nuevo (estados y botón Drive).
   ============================================================ */
:root{ --hm-blue:#3D9BFF; }
#s-tareas{ font-family:var(--hm-f); }

.tk-titulo{ font:800 24px/1.2 var(--hm-f); letter-spacing:-.03em; color:var(--text);
  padding:12px 0 2px; }

/* pestañas de TIPO con subrayado rosa */
.tk-tabs{ display:flex; gap:22px; border-bottom:1px solid var(--hm-brd); margin-top:10px; }
.tk-tab{ display:flex; align-items:center; gap:5px; padding:9px 2px 11px;
  font:600 12.5px var(--hm-f); color:var(--muted); position:relative; letter-spacing:-.01em; }
.tk-tab svg{ width:14px; height:14px; }
.tk-tab .c{ color:var(--muted2); font-weight:600; }
.tk-tab.on{ color:var(--hm-pink); font-weight:700; }
.tk-tab.on .c{ color:var(--hm-pink); opacity:.75; }
.tk-tab.on::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  border-radius:2px; background:var(--hm-pink); }

/* Entregas libres: misma cola durable que las tareas, orden editorial y OF al final. */
.entregas-libres{ padding:15px 0 8px; }
.entregas-tareas{display:grid;gap:12px;padding:15px 0 4px}.entregas-seccion-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}.entregas-seccion-cab span{color:var(--muted);font:750 10px var(--hm-f);text-transform:uppercase;letter-spacing:.08em}.entregas-seccion-cab h2{margin-top:3px;color:var(--text);font:800 16px/1.3 var(--hm-f)}.entregas-seccion-cab>b{display:grid;place-items:center;min-width:31px;height:31px;padding:0 8px;border-radius:10px;color:#0a0a0c;background:var(--hm-grad);font:800 12px var(--hm-f)}.entrega-tarea-card{padding:14px;border:1px solid var(--hm-brd);border-radius:16px;background:var(--hm-card)}.entrega-tarea-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}.entrega-tarea-head h3{font:800 14px/1.35 var(--hm-f)}.entrega-tarea-head p{margin-top:4px;color:var(--muted);font:550 10.5px/1.4 var(--hm-f)}.entrega-tarea-head .ver{flex:none}
.entregas-intro{ display:flex; gap:12px; align-items:flex-start; padding:14px;
  border:1px solid var(--hm-brd); border-radius:16px; background:var(--hm-card); }
.entregas-intro>span{ display:grid; place-items:center; flex:none; width:34px; height:34px;
  border-radius:11px; color:#0a0a0c; background:var(--hm-grad); font:800 20px var(--hm-f); }
.entregas-intro h2{ color:var(--text); font:800 15px/1.3 var(--hm-f); }
.entregas-intro p{ margin-top:4px; color:var(--muted); font:500 11.5px/1.5 var(--hm-f); }
.entregas-redes{ display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.entrega-masiva{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:5px 12px; margin-top:12px; padding:13px 14px; border-radius:15px;
  color:var(--text); background:var(--hm-card); border:1px solid rgba(61,155,255,.28); }
.entrega-masiva b,.entrega-masiva span{ display:block; }
.entrega-masiva b{ font:800 12.5px/1.35 var(--hm-f); }
.entrega-masiva div>span{ margin-top:2px; color:var(--muted); font:600 10px/1.4 var(--hm-f); }
.entrega-masiva strong{ color:var(--hm-blue); font:800 13px var(--hm-f); }
.entrega-masiva-bar{ grid-column:1/-1; height:4px; overflow:hidden; border-radius:999px;
  background:var(--hm-brdchip); }
.entrega-masiva-bar>span{ height:100%; border-radius:inherit; background:var(--hm-grad); }
.entrega-masiva.error{ border-color:rgba(255,92,92,.3); }
.entrega-masiva.error strong{ color:var(--hm-red); }
.entrega-masiva.completada{ border-color:rgba(49,201,126,.3); }
.entrega-masiva.completada strong{ color:var(--hm-green); }
.entrega-masiva.esperando{ border-color:rgba(49,201,126,.3); }
.entrega-masiva.esperando strong{ color:var(--hm-green); }
.entrega-red{ display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center;
  gap:10px; padding:12px; border:1px solid var(--hm-brd); border-radius:15px;
  background:var(--hm-card); box-shadow:var(--hm-sombra-mini); }
.entrega-red.general{ padding:15px 12px; border-color:rgba(61,155,255,.34);
  box-shadow:0 8px 24px rgba(61,155,255,.10); }
.entrega-red.general .entrega-red-ico{ color:#0a0a0c; background:var(--hm-grad);
  box-shadow:0 6px 16px rgba(169,173,180,.28); }
.entrega-red.general .entrega-red-btn{ color:#0a0a0c; border-color:transparent;
  background:var(--hm-grad); box-shadow:0 6px 16px rgba(169,173,180,.25); }
.entrega-red-ico{ display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  color:var(--hm-pink); background:rgba(169,173,180,.10); font:800 13px var(--hm-f); }
.entrega-red-ico svg{ display:block; width:22px; height:22px; }
.entrega-red-ico.red-instagram{ background:rgba(225,48,108,.10); }
.entrega-red-ico.red-tiktok,.entrega-red-ico.red-x,.entrega-red-ico.red-threads{
  color:var(--text); background:rgba(255,255,255,.07); }
.entrega-red-ico.red-onlyfans{ color:#00aff0; background:rgba(0,175,240,.11); }
.entrega-red h3{ color:var(--text); font:800 13px/1.25 var(--hm-f); }
.entrega-red p,.entrega-red small{ display:block; margin-top:2px; color:var(--muted);
  font:500 10px/1.35 var(--hm-f); }
.entrega-red small{ color:var(--hm-blue); font-weight:700; }
.entrega-red-btn{ position:relative; overflow:hidden; cursor:pointer; padding:9px 11px;
  border-radius:999px; color:var(--hm-blue); background:rgba(61,155,255,.12);
  border:1px solid rgba(61,155,255,.22); white-space:nowrap; font:700 10.5px var(--hm-f); }
.entrega-red-btn.desactivado{ cursor:wait; opacity:.55; pointer-events:none; }
@media(max-width:390px){.entrega-red{grid-template-columns:34px minmax(0,1fr)}
  .entrega-red-btn{grid-column:1/-1;text-align:center}.tk-tabs{gap:10px}}

/* chips de ESTADO */
.tk-chips{ display:flex; gap:8px; margin:14px 0 4px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tk-chips::-webkit-scrollbar{ display:none; }
.tk-chip{ flex:none; padding:7px 14px; border-radius:999px; font:600 12px var(--hm-f);
  color:var(--muted); background:var(--hm-card); border:1px solid var(--hm-brdchip);
  white-space:nowrap; letter-spacing:-.01em; }
.tk-chip.on{ background:var(--hm-grad); border-color:transparent; color:#0a0a0c; font-weight:700;
  box-shadow:0 6px 16px rgba(169,173,180,.35); }

/* tarjeta de tarea: raya izquierda del color del estado */
.tk-lista{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.tk-card{ background:var(--hm-card); border:1px solid var(--hm-brd); border-radius:16px;
  border-left:3px solid var(--muted2); padding:14px 15px 12px; box-shadow:var(--hm-sombra-mini); }
.tk-card:active{ transform:scale(.99); }
.tk-card.asignada{ border-left-color:var(--hm-blue); }
.tk-card.en_revision{ border-left-color:var(--hm-red); }
.tk-card.pendiente{ border-left-color:var(--hm-amber); }
.tk-card.completada{ border-left-color:var(--hm-green); }
.tk-meta{ display:flex; align-items:center; gap:6px; font:500 11px var(--hm-f); color:var(--muted); }
.tk-meta .dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.tk-meta .est{ font-weight:700; }
/* r3: el PUNTO recibe el fondo y el TEXTO recibe el color — por separado. Dárselos juntos
   pintaba el nombre del estado como un rectángulo sólido (texto azul sobre fondo azul). */
.tk-card.asignada .dot{ background:var(--hm-blue); }     .tk-card.asignada .est{ color:var(--hm-blue); }
.tk-card.en_revision .dot{ background:var(--hm-red); }   .tk-card.en_revision .est{ color:var(--hm-red); }
.tk-card.pendiente .dot{ background:var(--hm-amber); }   .tk-card.pendiente .est{ color:var(--hm-amber); }
.tk-card.completada .dot{ background:var(--hm-green); }  .tk-card.completada .est{ color:var(--hm-green); }
.tk-prio{ margin-left:auto; padding:4px 10px; border-radius:999px; font:700 10px var(--hm-f);
  color:#fff; letter-spacing:.01em; }
.tk-prio.alta{ background:var(--hm-red); box-shadow:0 4px 12px rgba(255,92,92,.35); }
.tk-prio.media{ background:var(--hm-amber); }
.tk-prio.baja{ background:var(--hm-green); }
.tk-card h3{ font:800 15px/1.3 var(--hm-f); letter-spacing:-.02em; color:var(--text); margin-top:8px; }
.tk-card p{ font:500 12px/1.5 var(--hm-f); color:var(--muted); margin-top:3px; }
.tk-aviso{ margin-top:8px; padding:7px 9px; border-radius:9px; color:var(--hm-red);
  background:rgba(255,92,92,.10); font:700 10.5px/1.35 var(--hm-f); }
/* sin línea divisoria (r2: en la referencia las acciones respiran sin hilo) */
.tk-acts{ display:flex; gap:18px; margin-top:4px; }
/* min-height 44: por debajo de eso el dedo falla (mínimo táctil iOS/Android — regla heredada) */
.tk-acts button{ font:700 12px var(--hm-f); display:flex; align-items:center; gap:5px;
  letter-spacing:-.01em; min-height:44px; padding:0 4px; }
.tk-acts button:active{ transform:scale(.92); }
/* r2: el color de la acción sigue al ESTADO, como en la referencia (View azul en asignada,
   ámbar en pendiente, rojo en revisión). Entregar siempre verde. */
.tk-acts .ver{ color:var(--hm-blue); }
.tk-card.pendiente .tk-acts .ver{ color:var(--hm-amber); }
.tk-card.en_revision .tk-acts .ver{ color:var(--hm-red); }
.tk-acts .sub{ color:var(--hm-green); }

/* hoja de detalle */
.tk-sh-head{ display:flex; align-items:flex-start; gap:10px; }
.tk-sh-head h2{ flex:1; font:800 18px/1.3 var(--hm-f); letter-spacing:-.02em; }
.tk-sh-meta{ display:flex; align-items:center; gap:12px; margin-top:8px;
  font:600 12px var(--hm-f); color:var(--muted); }
.tk-sh-meta .est{ display:flex; align-items:center; gap:5px; font-weight:700; }
.tk-sh-meta .est .dot{ width:6px; height:6px; border-radius:50%; }
.tk-cap{ font:700 10px var(--hm-f); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted2); margin:16px 0 7px; }
/* Las instrucciones llegan escritas a mano, con sus saltos de línea y sus enlaces largos:
   pre-wrap los respeta y anywhere parte el enlace en vez de desbordar la pantalla. */
.tk-desc{ font:500 14px/1.7 var(--hm-f); color:var(--text); opacity:.92;
  white-space:pre-wrap; overflow-wrap:anywhere; }
.tk-enlace{ color:#3d9bff; text-decoration:underline; text-underline-offset:2px; }
.tk-enlace:active{ opacity:.6; }
.tk-documento{display:grid;gap:10px;padding:13px;border:1px solid rgba(61,155,255,.28);border-radius:14px;background:rgba(61,155,255,.06)}.tk-documento>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.tk-documento b{font:750 12px/1.4 var(--hm-f);overflow-wrap:anywhere}.tk-documento small{display:block;margin-top:3px;color:var(--muted);font:600 10px var(--hm-f)}.tk-documento .tk-btn{width:auto;margin:0;padding:9px 11px}
.tk-feedback,.tk-solicitud{ padding:12px 13px; border-radius:13px; font:600 12px/1.5 var(--hm-f); }
.tk-feedback{ color:var(--hm-red); background:rgba(255,92,92,.10);
  border:1px solid rgba(255,92,92,.22); }
.tk-feedback b,.tk-solicitud b{ display:block; font-weight:800; }
.tk-feedback p,.tk-solicitud p{ margin-top:4px; }
.tk-solicitud{ color:var(--hm-blue); background:rgba(61,155,255,.10);
  border:1px solid rgba(61,155,255,.22); }
.tk-solicitud .respuesta{ color:var(--text); margin-top:8px; padding-top:8px;
  border-top:1px solid var(--sep); }
.tk-sop{ display:flex; align-items:center; gap:11px; background:var(--hm-card);
  border:1px solid var(--hm-brd); border-radius:14px; padding:13px 14px; }
.tk-sop .g{ flex:none; width:20px; height:20px; }
.tk-sop .t{ flex:1; min-width:0; }
.tk-sop .t b{ font:700 13px var(--hm-f); letter-spacing:-.01em; display:block; }
.tk-sop .t span{ font:500 11px var(--hm-f); color:var(--muted); display:block; margin-top:1px; }
.tk-sop .ch{ color:var(--muted2); font:600 15px var(--hm-f); transform:scaleY(1.2); }
.tk-btn{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:14px; border-radius:999px; font:700 13.5px var(--hm-f); margin-top:10px;
  letter-spacing:-.01em; text-decoration:none; }
.tk-btn:active{ transform:scale(.98); }
/* «Subir el contenido» es un label con input file dentro (X4): mismo aspecto, cursor de botón */
label.tk-btn{ cursor:pointer; -webkit-user-select:none; user-select:none; }
.tk-btn.ghost{ background:var(--hm-card); border:1px solid var(--hm-brdchip); color:var(--text); }
.tk-btn.azul{ background:var(--hm-blue); color:#fff; box-shadow:0 8px 20px rgba(61,155,255,.35); }
.tk-btn.azul-suave{ background:rgba(61,155,255,.14); color:var(--hm-blue);
  border:1px solid rgba(61,155,255,.25); box-shadow:none; }
.tk-btn.rosa{ background:var(--hm-grad); color:#0a0a0c; box-shadow:0 8px 20px rgba(169,173,180,.42); }
.tk-btn.peligro{ background:var(--hm-red); color:#fff; box-shadow:0 8px 20px rgba(255,92,92,.30); }

.bulk-editor{ margin-top:4px; }
.bulk-varios{ display:flex; width:100%; justify-content:center; margin:12px 0 5px; cursor:pointer; }
.bulk-resumen{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bulk-resumen div{ min-width:0; }
.bulk-resumen b{ display:block; font:800 13px var(--hm-f); color:var(--text); }
.bulk-resumen span{ display:block; margin-top:2px; font:500 10.5px var(--hm-f); color:var(--muted); }
.bulk-resumen strong{ font:800 15px var(--hm-f); color:var(--hm-pink); }
.bulk-bar{ height:6px; overflow:hidden; margin:9px 0 13px; border-radius:999px; background:var(--hm-brdchip); }
.bulk-bar span{ display:block; height:100%; border-radius:inherit; background:var(--hm-grad); }
.bulk-lista{ display:flex; flex-direction:column; gap:9px; }
.bulk-slot{ padding:11px; border:1px solid var(--hm-brdchip); border-left:3px solid var(--hm-amber);
  border-radius:14px; background:var(--hm-card); box-shadow:var(--hm-sombra-mini); }
.bulk-slot.hecho{ border-left-color:var(--hm-green); }
.bulk-slot.cola{ border-left-color:var(--hm-blue); }
.bulk-slot.error{ border-left-color:var(--hm-red); }
.bulk-slot-cab{ display:flex; align-items:center; gap:8px; }
.bulk-num{ width:23px; height:23px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex:none; color:#0a0a0c; background:var(--hm-grad); font:800 10px var(--hm-f); }
.bulk-slot-cab b{ font:800 12px var(--hm-f); color:var(--text); }
.bulk-estado{ margin-left:auto; text-align:right; font:700 9.5px var(--hm-f); color:var(--muted); }
.bulk-slot.hecho .bulk-estado{ color:var(--hm-green); }
.bulk-slot.cola .bulk-estado{ color:var(--hm-blue); }
.bulk-slot.error .bulk-estado{ color:var(--hm-red); }
.bulk-error{ margin-top:8px; padding:7px 9px; border-radius:9px; background:rgba(255,92,92,.1);
  color:var(--hm-red); font:600 10px/1.4 var(--hm-f); }
.bulk-progreso{ height:3px; margin-top:9px; border-radius:999px; overflow:hidden; background:var(--hm-brdchip); }
.bulk-progreso span{ display:block; height:100%; background:var(--hm-blue); transition:width .2s; }

.pl-ref{ display:flex; align-items:center; gap:10px; margin-top:9px; min-width:0; }
.pl-thumb{ width:70px; aspect-ratio:4/5; position:relative; overflow:hidden; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center; background:var(--media-bg); }
.pl-ref.compacta .pl-thumb{ width:52px; border-radius:9px; }
.pl-thumb img,.pl-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.pl-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:24px; height:24px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; padding-left:2px;
  color:#fff; background:rgba(0,0,0,.62); font-size:9px; }
.pl-ref-txt{ min-width:0; flex:1; }
.pl-ref-txt b,.pl-ref-txt span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-ref-txt b{ font:750 11.5px var(--hm-f); color:var(--text); }
.pl-ref-txt span{ margin-top:2px; font:600 9.5px var(--hm-f); color:var(--muted); }
.pl-ref-txt p{ margin-top:5px; font:500 10.5px/1.4 var(--hm-f); color:var(--muted); }
.pl-ref-vacia{ margin-top:8px; color:var(--muted); font:600 10px var(--hm-f); }

/* «Añadir vídeo» dentro de cada slot: hereda .tk-btn azul-suave, solo ajusta el aire */
.bulk-anadir{ margin-top:10px!important; min-height:42px; }
.up-destino{ margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--muted2); font:600 9px var(--hm-f); }

/* ============================================================
   BIBLIOTECA — colección de vídeos guardados
   ============================================================ */
#s-biblioteca{ font-family:var(--hm-f); }

.lb-head{ display:flex; align-items:flex-start; justify-content:space-between; padding-top:10px; }
.lb-head h1{ font:800 24px/1.2 var(--hm-f); letter-spacing:-.03em; color:var(--text); }
.lb-head .sub{ font:500 12px var(--hm-f); color:var(--muted); margin-top:3px; }
.lb-creadores{ display:flex; gap:13px; margin:12px -16px 12px; padding:7px 16px 7px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.lb-creadores::-webkit-scrollbar{ display:none; }
.lb-creador{ flex:none; width:64px; min-height:78px; padding:0; display:flex; flex-direction:column;
  align-items:center; gap:5px; color:var(--muted); background:none; border:0; }
.lb-creador-avatar{ position:relative; width:56px; height:56px; box-sizing:border-box; display:grid; place-items:center;
  overflow:hidden; border:2px solid var(--hm-brdchip); border-radius:50%; color:var(--hm-pink);
  background:var(--hm-chip); font:800 18px/1 var(--hm-f); }
.lb-creador-avatar img{ display:block; width:100%; height:100%; object-fit:cover;
  object-position:center; image-rendering:auto; }
.lb-creador-avatar.todos{ color:var(--text); font-size:17px; }
.lb-creador-avatar.todos img{ width:39px; height:39px; object-fit:contain; object-position:center; }
.lb-creador-avatar.semanal{ color:var(--text); background:var(--hm-card); }
.lb-creador-avatar.semanal::before{ content:''; position:absolute; inset:7px; border-radius:50%;
  border:1px solid rgba(169,173,180,.36); }
.lb-creador-avatar.semanal strong{ position:relative; z-index:1; font:800 12px/1 var(--hm-f); }
.lb-creador>span:last-child{ display:block; width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-align:center; font:650 9.5px/1.2 var(--hm-f); }
.lb-creador.sel{ color:var(--hm-pink); }
.lb-creador.sel .lb-creador-avatar{ color:var(--hm-pink); background:var(--hm-chip);
  outline:2px solid var(--hm-pink); outline-offset:2px;
  box-shadow:0 5px 15px rgba(169,173,180,.22); }

/* rejilla 2 columnas */
.lb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.lb-card{ background:var(--hm-card); border:1px solid var(--hm-brd); border-radius:16px;
  overflow:hidden; box-shadow:var(--hm-sombra-mini); }
.lb-thumb{ position:relative; aspect-ratio:3/4; background:var(--media-bg) center/cover; }
.lb-thumb .dur{ position:absolute; top:8px; right:8px; background:rgba(0,0,0,.62);
  color:#fff; font:700 10px var(--hm-f); padding:3px 8px; border-radius:8px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); text-decoration:none; }
.lb-cuerpo{ padding:10px 11px 12px; }
.lb-quien{ display:flex; align-items:center; gap:6px; }
.lb-quien .at{ font:700 11px var(--hm-f); color:var(--text); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.01em; }
.lb-stats{ display:flex; gap:9px; margin-top:6px; font:600 9.5px var(--hm-f); color:var(--muted); }
.lb-stats span{ display:flex; align-items:center; gap:4px; }
/* Iconos de trazo fino y algo más grandes que el texto, como en la referencia: el trazo
   grueso los hacía pesados en una tarjeta pequeña (antes ♡ glifo + 💬 emoji de color + ▶). */
.lb-stats svg{ width:12.5px; height:12.5px; flex:none; opacity:.78; }
/* el punto rojo de grabar, en blanco sobre la píldora — nada de emoji, que iOS pinta azul */
.lb-acts{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.lb-gestionar{ flex:1; min-height:44px; display:flex; align-items:center; justify-content:center;
  gap:7px; padding:8px; border:0; border-radius:999px; color:#0a0a0c; background:var(--hm-grad);
  box-shadow:0 7px 18px rgba(169,173,180,.28); font:750 10.5px var(--hm-f); }
.lb-gestionar span{ font:850 12px/1 var(--hm-f); letter-spacing:1px; }
.lb-gestionar:active{ transform:scale(.96); }
.lb-card-semanal{ border-color:rgba(169,173,180,.22); }
.lb-semanal-tag{ position:absolute; z-index:2; left:8px; top:8px; max-width:calc(100% - 64px);
  padding:5px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:999px;
  color:#0a0a0c; background:var(--hm-grad); box-shadow:0 4px 13px rgba(169,173,180,.32);
  font:750 8.5px/1 var(--hm-f); }
.lb-semanal-estado{ margin-top:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:750 9.5px/1.25 var(--hm-f); }
.lb-semanal-estado.pendiente{ color:var(--hm-amber); }
.lb-semanal-estado.cola{ color:var(--hm-blue); }
.lb-semanal-estado.error{ color:var(--hm-red); }
.lb-semanal-estado.hecho{ color:var(--hm-green); }
.lb-semanal-resumen{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 14px;
  margin:2px 0 15px; padding:14px 15px; border:1px solid var(--hm-brd); border-radius:16px;
  background:var(--hm-card); box-shadow:var(--hm-sombra-mini); }
.lb-semanal-resumen div:first-child{ min-width:0; }
.lb-semanal-resumen span,.lb-semanal-resumen b{ display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.lb-semanal-resumen span{ color:var(--text); font:800 13px/1.3 var(--hm-f); }
.lb-semanal-resumen b{ margin-top:3px; color:var(--muted); font:600 10px/1.3 var(--hm-f); }
.lb-semanal-resumen>strong{ align-self:center; color:var(--hm-pink); font:850 18px/1 var(--hm-f); }
.lb-semanal-bar{ grid-column:1/-1; height:6px; overflow:hidden; border-radius:999px;
  background:var(--hm-chip); }
.lb-semanal-bar span{ display:block; height:100%; border-radius:inherit; background:var(--hm-grad);
  box-shadow:0 0 10px rgba(169,173,180,.38); }
.lb-gestion-info{ margin:4px 0 18px; padding:14px; border:1px solid var(--hm-brd);
  border-radius:15px; background:var(--hm-card); }
.lb-gestion-info b,.lb-gestion-info span{ display:block; }
.lb-gestion-info b{ color:var(--text); font:800 14px/1.3 var(--hm-f); }
.lb-gestion-info span{ margin-top:3px; color:var(--muted); font:600 11px/1.4 var(--hm-f); }
.tk-btn.peligro-suave{ color:var(--hm-red); background:rgba(255,92,92,.09);
  border:1px solid rgba(255,92,92,.28); box-shadow:none; }
.lb-semanal-chip{ flex:none; padding:6px 9px; border-radius:999px; color:var(--hm-pink);
  background:rgba(169,173,180,.1); border:1px solid rgba(169,173,180,.22);
  font:750 10px/1 var(--hm-f); }
.lb-gestion-progreso{ display:grid; grid-template-columns:1fr auto; gap:8px 12px;
  margin:4px 0 15px; padding:13px 14px; border:1px solid var(--hm-brd); border-radius:14px;
  background:var(--hm-card); }
.lb-gestion-progreso>span{ color:var(--muted); font:650 11px/1.3 var(--hm-f); }
.lb-gestion-progreso>b{ color:var(--hm-pink); font:850 14px/1.2 var(--hm-f); }
.lb-gestion-estado{ margin:13px 0 8px; padding:10px 12px; border-radius:12px;
  color:var(--muted); background:var(--hm-chip); font:750 11px/1.35 var(--hm-f); }
.lb-gestion-estado.cola{ color:var(--hm-blue); }
.lb-gestion-estado.error{ color:var(--hm-red); }
.lb-gestion-estado.hecho{ color:var(--hm-green); }
.lb-entregar-semanal{ margin-top:14px; }

.lb-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
/* Reproductor sin adornos (decisión de la agencia, 1-ago): en una tarjeta de media pantalla la
   barra de controles se toca sin querer. Solo se ve el vídeo; el único aviso es el ▶ que
   reaparece al pausar, para que se sepa que está parado y no roto. */
.lb-thumb.pausado::after{ content:'▶'; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:30px; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6); background:rgba(0,0,0,.22); pointer-events:none; }
.lb-caido{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--text); }
.lb-confirmacion-icono{ display:grid; place-items:center; width:48px; height:48px; margin:2px auto 12px;
  border-radius:50%; color:#fff; background:var(--hm-red); font:850 24px/1 var(--hm-f);
  box-shadow:0 8px 22px rgba(255,92,92,.30); }
.lb-confirmacion-texto{ margin:0 auto 20px; max-width:330px; text-align:center; }
.lb-confirmacion-texto h2{ color:var(--text); }
.lb-confirmacion-texto p{ margin-top:9px; color:var(--text); font:650 14px/1.5 var(--hm-f); }
.lb-confirmacion-texto span{ display:block; margin-top:7px; color:var(--muted); font:600 11px/1.4 var(--hm-f); }
.lb-confirmacion-texto~.tk-btn{ margin-top:9px; }

/* ============================================================
   PWA móvil: teclado, tacto, orientación y formularios seguros
   ============================================================ */
:where(button,a,input,select,textarea,[role="button"]):focus-visible{
  outline:3px solid var(--hm-blue); outline-offset:3px;
}
button:disabled,input:disabled{ cursor:not-allowed; opacity:.58; }
button,a,label{ touch-action:manipulation; }
.auth .switch button{ color:var(--brand-violet); font:700 13.5px var(--hm-f);
  text-decoration:underline; text-underline-offset:3px; min-height:44px; padding:0 4px; }

/* El input de archivo sigue en el árbol de accesibilidad y ocupa visualmente su label.
   `hidden` impedía llegar a Subir/Grabar con teclado o lector de pantalla. */
label.tk-btn,#btnFoto{ position:relative; overflow:hidden; }
.file-input{ position:absolute; inset:0; width:100%; height:100%; opacity:0;
  cursor:pointer; font-size:0; }
label.tk-btn:focus-within,#btnFoto:focus-within{
  outline:3px solid var(--hm-blue); outline-offset:3px;
}

.hm-task,.hm-net{ width:100%; text-align:left; }
.hm-task .tt .n,.hm-task .tt .d{ display:block; }
.hm-nets{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hm-net:last-child:nth-child(odd){ grid-column:1 / -1; }
.tk-paginacion{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:18px 0 8px;
  color:var(--muted); font:600 11px var(--hm-f); }
.tk-paginacion .btn{ width:min(100%,280px); }

.reel-sound{ width:44px; height:44px; }
.ra-save{ min-height:44px; }
.sheet-cerrar{ width:44px; height:44px; top:9px; right:11px; }
.lb-thumb:is(button){ width:100%; border:0; text-align:left; }
.lb-mas{ margin:16px auto 4px; }
.prof-password{ margin-top:10px; padding:15px; border:1px solid var(--glass-brd);
  border-radius:18px; background:var(--glass-2); }
.prof-password[hidden]{ display:none; }

@media (max-width:360px){
  .screen{ padding-left:12px; padding-right:12px; }
  .tk-tabs{ gap:12px; }
  .tk-tab{ font-size:11.5px; }
  .sheet{ padding-left:16px; padding-right:16px; }
  .hm-week{ gap:2px; }
  .lb-grid{ gap:8px; }
}
@media (orientation:landscape) and (max-height:520px){
  .auth{ min-height:100dvh; padding-top:12px; }
  .auth .brand{ flex:none; padding:8px 0 14px; }
  .auth .brand img{ height:32px; }
  .auth .brand .tag{ display:none; }
  .sheet{ max-height:96dvh; }
  .inspo-feed{ height:calc(100dvh - 66px - var(--safe-b)); }
  .reel-overlay{ padding-top:10px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto!important; transition-duration:.01ms!important;
    animation-duration:.01ms!important; animation-iteration-count:1!important; }
}
@media (forced-colors:active){
  .nav,.card,.tk-card,.lb-card,.sheet,.up-outbox,.push-ajustes,.push-switch,.hm-of,.hm-of-account{ border:1px solid CanvasText; }
  .nav button.on::before{ background:Highlight; }
  .push-preferencia input:checked + .push-switch{ background:Highlight; }
}

/* ============================================================
   HOME · medición de la referencia 375×718 (pantalla útil 314×678)
   ============================================================ */
/* Home hereda el mismo fondo, superficies y contraste que las demás pantallas. */
#s-inicio{ padding-left:15px; padding-right:15px; padding-bottom:calc(80px + var(--safe-b)); }
.hm-top{ display:flex; align-items:center; justify-content:flex-end; height:auto; padding:10px 0 4px; }
.hm-top img{ width:auto; height:16px; display:block; opacity:.98; }
.hm-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:7px; }
.hm-head>div{ min-width:0; }
.hm-head h1{ overflow:hidden; text-overflow:ellipsis; font:800 22px/1.22 var(--hm-f);
  letter-spacing:-.035em; white-space:nowrap; }
.hm-head .hm-sub{ margin-top:4px; font:600 11px/1.35 var(--hm-f); letter-spacing:-.025em; }
.hm-avatar{ width:43px; height:43px; margin:0; outline-width:1.5px; outline-offset:2.5px;
  font-size:18px; }
.hm-week{ gap:5px; margin-top:30px; padding:3px 0 5px; }
.hm-day{ display:flex; height:46px; padding:0; flex-direction:column; align-items:center;
  justify-content:center; border-radius:13px; }
.hm-day .d{ font-size:8px; line-height:1; letter-spacing:.08em; }
.hm-day .n{ margin-top:4px; font-size:15px; line-height:1; }
.hm-day.on{ transform:scale(1.07) translateY(-1px);
  box-shadow:0 7px 18px rgba(169,173,180,.48),0 0 10px rgba(169,173,180,.22); }
.hm-sec{ min-height:22px; margin:18px 0 9px; }
.hm-sec-overview{ margin-top:17px; }
.hm-sec h2{ font-size:17px; line-height:24px; }
.hm-sec :is(a,button){ min-height:23px; padding:0; font-size:12px; line-height:23px; }
.hm-overview{ min-width:0; }
.hm-balances{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.hm-bal{ min-width:0; height:74px; padding:16px 14px 12px; border-radius:15px; }
.hm-bal .v{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:19px; line-height:23px; letter-spacing:-.035em; }
.hm-bal .l{ display:block; margin-top:5px; font-size:10px; line-height:13px; white-space:nowrap; }
.hm-strip{ display:flex; align-items:center; gap:9px; min-height:66px;
  height:66px; margin-top:11px; padding:10px 12px; border:1px solid var(--hm-brd); border-radius:16px; }
.hm-stats{ display:flex; flex:1 1 auto; width:auto; min-width:0; height:40px; }
.hm-st{ display:flex; flex:1 1 0; min-width:0; min-height:0; padding:0 6px; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  border-right:1px solid rgba(255,255,255,.09); }
.hm-st:first-child{ padding-left:0; }
.hm-st:last-child{ border-right:0; }
.hm-st .v{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  width:100%; font-size:14px; line-height:18px; letter-spacing:-.03em; }
.hm-st .v.up{ color:var(--hm-green); }
.hm-st .v.down{ color:var(--hm-red); }
.hm-st .v.neutral{ color:var(--muted); }
.hm-st .l{ display:block; overflow:hidden; text-overflow:ellipsis; margin-top:2px;
  width:100%; font-size:9px; line-height:12px; white-space:nowrap; }
.hm-cta{ flex:0 0 86px; width:86px; min-width:86px; min-height:34px; margin-left:auto; padding:8px 12px;
  font-size:12px; line-height:16px; letter-spacing:-.015em;
  box-shadow:0 7px 18px rgba(169,173,180,.5); }
.hm-cta:disabled{ color:rgba(255,255,255,.6); box-shadow:none; }
.hm-overview-note{ margin:7px 3px 0; color:var(--muted); font:600 9.5px/1.35 var(--hm-f); }
.hm-overview-note.error{ color:var(--hm-amber); }
.hm-tasks{ display:flex; flex-direction:column; gap:0; overflow:hidden; background:var(--hm-card);
  border:1px solid var(--hm-brd); border-radius:14px; box-shadow:var(--hm-sombra-mini); }
.hm-task{ height:86px; min-height:86px; gap:14px; padding:18px 15px; background:transparent;
  border:0; border-bottom:1px solid var(--sep); border-radius:0; box-shadow:none; }
.hm-task:last-child{ border-bottom:0; }
.hm-task .dot{ width:8px; height:8px; }
.hm-task .tt .n{ display:block; overflow:hidden; text-overflow:ellipsis; font-size:14.5px;
  line-height:18px; white-space:nowrap; }
.hm-task .tt .d{ display:block; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
  font-size:11px; line-height:15px; white-space:nowrap; }
.hm-task .chev{ font-size:18px; font-weight:500; transform:scaleY(1.2); }
.hm-vacio{ display:grid; min-height:86px; place-items:center; border:0; border-radius:0;
  box-shadow:none; padding:22px; }
.hm-tasks + .hm-sec{ margin-top:24px; margin-bottom:6px; }
.hm-nets{ display:flex; grid-template-columns:none; gap:7px; overflow-x:auto; padding:1px 0 3px;
  scrollbar-width:none; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.hm-nets::-webkit-scrollbar{ display:none; }
.hm-net,.hm-net:last-child:nth-child(odd){ grid-column:auto; flex:0 0 calc((100% - 14px)/3);
  min-width:0; height:92px; padding:16px 12px 13px; border-radius:15px; scroll-snap-align:start; }
.hm-net .brandi{ width:22px; height:22px; }
.hm-net .h{ font-size:10.5px; }
.hm-net .row{ gap:6px; margin-top:10px; }
.hm-net .v{ font-size:13.5px; }
.hm-net .dl{ font-size:10px; }
.hm-nets{ padding-top:0; padding-bottom:0; }
.hm-withdraw-amount{ margin-top:18px; padding:18px; border:1px solid var(--hm-brdchip);
  border-radius:16px; background:var(--hm-card); text-align:center; }
.hm-withdraw-amount span{ display:block; color:var(--muted); font:600 11px var(--hm-f); }
.hm-withdraw-amount strong{ display:block; margin-top:5px; color:var(--text);
  font:800 28px var(--hm-f); letter-spacing:-.04em; }
.hm-withdraw-warning{ margin-top:12px; padding:13px 14px; border:1px solid rgba(255,92,92,.22);
  border-radius:14px; color:var(--hm-red); background:rgba(255,92,92,.09); }
.hm-withdraw-warning b{ display:block; font:800 13px var(--hm-f); }
.hm-withdraw-warning p{ margin-top:4px; color:var(--text); font:500 11.5px/1.5 var(--hm-f); }
.hm-withdraw-status{ min-height:17px; margin:9px 4px 0; color:var(--muted);
  font:600 11px/1.4 var(--hm-f); text-align:center; }
@media (max-width:360px){
  #s-inicio{ padding-left:15px; padding-right:15px; }
}


/* Alta de redes desde Perfil: conserva los colores y superficies de la PWA. */
.cuenta-alta-abrir { width:100%; margin:0 0 12px; }
.cuenta-alta { padding:16px; margin:0 0 14px; border:1px solid var(--glass-brd); border-radius:16px; background:var(--glass); display:grid; gap:12px; }
.cuenta-alta[hidden] { display:none; }
.cuenta-alta label { display:grid; gap:6px; color:var(--text); font-size:13px; font-weight:700; }
.cuenta-alta select,.cuenta-alta input { width:100%; min-height:44px; box-sizing:border-box; border:1px solid var(--glass-brd); border-radius:11px; padding:10px 12px; background:var(--bg); color:var(--text); font:inherit; }
.cuenta-alta-error { min-height:1em; margin:0; color:var(--red); font-size:12px; }
.cuenta-alta-acciones { display:flex; gap:8px; }
.cuenta-alta-acciones .btn { flex:1; }

.of-vault{margin:18px 0 24px}.of-vault .hm-sec{margin:0 0 10px}
.of-vault-card{padding:16px;margin-bottom:10px;border:1px solid var(--glass-brd);border-radius:18px;background:var(--hm-card);box-shadow:0 10px 28px rgba(0,0,0,.08)}
.of-vault-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.of-vault-card-head strong{font:700 14px/1.35 var(--hm-f);color:var(--text);overflow-wrap:anywhere}
.of-vault-card-head span{flex:none;padding:4px 8px;border-radius:999px;background:rgba(255,177,60,.12);color:var(--hm-amber);font:700 10px var(--hm-f)}
.of-vault-destinos{display:grid;gap:7px;margin:13px 0}.of-vault-destinos>div{display:flex;justify-content:space-between;gap:12px;font:12px/1.4 var(--hm-f)}
.of-vault-destinos b{color:var(--text)}.of-vault-destinos span{color:var(--muted);text-align:right}
.of-vault-btn,.of-vault-more{border:1px solid var(--glass-brd);border-radius:10px;background:var(--glass);color:var(--text);padding:9px 12px;font:700 12px var(--hm-f)}
.of-vault-btn{width:100%}.of-vault-help{margin:4px 0 16px;color:var(--muted);font:12px/1.5 var(--hm-f)}
.of-vault-selectores{display:grid;gap:12px;margin-bottom:16px}.of-vault-selector{display:grid;gap:7px;padding:12px;border:1px solid var(--glass-brd);border-radius:13px;background:var(--glass)}
.of-vault-selector label{color:var(--text);font:700 12px var(--hm-f)}.of-vault-selector select{width:100%;min-height:42px;padding:8px;border:1px solid var(--glass-brd);border-radius:9px;background:var(--bg);color:var(--text);font:12px var(--hm-f)}
.of-vault-more{justify-self:start}.of-vault-more[hidden]{display:none}