/* ─────────────────────────────────────────────
   Cognify Network — hoja de estilos
   Paleta: azul marino + rojo quemado + negro, mucho blanco — elegante y minimalista
   Tipografía: Fraunces (display) + IBM Plex Sans (UI) + IBM Plex Mono (datos)
───────────────────────────────────────────── */

:root {
  --ink-900: #0f1b33;
  --ink-800: #14213d;
  --ink-700: #1f2f52;
  --ink-600: #33456e;
  --black: #0a0a0b;
  --paper-100: #f5f4f2;
  --paper-050: #ffffff;
  --line: #e4e2df;
  --accent-500: #9c3a2c;
  --accent-600: #7c2c21;
  --accent-100: #f4e5e1;
  --green-600: #3a7d55;
  --red-600: #c0392b;
  --text-primary: var(--ink-900);
  --text-secondary: #5b5b60;
  --text-on-dark: #f5f4f2;
  --surface: var(--paper-050);
  --surface-raised: #ffffff;
  --border: var(--line);
  --accent: var(--accent-500);
  --accent-strong: var(--accent-600);
  --toast-bg: var(--ink-900);
  --toast-text: var(--paper-050);
  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --radius: 14px;
  --shadow-card: 0 1px 2px rgba(15, 27, 51, 0.06), 0 8px 24px -12px rgba(15, 27, 51, 0.18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-primary: #f1efec;
    --text-secondary: #a8a7ad;
    --surface: #0a0f1c;
    --surface-raised: #131f38;
    --border: #283251;
    --text-on-dark: #f1efec;
    --toast-bg: #223049;
    --toast-text: #f1efec;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --text-primary: #f1efec;
  --text-secondary: #a8a7ad;
  --surface: #0a0f1c;
  --surface-raised: #131f38;
  --border: #283251;
  --text-on-dark: #f1efec;
  --toast-bg: #223049;
  --toast-text: #f1efec;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.4em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 0.8em; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
.label-caps {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* ── Layout ── */
#app { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.5rem;
  background: var(--ink-800);
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--ink-700);
}
.topbar .brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  display: flex; align-items: center; gap: 0.5rem;
  text-decoration: none;
  color: var(--text-on-dark);
}
.topbar .brand .brand-logo { width: 34px; height: 34px; object-fit: contain; }
.topbar nav { display: flex; gap: 0.25rem; align-items: center; }
.topbar nav a, .topbar nav button {
  color: var(--text-on-dark);
  background: transparent;
  border: none;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  cursor: var(--cg-cur-p, pointer);
  font-size: 0.9rem;
  text-decoration: none;
  opacity: 0.82;
}
.topbar nav a.active, .topbar nav a:hover, .topbar nav button:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.topbar .badge {
  background: var(--accent);
  color: var(--text-on-dark);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.3rem;
}

main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
.view { animation: fade-in 0.18s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.site-footer {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.82rem;
}
.site-footer .footer-logo { width: 20px; height: 20px; object-fit: contain; opacity: 0.85; }
.site-footer .footer-sep { opacity: 0.5; }
.site-footer a { color: var(--text-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 480px) { .site-footer .footer-desc { display: none; } .site-footer .footer-desc + .footer-sep { display: none; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

/* ── Cards / surfaces ── */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.4rem;
}
.card + .card { margin-top: 1rem; }

/* ── Forms ── */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.field .hint { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.3rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
textarea, select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-primary);
}
textarea { resize: vertical; min-height: 5em; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}
.chip-input { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--accent-100); color: var(--ink-800);
  border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.8rem;
}
.chip button { background: none; border: none; cursor: var(--cg-cur-p, pointer); color: var(--ink-700); font-weight: 700; padding: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: var(--cg-cur-p, pointer);
  text-decoration: none;
  background: var(--ink-800);
  color: var(--text-on-dark);
}
.btn:hover { background: var(--ink-700); }
.btn.primary { background: var(--accent); color: var(--text-on-dark); }
.btn.primary:hover { background: var(--accent-strong); }
.btn.ghost { background: transparent; color: var(--text-primary); border-color: var(--border); }
.btn.ghost:hover { background: var(--accent-100); }
.btn.ghost-on-dark { background: transparent; color: var(--text-on-dark); border-color: rgba(245,244,242,0.4); }
.btn.ghost-on-dark:hover { background: rgba(245,244,242,0.12); border-color: rgba(245,244,242,0.65); }
.btn.danger { background: transparent; color: var(--red-600); border-color: var(--red-600); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.small { padding: 0.4rem 0.85rem; font-size: 0.82rem; }

/* ── Auth screens ── */
.auth-shell {
  max-width: 960px; margin: 1.5rem auto 3rem;
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface-raised);
}
.auth-hero {
  position: relative;
  background:
    radial-gradient(circle at 15% 12%, rgba(156,58,44,0.3), transparent 45%),
    linear-gradient(160deg, var(--black), var(--ink-900) 55%, var(--ink-700));
  color: var(--text-on-dark);
  padding: 3rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
  overflow: hidden;
}
.auth-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/images/hero-entrepreneurs.jpg') center 30% / cover no-repeat;
  opacity: 0.16;
  filter: grayscale(1) contrast(1.1) brightness(1.15);
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero .hero-badge {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--paper-050);
  border-radius: 999px;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  width: fit-content;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.auth-hero .hero-badge img { width: 34px; height: 34px; object-fit: contain; display: block; }
.auth-hero .hero-badge span { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); font-size: 1.05rem; }
.auth-hero h1 { font-size: 1.9rem; line-height: 1.15; color: var(--text-on-dark); }
.auth-hero p.lead { color: rgba(241,237,225,0.82); font-size: 0.98rem; max-width: 34ch; }
.auth-hero .hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.2rem; }
.auth-hero .hero-features { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.6rem; }
.auth-hero .hero-features li {
  list-style: none;
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: 0.88rem; color: rgba(241,237,225,0.92);
}
.auth-hero .hero-features .num {
  font-family: var(--font-mono);
  color: var(--accent-500);
  font-weight: 600;
  flex-shrink: 0;
}
.auth-form-side {
  position: relative;
  display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem;
  background: var(--surface-raised);
  overflow: hidden;
}
.auth-form-side::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/images/hero-entrepreneurs.jpg') center 30% / cover no-repeat;
  opacity: 0.07;
  filter: grayscale(1) contrast(1.05);
  pointer-events: none;
}
:root:not([data-theme="light"]) .auth-form-side::before { opacity: 0.1; }
.auth-form-side .card { position: relative; z-index: 1; border: none; box-shadow: none; padding: 0; width: 100%; max-width: 360px; }
.auth-switch { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--text-secondary); }
.auth-switch button { background: none; border: none; color: var(--text-primary); text-decoration: underline; cursor: var(--cg-cur-p, pointer); font-weight: 600; }
@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; margin: 0 0 1.5rem; border-radius: 0; }
  .auth-hero { padding: 2.4rem 1.5rem; }
  .auth-hero .hero-features { display: none; }
}

/* ── Auth: idioma, términos y tema (registro) ── */
.auth-tema-toggle { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; }
.lang-choice-row { display: flex; gap: 0.7rem; }
.lang-choice {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: var(--cg-cur-p, pointer);
  transition: border-color 0.15s;
}
.lang-choice input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.lang-choice .lc-title { font-weight: 600; font-size: 0.88rem; display: flex; align-items: center; gap: 0.45rem; }
.lang-choice .lc-title::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--border); flex-shrink: 0; box-sizing: border-box;
}
.lang-choice.active { border-color: var(--accent-500); }
.lang-choice.active .lc-title::before {
  border-color: var(--accent-500);
  background: radial-gradient(circle, var(--accent-500) 42%, transparent 46%);
}
.lang-choice .lc-desc { font-size: 0.73rem; color: var(--text-secondary); }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); margin: 0.2rem 0 0; }
.checkbox-row input { margin-top: 0.2rem; flex-shrink: 0; }
.auth-legal-links { text-align: right; margin-top: 0.2rem; }
.auth-legal-links a { color: var(--text-secondary); }
@media (max-width: 860px) {
  .auth-tema-toggle { position: static; display: flex; justify-content: flex-end; margin: 0 0 1rem; }
}

/* ── Directory grid ── */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.filters select, .filters input { max-width: 220px; }
.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.profile-card { display: flex; flex-direction: column; gap: 0.6rem; }
.avatar, .avatar-lg, .avatar-sm {
  border-radius: 50%; flex-shrink: 0; overflow: hidden;
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600;
}
.avatar-fallback { background: var(--ink-800); color: var(--text-on-dark); }
.avatar { width: 56px; height: 56px; font-size: 1.3rem; }
.avatar-lg { width: 84px; height: 84px; font-size: 2rem; border: 3px solid var(--surface-raised); }
.avatar-sm { width: 40px; height: 40px; font-size: 1rem; }
.profile-card .name { font-weight: 700; }
.profile-card .headline { color: var(--text-secondary); font-size: 0.85rem; min-height: 2.4em; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag { font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); }
.tag.stage-idea { border-color: var(--accent-500); color: var(--accent-600); }
.tag.stage-mvp { border-color: var(--ink-600); }
.tag.stage-ingresos { border-color: var(--green-600); color: var(--green-600); }
.tag.stage-escalando { border-color: var(--red-600); color: var(--red-600); }

/* ── Profile view ── */
.profile-card-shell { padding: 0; overflow: hidden; }
.cover-banner {
  width: 100%; height: 170px;
  background: linear-gradient(135deg, var(--ink-800), var(--ink-600));
  background-size: cover; background-position: center;
}
.profile-card-body { padding: 1.4rem; }
.profile-header { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.profile-card-shell .profile-header { margin-top: -52px; }
.profile-header .meta { flex: 1; min-width: 200px; padding-top: 0.6rem; }
.section-title { margin-top: 1.6rem; margin-bottom: 0.6rem; }

/* ── Connections list ── */
.conn-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.conn-row:last-child { border-bottom: none; }
.conn-row .info { flex: 1; min-width: 0; }
.conn-row .name { font-weight: 600; }
.conn-row .headline { font-size: 0.82rem; color: var(--text-secondary); }
.conn-actions { display: flex; gap: 0.4rem; }

/* ── Coach panel ── */
.coach-card { background: linear-gradient(135deg, var(--ink-800), var(--ink-700)); color: var(--text-on-dark); }
.coach-card .label-caps { color: var(--accent-100); }
.coach-card textarea { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--text-on-dark); }
.coach-card textarea::placeholder { color: rgba(241,237,225,0.55); }

/* ── Indicador de avance con el coach (verde → rojo) ── */
.coach-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.coach-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.coach-status-dot.green { background: var(--green-600); box-shadow: 0 0 0 3px rgba(58,125,85,0.18); }
.coach-status-dot.yellow { background: #c9891a; box-shadow: 0 0 0 3px rgba(201,137,26,0.18); }
.coach-status-dot.red { background: var(--red-600); box-shadow: 0 0 0 3px rgba(192,57,43,0.18); }

/* ── Utility ── */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-secondary); }
.stack { display: flex; flex-direction: column; gap: 0.9rem; }
.row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 160px; }
.toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-text);
  padding: 0.7rem 1.1rem; border-radius: 999px; font-size: 0.88rem;
  box-shadow: var(--shadow-card); z-index: 50;
  max-width: 90vw;
  border: 1px solid var(--border);
}
.toast.error { background: var(--red-600); }
.spinner {
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: currentColor;
  animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.spinner-mark { width: 40px; height: 40px; object-fit: contain; animation: pulse-mark 1.4s ease-in-out infinite; display: inline-block; }
@keyframes pulse-mark { 0%, 100% { opacity: 0.35; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .spinner-mark { animation: none; opacity: 0.8; } }

/* ── Edición de foto de perfil / portada ── */
.photo-edit-cover {
  position: relative; width: 100%; height: 170px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ink-800), var(--ink-600));
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; justify-content: flex-end;
  margin-bottom: -40px;
}
.photo-edit-avatar-wrap { position: relative; width: 84px; height: 84px; margin-left: 1.4rem; }
.photo-edit-avatar-wrap .avatar-lg { width: 84px; height: 84px; }
.photo-edit-btn {
  position: absolute; bottom: 0.5rem; right: 0.5rem;
  background: rgba(15,27,51,0.72); color: var(--text-on-dark);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.75rem;
  cursor: var(--cg-cur-p, pointer);
}
.photo-edit-btn:hover { background: rgba(15,27,51,0.9); }
.photo-edit-avatar-wrap .photo-edit-btn { inset: auto -6px -6px auto; right: -6px; bottom: -6px; padding: 0.3rem 0.5rem; }
.photo-edit-row { display: flex; align-items: flex-end; gap: 1rem; padding: 0 1.4rem; margin-bottom: 1.4rem; }
.photo-edit-hint { color: var(--text-secondary); font-size: 0.78rem; padding: 0 1.4rem 0.6rem; margin-top: -1rem; }

/* ── Recuperar contraseña (variante de una sola columna) ── */
.auth-shell-solo { grid-template-columns: 1fr; max-width: 420px; }
.auth-shell-solo .auth-form-side { padding: 2.2rem 2rem; }
.auth-forgot { text-align: right; margin: -0.5rem 0 0; }
.auth-forgot a { font-size: 0.85rem; color: var(--text-secondary); text-decoration: underline; }

/* ── Publicaciones (feed y perfil) ── */
.post-compose textarea { min-height: 4em; }
.post-compose-row { display: flex; align-items: center; gap: 0.8rem; }
.post-compose-row .hint { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#post-image-label { cursor: var(--cg-cur-p, pointer); }

.post-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.1rem; margin-bottom: 1rem; }
.post-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.post-head .info { flex: 1; min-width: 0; }
.post-head .name { font-weight: 700; text-decoration: none; }
.post-head .post-date { font-size: 0.78rem; color: var(--text-secondary); }
.post-delete, .comment-delete {
  background: none; border: none; color: var(--text-secondary); cursor: var(--cg-cur-p, pointer);
  font-size: 0.9rem; padding: 0.2rem 0.4rem; border-radius: 6px; flex-shrink: 0;
}
.post-delete:hover, .comment-delete:hover { color: var(--red-600); background: var(--accent-100); }
.post-body { white-space: pre-wrap; }
.post-image { display: block; width: 100%; max-height: 480px; object-fit: contain; border-radius: 10px; margin-bottom: 0.8rem; background: var(--surface); }
.post-actions { display: flex; gap: 1rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.post-like-btn, .post-comment-toggle {
  background: none; border: none; cursor: var(--cg-cur-p, pointer); color: var(--text-secondary);
  font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.4rem;
}
.post-like-btn:hover, .post-comment-toggle:hover { color: var(--text-primary); }
.post-like-btn.liked { color: var(--accent-600); font-weight: 600; }
.post-comments { margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.comment-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.7rem; }
.comment-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.comment-row .info { flex: 1; min-width: 0; }
.comment-row .name { font-weight: 600; font-size: 0.85rem; }
.comment-body { margin: 0.1rem 0 0; font-size: 0.9rem; }
.comment-form { display: flex; gap: 0.5rem; }
.comment-form input { flex: 1; }
.empty-state.small { padding: 0.5rem; font-size: 0.85rem; }

/* ── Panel de administrador ── */
.admin-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.admin-tab {
  background: none; border: none; cursor: var(--cg-cur-p, pointer); padding: 0.6rem 1rem;
  font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid transparent;
}
.admin-tab.active { color: var(--accent-600); border-bottom-color: var(--accent-500); }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table td:nth-child(1), .admin-table td:nth-child(5) { white-space: normal; }
.admin-row-actions { display: flex; gap: 0.4rem; }
.tag.small { font-size: 0.65rem; padding: 0.05rem 0.4rem; }
.admin-posts-list { display: flex; flex-direction: column; gap: 0.8rem; }
.admin-post-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.admin-post-row .info { flex: 1; min-width: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; }
.stat-card { text-align: center; }
.stat-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--accent-600); }
.stat-label { color: var(--text-secondary); font-size: 0.82rem; margin-top: 0.2rem; }

@media (max-width: 640px) {
  .topbar { padding: 0.75rem 1rem; }
  .topbar nav a span.full { display: none; }
  main { padding: 1.2rem 1rem 4rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO — app autenticada (Inicio, Perfil, Coach IA,
   Contactos, Chat, Productos). Todo lo de arriba (login, registro,
   olvidé/restablecer contraseña) queda intacto: usa sus propios
   tokens (--ink-*, --accent, --font-display) y no se toca aquí.
   Estos son tokens NUEVOS y adicionales, con nombres propios para
   no pisar nada de lo existente.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --navy-950: #071d3a;
  --navy-900: #0b294b;
  --navy-800: #0f345c;
  --navy-700: #164070;
  --blue-cognify: #075a96;
  --electric: #3267ff;
  --electric-600: #2952d6;
  --turquoise: #1fb6a8;
  --bg-app: #f6f8fb;
  --app-white: #ffffff;
  --app-gray-050: #fafbfd;
  --app-gray-100: #eef1f6;
  --app-gray-200: #e2e7f0;
  --app-gray-400: #a6b0c3;
  --app-gray-500: #7c8aa0;
  --app-gray-700: #445070;
  --app-text: #10203d;
  --app-text-soft: #5c6a85;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-app-sm: 10px;
  --radius-app: 14px;
  --radius-app-lg: 20px;
  --shadow-app-soft: 0 1px 2px rgba(7, 29, 58, 0.04), 0 10px 28px -14px rgba(7, 29, 58, 0.16);
  --shadow-app-lift: 0 8px 20px -6px rgba(7, 29, 58, 0.22);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --app-bg-dark: #060f21;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-shell {
    --bg-app: #0a1122;
    --app-white: #101a30;
    --app-gray-050: #0c1428;
    --app-gray-100: #16223d;
    --app-gray-200: #202f4f;
    --app-text: #eef1f8;
    --app-text-soft: #9aa8c4;
  }
}
:root[data-theme="dark"] .app-shell {
  --bg-app: #0a1122;
  --app-white: #101a30;
  --app-gray-050: #0c1428;
  --app-gray-100: #16223d;
  --app-gray-200: #202f4f;
  --app-text: #eef1f8;
  --app-text-soft: #9aa8c4;
}

/* ── armazón: sidebar fijo + topbar + contenido ── */
.app-shell {
  min-height: 100vh;
  display: flex;
  background: var(--bg-app);
  color: var(--app-text);
  font-family: var(--font-sans);
}
.app-sidebar {
  flex: 0 0 auto;
  width: 15%;
  min-width: 232px;
  max-width: 288px;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.6rem 1.1rem 1.3rem;
  z-index: 30;
}
.app-sidebar-logo {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.2rem 0.5rem 1.6rem;
  text-decoration: none; color: #fff;
}
.app-sidebar-logo img { width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); }
.app-sidebar-logo span { font-family: var(--font-sans); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; }
.app-sidebar-nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.app-nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.92rem; font-weight: 500;
  border: none; background: transparent; cursor: var(--cg-cur-p, pointer); width: 100%; text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.app-nav-item svg { width: 19px; height: 19px; flex-shrink: 0; stroke: currentColor; }
.app-nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.app-nav-item.active { background: var(--electric); color: #fff; box-shadow: 0 4px 14px -4px rgba(50,103,255,0.65); }
.app-nav-item.logout { margin-top: 0.4rem; color: rgba(255,255,255,0.55); }
.app-nav-item.logout:hover { color: #fff; background: rgba(255,255,255,0.07); }
.app-sidebar-footer {
  margin-top: auto; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}
.app-sidebar-footer svg { width: 100%; max-width: 120px; height: auto; opacity: 0.55; margin: 0 auto 0.7rem; display: block; }
.app-sidebar-footer p {
  font-size: 0.72rem; color: rgba(255,255,255,0.45);
  font-style: italic; line-height: 1.4; margin: 0; padding: 0 0.4rem;
}

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* En la app instalada la barra de estado del telefono —reloj, senal,
   bateria— se dibuja ENCIMA de la pagina: index.html declara
   viewport-fit=cover, asi que el contenido empieza en el pixel cero. La
   barra de pestanas de abajo ya reservaba su hueco con
   env(safe-area-inset-bottom); esta no reservaba el de arriba, y el reloj
   caia justo sobre el logo. En el navegador y en escritorio el inset vale 0,
   asi que esto no cambia nada ahi. */
.app-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  background: var(--app-white);
  border-bottom: 1px solid var(--app-gray-200);
  padding: calc(0.85rem + env(safe-area-inset-top)) 1.8rem 0.85rem;
}
.app-search { flex: 1; max-width: 460px; position: relative; }
.app-search svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: var(--app-gray-500); pointer-events: none; }
.app-search input {
  width: 100%; padding: 0.6rem 0.9rem 0.6rem 2.5rem;
  border-radius: 999px; border: 1px solid var(--app-gray-200);
  background: var(--app-gray-050); color: var(--app-text);
  font-family: var(--font-sans); font-size: 0.88rem;
}
.app-search input:focus { outline: none; border-color: var(--electric); background: var(--app-white); }
.app-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.app-notif-btn { position: relative; background: none; border: none; cursor: var(--cg-cur-p, pointer); padding: 0.3rem; color: var(--app-gray-700); display: flex; }
.app-notif-btn svg { width: 21px; height: 21px; stroke: currentColor; }
.app-notif-badge {
  position: absolute; top: -1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--electric); border: 1.5px solid var(--app-white);
}
/* La foto de perfil abre un menu y nada lo decia: nadie pulsa su propia foto
   esperando opciones. El triangulito debajo es la convencion de siempre para
   "aqui se despliega algo", y va centrado bajo el avatar y no bajo el chip
   entero, porque en escritorio el chip lleva tambien el nombre al lado. */
.app-user-chip { position: relative; display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--app-text); }
.app-user-chip::after {
  content: '';
  position: absolute;
  left: 17px;
  bottom: -5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--red-600);
}
.app-user-chip .avatar-sm { width: 34px; height: 34px; }
.app-user-chip span { font-size: 0.87rem; font-weight: 600; }
.app-content { flex: 1; padding: 1.8rem 2rem 3.5rem; max-width: 1240px; width: 100%; margin: 0 auto; }

/* ── barra inferior móvil ── */
.app-mobile-tabs { display: none; }
@media (max-width: 880px) {
  .app-sidebar { display: none; }
  /* El respiro de abajo reserva sitio para la barra fija de pestanas, que en
     un telefono con notch mide 34px mas de lo que mide aqui. Sin sumar el
     inset, la barra se come los ultimos 34px de CUALQUIER pantalla, no solo
     la del chat. Los laterales son para el apaisado, donde el notch invade
     por el costado. */
  .app-content {
    padding: 1.1rem max(1rem, env(safe-area-inset-right))
             calc(5.2rem + env(safe-area-inset-bottom))
             max(1rem, env(safe-area-inset-left));
  }
  .app-topbar {
    padding: calc(0.7rem + env(safe-area-inset-top))
             max(1rem, env(safe-area-inset-right))
             0.7rem
             max(1rem, env(safe-area-inset-left));
  }
  .app-search { max-width: none; }
  .app-user-chip span { display: none; }
  .app-mobile-tabs {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    background: var(--app-white); border-top: 1px solid var(--app-gray-200);
    padding: 0.5rem 0.4rem calc(0.5rem + env(safe-area-inset-bottom));
  }
  .app-mobile-tabs a, .app-mobile-tabs button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    background: none; border: none; color: var(--app-gray-500); text-decoration: none;
    font-size: 0.62rem; font-family: var(--font-sans); padding: 0.3rem 0; cursor: var(--cg-cur-p, pointer);
  }
  .app-mobile-tabs svg { width: 20px; height: 20px; stroke: currentColor; }
  .app-mobile-tabs a.active { color: var(--electric); }
}

/* ── primitivos reutilizables del sistema nuevo ── */
.app-card {
  background: var(--app-white);
  border: 1px solid var(--app-gray-200);
  border-radius: var(--radius-app);
  box-shadow: var(--shadow-app-soft);
}
.btn-app {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.7rem 1.35rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.88rem;
  cursor: var(--cg-cur-p, pointer); text-decoration: none; white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn-app.electric { background: linear-gradient(135deg, var(--electric), var(--blue-cognify)); color: #fff; box-shadow: 0 6px 16px -6px rgba(50,103,255,0.55); }
.btn-app.electric:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -6px rgba(50,103,255,0.6); }
.btn-app.navy { background: var(--navy-900); color: #fff; }
.btn-app.navy:hover { background: var(--navy-950); }
.btn-app.white { background: #fff; color: var(--navy-900); }
.btn-app.white:hover { background: var(--app-gray-100); }
.btn-app.outline { background: transparent; color: var(--app-text); border-color: var(--app-gray-200); }
.btn-app.outline:hover { background: var(--app-gray-100); }
.btn-app.ghost-electric { background: rgba(50,103,255,0.08); color: var(--electric-600); }
.btn-app.ghost-electric:hover { background: rgba(50,103,255,0.15); }
.btn-app.small { padding: 0.45rem 0.9rem; font-size: 0.8rem; }
.btn-app:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.pill-filter {
  display: inline-flex; align-items: center; padding: 0.45rem 1rem;
  border-radius: 999px; border: 1px solid var(--app-gray-200); background: var(--app-white);
  color: var(--app-text-soft); font-size: 0.83rem; font-weight: 600; cursor: var(--cg-cur-p, pointer);
  font-family: var(--font-sans); white-space: nowrap;
}
.pill-filter.active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.pill-filter:hover:not(.active) { border-color: var(--electric); color: var(--electric-600); }
.app-empty { text-align: center; padding: 3rem 1rem; color: var(--app-text-soft); font-size: 0.92rem; }

/* ═══════════════ Inicio / Home ═══════════════ */
.home-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-app-lg);
  min-height: 320px;
  display: flex; align-items: center;
  padding: 3rem 3.4rem;
  margin-bottom: 2rem;
  background: linear-gradient(120deg, var(--navy-950) 0%, var(--blue-cognify) 62%, var(--electric) 130%);
  color: #fff;
  isolation: isolate;
}
.home-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(120deg, rgba(0,0,0,0.9), transparent 75%);
  opacity: 0.7;
}
.home-hero-figure {
  position: absolute; right: 0; bottom: 0; height: 100%; width: 46%;
  opacity: 0.9; pointer-events: none; z-index: 0;
}
.home-hero-figure svg { width: 100%; height: 100%; }
.home-hero-content { position: relative; z-index: 1; max-width: 620px; }
.home-hero-content h1 {
  font-family: var(--font-sans); font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800; line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 0.7rem;
  text-wrap: balance;
}
.home-hero-content p.subtitle { font-size: 1.05rem; color: rgba(255,255,255,0.86); margin: 0 0 1.6rem; }
.home-hero-concepts { position: absolute; z-index: 1; font-family: var(--font-sans); font-weight: 600; font-size: 0.78rem; color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(6px); padding: 0.35rem 0.85rem; border-radius: 999px; animation: home-float 6s ease-in-out infinite; }
.home-hero-concepts.c1 { top: 14%; right: 8%; animation-delay: 0s; }
.home-hero-concepts.c2 { top: 38%; right: 26%; animation-delay: 0.6s; }
.home-hero-concepts.c3 { top: 62%; right: 6%; animation-delay: 1.2s; }
.home-hero-concepts.c4 { top: 78%; right: 30%; animation-delay: 1.8s; }
.home-hero-concepts.c5 { top: 22%; right: 44%; animation-delay: 2.4s; }
@keyframes home-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .home-hero-concepts { animation: none; } }
@media (max-width: 880px) { .home-hero-figure, .home-hero-concepts { display: none; } .home-hero { padding: 2.2rem 1.6rem; } }

.home-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.2rem; }
@media (max-width: 880px) { .home-quick-grid { grid-template-columns: repeat(2, 1fr); } }
.home-quick-card {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 1.3rem 1.3rem 1.5rem;
  text-decoration: none; color: var(--app-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-app-lift); }
.home-quick-card .icon-wrap {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(50,103,255,0.1); color: var(--electric);
}
.home-quick-card.tone-navy .icon-wrap { background: rgba(11,41,75,0.08); color: var(--navy-900); }
.home-quick-card.tone-turquoise .icon-wrap { background: rgba(31,182,168,0.12); color: var(--turquoise); }
.home-quick-card.tone-blue .icon-wrap { background: rgba(7,90,150,0.1); color: var(--blue-cognify); }
.home-quick-card h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.home-quick-card p { margin: 0; font-size: 0.83rem; color: var(--app-text-soft); line-height: 1.4; }
.home-quick-card .go { margin-top: 0.2rem; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--electric); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem; }
.section-head h2 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 800; margin: 0; }
.section-head a { font-size: 0.85rem; font-weight: 700; color: var(--electric); text-decoration: none; }

.venture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 1000px) { .venture-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .venture-grid { grid-template-columns: 1fr; } }
.venture-card { overflow: hidden; display: flex; flex-direction: column; }
.venture-card .cover {
  height: 132px; background: linear-gradient(135deg, var(--navy-800), var(--electric));
  background-size: cover; background-position: center; position: relative;
}
.venture-card .cover .avatar, .venture-card .cover .avatar-fallback { position: absolute; left: 1rem; bottom: -22px; width: 52px; height: 52px; border: 3px solid var(--app-white); }
.venture-card .body { padding: 1.9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.venture-card .name { font-weight: 700; font-size: 0.95rem; }
.venture-card .headline { font-size: 0.82rem; color: var(--app-text-soft); line-height: 1.4; min-height: 2.3em; }
.venture-card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.6rem; }

/* ═══════════════ Contactos ═══════════════ */
.contacts-filters { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 1.4rem; }
.contacts-filters::-webkit-scrollbar { height: 0; }
.contact-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--app-gray-100);
  position: relative;
}
.contact-row:last-child { border-bottom: none; }
.contact-row .avatar, .contact-row .avatar-fallback { width: 46px; height: 46px; flex-shrink: 0; }
.contact-row .info { flex: 1; min-width: 0; }
.contact-row .info .name-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.contact-row .info .name-line a { color: var(--app-text); text-decoration: none; font-weight: 700; font-size: 0.92rem; }
.contact-row .info .headline { font-size: 0.82rem; color: var(--app-text-soft); margin-top: 0.1rem; }
.contact-row .info .tag-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.contact-row .info .tag-row .tag { font-size: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--app-gray-100); color: var(--app-text-soft); border: 1px solid var(--app-gray-200); }
.contact-row .actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.contact-row .menu-btn { background: none; border: none; cursor: var(--cg-cur-p, pointer); padding: 0.4rem; color: var(--app-gray-500); border-radius: 8px; }
.contact-row .menu-btn:hover { background: var(--app-gray-100); }
.contact-menu {
  position: absolute; right: 1rem; top: 100%; margin-top: 0.2rem; z-index: 15;
  background: var(--app-white); border: 1px solid var(--app-gray-200); border-radius: var(--radius-app-sm);
  box-shadow: var(--shadow-app-lift); overflow: hidden; min-width: 170px;
}
.contact-menu button, .contact-menu a {
  display: block; width: 100%; text-align: left; padding: 0.6rem 0.9rem;
  background: none; border: none; font-family: var(--font-sans); font-size: 0.84rem;
  color: var(--app-text); text-decoration: none; cursor: var(--cg-cur-p, pointer);
}
.contact-menu button:hover, .contact-menu a:hover { background: var(--app-gray-100); }
.contacts-subhead { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--app-text-soft); padding: 1.1rem 1.1rem 0.4rem; }

/* ═══════════════ Perfil ═══════════════ */
.profile-hero { overflow: visible; margin-bottom: 3.4rem; }
.profile-cover {
  height: 210px; border-radius: var(--radius-app-lg) var(--radius-app-lg) 0 0;
  background: linear-gradient(120deg, var(--navy-900), var(--blue-cognify) 60%, var(--electric));
  background-size: cover; background-position: center;
}
.profile-hero-body { background: var(--app-white); border: 1px solid var(--app-gray-200); border-top: none; border-radius: 0 0 var(--radius-app-lg) var(--radius-app-lg); padding: 0 1.8rem 1.6rem; position: relative; box-shadow: var(--shadow-app-soft); }
.profile-avatar-wrap { margin-top: -54px; margin-bottom: 0.9rem; }
.profile-avatar-wrap .avatar-lg, .profile-avatar-wrap .avatar-fallback { width: 108px; height: 108px; border: 4px solid var(--app-white); box-shadow: var(--shadow-app-lift); }
.profile-meta-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.profile-meta h1 { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 800; margin: 0 0 0.15rem; }
.profile-meta .role-line { color: var(--app-text-soft); font-size: 0.9rem; margin: 0 0 0.5rem; }
.profile-meta .bio { font-size: 0.9rem; line-height: 1.5; max-width: 560px; margin: 0 0 0.5rem; }
.profile-meta .meta-links { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.84rem; color: var(--app-text-soft); }
.profile-meta .meta-links a { color: var(--electric-600); text-decoration: none; font-weight: 600; }
.profile-meta .meta-links span { display: inline-flex; align-items: center; gap: 0.3rem; }
.profile-stats { display: flex; gap: 1.8rem; margin: 1.1rem 0 0.2rem; }
.profile-stats .stat b { font-size: 1.15rem; font-family: var(--font-sans); }
.profile-stats .stat span { display: block; font-size: 0.76rem; color: var(--app-text-soft); }
.profile-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }

.story-row { display: flex; gap: 1.3rem; overflow-x: auto; padding: 0.3rem 0.2rem 1.6rem; margin-bottom: 1.6rem; }
.story-circle { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-decoration: none; flex-shrink: 0; background: none; border: none; cursor: var(--cg-cur-p, pointer); font-family: var(--font-sans); }
.story-ring { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--electric), var(--turquoise)); padding: 3px; }
.story-ring.new { background: var(--app-gray-200); }
.story-ring .inner { width: 100%; height: 100%; border-radius: 50%; background: var(--app-white); display: flex; align-items: center; justify-content: center; color: var(--navy-900); }
.story-ring.new .inner { color: var(--electric); }
.story-circle span.label { font-size: 0.72rem; color: var(--app-text-soft); font-weight: 600; }
.story-circle.active .story-ring { padding: 4px; box-shadow: 0 0 0 2px var(--electric); }

.post-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (max-width: 620px) { .post-grid-3 { grid-template-columns: repeat(2, 1fr); } }
.post-tile { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-app-sm); overflow: hidden; background: var(--app-gray-100); cursor: var(--cg-cur-p, pointer); display: block; text-decoration: none; }
.post-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-tile .text-fill { padding: 0.9rem; font-size: 0.78rem; color: var(--app-text); line-height: 1.4; height: 100%; overflow: hidden; background: linear-gradient(160deg, var(--app-gray-050), var(--app-gray-100)); }
.post-tile .overlay {
  position: absolute; inset: 0; background: rgba(7,29,58,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  opacity: 0; transition: opacity 0.15s ease; font-size: 0.85rem; font-weight: 700;
}
.post-tile:hover .overlay { opacity: 1; }
.post-tile .overlay span { display: flex; align-items: center; gap: 0.3rem; }
.post-tile .highlight-badge { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(7,29,58,0.7); color: #fff; font-size: 0.66rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }

.post-modal-backdrop { position: fixed; inset: 0; background: rgba(7,15,33,0.6); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.post-modal { background: var(--app-white); border-radius: var(--radius-app-lg); max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; padding: 1.4rem; }
.post-modal .close-modal { position: absolute; top: 0.8rem; right: 0.8rem; background: var(--app-gray-100); border: none; border-radius: 50%; width: 30px; height: 30px; cursor: var(--cg-cur-p, pointer); color: var(--app-text-soft); }

/* ═══════════════ Coach IA ═══════════════ */
.coach-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.3rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.coach-tabs::-webkit-scrollbar { display: none; }
.coach-tab {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.1rem; border-radius: 999px; border: 1px solid var(--app-gray-200);
  background: var(--app-white); color: var(--app-text-soft); font-family: var(--font-sans);
  font-weight: 700; font-size: 0.86rem; cursor: var(--cg-cur-p, pointer); white-space: nowrap;
}
.coach-tab.active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.coach-tab svg { width: 16px; height: 16px; }
.coach-tab { flex: 0 0 auto; }
.coach-tab-price { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

.coach-wrap { display: flex; flex-direction: column; height: calc(100vh - 230px); min-height: 440px; }
.coach-chat-scroll { flex: 1; overflow-y: auto; padding: 0.4rem 0.2rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.chat-bubble { max-width: 74%; padding: 0.7rem 1rem; border-radius: 16px; font-size: 0.88rem; line-height: 1.45; }
.chat-bubble.me { align-self: flex-end; background: linear-gradient(135deg, var(--electric), var(--blue-cognify)); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.coach { align-self: flex-start; background: var(--app-white); border: 1px solid var(--app-gray-200); color: var(--app-text); border-bottom-left-radius: 4px; }
.chat-bubble.system { align-self: center; background: var(--app-gray-100); color: var(--app-text-soft); font-size: 0.78rem; border-radius: 999px; padding: 0.4rem 0.9rem; }
.chat-quick-replies { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.2rem 0.2rem 0.9rem; }
.coach-composer {
  display: flex; align-items: flex-end; gap: 0.6rem;
  background: var(--app-white); border: 1px solid var(--app-gray-200);
  border-radius: 999px; padding: 0.5rem 0.6rem 0.5rem 1.1rem;
}
.coach-composer textarea {
  flex: 1; border: none; background: none; resize: none; max-height: 110px; min-height: 24px;
  padding: 0.35rem 0; font-family: var(--font-sans); font-size: 0.9rem;
}
.coach-composer textarea:focus { outline: none; }
.coach-composer .attach-btn { background: none; border: none; color: var(--app-gray-500); cursor: var(--cg-cur-p, pointer); padding: 0.4rem; flex-shrink: 0; }
.coach-composer .send-btn {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; border: none; cursor: var(--cg-cur-p, pointer);
  background: linear-gradient(135deg, var(--electric), var(--blue-cognify)); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.coach-composer .send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.coach-price-panel { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.coach-price-card { flex: 1; min-width: 190px; padding: 1.1rem 1.2rem; }
.coach-price-card .amount { font-family: var(--font-sans); font-size: 1.6rem; font-weight: 800; color: var(--navy-900); }
.coach-price-card .amount span { font-size: 0.78rem; font-weight: 600; color: var(--app-text-soft); }
.coach-price-card .label { font-size: 0.82rem; color: var(--app-text-soft); margin-top: 0.2rem; }

/* ═══════════════ Chat ═══════════════ */
/* La altura del chat se calcula restando lo que ocupan las barras, y por eso
   es delicada: el hueco que sobra es justo el que queda para escribir.
   100dvh y no 100vh porque en el navegador movil 100vh mide la pantalla SIN
   la barra de direcciones, aunque la barra este puesta; con vh, el compositor
   se va por debajo del borde en cuanto aparece. */
.chat-shell { display: flex; height: calc(100vh - 130px); height: calc(100dvh - 130px); min-height: 480px; border-radius: var(--radius-app-lg); overflow: hidden; border: 1px solid var(--app-gray-200); box-shadow: var(--shadow-app-soft); }
.chat-sidebar { flex: 0 0 30%; max-width: 340px; min-width: 260px; background: var(--app-white); border-right: 1px solid var(--app-gray-200); display: flex; flex-direction: column; }
.chat-sidebar-head { padding: 1rem 1.1rem 0.7rem; }
.chat-sidebar-head h2 { margin: 0 0 0.7rem; font-family: var(--font-sans); font-size: 1.15rem; font-weight: 800; }
.chat-search { position: relative; margin-bottom: 0.7rem; }
.chat-search svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: var(--app-gray-500); }
.chat-search input { width: 100%; padding: 0.5rem 0.7rem 0.5rem 2.2rem; border-radius: 999px; border: 1px solid var(--app-gray-200); background: var(--app-gray-050); font-size: 0.84rem; font-family: var(--font-sans); }
.chat-filter-row { display: flex; gap: 0.4rem; padding-bottom: 0.7rem; }
.chat-filter-row .pill-filter { padding: 0.32rem 0.75rem; font-size: 0.76rem; }
.chat-convo-list { flex: 1; overflow-y: auto; }
.chat-convo-row {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 1.1rem;
  cursor: var(--cg-cur-p, pointer); border-left: 3px solid transparent; text-decoration: none; color: inherit;
}
.chat-convo-row:hover { background: var(--app-gray-050); }
.chat-convo-row.active { background: rgba(50,103,255,0.07); border-left-color: var(--electric); }
.chat-convo-row .avatar, .chat-convo-row .avatar-fallback { width: 44px; height: 44px; flex-shrink: 0; }
.chat-convo-row .info { flex: 1; min-width: 0; }
.chat-convo-row .top-line { display: flex; justify-content: space-between; gap: 0.4rem; }
.chat-convo-row .name { font-weight: 700; font-size: 0.87rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-convo-row .time { font-size: 0.7rem; color: var(--app-text-soft); flex-shrink: 0; }
.chat-convo-row .preview { font-size: 0.78rem; color: var(--app-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-convo-row.unread .preview { color: var(--app-text); font-weight: 600; }
.chat-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--electric); flex-shrink: 0; margin-left: 0.4rem; }

.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-app); }
.chat-main-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.3rem; background: var(--app-white); border-bottom: 1px solid var(--app-gray-200); }
.chat-main-head .avatar, .chat-main-head .avatar-fallback { width: 38px; height: 38px; }
.chat-main-head .name { font-weight: 700; font-size: 0.92rem; }
.chat-main-head .sub { font-size: 0.76rem; color: var(--app-text-soft); }
.chat-main-head .spacer { flex: 1; }
.chat-main-head .icon-btn { background: none; border: none; color: var(--app-gray-500); cursor: var(--cg-cur-p, pointer); padding: 0.4rem; border-radius: 8px; }
.chat-main-head .icon-btn:hover { background: var(--app-gray-100); color: var(--electric); }
/* El boton de volver se ve siempre: en angosto cambia de panel y en ancho
   suelta la conversacion. Antes estaba oculto salvo en movil y desde el
   escritorio no habia manera de regresar a la lista. */
#chat-back-btn { display: inline-flex; }
.chat-msg-scroll { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem; display: flex; flex-direction: column; gap: 0.55rem; }
.msg-bubble { max-width: 64%; padding: 0.65rem 0.95rem; border-radius: 15px; font-size: 0.87rem; line-height: 1.4; }
.msg-bubble.received { align-self: flex-start; background: var(--app-gray-100); color: var(--app-text); border-bottom-left-radius: 4px; }
.msg-bubble.sent { align-self: flex-end; background: linear-gradient(135deg, var(--electric), var(--blue-cognify)); color: #fff; border-bottom-right-radius: 4px; }
.msg-bubble .msg-time { display: block; font-size: 0.66rem; opacity: 0.7; margin-top: 0.25rem; }

/* Espera del agente. Un agente de IA tarda entre cinco segundos y poco mas de
   un minuto en contestar, porque Cognify IA puede consultar a varios
   especialistas antes de responder. La burbuja va del lado recibido porque lo
   que se esta anunciando es el turno del agente, no el del usuario. */
.msg-bubble.pending { opacity: 0.55; }
.msg-typing { align-self: flex-start; display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.95rem; border-radius: 15px; border-bottom-left-radius: 4px; background: var(--app-gray-100); color: var(--text-secondary); font-size: 0.8rem; }
.msg-typing .dots { display: inline-flex; gap: 3px; }
.msg-typing .dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.3; animation: msgTyping 1.2s infinite; }
.msg-typing .dots i:nth-child(2) { animation-delay: 0.18s; }
.msg-typing .dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes msgTyping { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .msg-typing .dots i { animation: none; opacity: 0.55; } }
.msg-attachment { display: flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.15); border-radius: 10px; padding: 0.5rem 0.7rem; margin-bottom: 0.3rem; text-decoration: none; color: inherit; }
.msg-bubble.received .msg-attachment { background: var(--app-white); border: 1px solid var(--app-gray-200); }
.msg-attachment .meta { min-width: 0; }
.msg-attachment .fname { font-size: 0.8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 180px; }
.msg-attachment .fsize { font-size: 0.7rem; opacity: 0.75; }
.chat-composer-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.2rem; background: var(--app-white); border-top: 1px solid var(--app-gray-200); }
.chat-composer-row input[type="text"] { flex: 1; border-radius: 999px; border: 1px solid var(--app-gray-200); padding: 0.6rem 1rem; font-family: var(--font-sans); font-size: 0.87rem; }
.chat-composer-row .attach-btn { background: none; border: none; color: var(--app-gray-500); cursor: var(--cg-cur-p, pointer); padding: 0.4rem; }
.chat-composer-row .send-btn { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: var(--cg-cur-p, pointer); background: linear-gradient(135deg, var(--electric), var(--blue-cognify)); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-composer-row .send-btn:disabled { opacity: 0.5; }
.chat-attach-chip { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; font-size: 0.76rem; color: var(--app-text-soft); background: var(--app-white); border-top: 1px solid var(--app-gray-200); }
.chat-attach-chip button { background: none; border: none; color: var(--red-600, #c0392b); cursor: var(--cg-cur-p, pointer); font-weight: 700; }
@media (max-width: 880px) {
    /* Los 170px son la barra de arriba mas el respiro de .app-content, y valian
     mientras las dos barras midieran lo mismo en todas partes. En un iPhone
     instalado no: la de arriba crece con el inset del notch (47px) y la de
     abajo con el del indicador (34px), pero esta resta seguia siendo fija, asi
     que el chat medía 81px de mas y el compositor terminaba DEBAJO de la barra
     inferior. Medido: 54 de sus 66px tapados — de ahi el "no hay espacio para
     escribir", que solo pasaba en la PWA porque en el navegador los insets
     valen cero. */
  .chat-shell {
    height: calc(100vh - 170px);
    height: calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: var(--radius-app);
  }
  .chat-sidebar { max-width: none; }
  .chat-sidebar.hide-mobile { display: none; }
  .chat-main.hide-mobile { display: none; }
}

/* ═══════════════ Productos ═══════════════ */
.products-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.products-cats { display: flex; gap: 0.55rem; overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 0.9rem; }
/* Quien entra aqui ve fotos, precios en la descripcion y un boton: parece una
   tienda. No lo es, y decirlo una vez arriba evita el reclamo de un envio que
   Cognify nunca hizo. */
.products-note { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--text-secondary); background: var(--paper-100); border: 1px solid var(--border); border-radius: 0.7rem; padding: 0.7rem 0.85rem; }
.products-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; font-size: 0.87rem; color: var(--text-secondary); }
.products-bar label { display: inline-flex; align-items: center; gap: 0.45rem; }
.products-bar select { font: inherit; color: var(--text-primary); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.35rem 0.5rem; }
.product-shop { display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start; font-size: 0.83rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.product-shop:hover { color: var(--accent-strong); text-decoration: underline; }
/* Pantalla de memoria: la ficha es texto plano con saltos de linea, asi que
   se respeta tal cual esta guardada — verla maquillada seria verla distinta
   de lo que el motor lee. */
.memoria-card { padding: 1.2rem 1.3rem; margin-bottom: 1rem; }
.memoria-card h2 { font-size: 1.05rem; margin: 0 0 0.6rem; color: var(--text-primary); }
.memoria-ficha { margin: 0 0 0.6rem; padding: 0.9rem 1rem; background: var(--paper-100); border: 1px solid var(--border); border-radius: 0.7rem; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.55; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.memoria-meta { margin: 0 0 0.5rem; font-size: 0.87rem; color: var(--text-secondary); }
.memoria-nota { margin: 0 0 0.9rem; font-size: 0.83rem; color: var(--text-secondary); }
/* Lo que recuerda cada agente: una lista, no tarjetas. Son notas cortas de un
   mismo tipo y lo que se compara entre ellas es el texto, no el contenedor;
   una tarjeta por agente convertiria trece notas en trece bloques que pesan
   igual que las dos secciones de arriba. */
.memoria-agentes { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.memoria-agentes > li { padding-top: 0.9rem; border-top: 1px solid var(--border); }
.memoria-agentes > li:first-child { padding-top: 0; border-top: 0; }
.memoria-agentes .cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.45rem; }
.memoria-agentes .cabeza strong { font-size: 0.95rem; color: var(--text-primary); }
.memoria-agentes .cabeza span { font-size: 0.78rem; color: var(--text-secondary); }
.memoria-agentes .memoria-ficha { margin-bottom: 0; }
.memoria-agentes .memoria-meta { margin-bottom: 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .product-grid { grid-template-columns: 1fr; } }
.product-card { overflow: hidden; display: flex; flex-direction: column; }
.product-card .photo-wrap { position: relative; aspect-ratio: 4/3; background: var(--app-gray-100); }
.product-card .photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card .save-btn {
  position: absolute; top: 0.6rem; right: 0.6rem; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(7,29,58,0.55); border: none; cursor: var(--cg-cur-p, pointer); color: #fff;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.product-card .save-btn.saved { color: #ff5a7a; }
.product-card .body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.product-card .name { font-weight: 700; font-size: 0.95rem; }
.product-card .desc { font-size: 0.82rem; color: var(--app-text-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.product-card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.5rem; }
.product-card .owner-line { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--app-text-soft); }
.product-card .owner-line .avatar-sm, .product-card .owner-line .avatar-fallback { width: 20px; height: 20px; }

.product-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 620px) { .product-form-grid { grid-template-columns: 1fr; } }
.product-photo-picker { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.product-photo-slot {
  width: 92px; height: 92px; border-radius: var(--radius-app-sm); border: 1.5px dashed var(--app-gray-200);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  color: var(--app-gray-500); cursor: var(--cg-cur-p, pointer); background: var(--app-gray-050);
}
.product-photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.product-photo-slot .remove-photo { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(7,29,58,0.7); color: #fff; border: none; font-size: 0.7rem; cursor: var(--cg-cur-p, pointer); }

/* ── Quitar lo propio en Productos ── */

/* "Lo mío" no es una categoría más, así que no se ve como las demás: es el
   único sitio donde alguien puede borrar lo que publicó. */
.pill-mios { border-color: var(--app-gray-400); font-weight: 600; }
.pill-mios.active { background: #071d3a; color: #fff; border-color: transparent; }

/* Doble clase a proposito: .btn-app.outline ya fija el color con especificidad
   0-2-0, asi que un .product-del suelto no pintaba nada y el boton de borrar
   se veia igual que cualquier otro. Un boton destructivo que no se distingue
   del resto es un boton que alguien va a pulsar sin querer. */
.btn-app.outline.product-del { color: var(--red-600); border-color: rgba(214,40,57,0.35); }
.btn-app.outline.product-del:hover { background: rgba(214,40,57,0.07); border-color: var(--red-600); }

/* ── Tu cuenta: cancelar y darse de baja (dentro de Editar perfil) ── */

/* Separada del formulario y sin color de alarma: lo que hay aquí es legítimo
   y no debería dar vergüenza encontrarlo. El rojo aparece sólo en el paso que
   de verdad destruye algo. */
.zona-cuenta { margin-top: 1.2rem; padding: 1.4rem; }
.zona-cuenta h2 { font-family: var(--font-sans); font-size: 1.05rem; margin: 0 0 0.5rem; }
.zc-resumen { color: var(--app-text-soft); margin: 0 0 1rem; line-height: 1.5; }
.zc-nota { display: block; margin-top: 0.25rem; font-size: 0.85rem; }
.zc-acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; }
/* Misma razon que en .product-del: hay que ganarle a .btn-app.outline. */
.btn-app.outline.zc-peligro { color: var(--red-600); border-color: rgba(214,40,57,0.35); }
.btn-app.outline.zc-peligro:hover:not(:disabled) { background: rgba(214,40,57,0.07); border-color: var(--red-600); }
.btn-app.zc-peligro-solido { background: var(--red-600); color: #fff; border-color: transparent; }
.btn-app.zc-peligro-solido:hover:not(:disabled) { filter: brightness(0.93); }

.zc-baja {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--app-gray-200);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.zc-baja[hidden] { display: none; }
.zc-aviso {
  margin: 0; padding: 0.8rem 0.9rem; line-height: 1.5;
  background: rgba(214,40,57,0.06); border-left: 3px solid var(--red-600);
  border-radius: var(--radius-app-sm);
}
.zc-baja .field { margin: 0; }
@media (max-width: 620px) { .zc-acciones .btn-app { flex: 1 1 100%; justify-content: center; } }

/* Los dos documentos legales solo estaban enlazados en el pie de la pantalla
   de acceso, asi que en cuanto alguien iniciaba sesion dejaban de existir para
   el. Su sitio natural es este: la pantalla donde se ejercen los derechos que
   los dos textos describen. */
.zc-legal { margin: 1.1rem 0 0; font-size: 0.85rem; color: var(--app-text-soft); line-height: 1.5; }