/* ============================================================
   InstaFans — Design System "Zara minimal" (ver BIBLIA_VISUAL.md)
   Tokens --if-* · esquinas duras · mono en UI mecánica · 1 acento
   ============================================================ */

/* Fuente de marca: AGN (Akzidenz Grotesk Next), servida en LOCAL desde
   /assets/fonts/. Latina: para CJK/árabe/cirílico se cae a la pila del sistema
   (ver --if-font-sans). Coloca los .woff2/.woff en app/public/assets/fonts/. */
@font-face { font-family: "AGN"; src: url("assets/fonts/AkzidGrtskNext-Regular.woff2") format("woff2"), url("assets/fonts/AkzidGrtskNext-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "AGN"; src: url("assets/fonts/AkzidGrtskNext-Italic.woff2") format("woff2"), url("assets/fonts/AkzidGrtskNext-Italic.woff") format("woff"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "AGN"; src: url("assets/fonts/AkzidGrtskNext-Med.woff2") format("woff2"), url("assets/fonts/AkzidGrtskNext-Med.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "AGN"; src: url("assets/fonts/AkzidGrtskNext-MedIt.woff2") format("woff2"), url("assets/fonts/AkzidGrtskNext-MedIt.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "AGN"; src: url("assets/fonts/AkzidGrtskNext-Bold.woff2") format("woff2"), url("assets/fonts/AkzidGrtskNext-Bold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "AGN"; src: url("assets/fonts/AkzidGrtskNext-BoldIt.woff2") format("woff2"), url("assets/fonts/AkzidGrtskNext-BoldIt.woff") format("woff"); font-weight: bold; font-style: italic; font-display: swap; }

:root {
  --if-bg:        #ffffff;
  --if-bg-soft:   #fafafa;
  --if-ink:       #000000;
  --if-active:    #333333;   /* color de los elementos ACTIVOS (nav, pestañas, chips) */
  --if-ink-soft:  #6b6b6b;
  --if-line:      #e8e8e8;
  --if-line-soft: #f0f0f0;
  --if-accent:    #e1306c;
  --if-accent-2:  #fce3ec;
  --if-like:      #ffb066;   /* "me gusta": pastel de #ff7e00, nunca rojo */
  --if-success:   #1a8754;
  --if-warn:      #b45309;
  --if-error:     #b91c1c;

  --if-font-sans: "AGN", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --if-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  --if-ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --if-trans: 250ms var(--if-ease);

  /* gutter horizontal único: márgenes izq/der de las cards y de la barra inferior */
  --if-gutter: 14px;
}

/* ---- modo oscuro: paleta derivada del tinte elegido (--dark-base) ---- */
html[data-mode="dark"] {
  --dark-base: #121212;
  --if-bg: var(--dark-base);
  --if-bg-soft: color-mix(in srgb, var(--dark-base) 86%, #ffffff);
  /* texto del oscuro personalizable (color del usuario) con fallback */
  --if-ink: var(--dark-ink, #f1f1f1);
  --if-active: var(--dark-ink, #f1f1f1);   /* activos legibles sobre fondo oscuro */
  --if-ink-soft: color-mix(in srgb, var(--dark-ink, #f1f1f1) 55%, var(--dark-base));
  --if-line: color-mix(in srgb, var(--dark-base) 78%, #ffffff);
  --if-line-soft: color-mix(in srgb, var(--dark-base) 88%, #ffffff);
}
html[data-mode="dark"] body { background: var(--if-bg); }
/* en oscuro, los overlays de cabecera del post se suavizan */
html { transition: background-color 200ms var(--if-ease, ease); }

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--if-font-sans);
  font-size: 13px;
  background: var(--if-bg);
  color: var(--if-ink);
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}
a { color: inherit; text-decoration: none; }
img { display: block; }
a, button, input, textarea, select { transition: all var(--if-trans); }

/* UI mecánica: mono + uppercase (en RTL/CJK se relaja, ver html[lang] abajo) */
.ui-mech, .btn, .badge, .card-title, .field label, .nav-label, .section-title {
  font-family: var(--if-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
html[dir="rtl"] .ui-mech, html[dir="rtl"] .btn, html[dir="rtl"] .nav-label,
html[lang="zh"] .btn, html[lang="ja"] .btn,
html[dir="rtl"] .field label, html[dir="rtl"] .section-title {
  font-family: var(--if-font-sans);
  letter-spacing: 0.04em;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--if-bg);
  border-bottom: 1px solid var(--if-line);
}
.header-inner {
  max-width: 480px; margin: 0 auto;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: var(--if-font-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
}
.brand .brand-dot { color: var(--if-accent); }
.header-actions { display: flex; gap: 4px; }
.header-icon-btn {
  background: transparent; border: 1px solid transparent;
  color: var(--if-ink); width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; font-size: 17px; border-radius: 0;
}
.header-icon-btn:hover { border-color: var(--if-ink); }

/* ---------- layout ---------- */
.container { max-width: 480px; margin: 0 auto; padding: 14px var(--if-gutter); }

/* ---------- botones ---------- */
.btn {
  font-size: 11px; font-weight: 600;
  border-radius: 0; padding: 10px 18px;
  border: 1px solid var(--if-ink);
  cursor: pointer; display: inline-block;
  background: var(--if-bg); color: var(--if-ink);
  text-align: center;
}
.btn-primary { background: var(--if-ink); color: var(--if-bg); }
.btn-primary:hover { background: var(--if-bg); color: var(--if-ink); }
.btn-outline:hover { background: var(--if-ink); color: var(--if-bg); }
.btn-sm { padding: 7px 13px; font-size: 10px; }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn-accent { border-color: var(--if-accent); color: var(--if-accent); }
.btn-accent:hover { background: var(--if-accent); color: #fff; }

/* ---------- campos ---------- */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 10px; font-weight: 700;
  color: var(--if-ink); margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--if-bg);
  border: 1px solid var(--if-line);
  border-radius: 0;
  color: var(--if-ink);
  font-size: 14px; padding: 10px 12px;
  font-family: var(--if-font-sans);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--if-ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--if-ink-soft); }

/* ---------- tarjetas / posts ---------- */
.card {
  background: var(--if-bg);
  border: none;
  border-radius: 0;
  margin-bottom: 14px;
}
/* feed: tabs (Para ti / Siguiendo) reutilizan .follow-tabs/.ftab */
.feed-tabs { position: sticky; top: 0; z-index: 20; background: var(--if-bg); margin-bottom: 6px; }
/* pull-to-refresh: indicador que aparece al tirar desde arriba */
.feed-ptr { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--if-ink-soft); transition: height .2s var(--if-ease); }
.feed-ptr i { font-size: 16px; transition: transform .2s; }
.feed-ptr.ready i { transform: rotate(180deg); }
.feed-ptr.loading i { animation: if-spin 1s linear infinite; }
@keyframes if-spin { to { transform: rotate(360deg); } }
/* evita el pull-to-refresh nativo del navegador (que recargaría toda la página)
   y CUALQUIER resize horizontal de la página en móvil (importante). El zoom por
   pellizco y el zoom al enfocar inputs se bloquean en el <meta viewport>. */
html, body { overflow-x: hidden; max-width: 100%; }
body { overscroll-behavior-y: contain; }

/* cabecera del post integrada SOBRE la foto (decisión 13/06/2026) */
.card-overlay {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px 18px;
  color: #fff;
}
.card-overlay .username { color: #fff; font-weight: 600; font-size: 14px; text-shadow: none; }
.card-overlay .time { color: rgba(255,255,255,.85); position: relative; top: 2px; }
.avatar-overlay { font-size: 15px; color: #fff; background: rgba(0,0,0,.2); }
.dots {
  margin-inline-start: auto;
  background: transparent; border: none; color: #fff;
  font-size: 18px; cursor: pointer; padding: 4px 2px; line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* indicador de multi-imagen: en la ESQUINA SUPERIOR DERECHA de la foto */
.car-flag { color: #fff; font-size: 15px; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.photo-wrap .car-flag { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; }
/* caption editorial: texto sobre la foto, personalizable por post */
.caption-overlay {
  position: absolute; left: 0; right: 0;
  padding: 16px 16px; line-height: 1.45;
  pointer-events: none;
  transition: opacity .2s ease;
}
/* el texto va solo con la 1ª imagen; en el resto del carrusel se oculta */
.caption-overlay.cap-slide-hidden { opacity: 0; }
/* posición */
.cap-bottom { bottom: 0; padding-top: 30px; }
/* arriba: el texto (y su degradado) empiezan BAJO la franja del autor
   (avatar + usuario + ⋯) para no pisarla. --cap-reserve = alto reservado. */
.cap-top { top: var(--cap-reserve, 60px); padding-bottom: 30px; }
.cap-center { top: 50%; transform: translateY(-50%); }
/* alineación */
.cap-a-left { text-align: start; }
.cap-a-center { text-align: center; }
.cap-a-right { text-align: end; }
/* el contenedor de texto respeta el ancho elegido (--cap-w) según alineación */
.caption-overlay .caption-text { display: inline-block; max-width: var(--cap-w, 100%); }
.cap-a-center .caption-text { margin: 0 auto; }
.cap-a-right .caption-text { margin-inline-start: auto; }
/* segunda fuente/color dentro del texto ({2}..{/2}) */
.caption-overlay .cap-2 { font-family: var(--cap-font2, inherit); color: var(--cap-color2, inherit); }
/* compat tamaño antiguo s/m/l (posts ya publicados sin tamaño en rem) */
.cap-s { font-size: 0.85rem; } .cap-m { font-size: 1.05rem; } .cap-l { font-size: 1.6rem; font-weight: 600; }

/* tono del texto del autor sobre la foto (blanco o negro) */
.cap-tone-light .username { color: #fff; }
.cap-tone-light .time { color: rgba(255,255,255,.85); }
.cap-tone-light .dots, .cap-tone-light .avatar-overlay, .cap-tone-light .car-flag { color: #fff; }
.cap-tone-dark .username { color: #000; text-shadow: 0 1px 3px rgba(255,255,255,.5); }
.cap-tone-dark .time { color: rgba(0,0,0,.7); }
.cap-tone-dark .dots, .cap-tone-dark .avatar-overlay, .cap-tone-dark .car-flag { color: #000; }
.cap-tone-dark .avatar-overlay { border-color: #000; }
.avatar {
  width: 30px; height: 30px;
  border: 1px solid var(--if-ink);
  background: var(--if-bg);
  color: var(--if-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--if-font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.time {
  color: var(--if-ink-soft);
  font-family: var(--if-font-mono); font-size: 10px; letter-spacing: 0.08em;
}
.photo-wrap { position: relative; cursor: pointer; overflow: hidden; background: #0a0a0a; }
/* imagen completa (también verticales): contain, sin recortar */
.card img.photo { width: 100%; max-height: 85vh; object-fit: contain; display: block; }

/* ----- carousel (varias fotos por post) ----- */
.carousel { position: relative; overflow: hidden; max-height: 85vh; background: #0a0a0a;
  touch-action: pan-y;            /* arrastre horizontal nuestro; scroll vertical del navegador */
  cursor: grab; user-select: none; -webkit-user-select: none; }
.carousel.dragging { cursor: grabbing; }
.carousel-track { display: flex; transition: transform .28s ease; height: 100%; }
.carousel-img { flex: 0 0 100%; width: 100%; height: 100%; max-height: 85vh; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.85); color: #111; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); z-index: 3;
}
.carousel-nav.prev { inset-inline-start: 8px; }
.carousel-nav.next { inset-inline-end: 8px; }
.carousel-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 3; pointer-events: none; }
.carousel-dots .cdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(0,0,0,.5); transition: background .2s; }
.carousel-dots .cdot.on { background: #fff; }
.heart-pop {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 84px; color: #fff;
  opacity: 0; pointer-events: none;
  text-shadow: 0 0 24px rgba(0,0,0,.35);
}
.heart-pop.pop { animation: heartPop 750ms var(--if-ease); }
@keyframes heartPop {
  0% { opacity: 0; transform: scale(.4); }
  25% { opacity: 1; transform: scale(1.15); }
  55% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.likes { cursor: pointer; }
/* barra de acciones: minimalista e integrada */
/* línea de acciones consolidada: [avatar @usuario] | línea gris | iconos ... ⋯ */
.actions { display: flex; align-items: center; gap: 0; padding: 9px 0 0; }
.act-author { display: flex; align-items: center; gap: 7px; padding-inline-end: 12px; min-width: 0; }
.act-author .avatar-img, .act-author .avatar { width: 26px; height: 26px; flex: 0 0 auto; }
.act-author .username { font-weight: 600; font-size: 13px; color: var(--if-ink); text-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-author .car-flag { color: var(--if-ink-soft); font-size: 13px; flex: 0 0 auto; }
.act-icons { display: flex; align-items: center; gap: 0; border-inline-start: 1px solid var(--if-line); padding-inline-start: 12px; }
/* ⋯ : sin reborde ni sombra, solo los tres puntos en NEGRO (ink) */
.actions .dots { margin-inline-start: auto; background: none; border: 0; color: var(--if-ink); cursor: pointer; font-size: 16px; padding: 4px 0 4px 8px; text-shadow: none; }
.actions .dots:hover { color: var(--if-ink-soft); }
.actions button {
  background: transparent; border: none; cursor: pointer; color: var(--if-ink-soft);
  height: 30px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 0; transition: color .15s;
}
.actions button:hover { color: var(--if-ink); }

/* ICONOS: tamaño independiente del de los números, pequeños y sutiles.
   Suben 2px respecto a los números para alinear ópticamente. */
.actions .like-btn, .actions .count-icon { font-size: 16px; width: 26px; }
/* iconos de acción centrados verticalmente con el username (sin el desplazamiento
   de 2px que tenían cuando la línea era solo de iconos) */
.act-icons { align-self: center; }

/* NÚMEROS: se quedan a su tamaño y van pegados a su icono */
.actions .count-btn {
  font-family: var(--if-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  width: auto; padding: 0; margin-inline-start: -3px;
}
.count-btn:hover, .count-icon:hover { color: var(--if-ink); }

/* separación entre el grupo "me gusta" y el grupo "comentarios" */
.like-count { margin-inline-end: 10px; }
/* guardar y compartir: juntos a la izquierda pero con más AIRE entre ellos y el
   grupo de comentarios (left/right), no pegados */
.actions .save-btn { margin-inline-start: 16px; }
.actions .share-btn { margin-inline-start: 14px; }

/* color de "me gusta": pastel de #ff7e00, nunca rojo */
/* activos en tono NEUTRO (ink), sin rojo/naranja/rosa. La diferencia activo/inactivo
   la marca el icono RELLENO; el color se mantiene monocromo y minimal. */
.actions .liked { color: var(--if-ink); }
.save-btn.saved { color: var(--if-ink); }
/* hora del post: arriba del panel de comentarios (info secundaria) */
.comments-time { color: var(--if-ink-soft); font-size: 11px; padding: 0 0 12px; }
/* los 4 iconos (me gusta, comentar, guardar, compartir) JUNTOS a la izquierda */

/* chips de colecciones (guardados) */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; }
.chip {
  flex-shrink: 0; background: var(--if-bg); border: 1px solid var(--if-line);
  color: var(--if-ink); cursor: pointer; padding: 7px 14px;
  font-family: var(--if-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px; border-radius: 0;
}
.chip b { font-weight: 700; color: var(--if-ink-soft); }
.chip.active { background: var(--if-active); color: var(--if-bg); border-color: var(--if-active); }
.chip.active b { color: var(--if-bg); }
.chip-add { width: 36px; justify-content: center; }

/* panel lateral SOBRE la imagen (likes / comentarios) */
.post-panel {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
  width: 86%; max-width: 360px; z-index: 5;
  background: color-mix(in srgb, var(--if-bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-inline-start: 1px solid var(--if-ink);
  transform: translateX(102%);
  transition: transform 300ms var(--if-ease), visibility 0s linear 300ms;
  display: flex; flex-direction: column;
  visibility: hidden;            /* invisible del todo cuando está cerrado */
}
html[dir="rtl"] .post-panel { transform: translateX(-102%); }
.post-panel.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 300ms var(--if-ease), visibility 0s;
}
/* panel editorial: sin barra-título; X de cerrar flotante arriba a la derecha */
.panel-close {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--if-bg) 80%, transparent); border: 1px solid var(--if-line);
  color: var(--if-ink-soft); font-size: 14px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.panel-close:hover { color: var(--if-ink); }
/* padding-top alto: deja "aire" arriba para que la X no pise el 1er comentario */
.panel-body { flex: 1; overflow-y: auto; padding: 20px 14px 10px; }
/* comentario fijado: actúa como cabecera del panel, con separación clara */
.comment-row.pinned {
  padding-bottom: 12px; margin-bottom: 10px;
  border-bottom: 1px solid var(--if-line);
}
.comment-row.pinned .clike { margin-top: -2px; }
.panel-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.panel-row:hover { color: var(--if-accent); }
.panel-comment-form { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--if-line); padding-inline-start: 12px; }
.panel-comment-form input { flex: 1; border: none; background: transparent; color: var(--if-ink); padding: 12px 4px; font-size: 13px; outline: none; }
.panel-comment-form button { background: none; border: none; color: var(--if-ink); font-family: var(--if-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0 14px; cursor: pointer; }
.panel-comment-form button:hover { color: var(--if-accent); }
.caption { padding: 6px 14px; font-size: 14px; }
.caption b { font-weight: 600; }
.view-comments {
  padding: 2px 14px 10px; font-size: 12px;
  color: var(--if-ink-soft); cursor: pointer;
  font-family: var(--if-font-mono); letter-spacing: 0.06em;
}
.comment-list { padding: 4px 14px 8px; font-size: 13px; }
.comment-row { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; }
.comment-row .comment-body { flex: 1; line-height: 1.4; }
.comment-user { font-weight: 600; cursor: pointer; }
.comment-user:hover { color: var(--if-accent); }
/* comentario fijado: orgánico (sin caja, sin nombre); solo una chincheta sutil */
.comment-pin { font-size: 11px; color: var(--if-ink-soft); margin-inline-end: 4px; vertical-align: baseline; }
/* respuestas en ÁRBOL: sangría contenida + línea-guía vertical por respuesta */
.comment-thread { margin-bottom: 6px; }
.comment-replies { padding-inline-start: 37px; }
.comment-replies.tree { padding-inline-start: 38px; margin-top: 4px; }
/* cada respuesta: línea-guía a su izquierda (se entiende de quién cuelga) */
.comment-node { position: relative; }
.comment-node::before {
  content: ''; position: absolute; inset-inline-start: -10px; top: 2px; bottom: 6px;
  width: 1.5px; background: var(--if-line);
}
.comment-node.d1 { margin-inline-start: 0; }
.comment-node.d2 { margin-inline-start: 18px; }
.comment-node.d3 { margin-inline-start: 34px; }
.comment-node.d4 { margin-inline-start: 48px; }
/* el corazón de cada respuesta, pegado a la PRIMERA línea de su fila */
.comment-row { align-items: flex-start; }
.comment-row .clike { align-self: flex-start; margin-top: 1px; }
.comment-row.is-reply { margin-bottom: 8px; }
.comment-meta { margin-top: 2px; }
.comment-reply-btn {
  background: none; border: none; cursor: pointer; color: var(--if-ink-soft);
  font-family: var(--if-font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 0;
}
.comment-reply-btn:hover { color: var(--if-ink); }
.replies-toggle {
  background: none; border: none; cursor: pointer; color: var(--if-ink-soft);
  font-family: var(--if-font-mono); font-size: 10px; letter-spacing: 0.06em;
  padding: 0 0 9px; margin-inline-start: 37px; display: block;
}
.replies-toggle:hover { color: var(--if-ink); }
.reply-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 14px; background: var(--if-bg-soft); border-top: 1px solid var(--if-line-soft);
  font-family: var(--if-font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--if-ink-soft);
}
.reply-banner button { background: none; border: none; color: var(--if-ink-soft); cursor: pointer; font-size: 12px; padding: 2px; }
.reply-banner button:hover { color: var(--if-ink); }
/* like de comentario */
.clike { background: none; border: none; cursor: pointer; color: var(--if-ink-soft); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; padding: 0 2px; align-self: flex-start; }
.clike.liked { color: var(--if-ink); }
.clike span { font-size: 10px; font-variant-numeric: tabular-nums; }
/* editor del comentario fijado */
.pin-text { width: 100%; min-height: 120px; resize: vertical; }
.info-dot { background: none; border: none; color: var(--if-ink-soft); cursor: pointer; font-size: 15px; padding: 0 2px; vertical-align: middle; }
.info-dot.on, .info-dot:hover { color: var(--if-accent); }
.pin-help { font-size: 12px; color: var(--if-ink-soft); background: var(--if-soft, rgba(0,0,0,.04)); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }

/* ---------- mensajería (DMs) ---------- */
.info-dot { /* reutilizado arriba */ }
.profile-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
/* badge de no leídos sobre items de navegación */
.nav-badge { background: var(--if-accent); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; margin-inline-start: 6px; vertical-align: middle; }
.rail-item { position: relative; }
.rail-item .nav-badge { position: absolute; top: 3px; inset-inline-end: 3px; margin: 0; }
/* bandeja de entrada */
.conv-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--if-line); cursor: pointer; }
.conv-row:hover { background: var(--if-soft, rgba(0,0,0,.03)); }
.conv-main { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; gap: 8px; }
.conv-name { font-weight: 600; }
.conv-time { font-size: 11px; color: var(--if-ink-soft); white-space: nowrap; }
.conv-preview { font-size: 13px; color: var(--if-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-row.unread .conv-preview { color: var(--if-ink); font-weight: 600; }
.conv-badge { background: var(--if-accent); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
/* chat */
.chat { display: flex; flex-direction: column; height: calc(100dvh - 150px); }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 4px 12px; border-bottom: 1px solid var(--if-line); }
.chat-back { background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; padding: 4px 6px; }
.chat-other { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.chat-empty { margin: auto; }
.bubble { max-width: 78%; padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.35; word-wrap: break-word; }
.bubble.mine { align-self: flex-end; background: var(--if-accent); color: #fff; border-bottom-right-radius: 5px; }
.bubble.theirs { align-self: flex-start; background: var(--if-soft, rgba(0,0,0,.06)); color: var(--if-ink); border-bottom-left-radius: 5px; }
.bubble-time { display: block; font-size: 10px; opacity: .65; margin-top: 3px; }
.chat-form { display: flex; gap: 8px; padding: 10px 4px; border-top: 1px solid var(--if-line); }
.chat-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--if-line); border-radius: 20px; background: var(--if-bg); color: inherit; }
.chat-form button { border: none; background: var(--if-accent); color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px; flex: 0 0 auto; }
.comment-form { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--if-line); padding-inline-start: 12px; }
.comment-form input { flex: 1; border: none; padding: 12px 4px; font-size: 13px; outline: none; font-family: var(--if-font-sans); background: var(--if-bg); color: var(--if-ink); }
/* avatares como imagen */
.avatar-img { display: inline-block; object-fit: cover; flex-shrink: 0; vertical-align: middle; }
.avatar-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; cursor: pointer; }
.check-row input { width: auto; }
/* color como línea fina (no cuadro) + opacidad */
input[type=color].color-line {
  width: 100%; height: 14px; padding: 0; border: 1px solid var(--if-line);
  background: none; cursor: pointer; border-radius: 0;
}
input[type=color].color-line::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color].color-line::-webkit-color-swatch { border: none; border-radius: 0; }
.opacity-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.opacity-row span { font-family: var(--if-font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--if-ink-soft); }
.opacity-row input[type=range] { flex: 1; }
.opacity-row b { font-family: var(--if-font-mono); font-size: 11px; min-width: 38px; text-align: end; }
.comment-form button {
  background: none; border: none; color: var(--if-ink);
  font-family: var(--if-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0 14px; cursor: pointer;
}
.comment-form button:hover { color: var(--if-accent); }

/* ---------- auth ---------- */
.auth-box {
  border: 1px solid var(--if-line);
  margin: 40px 0; padding: 28px 24px;
  background: var(--if-bg);
}
.auth-box h2 {
  font-family: var(--if-font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center; margin-bottom: 22px;
}
.auth-box p { text-align: center; margin-top: 16px; font-size: 13px; color: var(--if-ink-soft); }
.auth-box p a { color: var(--if-ink); font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--if-ink); }
.form-error { color: var(--if-error); font-size: 12px; margin-bottom: 12px; text-align: center; min-height: 15px; }

/* ---------- perfil ---------- */
/* cabecera de perfil: avatar | (línea gris) | bio | (línea gris) | stats verticales con iconos */
.profile-head {
  display: flex; align-items: stretch; gap: 0;
  padding: 18px 0 16px; border-bottom: 1px solid var(--if-line); margin-bottom: 14px;
}
.ph-avatar { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-inline-end: 16px; }
.ph-avatar .avatar, .ph-avatar .avatar-img { width: 64px; height: 64px; font-size: 24px; }
.ph-avatar h2 { font-family: var(--if-font-mono); font-size: 12px; letter-spacing: 0.06em; font-weight: 700; text-align: center; }
.ph-bio { flex: 1; min-width: 0; padding: 2px 16px; border-inline-start: 1px solid var(--if-line); display: flex; align-items: center; }
.profile-bio { font-size: 13px; line-height: 1.5; }
.ph-stats {
  flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding-inline-start: 16px; border-inline-start: 1px solid var(--if-line);
}
.ph-stat { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; color: var(--if-ink-soft); padding: 0; text-align: start; white-space: nowrap; }
.ph-stat i { font-size: 15px; width: 18px; text-align: center; }
.ph-stat b { font-size: 14px; color: var(--if-ink); }
.ph-stat span { font-family: var(--if-font-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
.ph-stat:hover b, .ph-stat:hover i { color: var(--if-accent); }
/* modo oscuro nocturno: la ficha de usuario a fondo NEGRO, de borde a borde */
html[data-mode="dark"] #main > .profile-head {
  background: #000;
  margin-inline: calc(-1 * var(--if-gutter)); padding-inline: var(--if-gutter);
}
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pfx-grid-gap, 0px); }
.grid img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; }
/* celda del grid: portada + icono si el post tiene varias fotos */
.grid-cell { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; border-radius: var(--pfx-radius, 0); }
.grid-cell img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; }
.grid-multi { position: absolute; top: 6px; inset-inline-end: 6px; color: #fff; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; }
.pf-grid-mosaic .grid-cell { aspect-ratio: auto; height: 100%; min-height: 110px; }
.pf-grid-polaroid .grid-cell { aspect-ratio: 1; }

/* ---------- secciones (zona de usuario / listas) ---------- */
.section { border: 1px solid var(--if-line); margin-bottom: 14px; }
.section-title {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--if-ink-soft);
  padding: 12px 14px 0;
}
.section-body { padding: 12px 14px 14px; }
.section-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--if-line-soft);
  cursor: pointer; font-size: 13px;
}
.section-row:hover { background: var(--if-bg-soft); }
.section-row i { font-size: 15px; color: var(--if-ink-soft); width: 20px; text-align: center; }
.section-row .grow { flex: 1; }
.section-row .chev { color: var(--if-ink-soft); opacity: .5; font-size: 12px; }
html[dir="rtl"] .section-row .chev { transform: rotate(180deg); }

/* ---------- estados vacíos / placeholders ---------- */
.empty {
  text-align: center; color: var(--if-ink-soft);
  padding: 60px 20px; font-size: 13px;
}
.empty i { font-size: 28px; display: block; margin-bottom: 12px; opacity: .5; }

/* ---------- búsqueda ---------- */
.search-wrap { padding: 4px 2px 12px; }
.search-input {
  width: 100%; border: 1px solid var(--if-line); border-radius: 0;
  background: var(--if-bg); color: var(--if-ink);
  font-family: var(--if-font-sans); font-size: 14px; padding: 11px 12px; outline: none;
}
.search-input:focus { border-color: var(--if-ink); }
.search-results { display: flex; flex-direction: column; }

/* mención @usuario y #hashtag dentro de captions/comentarios */
.mention, .hashtag { color: var(--if-accent); font-weight: 500; }
/* enlaces en la bio del perfil */
.bio-link { color: var(--if-accent); text-decoration: underline; word-break: break-word; }

/* ---------- notificaciones ---------- */
.notif-list { display: flex; flex-direction: column; }
.notif-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: none; border-bottom: 1px solid var(--if-line-soft);
  text-align: start; cursor: pointer; padding: 12px 4px; color: var(--if-ink);
}
.notif-row:hover { background: var(--if-bg-soft); }
.notif-row.unread { background: var(--if-bg-soft); }
.notif-row.unread::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--if-accent); flex: 0 0 auto; margin-inline-start: 2px;
}
.notif-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.notif-body b { font-weight: 600; }
.notif-time { display: block; font-family: var(--if-font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--if-ink-soft); margin-top: 2px; }
.notif-thumb { width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--if-line); flex: 0 0 auto; }
.notif-typeicon { font-size: 18px; color: var(--if-ink-soft); width: 44px; text-align: center; flex: 0 0 auto; }

/* separador con etiqueta entre secciones de "Mi cuenta" (cuenta/apariencia/tema) */
.settings-sep {
  display: flex; align-items: center; gap: 10px; margin: 26px 2px 8px;
  color: var(--if-ink-soft); font-family: var(--if-font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.settings-sep::before, .settings-sep::after { content: ""; flex: 1; height: 1px; background: var(--if-line); }

/* ---------- modal ---------- */
/* z-index 270: por ENCIMA del modal de post (250), visor de stories (250) y hoja de
   reels (260), para que los menús/diálogos abiertos desde ellos no queden detrás. */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 270; padding: 16px; }
.modal-box {
  background: var(--if-bg); border: 1px solid var(--if-ink); width: 100%; max-width: 420px; padding: 22px;
  /* en móvil el contenido (editor de texto, recorte) puede ser más alto que la
     pantalla → scroll interno para SIEMPRE alcanzar los botones (Guardar). */
  max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
}
.modal-box h3 { font-family: var(--if-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
.modal-box .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* ---------- ⭐ temas VIP de perfil (solo dentro de @usuario) ---------- */
.profile-themed {
  background: var(--pf-bg);
  color: var(--pf-text);
  font-family: var(--pf-font);
}
.profile-themed .profile-head,
.profile-themed .ph-bio, .profile-themed .ph-stats { border-color: color-mix(in srgb, var(--pf-text) 15%, transparent); }
.profile-themed .ph-avatar h2, .profile-themed .ph-stat b { color: var(--pf-text); }
.profile-themed .ph-stat, .profile-themed .ph-stat span, .profile-themed .ph-stat i { color: color-mix(in srgb, var(--pf-text) 55%, transparent); }
.profile-themed .avatar { border-color: var(--pf-accent); color: var(--pf-accent); background: transparent; }
.profile-themed .btn { border-color: var(--pf-accent); color: var(--pf-accent); background: transparent; }
.profile-themed .btn-primary { background: var(--pf-accent); color: var(--pf-bg); }
.profile-themed .btn-primary:hover { background: transparent; color: var(--pf-accent); }
.profile-themed .empty { color: color-mix(in srgb, var(--pf-text) 55%, transparent); }

/* grids alternativos */
.pf-grid-mosaic .grid { grid-auto-rows: 1fr; grid-auto-flow: dense; }
.pf-grid-mosaic .grid img, .pf-grid-mosaic .grid .th-ph { aspect-ratio: auto; height: 100%; min-height: 110px; object-fit: cover; }
.pf-grid-mosaic .grid > *:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.pf-grid-polaroid .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 6px 2px; }
.pf-grid-polaroid .grid img, .pf-grid-polaroid .grid .th-ph {
  border: 7px solid #fff; border-bottom-width: 26px;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  transform: rotate(-1.5deg);
}
.pf-grid-polaroid .grid > *:nth-child(2n) { transform: rotate(1.5deg); }

/* Isotope / masonry (motor JS, ver js/modules/grids.js). Isotope posiciona en
   absoluto, así que el contenedor deja de ser CSS grid; 3 columnas al 33.33% y
   alturas NATURALES (usa la imagen _f.jpg, no la miniatura cuadrada). */
.pf-grid-isotope .grid { display: block; gap: 0; }
.pf-grid-isotope .grid-cell { width: 33.333%; aspect-ratio: auto; height: auto; float: left; }
.pf-grid-isotope .grid-cell img { width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; }
/* preview del editor: placeholders con alturas variadas para que se vea el masonry */
.pf-grid-isotope .th-ph { width: 33.333%; }
.pf-grid-isotope .th-ph:nth-child(3n+1) { height: 130px; }
.pf-grid-isotope .th-ph:nth-child(3n+2) { height: 84px; }
.pf-grid-isotope .th-ph:nth-child(3n)   { height: 158px; }

/* editor de tema */
.theme-colors { display: flex; gap: 10px; }
.theme-colors label {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--if-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.theme-colors input[type=color] {
  width: 100%; height: 40px; padding: 2px;
  border: 1px solid var(--if-line); border-radius: 0; background: var(--if-bg); cursor: pointer;
}
.th-ph { width: 100%; aspect-ratio: 1; }

/* ---------- barra de progreso de subida ---------- */
.upbar {
  position: relative; height: 22px;
  border: 1px solid var(--if-ink);
  margin-bottom: 12px; overflow: hidden;
}
.upbar-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--if-accent);
  transition: width 200ms var(--if-ease);
}
.upbar-txt {
  position: relative; display: block; text-align: center;
  font-family: var(--if-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 22px; color: var(--if-ink); mix-blend-mode: difference; color: #fff;
}

/* ---------- panel admin ---------- */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.stat {
  border: 1px solid var(--if-line); padding: 10px 6px; text-align: center;
}
.stat b { display: block; font-size: 17px; }
.stat span {
  font-family: var(--if-font-mono); font-size: 8px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--if-ink-soft);
}

/* ---------- página: cabecera de sección ---------- */
.page-head { padding: 18px 2px 10px; }
.page-head h2 {
  font-family: var(--if-font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- árbol lateral (drawer) — navegación ÚNICA ---------- */
.drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
  width: 300px; max-width: 84vw; z-index: 300;
  background: var(--if-bg);
  border-inline-end: 1px solid var(--if-ink);
  transform: translateX(-102%);
  transition: transform 280ms var(--if-ease);
  display: flex; flex-direction: column; overflow: hidden;
}
html[dir="rtl"] .drawer { transform: translateX(102%); }
.drawer.open { transform: translateX(0); }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 290;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms var(--if-ease);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px calc(16px); padding-top: calc(16px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--if-line);
}
.drawer-head .brand { font-family: var(--if-font-mono); font-size: 15px; letter-spacing: 0.16em; }
.drawer-head-id { display: flex; flex-direction: column; gap: 3px; }
.drawer-head-id b { font-size: 14px; }
.drawer-close {
  margin-inline-start: auto; background: transparent; border: none;
  color: var(--if-ink-soft); font-size: 18px; cursor: pointer; padding: 4px;
}
.drawer-close:hover { color: var(--if-ink); }
.drawer-body { flex: 1; overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.drawer-foot {
  flex: 0 0 auto; border-top: 1px solid var(--if-line);
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
}
.drawer-section { border-bottom: 1px solid var(--if-line-soft); }
.drawer-section:last-child { border-bottom: none; }
.drawer-section-title {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--if-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--if-ink-soft);
  padding: 14px 18px; text-align: start;
}
.drawer-section-title .caret { transition: transform 240ms var(--if-ease); font-size: 11px; }
.drawer-section.expanded .drawer-section-title .caret { transform: rotate(180deg); }
/* acordeón: plegado por defecto, despliegue suave */
.drawer-group-items {
  max-height: 0; overflow: hidden;
  transition: max-height 320ms var(--if-ease);
}
.drawer-section.expanded .drawer-group-items { max-height: 420px; }
.drawer-section .drawer-item { padding-block: 9px; }
.drawer-item {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: transparent; border: none; cursor: pointer;
  padding: 11px 18px; font-size: 14px; color: var(--if-ink);
  text-align: start; border-inline-start: 3px solid transparent;
}
.drawer-item i { font-size: 17px; width: 22px; text-align: center; color: var(--if-ink-soft); }
.drawer-item:hover { background: var(--if-bg-soft); }
.drawer-item.active {
  border-inline-start-color: var(--if-accent);
  background: var(--if-bg-soft); font-weight: 600;
}
.drawer-item.active i { color: var(--if-accent); }

/* riel: barra vertical estrecha de iconos (estado intermedio) */
.drawer-rail {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 295;
  width: 54px;
  background: var(--if-bg);
  border-inline-end: 1px solid var(--if-ink);
  display: none; flex-direction: column; align-items: center;
  padding: calc(8px + env(safe-area-inset-top)) 0 calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-102%);
  transition: transform 260ms var(--if-ease);
}
html[dir="rtl"] .drawer-rail { transform: translateX(102%); }
.drawer-rail.show { display: flex; transform: translateX(0); }
.rail-items { flex: 1; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; overflow-y: auto; }
.rail-item {
  width: 44px; height: 44px; border: 1px solid transparent; border-radius: 0;
  background: transparent; color: var(--if-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.rail-item:hover { border-color: var(--if-ink); }
.rail-item.active { color: var(--if-accent); border-color: var(--if-accent); }
.rail-top { border-bottom: 1px solid var(--if-line); }
.rail-x { color: var(--if-error); border-top: 1px solid var(--if-line); }
/* opener flotante (reabrir el lateral cuando está cerrado) — solo escritorio */
#menu-fab { display: none; position: fixed; top: 12px; inset-inline-start: 12px; z-index: 85; width: 40px; height: 40px; background: var(--if-bg); border: 1px solid var(--if-line); color: var(--if-ink); cursor: pointer; align-items: center; justify-content: center; font-size: 18px; }
#menu-fab:hover { border-color: var(--if-ink); }

/* ---------- editor de caption en la subida ---------- */
.mini-label { display: block; font-family: var(--if-font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--if-ink-soft); margin-bottom: 5px; }
.cap-toggle {
  width: 100%; background: transparent; border: 1px dashed var(--if-line);
  color: var(--if-ink-soft); cursor: pointer; padding: 9px;
  font-family: var(--if-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px;
}
.cap-toggle:hover { border-color: var(--if-ink); color: var(--if-ink); }
.cap-toggle.open { border-style: solid; border-color: var(--if-accent); color: var(--if-accent); }
.cap-editor { margin-bottom: 14px; }
.cap-preview {
  position: relative; width: 100%; aspect-ratio: 1.4; max-height: 60vh; margin-bottom: 12px;
  background: #0a0a0a center/cover no-repeat;  /* cover + ratio real = sin franjas */
  border: 1px solid var(--if-line); overflow: hidden;
}
.cap-controls { display: flex; flex-direction: column; gap: 10px; }
.cap-grp { display: flex; align-items: center; gap: 10px; }
.cap-grp > label { width: 78px; flex-shrink: 0; font-family: var(--if-font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--if-ink-soft); }
.cap-grp .seg { flex: 1; }
.cap-grp .seg-tone { flex: 0 0 auto; }
/* swatch de color pequeño (no a todo el ancho) */
.color-swatch { width: 42px; height: 30px; padding: 0; border: 1px solid var(--if-line); border-radius: 0; background: none; cursor: pointer; flex: 0 0 auto; }
.cap-grp .font-select { flex: 1; min-width: 0; border: 1px solid var(--if-line); border-radius: 0; background: var(--if-bg); color: var(--if-ink); font-size: 13px; padding: 7px 8px; }
.cap-grp .num-input { width: 70px; border: 1px solid var(--if-line); border-radius: 0; background: var(--if-bg); color: var(--if-ink); font-size: 13px; padding: 7px 8px; }
.cap-grp .unit { font-family: var(--if-font-mono); font-size: 9px; color: var(--if-ink-soft); }

/* galería ordenable al subir (miniaturas con ‹ ✕ ›) */
.up-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; }
.up-thumbs:empty { display: none; }
.up-thumb { position: relative; flex: 0 0 auto; width: 72px; }
.up-thumb img { width: 72px; height: 72px; object-fit: cover; display: block; border: 1px solid var(--if-line); }
.up-cover { position: absolute; top: 0; inset-inline-start: 0; background: var(--if-ink); color: var(--if-bg); font-family: var(--if-font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; }
.up-thumb-ops { display: flex; justify-content: space-between; margin-top: 4px; }
.up-thumb-ops button { flex: 1; background: var(--if-bg); border: 1px solid var(--if-line); color: var(--if-ink); cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 0; }
.up-thumb-ops button:hover { background: var(--if-ink); color: var(--if-bg); }
.up-thumb-ops button:disabled { opacity: .3; cursor: default; }
.up-thumb-ops button:disabled:hover { background: var(--if-bg); color: var(--if-ink); }
.up-thumb-ops .up-del:hover { background: var(--if-error); border-color: var(--if-error); color: #fff; }
.cap-grp input[type=range] { flex: 1; }
.cap-grp b { font-family: var(--if-font-mono); font-size: 11px; min-width: 40px; text-align: end; }
.cap-hint { font-size: 11px; color: var(--if-ink-soft); line-height: 1.6; padding: 8px 0 0; }
.cap-hint code { background: var(--if-bg-soft); padding: 1px 5px; font-family: var(--if-font-mono); font-size: 10px; }
/* ayuda de marcado bajo el propio campo de texto */
.cap-markup { display: block; padding: 6px 2px 0; }

/* ---------- toasts (mensajes del sistema) ---------- */
.toast-host {
  position: fixed; left: 0; right: 0; bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding: 0 12px;
}
.toast {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 90%; padding: 11px 16px;
  background: var(--if-ink); color: var(--if-bg);
  border-inline-start: 4px solid var(--if-success);
  font-size: 13px; font-weight: 500;
  transform: translateY(16px); opacity: 0;
  transition: transform 240ms var(--if-ease), opacity 240ms var(--if-ease);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast i { font-size: 16px; }
.toast-ok { border-inline-start-color: var(--if-success); }
.toast-ok i { color: #4ade80; }
.toast-error { border-inline-start-color: var(--if-error); }
.toast-error i { color: #f87171; }

/* mensaje inline bajo una funcionalidad */
.inline-msg { padding: 9px 12px; font-size: 13px; margin-bottom: 12px; border-inline-start: 3px solid; }
.inline-ok { color: var(--if-success); border-color: var(--if-success); background: color-mix(in srgb, var(--if-success) 8%, transparent); }
.inline-error { color: var(--if-error); border-color: var(--if-error); background: color-mix(in srgb, var(--if-error) 8%, transparent); }

/* ---------- avatar: editor avanzado ---------- */
.av-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.av-label { font-family: var(--if-font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--if-ink-soft); }
.av-dark-bg { background: #121212; padding: 8px; }
.cropper { width: 280px; max-width: 100%; height: 280px; margin: 0 auto 12px; overflow: hidden; border: 1px solid var(--if-ink); position: relative; touch-action: none; }
.cropper canvas { display: block; cursor: grab; }
.cropper canvas:active { cursor: grabbing; }
.demo-photo { width: 100%; aspect-ratio: 1.2; background: linear-gradient(135deg, #f0c, #09f); }

/* ---------- follows como página ---------- */
.follow-tabs { display: flex; border-bottom: 1px solid var(--if-line); margin-bottom: 4px; }
.ftab {
  flex: 1; background: transparent; border: none; cursor: pointer;
  padding: 12px; font-family: var(--if-font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--if-ink-soft);
  border-bottom: 2px solid transparent;
}
.ftab.active { color: var(--if-active); border-bottom-color: var(--if-accent); }

/* ---------- apariencia (modo + tinte) ---------- */
.seg { display: flex; border: 1px solid var(--if-ink); }
.seg-btn {
  flex: 1; background: var(--if-bg); color: var(--if-ink);
  border: none; border-inline-end: 1px solid var(--if-line); cursor: pointer;
  padding: 12px 6px; font-family: var(--if-font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.seg-btn:last-child { border-inline-end: none; }
.seg-btn.active { background: var(--if-active); color: var(--if-bg); }
.tint-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tint-swatch {
  width: 40px; height: 40px; border: 2px solid var(--if-line); border-radius: 50%;
  cursor: pointer; padding: 0;
}
.tint-swatch.active { border-color: var(--if-accent); box-shadow: 0 0 0 2px var(--if-accent); }
.tint-custom { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-size: 9px; font-family: var(--if-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--if-ink-soft); }
.tint-custom input[type=color] { width: 40px; height: 40px; border: 2px solid var(--if-line); border-radius: 50%; padding: 0; background: none; cursor: pointer; }

/* ---------- FAQ ---------- */
.faq-item .faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; cursor: pointer; text-align: start;
  padding: 14px; font-size: 14px; font-weight: 600; color: var(--if-ink);
}
.faq-item .faq-q .caret { transition: transform 240ms var(--if-ease); color: var(--if-ink-soft); }
.faq-item.open .faq-q .caret { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 300ms var(--if-ease); font-size: 13px; color: var(--if-ink-soft); padding: 0 14px; }
.faq-item.open .faq-a { max-height: 260px; padding-bottom: 14px; }

/* consola de errores dentro del admin */
.dbg-list { max-height: 300px; overflow-y: auto; padding: 0 14px 12px; font: 11px/1.6 var(--if-font-mono); }
.dbg-list .dbg-row { padding: 5px 0; border-bottom: 1px solid var(--if-line-soft); word-break: break-all; }
.dbg-list .dbg-tag { color: var(--if-accent); }
.cfg-list { padding: 0 14px 12px; }
.cfg-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--if-line-soft); font-size: 13px; }
.cfg-row i { font-size: 14px; flex: none; }
.cfg-row .cfg-key { font: 12px/1.4 var(--if-font-mono); min-width: 130px; flex: none; }
.cfg-row .cfg-detail { color: var(--if-ink-soft); word-break: break-word; }
.report-reasons { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; }
.report-reason { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.report-reason:hover { background: var(--if-line-soft); }
.report-reason input { accent-color: var(--if-accent); width: 16px; height: 16px; flex: none; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: var(--if-line); border-radius: 999px; transition: .2s; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--if-ink); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:disabled + .slider { opacity: .5; }

/* ---------- barra inferior ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--if-bg);
  border-top: 1px solid var(--if-line);   /* gris claro/integrado, nunca negro */
  /* primer icono al borde IZQUIERDO, último al DERECHO, con el gutter de las cards */
  display: flex; justify-content: space-between;
  padding: 4px var(--if-gutter) calc(2px + env(safe-area-inset-bottom));
}
.nav-item {
  background: transparent; border: none; cursor: pointer;
  color: var(--if-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 0; padding: 8px 2px; text-decoration: none;
}
/* barra inferior SIN texto: solo iconos, un poco más grandes y centrados */
.bottom-nav .nav-label { display: none; }
.bottom-nav .nav-item i { font-size: 22px; line-height: 1; }
.nav-item.active { color: var(--if-active); }
/* inactivos atenuados para que el activo destaque sin label */
.bottom-nav .nav-item { color: var(--if-ink-soft); position: relative; }
.bottom-nav .nav-item.active { color: var(--if-active); }
/* puntito de aviso (mensajes/notificaciones sin leer) sobre el icono de Menú */
.nav-dot { position: absolute; top: 6px; left: 50%; margin-inline-start: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--if-accent); }
.nav-item .nav-new {
  width: 30px; height: 30px; border: 1px solid var(--if-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--if-ink);
}
.nav-item:hover .nav-new { background: var(--if-ink); color: var(--if-bg); }
/* avatar circular del usuario a la izquierda de la barra */
.nav-av {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--if-line); display: inline-flex; align-items: center; justify-content: center;
}
.nav-av-ini {
  background: var(--if-bg-soft); color: var(--if-ink);
  font-weight: 600; font-size: 13px; text-transform: uppercase;
}
.nav-avatar.active .nav-av { border-color: var(--if-accent); box-shadow: 0 0 0 1.5px var(--if-accent); }

/* ---------- consola debug (admin) ---------- */
.dbg-btn {
  position: fixed; inset-inline-start: 14px; bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 150;
  background: var(--if-bg); color: var(--if-ink);
  border: 1px solid var(--if-ink); border-radius: 0;
  padding: 6px 10px; cursor: pointer;
  font-family: var(--if-font-mono); font-size: 11px; letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 6px;
}
.dbg-btn:hover { background: var(--if-ink); color: var(--if-bg); }
.dbg-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
  max-height: 45vh; overflow: auto;
  background: var(--if-ink); color: #ddd;
  font: 11px/1.6 var(--if-font-mono);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--if-accent);
}
.dbg-panel .dbg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dbg-panel b { color: var(--if-accent); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }
.dbg-panel button {
  background: transparent; border: 1px solid #555; color: #ddd;
  font-family: var(--if-font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 8px; cursor: pointer; margin-inline-start: 8px;
}
.dbg-panel button:hover { border-color: #fff; }
.dbg-panel .dbg-row { padding: 5px 0; border-bottom: 1px solid #2a2a2a; word-break: break-all; }
.dbg-panel .dbg-tag { color: var(--if-accent); }

/* ---------- badge ---------- */
.badge {
  display: inline-block; background: var(--if-bg);
  border: 1px solid var(--if-ink); color: var(--if-ink);
  font-size: 9px; font-weight: 600; padding: 3px 8px;
}
.badge-accent { color: var(--if-accent); border-color: var(--if-accent); }

/* ---------- responsive ---------- */
@media (min-width: 600px) {
  .container, .header-inner { max-width: 520px; }
}

/* ---------- menú de creación (Publicación / Reel / Story) ---------- */
.create-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.create-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--if-bg); border: 1px solid var(--if-line); cursor: pointer;
  padding: 14px 16px; text-align: start; color: var(--if-ink);
}
.create-opt:hover { border-color: var(--if-ink); background: var(--if-bg-soft); }
.create-opt > i:first-child { font-size: 22px; width: 26px; text-align: center; color: var(--if-accent); }
.create-opt-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.create-opt-txt b { font-size: 13px; }
.create-opt-txt small { font-size: 11px; color: var(--if-ink-soft); }
.create-opt-go { font-size: 13px; color: var(--if-ink-soft); }
html[dir="rtl"] .create-opt-go { transform: scaleX(-1); }

/* ---------- avisos legales ---------- */
.legal-wrap { padding: 4px 4px 24px; max-width: 680px; }
.legal-intro { color: var(--if-ink-soft); margin-bottom: 16px; line-height: 1.5; }
.legal-block { margin-bottom: 14px; }
.legal-block h3 { font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.legal-block p { line-height: 1.55; color: var(--if-ink); }
.legal-foot { color: var(--if-ink-soft); font-size: 11px; margin-top: 18px; }

/* ============================================================
   NAVEGACIÓN RESPONSIVA (15/06/2026)
   - Móvil: barra inferior + menú overlay (el riel se retiró).
   - Escritorio (≥900px): menú lateral FIJO con las secciones desplegadas,
     SIN barra inferior ni riel (patrón de escritorio, no duplica la barra).
   ============================================================ */
@media (min-width: 900px) {
  /* sin barra inferior: el lateral ES la navegación (abierto / cerrado).
     Las SECCIONES de dentro se pliegan con el acordeón normal (no las fijamos). */
  .bottom-nav { display: none !important; }
  .drawer-backdrop { display: none !important; }     /* nunca oscurecer en escritorio */
  body { padding-bottom: 0; }
  body.menu-open { padding-inline-start: 240px; }    /* el contenido deja sitio al lateral */
  .drawer { width: 240px; max-width: 240px; z-index: 80; border-inline-end: 1px solid var(--if-line); }
  /* opener flotante (☰) cuando el lateral está cerrado */
  body:not(.menu-open) #menu-fab { display: inline-flex; }
}

/* ============================================================
   SCROLLBARS finos y minimalistas (15/06/2026)
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--if-line) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--if-line); border-radius: 6px; border: 2px solid var(--if-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--if-ink-soft); }
html[data-mode="dark"] ::-webkit-scrollbar-thumb { border-color: var(--if-bg); }

/* ---------- modal de compartir (enviar a un usuario) ---------- */
.share-send { display: flex; gap: 8px; align-items: center; }
.share-send input { flex: 1; min-width: 0; border: 1px solid var(--if-line); border-radius: 0; padding: 9px 12px; font-size: 13px; background: var(--if-bg); color: var(--if-ink); }
.share-send .btn { flex: 0 0 auto; }

/* ---------- selectores de color del modo oscuro (fondo / texto) ---------- */
.dark-colors { display: flex; gap: 12px; margin-top: 14px; }
.dark-color { display: flex; align-items: center; gap: 8px; flex: 1; border: 1px solid var(--if-line); padding: 8px 10px; }
.dark-color span { font-family: var(--if-font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--if-ink-soft); }
.dark-color input[type="color"] { margin-inline-start: auto; width: 30px; height: 24px; border: none; background: none; padding: 0; cursor: pointer; }

/* ============================================================
   MODAL de post (lightbox tipo Instagram): foto izq + info/comentarios der
   ============================================================ */
.post-modal { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 24px; }
.post-modal-x { position: fixed; top: 14px; inset-inline-end: 18px; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; z-index: 2; padding: 6px; }
.pm-box { display: flex; background: var(--if-bg); max-width: 1040px; width: 100%; max-height: 90vh; overflow: hidden; }
.pm-photo { flex: 1 1 58%; min-width: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.pm-img { max-height: 90vh; max-width: 100%; object-fit: contain; }
.pm-side { flex: 0 0 360px; max-width: 360px; display: flex; flex-direction: column; min-height: 0; border-inline-start: 1px solid var(--if-line); }
.pm-side.card { margin: 0; }
.pm-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--if-line); flex: 0 0 auto; }
.pm-head .username { font-weight: 600; cursor: pointer; }
.pm-head .dots { margin-inline-start: auto; background: none; border: 0; color: var(--if-ink); cursor: pointer; font-size: 16px; padding: 4px; }
.pm-scroll { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; min-height: 0; }
.pm-actions { flex: 0 0 auto; padding: 8px 14px 6px; border-top: 1px solid var(--if-line); }
.pm-actions.actions { padding-top: 8px; }
.pm-time { padding: 0; }
.pm-form { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--if-line); padding: 6px 14px; flex: 0 0 auto; }
.pm-form input { flex: 1; border: none; background: transparent; color: var(--if-ink); font-size: 13px; outline: none; padding: 9px 0; }
.pm-form button { background: none; border: 0; color: var(--if-accent); font-weight: 600; cursor: pointer; font-size: 13px; padding: 0 4px; }
@media (max-width: 760px) {
  .post-modal { padding: 0; }
  .post-modal-x { color: #fff; top: 10px; inset-inline-end: 12px; }
  .pm-box { flex-direction: column; max-height: 100vh; height: 100%; }
  .pm-photo { flex: 0 0 auto; max-height: 46vh; }
  .pm-img { max-height: 46vh; }
  .pm-side { flex: 1 1 auto; max-width: none; border-inline-start: none; border-top: 1px solid var(--if-line); }
}

/* ---------- hover card de perfil (al pasar el ratón por un @usuario) ---------- */
.hovercard { position: fixed; z-index: 300; width: 320px; background: var(--if-bg); border: 1px solid var(--if-line); box-shadow: 0 10px 34px rgba(0,0,0,.18); padding: 14px; }
/* cabecera del hover card: avatar+nombre | línea gris | stats verticales con iconos
   (mismo patrón que la ficha de usuario) */
.hc-top { display: flex; align-items: stretch; margin-bottom: 14px; }
.hc-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; padding-inline-end: 12px; }
.hc-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-id b { font-size: 14px; }
.hc-id span { font-size: 12px; color: var(--if-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-stats { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-inline-start: 12px; border-inline-start: 1px solid var(--if-line); }
.hc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 14px; }
.hc-cell { aspect-ratio: 1; overflow: hidden; cursor: pointer; background: var(--if-bg-soft); }
.hc-cell img { width: 100%; height: 100%; object-fit: cover; }
.hc-actions { display: flex; gap: 8px; }
.hc-actions .btn { flex: 1; }

/* ---------- hoja de COMPARTIR (tipo Instagram) ---------- */
.share-box { padding: 0; max-width: 460px; width: 100%; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.share-head { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px; border-bottom: 1px solid var(--if-line); }
.share-head h3 { margin: 0; }
.share-x { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--if-ink); font-size: 16px; cursor: pointer; padding: 4px; }
html[dir="rtl"] .share-x { left: auto; right: 12px; }
.share-search { display: flex; align-items: center; gap: 8px; margin: 12px 14px; padding: 8px 12px; background: var(--if-bg-soft); border-radius: 8px; }
.share-search i { color: var(--if-ink-soft); }
.share-search input { flex: 1; border: none; background: none; outline: none; color: var(--if-ink); font-size: 14px; }
.share-users { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; padding: 6px 14px 14px; }
.share-user { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border-radius: 8px; }
.share-user:hover { background: var(--if-bg-soft); }
.share-user .avatar-img, .share-user .avatar { width: 60px; height: 60px; }
.share-user span { font-size: 11px; color: var(--if-ink); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-user.sent { opacity: .55; }
.share-user.sent span { color: var(--if-success); }
.share-ext { display: flex; gap: 16px; overflow-x: auto; padding: 14px; border-top: 1px solid var(--if-line); scrollbar-width: none; }
.share-ext::-webkit-scrollbar { display: none; }
.share-ext-btn { flex: 0 0 auto; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--if-ink); }
.share-ext-btn .se-ic { width: 50px; height: 50px; border-radius: 50%; background: var(--if-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.share-ext-btn small { font-size: 11px; color: var(--if-ink-soft); white-space: nowrap; }
@media (max-width: 480px) { .share-users { grid-template-columns: repeat(3, 1fr); } }

/* ---------- popover de Colecciones (guardar tipo Instagram) ---------- */
.coll-pop { position: fixed; z-index: 300; width: 300px; max-height: 360px; background: var(--if-bg); border: 1px solid var(--if-line); box-shadow: 0 10px 34px rgba(0,0,0,.18); display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.coll-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--if-line); }
.coll-head b { font-size: 14px; }
.coll-newbtn { background: none; border: 0; color: var(--if-ink); cursor: pointer; font-size: 16px; padding: 2px; }
.coll-list { overflow-y: auto; padding: 6px; }
.coll-row { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 7px 8px; text-align: start; color: var(--if-ink); border-radius: 8px; }
.coll-row:hover { background: var(--if-bg-soft); }
.coll-thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 6px; background: var(--if-bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--if-ink-soft); font-size: 17px; }
.coll-thumb img { width: 100%; height: 100%; object-fit: cover; }
.coll-row .grow { font-size: 14px; }
.coll-row small { color: var(--if-ink-soft); font-size: 12px; }
.coll-new-row input { border: none; background: none; outline: none; font-size: 14px; color: var(--if-ink); }
.coll-create { background: none; border: 0; color: var(--if-accent); cursor: pointer; font-size: 16px; }

/* ---------- gestor de Colecciones (Guardados ampliado) ---------- */
.saved-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.back-link { cursor: pointer; margin-inline-end: 6px; }
.coll-cards { display: flex; flex-direction: column; gap: 10px; }
.coll-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--if-line); padding: 10px; background: var(--if-bg); width: 100%; text-align: start; cursor: default; }
button.coll-card { cursor: pointer; }
.cc-cover { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--if-bg-soft); display: flex; align-items: center; justify-content: center; color: var(--if-ink-soft); font-size: 24px; position: relative; cursor: pointer; }
.cc-cover img { width: 100%; height: 100%; object-fit: cover; }
.cc-count { position: absolute; bottom: 3px; inset-inline-end: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 8px; }
.cc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.cc-name { font-weight: 600; font-size: 14px; }
.cc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-tag { font-size: 10px; background: var(--if-bg-soft); border: 1px solid var(--if-line); color: var(--if-ink-soft); padding: 1px 7px; border-radius: 10px; }
.cc-note { font-size: 12px; color: var(--if-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-note-full { font-size: 13px; color: var(--if-ink-soft); margin: 0 2px 12px; line-height: 1.5; }
.cc-ops { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.cc-ops button { background: none; border: 0; color: var(--if-ink-soft); cursor: pointer; font-size: 14px; padding: 5px; }
.cc-ops button:hover:not(:disabled) { color: var(--if-ink); }
.cc-ops button:disabled { opacity: .3; cursor: default; }

/* nota de política bajo el formulario de registro */
.auth-note { font-size: 11px; color: var(--if-ink-soft); line-height: 1.5; margin-top: 12px; }