/* ==========================================================================
   CONSTANCY — Design tokens
   Paleta ligada a la identidad visual del logo (cerebro + piezas de rompecabezas):
   fondo nocturno para que el color "emerja" -> metáfora de reconstrucción del hábito.
   ========================================================================== */
:root{
  /* Color — paleta morado/magenta oscura (identidad visual Constancy) */
  --bg:          #150F1F;   /* fondo base, morado noche profundo */
  --bg-raise:    #1E1730;   /* superficie de tarjetas */
  --bg-raise-2:  #271E3D;   /* superficie elevada / hover */
  --line:        #3A2E56;   /* bordes sutiles */
  --ink:         #F1EDE6;   /* texto principal, blanco cálido */
  --ink-soft:    #C7BEDD;   /* texto secundario */
  --ink-faint:   #8B80A8;   /* texto terciario / captions */

  --sage:        #D946A8;   /* acento primario — magenta */
  --sage-ink:    #2A0E22;   /* texto sobre fondo magenta */
  --amber:       #D946A8;   /* alias retrocompatible, ahora en magenta */
  --amber-ink:   #2A0E22;

  --teal:        #8B5CF6;   /* acento secundario — morado, calma, panel, enlaces */
  --rose:        #E879C4;   /* acento emocional — comunidad, acompañamiento */
  --indigo:      #5D3FA8;   /* acento panel/datos — morado profundo */

  --danger:      #E2604F;   /* se conserva solo para alertas S.O.S. */

  /* Type */
  --font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-mono:    "Plus Jakarta Sans", ui-monospace, monospace;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: 1160px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 18px 50px -20px rgba(0,0,0,.55);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--amber); }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); font-weight:600; }
h2.section-title{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber);
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:16px; height:2px; background:var(--amber); display:inline-block; }

.section{ padding:88px 0; position:relative; }
.section-lede{ max-width:640px; color:var(--ink-soft); font-size:1.05rem; }

/* ---------- Skip link / focus ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px; background:var(--amber); color:var(--amber-ink);
  padding:10px 16px; border-radius:8px; z-index:2000; font-weight:600; transition:top .15s ease;
}
.skip-link:focus{ top:12px; color:var(--amber-ink); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:linear-gradient(90deg, var(--teal), var(--amber)); color:var(--ink); }
.btn-primary:hover{ background:linear-gradient(90deg, #9A6BF9, #E85BB5); color:var(--ink); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink-soft); color:var(--ink); }
.btn-teal{ background:var(--teal); color:var(--ink); }
.btn-teal:hover{ background:#9A6BF9; color:var(--ink); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:.85rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:900;
  background:rgba(18,24,31,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar{ padding:14px 0; }
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); }
.brand img{ height:34px; width:34px; object-fit:contain; }
.brand:hover{ color:var(--ink); }

.nav-links{ list-style:none; display:flex; gap:28px; margin:0; padding:0; align-items:center; }
.nav-links a{ color:var(--ink-soft); font-size:.92rem; font-weight:500; }
.nav-links a:hover{ color:var(--amber); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-item-cta{ margin-left:auto; }
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; color:var(--ink);
}
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    background:var(--bg-raise); border-bottom:1px solid var(--line); padding:18px 24px; gap:16px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-item-cta{
    margin-left:0; width:100%; padding-top:14px; margin-top:2px; border-top:1px solid var(--line);
  }
  .user-dropdown{ right:auto; left:0; }
}

/* ---------- Hero ---------- */
.hero{ padding:76px 0 60px; position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:520px;
  background:radial-gradient(60% 60% at 30% 20%, rgba(217,70,168,.16), transparent 70%),
             radial-gradient(50% 50% at 80% 10%, rgba(139,92,246,.14), transparent 70%);
  pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; }
@media (max-width: 960px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 18px; }
.hero-disclaimer{
  display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--ink-faint);
  max-width:480px; margin-top:6px;
}
.hero-disclaimer svg{ flex:none; margin-top:2px; color:var(--rose); }

.social-proof{
  display:flex; align-items:baseline; gap:10px; margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line);
}
.social-proof .num{ font-family:var(--font-mono); font-size:1.7rem; color:var(--amber); font-weight:600; }
.social-proof .txt{ color:var(--ink-soft); font-size:.9rem; max-width:280px; }

/* Índice de Consistencia — elemento distintivo (ribbon) */
.consistency-card{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-2);
}
.consistency-card .label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.consistency-card .value{ font-family:var(--font-mono); font-size:3rem; font-weight:600; color:var(--amber); margin:6px 0 2px; }
.ribbon{
  height:14px; border-radius:999px; background:var(--bg-raise-2); overflow:hidden; margin:16px 0 10px;
  border:1px solid var(--line);
}
.ribbon > span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--rose), var(--amber));
}
.ribbon-note{ font-size:.82rem; color:var(--ink-faint); }
.consistency-example{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--line); font-size:.86rem; color:var(--ink-soft); }
.consistency-example strong{ color:var(--ink); }

/* ---------- Comparison table ---------- */
.compare-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); }
table.compare{ width:100%; border-collapse:collapse; min-width:640px; }
table.compare th, table.compare td{ padding:18px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); font-size:.92rem; }
table.compare thead th{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--bg-raise); font-weight:500;
}
table.compare thead th.col-us{ color:var(--amber); }
table.compare tbody th{ font-family:var(--font-display); font-weight:600; color:var(--ink); background:var(--bg-raise); width:190px; }
table.compare td.old{ color:var(--ink-faint); }
table.compare td.new{ color:var(--ink); background:rgba(232,163,61,.06); }
table.compare tbody tr:last-child td, table.compare tbody tr:last-child th{ border-bottom:none; }

/* ---------- Feature cards ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; }
@media (max-width: 860px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; transition:border-color .15s ease, transform .15s ease;
}
.feature-card:hover{ border-color:var(--ink-faint); transform:translateY(-3px); }
.feature-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; background:rgba(232,163,61,.14); color:var(--amber);
}
.feature-card:nth-child(2) .feature-icon{ background:rgba(63,160,160,.16); color:var(--teal); }
.feature-card:nth-child(3) .feature-icon{ background:rgba(216,116,140,.16); color:var(--rose); }
.feature-card h3{ font-size:1.05rem; margin-bottom:8px; }
.feature-card p{ font-size:.92rem; margin:0; }

/* ---------- Blog ---------- */
.section-alt{ background:var(--bg-raise); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.article-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:36px; }
@media (max-width:860px){ .article-grid{ grid-template-columns:1fr; } }
.article-card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px;
  display:flex; flex-direction:column; gap:12px;
}
.article-meta{ display:flex; gap:10px; align-items:center; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.article-meta .tag{ background:rgba(63,160,160,.15); color:var(--teal); padding:3px 10px; border-radius:999px; }
.article-card h3{ font-size:1.15rem; }
.article-card p{ font-size:.92rem; flex:1; }
.article-card .read-more{ font-size:.86rem; font-weight:600; }

.capture-box{
  margin-top:44px; padding:36px; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(139,92,246,.10), rgba(217,70,168,.08));
  display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center;
}
@media (max-width:860px){ .capture-box{ grid-template-columns:1fr; } }
.capture-box h3{ font-size:1.25rem; margin-bottom:8px; }
.capture-form{ display:flex; flex-direction:column; gap:12px; }
.capture-form .row{ display:flex; gap:10px; flex-wrap:wrap; }
.field{
  flex:1; min-width:220px; background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:13px 16px; color:var(--ink); font-family:var(--font-body); font-size:.94rem;
}
.field::placeholder{ color:var(--ink-faint); }
.field:focus{ outline:none; border-color:var(--teal); }
.checkline{ display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--ink-faint); }
.checkline input{ margin-top:3px; }
.form-note{ font-size:.78rem; color:var(--ink-faint); }
.form-success, .form-error{
  display:none; font-size:.86rem; padding:10px 14px; border-radius:8px; margin-top:4px;
}
.form-success{ background:rgba(139,92,246,.15); color:#c9b8fb; }
.form-error{ background:rgba(226,96,79,.15); color:#f3a89c; }

/* ---------- Manifesto / Community ---------- */
.manifesto{ max-width:760px; }
.manifesto p{ font-size:1.05rem; color:var(--ink-soft); }
.testimonial-track{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin:36px 0 30px; }
@media (max-width:860px){ .testimonial-track{ grid-template-columns:1fr; } }
.testimonial{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; position:relative;
}
.testimonial p.quote{ color:var(--ink); font-size:1rem; font-style:italic; }
.testimonial .who{ display:flex; justify-content:space-between; gap:10px; font-size:.8rem; color:var(--ink-faint); margin-top:14px; flex-wrap:wrap; }
.testimonial .who .habit-tag{ background:rgba(216,116,140,.15); color:var(--rose); padding:3px 10px; border-radius:999px; font-weight:600; }

/* ---------- Panel teaser ---------- */
.panel-teaser{
  display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--bg-raise);
}
@media (max-width:860px){ .panel-teaser{ grid-template-columns:1fr; } }
.panel-teaser .txt{ padding:40px; }
.panel-teaser .visual{
  background:linear-gradient(160deg, var(--indigo), #241a3d); padding:40px; display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.mini-stat{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.82rem; color:#d8cdf0; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mini-stat b{ color:#fff; }

/* ---------- FAQ (accordion) ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:transparent; border:0; color:var(--ink); font-family:var(--font-display);
  font-size:1.02rem; font-weight:600; padding:20px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.faq-q .plus{ font-size:1.3rem; color:var(--amber); transition:transform .2s ease; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a p{ padding-bottom:18px; margin:0; font-size:.94rem; }
.faq-item.open .faq-a{ max-height:400px; }
.faq-item.open .plus{ transform:rotate(45deg); }

/* ---------- Legal cards ---------- */
.legal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:16px; }
@media (max-width:860px){ .legal-grid{ grid-template-columns:1fr; } }
.legal-card{ background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; font-size:.9rem; }
.legal-card h3{ font-size:1rem; margin-bottom:10px; }

/* ---------- Contact / footer ---------- */
.footer{ background:#100B18; border-top:1px solid var(--line); padding-top:70px; }
.footer-grid{ display:grid; grid-template-columns:1.1fr .8fr 1.1fr; gap:40px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr; } }
.footer h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-family:var(--font-mono); margin-bottom:16px; }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-links a{ color:var(--ink-soft); font-size:.92rem; }
.footer-links a:hover{ color:var(--amber); }

.contact-form{ display:flex; flex-direction:column; gap:12px; }
.urgency-toggle{
  display:flex; gap:10px; align-items:center; font-size:.88rem; color:var(--ink-soft);
  background:var(--bg-raise); border:1px solid var(--line); padding:12px 14px; border-radius:10px;
}
.crisis-banner{
  display:none; margin-top:4px; padding:16px 18px; border-radius:12px; border:1px solid rgba(226,96,79,.4);
  background:rgba(226,96,79,.1); font-size:.88rem; color:#f3c3ba;
}
.crisis-banner.show{ display:block; }
.crisis-banner a, .crisis-banner strong{ color:#fff; }
.crisis-lines{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:6px; }

.footer-bottom{
  margin-top:60px; padding:24px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--ink-faint);
}

/* ---------- Floating S.O.S. button ---------- */
.sos-fab{
  position:fixed; right:22px; bottom:22px; z-index:1000;
  display:flex; align-items:center; gap:10px; background:var(--rose); color:#2a0d15;
  border:0; border-radius:999px; padding:14px 20px; font-family:var(--font-display); font-weight:700;
  box-shadow:0 12px 30px -8px rgba(216,116,140,.6); cursor:pointer;
}
.sos-fab:hover{ background:#f09ed4; }
.sos-fab svg{ flex:none; }

.modal-content{ background:var(--bg-raise); color:var(--ink); border:1px solid var(--line); }
.modal-header{ border-bottom:1px solid var(--line); }
.modal-footer{ border-top:1px solid var(--line); }
.btn-close{ filter:invert(1) grayscale(1); }
.crisis-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.crisis-list li{ background:var(--bg-raise-2); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.crisis-list .num{ font-family:var(--font-mono); font-size:1.1rem; color:var(--amber); }

/* ---------- Login page ---------- */
.auth-wrap{ min-height:calc(100vh - 74px); display:flex; align-items:center; padding:60px 0; }
.auth-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:960px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-raise); }
@media (max-width:860px){ .auth-grid{ grid-template-columns:1fr; } }
.auth-side{ background:linear-gradient(160deg, var(--indigo), #1c1740); padding:44px; display:flex; flex-direction:column; justify-content:space-between; }
.auth-form-wrap{ padding:44px; }
.auth-form{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.auth-name-row{ display:flex; gap:12px; }
.auth-name-row > div{ flex:1; min-width:0; }
@media (max-width:520px){
  .auth-wrap{ padding:32px 0; }
  .auth-side{ padding:28px 22px; }
  .auth-form-wrap{ padding:28px 22px; }
  .auth-name-row{ flex-direction:column; gap:14px; }
}
.auth-label{ font-size:.82rem; color:var(--ink-soft); margin-bottom:6px; display:block; }
.auth-links{ display:flex; justify-content:space-between; font-size:.85rem; margin-top:4px; flex-wrap:wrap; gap:8px; }
.alert-inline{ display:none; font-size:.85rem; padding:10px 14px; border-radius:8px; }
.alert-inline.error{ background:rgba(226,96,79,.15); color:#f3a89c; }
.alert-inline.show{ display:block; }
.twofa-box{ display:flex; gap:10px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:.85rem; color:var(--ink-soft); }
.twofa-box input{ margin:0; }

.confirm-box{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:.84rem; color:var(--ink-faint); margin-top:14px; }

/* utility */
.text-center{ text-align:center; }
.mt-lg{ margin-top:44px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Tabs de autenticación */
.auth-tabs{
  display:flex;
  gap:8px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.auth-tab{
  flex:1;
  background:none;
  border:none;
  padding:10px 4px 14px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  color:var(--ink-faint);
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.auth-tab.active{
  color:var(--ink);
  border-bottom-color:var(--sage);
}
.alert-inline.success{
  display:none;
  background:rgba(111,176,143,.14);
  border:1px solid rgba(111,176,143,.4);
  color:var(--sage);
  padding:10px 14px;
  border-radius:var(--radius-sm);
  font-size:.85rem;
  margin-bottom:14px;
}
/* Modal de autenticación */
#authModal .modal-content{
  background:var(--bg-raise);
  border:1px solid var(--line);
  color:var(--ink);
}
#authModal .modal-header,
#authModal .modal-footer{
  border-color:var(--line);
}
#authModal.auth-modal-success .modal-title{
  color:var(--sage);
}
#authModal.auth-modal-error .modal-title{
  color:var(--danger);
}
#authModal .btn-close{
  filter:invert(1) grayscale(1) brightness(1.6);
}
/* Historial bloqueado (sin suscripción) */
.locked-blur{ filter:blur(6px); user-select:none; pointer-events:none; }
.locked-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  text-align:center; padding:24px;
  background:rgba(16,22,28,.72); backdrop-filter:blur(2px);
}
.locked-overlay svg{ color:var(--sage); }

/* ============ Menú de usuario (header) ============ */
.user-menu{ position:relative; }

.user-avatar-btn{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg-raise);
  cursor:pointer;
  padding:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.user-avatar-btn:hover{ border-color:var(--ink-faint); }

.user-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }

.user-avatar-fallback{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:600; font-size:.9rem;
  color:var(--sage-ink);
  background:linear-gradient(135deg, var(--sage), var(--indigo));
}

.user-dropdown{
  position:absolute; top:calc(100% + 10px); right:0;
  width:230px;
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:200;
}
.user-dropdown.is-open{ opacity:1; visibility:visible; transform:translateY(0); }

.user-dropdown-header{
  padding:10px 12px 12px;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;
  display:flex; flex-direction:column; gap:2px;
}
.user-dropdown-header strong{ font-size:.9rem; color:var(--ink); }
.user-dropdown-header span{
  font-size:.78rem; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.user-dropdown-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  border-radius:8px;
  font-size:.88rem;
  color:var(--ink-soft);
  text-decoration:none;
}
.user-dropdown-item:hover{ background:var(--bg-raise-2); color:var(--ink); }
.user-dropdown-item svg{ flex-shrink:0; opacity:.85; }

.user-dropdown-logout{
  color:var(--danger);
  margin-top:4px;
  border-top:1px solid var(--line);
  padding-top:12px;
  border-radius:0 0 8px 8px;
}

/* ============ Avatar editable (Panel) ============ */
.avatar-upload{
  position:relative;
  width:64px; height:64px;
  border-radius:50%;
  flex-shrink:0;
}
.avatar-upload img{
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--line);
  display:block;
}
.avatar-upload-btn{
  position:absolute; bottom:-2px; right:-2px;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--sage);
  color:var(--sage-ink);
  border:2px solid var(--bg-raise);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.avatar-upload-btn:hover{ filter:brightness(1.08); }
.avatar-upload-btn input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.avatar-delete-btn{
  position:absolute; bottom:-2px; left:-2px;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--danger);
  color:#2a0b06;
  border:2px solid var(--bg-raise);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  padding:0;
}
.avatar-delete-btn:hover{ filter:brightness(1.08); }
.avatar-upload.is-uploading .avatar-delete-btn{ opacity:.6; pointer-events:none; }

/* ============ Animación de aparición al hacer scroll ============ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}
.avatar-upload.is-uploading .avatar-upload-btn{ opacity:.6; pointer-events:none; }
.avatar-upload-note{
  font-size:.78rem; margin-top:6px;
}
.avatar-upload-note.error{ color:var(--danger); }
.avatar-upload-note.success{ color:var(--sage); }
.locked-overlay p{ max-width:320px; font-size:.88rem; color:var(--ink-soft); margin:0; }
/* ---------- Encuesta inicial de hábitos ---------- */
.survey-wrap{
  max-width:640px; margin:60px auto; background:var(--bg-raise); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-2);
}
.survey-intro{ margin-bottom:26px; }
.survey-form{ display:flex; flex-direction:column; gap:22px; }
.survey-q label.auth-label{ display:block; margin-bottom:10px; }
.survey-options{ display:flex; flex-wrap:wrap; gap:8px; }
.survey-chip{
  appearance:none; -webkit-appearance:none; font-family:var(--font-body);
  padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--bg-raise-2);
  color:var(--ink-soft); font-size:.86rem; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.survey-chip:hover{ border-color:var(--ink-faint); color:var(--ink); }
.survey-chip.active{ background:var(--sage); border-color:var(--sage); color:var(--sage-ink); font-weight:600; }
.form-range{ width:100%; accent-color:var(--sage); }

.badge-ia{
  display:inline-block; padding:5px 12px; border-radius:999px; font-size:.76rem; font-weight:600;
  background:linear-gradient(90deg, var(--teal), var(--amber)); color:var(--ink);
}
.badge-ia-reglas{ background:var(--bg-raise-2); color:var(--ink-soft); border:1px solid var(--line); }

.notif-badge-nav{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--danger); color:#2a0b06; font-size:.7rem; font-weight:800; line-height:1; }

.rutina-item-preview{
  padding:12px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:2px;
}
.rutina-item-preview:last-of-type{ border-bottom:none; }
.rutina-item-meta{ display:block; font-size:.8rem; color:var(--ink-faint); margin-top:2px; }

/* ---------- Rutina editable en el panel ---------- */
.rutina-panel .rutina-item-row{
  display:grid; grid-template-columns:1.6fr 1fr auto auto auto; gap:10px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.rutina-panel .rutina-item-row:last-of-type{ border-bottom:none; }
@media (max-width:760px){
  .rutina-panel .rutina-item-row{ grid-template-columns:1fr; }
}
.rutina-days-picker{ display:flex; flex-wrap:wrap; gap:5px; }
.rutina-day-btn{
  appearance:none; -webkit-appearance:none; font-family:var(--font-body);
  width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--bg-raise-2);
  color:var(--ink-faint); font-size:.72rem; font-weight:600; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.rutina-day-btn:hover{ border-color:var(--ink-soft); color:var(--ink); transform:translateY(-1px); }
.rutina-day-btn.active{ background:var(--sage); border-color:var(--sage); color:var(--sage-ink); }
.rutina-panel .field-sm{ padding:8px 10px; font-size:.84rem; }
.rutina-criteria-note{
  font-size:.8rem; color:var(--ink-faint); background:var(--bg-raise-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:16px;
}

/* ---------- Escudo Predictivo ---------- */
.escudo-banner{
  display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--radius-md);
  background:linear-gradient(135deg, rgba(217,70,168,.14), rgba(139,92,246,.14)); border:1px solid rgba(139,92,246,.35);
  color:var(--ink);
}
.escudo-banner svg{ flex-shrink:0; margin-top:2px; color:var(--rose); }
.escudo-banner p{ font-size:.88rem; color:var(--ink-soft); }

/* ---------- Checklist "Hoy" ---------- */
.hoy-item{
  display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);
}
.hoy-item:last-of-type{ border-bottom:none; }
.hoy-item.is-done strong{ text-decoration:line-through; color:var(--ink-faint); }
.hoy-check{
  appearance:none; -webkit-appearance:none;
  width:28px; height:28px; flex-shrink:0; border-radius:50%; border:2px solid var(--line); background:transparent;
  color:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s ease; padding:0;
}
.hoy-check.checked{ background:var(--sage); border-color:var(--sage); color:var(--sage-ink); }
.hoy-check:hover{ border-color:var(--ink-soft); }

/* ---------- Historial marcable ---------- */
.historial-dia{ display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); }
.historial-dia:last-of-type{ border-bottom:none; }
.historial-fecha{ width:56px; flex-shrink:0; font-size:.8rem; color:var(--ink-faint); text-transform:capitalize; }
.historial-items{ display:flex; gap:6px; flex-wrap:wrap; }
.historial-check{
  appearance:none; -webkit-appearance:none; font-family:var(--font-display);
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--bg-raise-2);
  color:var(--ink-soft); font-size:.72rem; font-weight:700; cursor:pointer; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.historial-check:hover{ border-color:var(--ink-soft); color:var(--ink); transform:translateY(-1px); }
.historial-check.checked{ background:var(--sage); border-color:var(--sage); color:var(--sage-ink); box-shadow:0 0 0 3px rgba(217,70,168,.18); }

/* ---------- Padrino / ánimos ---------- */
.animo-options{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.animo-btn{ font-size:.8rem; }
.animo-feed{ margin-top:14px; display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; }
.animo-feed-item{
  padding:9px 12px; border-radius:var(--radius-sm); background:var(--bg-raise-2); border:1px solid var(--line);
  font-size:.84rem; align-self:flex-start; max-width:85%;
}
.animo-feed-item.de-mi{ align-self:flex-end; background:rgba(217,70,168,.12); border-color:rgba(217,70,168,.3); }
.animo-feed-item small{ display:block; margin-top:3px; color:var(--ink-faint); font-size:.72rem; }

/* ============================================================
   Markdown — editor de miblog.php + contenido publicado (comunidad.php)
   ============================================================ */

/* --- Barra de herramientas del editor --- */
.markdown-editor-wrap{
  border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--bg);
}
.markdown-toolbar{
  display:flex; flex-wrap:wrap; gap:2px; padding:8px; background:var(--bg-raise-2); border-bottom:1px solid var(--line);
}
.md-btn{
  appearance:none; -webkit-appearance:none;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.md-btn:hover{ background:var(--bg-raise); color:var(--ink); border-color:var(--line); }
.md-btn:active{ transform:translateY(1px); }

.markdown-editor-wrap textarea.field{
  border:none; border-radius:0; background:var(--bg); font-family:var(--font-mono, monospace);
  font-size:.9rem; line-height:1.6; resize:vertical;
}
.markdown-editor-wrap textarea.field:focus{ outline:none; box-shadow:none; }

/* --- Preview en vivo del editor --- */
.markdown-preview{
  padding:20px; background:var(--bg); min-height:200px;
}

/* --- Estilos compartidos por el preview del editor y el post publicado --- */
.markdown-preview, .markdown-body{
  color:var(--ink-soft);
}
.markdown-preview h1, .markdown-body h1,
.markdown-preview h2, .markdown-body h2,
.markdown-preview h3, .markdown-body h3{
  font-family:var(--font-display); color:var(--ink); font-weight:700; line-height:1.3;
  margin:24px 0 12px;
}
.markdown-preview h1:first-child, .markdown-body h1:first-child,
.markdown-preview h2:first-child, .markdown-body h2:first-child,
.markdown-preview h3:first-child, .markdown-body h3:first-child{ margin-top:0; }
.markdown-preview h1, .markdown-body h1{ font-size:1.6rem; }
.markdown-preview h2, .markdown-body h2{ font-size:1.35rem; }
.markdown-preview h3, .markdown-body h3{ font-size:1.15rem; }

.markdown-preview p, .markdown-body p{ margin:0 0 16px; }

.markdown-preview strong, .markdown-body strong{ color:var(--ink); font-weight:700; }
.markdown-preview em, .markdown-body em{ color:var(--ink); font-style:italic; }

.markdown-preview a, .markdown-body a{ color:var(--teal); text-decoration:underline; text-underline-offset:2px; }
.markdown-preview a:hover, .markdown-body a:hover{ color:var(--sage); }

.markdown-preview ul, .markdown-body ul,
.markdown-preview ol, .markdown-body ol{
  margin:0 0 16px; padding-left:24px; display:flex; flex-direction:column; gap:6px;
}
.markdown-preview li, .markdown-body li{ line-height:1.6; }

.markdown-preview blockquote, .markdown-body blockquote{
  margin:0 0 16px; padding:10px 18px; border-left:3px solid var(--sage);
  background:var(--bg-raise-2); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink-soft); font-style:italic;
}

.markdown-preview code, .markdown-body code{
  font-family:var(--font-mono, monospace); font-size:.88em; background:var(--bg-raise-2);
  border:1px solid var(--line); border-radius:4px; padding:2px 6px; color:var(--rose);
}
.markdown-preview pre, .markdown-body pre{
  margin:0 0 16px; padding:16px; background:var(--bg-raise-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow-x:auto;
}
.markdown-preview pre code, .markdown-body pre code{
  background:transparent; border:none; padding:0; color:var(--ink-soft); font-size:.86rem; line-height:1.6;
}

.markdown-preview img, .markdown-body img{
  max-width:100%; max-height:520px; width:auto; height:auto; object-fit:contain;
  border-radius:10px; margin:12px auto; display:block;
}

.blog-portada-detalle{
  width:100%; max-height:420px; object-fit:cover; display:block; border-radius:12px 12px 0 0;
}
@media (max-width:640px){
  .blog-portada-detalle{ max-height:260px; }
  .markdown-preview img, .markdown-body img{ max-height:340px; }
}

.markdown-preview hr, .markdown-body hr{
  border:none; border-top:1px solid var(--line); margin:28px 0;
}

.markdown-preview:empty::before{
  content:"La vista previa aparecerá aquí…"; color:var(--ink-faint); font-size:.9rem;
}

/* --- Pestañas Escribir / Vista previa --- */
.md-view-tabs{ display:flex; gap:4px; padding:8px 8px 0; background:var(--bg-raise-2); }
.md-view-tab{
  appearance:none; -webkit-appearance:none; font-family:var(--font-body);
  padding:8px 14px; border:1px solid var(--line); border-bottom:none; border-radius:8px 8px 0 0;
  background:var(--bg-raise-2); color:var(--ink-faint); font-size:.82rem; font-weight:600; cursor:pointer;
}
.md-view-tab.active{ background:var(--bg); color:var(--ink); }

/* ---------- Input de archivo (botón nativo "Seleccionar archivo") ---------- */
input[type="file"].field{
  padding:8px 12px; cursor:pointer;
}
input[type="file"].field::file-selector-button,
input[type="file"].field::-webkit-file-upload-button{
  appearance:none; -webkit-appearance:none; font-family:var(--font-body);
  padding:8px 14px; margin-right:12px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg-raise-2); color:var(--ink); font-size:.84rem; font-weight:600; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
input[type="file"].field::file-selector-button:hover,
input[type="file"].field::-webkit-file-upload-button:hover{
  background:var(--sage); border-color:var(--sage); color:var(--sage-ink);
}

/* ============================================================
   Discusiones (foro público) y Chats (privados: IA + usuarios)
   ============================================================ */
.badge-categoria{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:600;
  background:var(--sage); color:var(--sage-ink); margin-right:6px;
}
.chip{
  display:inline-block; padding:6px 14px; border-radius:999px; font-size:.82rem; font-weight:600;
  border:1px solid var(--line); color:var(--ink-soft); text-decoration:none; margin:0 6px 6px 0;
}
.chip.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.comunidad-toolbar, .discusiones-lista, .chats-layout{ margin-top:24px; }
.comunidad-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.comunidad-buscador{ display:flex; gap:8px; }
.comunidad-buscador input{ padding:8px 12px; border:1px solid var(--line); border-radius:8px; min-width:220px; }
.comunidad-filtros{ display:flex; flex-wrap:wrap; }

.discusion-item{
  display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:12px; text-decoration:none; color:inherit; transition:border-color .15s ease;
}
.discusion-item:hover{ border-color:var(--ink-faint); }
.discusion-item-top h3{ font-size:1.02rem; margin:4px 0 2px; }

.discusion-respuesta{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.btn-link-accion{
  background:none; border:none; padding:0; font-size:.8rem; font-weight:600; color:var(--ink-soft);
  cursor:pointer; font-family:var(--font-body); transition:color .15s ease;
}
.btn-link-accion:hover{ color:var(--ink); text-decoration:underline; }

.form-nuevo-tema, .form-respuesta, .form-nuevo-chat, .form-chat-mensaje{
  display:flex; flex-direction:column; gap:10px; margin:16px 0; max-width:640px;
}
.form-nuevo-tema input, .form-nuevo-tema select, .form-nuevo-tema textarea,
.form-respuesta textarea, .form-nuevo-chat input{
  padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-family:var(--font-body); width:100%;
}
.form-error{ color:#c0392b; font-size:.85rem; }

.paginacion{ display:flex; gap:8px; margin-top:20px; }
.paginacion a{ padding:6px 12px; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--ink); }
.paginacion a.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ============================================================
   Chats privados (estilo tipo Instagram/TikTok DM) + solicitudes
   ============================================================ */
.chats-wrap{ padding:44px 0 70px; display:flex; flex-direction:column; flex:1; min-height:calc(100vh - 260px); }
.chats-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }

.form-agregar-amigo{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 18px;
  background:var(--bg-raise-2); border:1px solid var(--line); border-radius:12px; padding:14px;
}
.form-agregar-amigo input{
  flex:1; min-width:200px; padding:10px 14px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-body); background:var(--bg); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;
}
.form-agregar-amigo input:focus{
  outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(232,121,196,.18);
}
.form-msg{ width:100%; font-size:.84rem; margin:0; }
.form-msg-ok{ color:#3fa66d; }
.form-msg-error{ color:#e0576b; }

.buscar-personas-box{
  border:1px solid var(--line); border-radius:14px; padding:16px; margin:0 0 18px; background:var(--bg-raise-2);
}
.buscar-personas-box input[type="search"]{
  width:100%; padding:10px 14px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-body); background:var(--bg); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;
}
.buscar-personas-box input[type="search"]:focus{
  outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(232,121,196,.18);
}
.buscar-personas-resultados{ display:flex; flex-direction:column; gap:10px; margin-top:14px; max-height:320px; overflow-y:auto; padding-right:4px; }
.resultado-persona{ display:flex; align-items:center; gap:12px; }
.resultado-persona-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.resultado-persona-info strong{ font-size:.88rem; }
.resultado-persona-info span{ font-size:.78rem; color:var(--ink-faint); }
.btn-resultado{
  border:none; border-radius:999px; padding:8px 16px; font-size:.8rem; font-weight:700; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease; flex-shrink:0;
}
.btn-resultado-enviar{ background:linear-gradient(90deg, var(--teal), var(--rose)); color:#fff; box-shadow:0 6px 16px -6px rgba(232,121,196,.55); }
.btn-resultado-enviar:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(232,121,196,.7); }
.btn-resultado-pendiente{ background:var(--bg-raise); color:var(--ink-faint); border:1px solid var(--line); cursor:default; }
.btn-resultado-ok{ background:var(--sage); color:var(--sage-ink); cursor:default; }
.btn-resultado:disabled{ opacity:.85; transform:none; box-shadow:none; }

.solicitudes-box{
  border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:20px; background:var(--bg-raise-2);
}
.solicitudes-titulo{ font-size:1rem; margin:0 0 12px; }
.solicitudes-lista{ display:flex; flex-direction:column; gap:10px; max-height:260px; overflow-y:auto; padding-right:4px; }
.solicitud-item{ display:flex; align-items:center; gap:12px; }
.solicitud-nombre{ font-weight:600; font-size:.9rem; flex:1; }
.solicitud-acciones{ display:flex; gap:8px; }
.btn-solicitud-aceptar, .btn-solicitud-rechazar{
  border:none; border-radius:999px; padding:8px 18px; font-size:.8rem; font-weight:700; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, border-color .15s ease, color .15s ease;
}
.btn-solicitud-aceptar{
  background:linear-gradient(90deg, var(--teal), var(--rose)); color:#fff;
  box-shadow:0 6px 16px -6px rgba(232,121,196,.55);
}
.btn-solicitud-rechazar{ background:transparent; color:var(--ink-faint); border:1px solid var(--line); }
.btn-solicitud-aceptar:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(232,121,196,.7); }
.btn-solicitud-rechazar:hover{ border-color:var(--ink-soft); color:var(--ink); }
.btn-solicitud-aceptar:disabled, .btn-solicitud-rechazar:disabled{ opacity:.5; cursor:default; transform:none; box-shadow:none; }

.chats-layout{
  display:grid; grid-template-columns:320px minmax(0, 1fr); gap:0;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  /* Altura acotada (no solo min-height) para que el chat y la lista de
     cuentas hagan scroll interno en vez de alargar toda la página. */
  height:calc(100vh - 230px); min-height:480px; max-height:720px;
  background:var(--bg); width:100%; max-width:100%;
  box-shadow:var(--shadow-2);
}
.chats-sidebar{
  border-right:1px solid var(--line); padding:10px; overflow-y:auto; overflow-x:hidden; height:100%; min-height:0; min-width:0; background:var(--bg-raise-2);
}
.chats-lista{ display:flex; flex-direction:column; gap:2px; }
.chats-lista-vacia{ color:var(--ink-faint); font-size:.85rem; padding:14px 8px; }

.chat-item{
  display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:12px; cursor:pointer;
  position:relative; border:1px solid transparent; transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.chat-item:hover{ background:var(--bg-raise); transform:translateX(1px); }
.chat-item.activo{ background:var(--bg-raise); border-color:var(--rose); box-shadow:0 6px 18px -10px rgba(232,121,196,.5); }
.chat-item-ia{ margin-bottom:8px; padding-bottom:14px; border-bottom:1px solid var(--line); border-radius:12px 12px 0 0; }
.chat-item-psicologo{
  margin-bottom:8px; padding-bottom:12px; border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(139,92,246,.12), transparent);
  border-left:3px solid var(--teal);
}
.chat-item-etiqueta{
  display:block; font-size:.7rem; font-weight:700; color:var(--teal); margin-top:1px;
}
.chat-item-info{ min-width:0; flex:1; }
.chat-item-info strong{ font-size:.88rem; display:block; color:var(--ink); }
.chat-item-preview{
  font-size:.78rem; color:var(--ink-faint); margin:2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-badge{
  background:var(--rose); color:#fff; font-size:.7rem; line-height:1; border-radius:999px; padding:4px 8px; font-weight:700;
  flex-shrink:0;
}

.avatar-sm, .avatar-md{
  border-radius:50%; object-fit:cover; object-position:center; flex-shrink:0; background:var(--bg-raise-2); display:block;
  border:1px solid var(--line);
}
.avatar-sm{ width:36px; height:36px; }
.avatar-md{ width:46px; height:46px; }
.avatar-ia{
  width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--rose), var(--sage)); color:#fff;
}

.chats-panel{ display:flex; flex-direction:column; height:100%; min-height:0; min-width:0; background:var(--bg-raise); }
.chat-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; flex:1; color:var(--ink-faint);
}
.chat-activo{ display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; }
.chat-activo-header{
  display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); font-weight:700; font-size:.95rem;
}
.chat-activo-header span{ flex:1; }
.chat-opciones{ position:relative; flex-shrink:0; }
.btn-chat-opciones{
  background:none; border:none; font-size:1.3rem; line-height:1; color:var(--ink-faint); cursor:pointer;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.btn-chat-opciones:hover{ background:var(--bg-raise-2); color:var(--ink); }
.chat-opciones-menu{
  position:absolute; right:0; top:calc(100% + 6px); background:var(--bg-raise); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.45); z-index:5; min-width:180px;
  padding:6px;
}
.chat-opciones-menu button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none;
  padding:10px 12px; font-size:.85rem; border-radius:9px; color:var(--ink); cursor:pointer; font-family:var(--font-body);
  transition:background .12s ease, padding-left .12s ease;
}
.chat-opciones-menu button:hover{ background:var(--bg-raise-2); padding-left:16px; }
#btn-eliminar-chat, #btn-eliminar-amigo{ color:#e0574c; font-weight:600; }

.chat-mensajes{
  flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:10px; padding:18px 20px; min-height:0; min-width:0;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.chat-mensajes::-webkit-scrollbar, .chats-sidebar::-webkit-scrollbar{ width:8px; }
.chat-mensajes::-webkit-scrollbar-track, .chats-sidebar::-webkit-scrollbar-track{ background:transparent; }
.chat-mensajes::-webkit-scrollbar-thumb, .chats-sidebar::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:999px;
}
.chat-mensajes::-webkit-scrollbar-thumb:hover, .chats-sidebar::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }

.chat-msg{
  display:inline-block; max-width:100%; padding:10px 16px; border-radius:18px; font-size:.9rem; line-height:1.4;
  box-sizing:border-box;
  box-shadow:0 2px 8px -4px rgba(0,0,0,.35);
  animation:chat-msg-in .18s ease;
  overflow:visible; height:auto; max-height:none; flex-shrink:0; resize:none;
}
.chat-msg-texto{
  display:contents;
  white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word;
}
@keyframes chat-msg-in{
  from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); }
}
.chat-msg-propio{ align-self:flex-end; background:linear-gradient(135deg, var(--rose), var(--sage)); color:#fff; border-bottom-right-radius:4px; }
.chat-msg-otro{ align-self:flex-start; background:var(--bg-raise-2); color:var(--ink); border-bottom-left-radius:4px; }
.chat-msg-ia{ align-self:flex-start; background:var(--sage); color:var(--sage-ink); border-bottom-left-radius:4px; }

.form-chat-mensaje{
  display:flex; flex-direction:row; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--line);
  max-width:none; margin:0;
}
.form-chat-mensaje textarea{
  flex:1; padding:11px 18px; border:1px solid var(--line); border-radius:999px; font-family:var(--font-body);
  resize:none; background:var(--bg-raise-2); color:var(--ink); max-height:60px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-chat-mensaje textarea:focus{
  outline:none; border-color:var(--rose); background:var(--bg); box-shadow:0 0 0 3px rgba(232,121,196,.18);
}
.btn-enviar{
  width:42px; height:42px; border-radius:50%; border:none;
  background:linear-gradient(135deg, var(--teal), var(--rose)); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  box-shadow:0 6px 16px -6px rgba(232,121,196,.6);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-enviar svg{ transform:translateX(-1px); }
.btn-enviar:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 10px 22px -6px rgba(232,121,196,.75); }
.btn-enviar:active{ transform:translateY(0) scale(.96); }

.chat-item-skeleton{
  height:58px; border-radius:12px; margin-bottom:6px;
  background:linear-gradient(90deg, var(--bg-raise-2) 25%, var(--bg-raise) 37%, var(--bg-raise-2) 63%);
  background-size:400% 100%; animation:chat-skeleton 1.4s ease infinite;
}
@keyframes chat-skeleton{
  0%{ background-position:100% 50%; } 100%{ background-position:0 50%; }
}

@media (max-width: 780px){
  .chats-layout{ grid-template-columns:1fr; height:auto; max-height:none; }
  .chats-sidebar{ height:auto; max-height:260px; border-right:none; border-bottom:1px solid var(--line); }
  .chats-panel{ height:70vh; min-height:420px; }
  .chat-msg{ max-width:min(78%, 300px); }
}

/* ============================================================
   Botones de eliminar (respuestas de discusión, comentarios de
   blog y mensajes de chat) — estilo unificado tipo "chip" con ícono.
   ============================================================ */
.btn-icon-eliminar{
  display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(226,96,79,.35);
  background:rgba(226,96,79,.08); color:var(--danger); border-radius:999px; padding:6px 14px;
  font-size:.78rem; font-weight:700; cursor:pointer; font-family:var(--font-body);
  transition:background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.btn-icon-eliminar:hover{ background:rgba(226,96,79,.16); border-color:rgba(226,96,79,.6); transform:translateY(-1px); }
.btn-icon-eliminar:active{ transform:translateY(0); }
.btn-icon-eliminar:disabled{ opacity:.6; cursor:default; transform:none; }
.btn-icon-eliminar svg{ width:13px; height:13px; flex-shrink:0; }

.btn-icon-editar{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  background:transparent; color:var(--ink-soft); border-radius:999px; padding:6px 14px;
  font-size:.78rem; font-weight:700; cursor:pointer; font-family:var(--font-body);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-icon-editar:hover{ background:var(--bg-raise-2); color:var(--ink); border-color:var(--ink-faint); }

.respuesta-acciones, .comentario-acciones{ display:flex; gap:10px; flex-wrap:wrap; }

/* Autor clicable (avatar + nombre) que abre el modal de perfil */
.autor-clicable{
  display:inline-flex; align-items:center; gap:8px; background:none; border:none; padding:0;
  cursor:pointer; font-family:var(--font-body); color:inherit; text-align:left;
}
.autor-clicable:hover strong, .autor-clicable:hover .autor-nombre{ text-decoration:underline; }
.autor-clicable img{ pointer-events:none; }

/* Modal de perfil público */
.perfil-modal-overlay{
  position:fixed; inset:0; background:rgba(15,15,20,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:99999; padding:16px;
  opacity:0; transition:opacity .15s ease;
}
.perfil-modal-overlay.show{ opacity:1; }
.perfil-modal-box{
  background:var(--bg); color:var(--ink); border-radius:16px; max-width:380px; width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.28); transform:translateY(8px) scale(.98);
  transition:transform .15s ease; overflow:hidden; border:1px solid var(--line);
}
.perfil-modal-overlay.show .perfil-modal-box{ transform:translateY(0) scale(1); }
.perfil-modal-close{
  position:absolute; top:12px; right:14px; background:none; border:none; font-size:1.3rem;
  line-height:1; color:var(--ink-faint); cursor:pointer;
}
.perfil-modal-close:hover{ color:var(--ink); }
.perfil-modal-header{
  position:relative; padding:28px 22px 18px; text-align:center;
  background:linear-gradient(135deg, var(--rose), var(--teal));
}
.perfil-modal-avatar{
  width:78px; height:78px; border-radius:50%; object-fit:cover; border:3px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.2); margin:0 auto 10px; display:block;
}
.perfil-modal-header h3{ margin:0; color:#fff; font-size:1.1rem; }
.perfil-modal-header span{ color:rgba(255,255,255,.9); font-size:.85rem; }
.perfil-modal-body{ padding:18px 22px 22px; }
.perfil-modal-bio{ font-size:.92rem; color:var(--ink-soft); line-height:1.5; margin:0 0 16px; white-space:pre-wrap; }
.perfil-modal-bio.vacio{ font-style:italic; color:var(--ink-faint); }
.perfil-modal-stats{ display:flex; gap:18px; border-top:1px solid var(--line); padding-top:14px; }
.perfil-modal-stats div{ flex:1; text-align:center; }
.perfil-modal-stats b{ display:block; font-size:1.05rem; }
.perfil-modal-stats span{ font-size:.75rem; color:var(--ink-faint); }
.perfil-modal-loading{ padding:40px 22px; text-align:center; color:var(--ink-faint); }

/* Cita/preview de "responder a" (WhatsApp/Discord-style), para
   discusiones, comentarios de blog y chat. */
.cita-preview{
  display:flex; align-items:flex-start; gap:8px; background:var(--bg-raise-2);
  border-left:3px solid var(--rose); border-radius:8px; padding:8px 10px; margin:0 0 8px;
  font-size:.8rem; color:var(--ink-soft);
}
.cita-preview-texto{ flex:1; min-width:0; }
.cita-preview-texto strong{ display:block; color:var(--ink); font-size:.78rem; }
.cita-preview-texto p{ margin:2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cita-preview-cerrar{ background:none; border:none; cursor:pointer; color:var(--ink-faint); font-size:1rem; line-height:1; padding:0 2px; }
.cita-preview-cerrar:hover{ color:var(--ink); }

.btn-responder-cita{
  background:none; border:none; padding:0; font-size:.78rem; font-weight:600; color:var(--ink-soft);
  cursor:pointer; font-family:var(--font-body); transition:color .15s ease;
}
.btn-responder-cita:hover{ color:var(--ink); text-decoration:underline; }

/* Cita ya insertada dentro de un mensaje/comentario/respuesta publicado */
.cita-referencia{
  display:block; border-left:3px solid var(--line); padding:4px 10px; margin:0 0 8px;
  font-size:.8rem; color:var(--ink-faint); background:var(--bg-raise-2); border-radius:6px;
}
.cita-referencia strong{ color:var(--ink-soft); }

/* Chat: mensaje con cita + botón de responder/eliminar en hover */
.chat-msg-wrap{ display:flex; flex-direction:column; max-width:min(65%, 460px); }
.chat-msg-wrap.propio{ align-self:flex-end; align-items:flex-end; }
.chat-msg-wrap.otro{ align-self:flex-start; align-items:flex-start; }
.chat-msg-cita{
  font-size:.72rem; color:#fff; background:rgba(15,15,22,.55); border-left:2px solid rgba(255,255,255,.6);
  padding:4px 8px; margin-bottom:4px; border-radius:4px;
}
.chat-msg-otro .chat-msg-cita, .chat-msg-ia .chat-msg-cita{
  background:var(--bg); color:var(--ink);
}
.chat-msg-acciones{
  display:flex; gap:10px; margin-top:2px; opacity:0; transition:opacity .15s ease; font-size:.72rem;
}
.chat-msg-wrap:hover .chat-msg-acciones{ opacity:1; }
.chat-msg-acciones button{
  background:none; border:none; padding:0; cursor:pointer; color:var(--ink-faint); font-family:var(--font-body);
}
.chat-msg-acciones button:hover{ color:var(--ink); text-decoration:underline; }

/* Comentarios de blog (mismo patrón visual que discusion-respuesta) */
.blog-comentarios-lista{ margin-top:8px; }
.blog-comentario{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }

/* ============================================================
   Interactividad — heatmap de constancia, confetti, toasts,
   typing indicator y recibos de lectura en chat
   ============================================================ */

/* --- Heatmap de constancia (Árbol de Habilidades) --- */
.heatmap-wrap{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.heatmap-titulo{ font-size:.78rem; color:var(--ink-faint); margin:0 0 8px; text-transform:uppercase; letter-spacing:.06em; }
.heatmap-grid{ display:grid; grid-template-columns:repeat(15, 1fr); gap:4px; max-width:420px; }
.heatmap-day{
  width:100%; aspect-ratio:1/1; border-radius:3px; background:var(--bg-raise-2);
  border:1px solid var(--line); cursor:default; transition:transform .1s ease;
}
.heatmap-day:hover{ transform:scale(1.25); }
.heatmap-day.sin-datos{ background:transparent; border-style:dashed; }
.heatmap-day.nivel-0{ background:var(--bg-raise-2); }
.heatmap-day.nivel-1{ background:rgba(217,70,168,.25); border-color:rgba(217,70,168,.25); }
.heatmap-day.nivel-2{ background:rgba(217,70,168,.5); border-color:rgba(217,70,168,.5); }
.heatmap-day.nivel-3{ background:rgba(217,70,168,.75); border-color:rgba(217,70,168,.75); }
.heatmap-day.nivel-4{ background:var(--sage); border-color:var(--sage); }
.heatmap-leyenda{ display:flex; align-items:center; gap:4px; margin-top:8px; font-size:.72rem; color:var(--ink-faint); }
.heatmap-leyenda .heatmap-day{ width:12px; height:12px; flex-shrink:0; }

/* --- Confetti al completar una actividad --- */
#confetti-canvas{
  position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:9998;
}

/* --- Toast de subida de nivel --- */
.nivel-toast{
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-20px);
  background:linear-gradient(135deg, var(--rose, #E879C4), var(--sage)); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.92rem;
  padding:12px 22px; border-radius:999px; box-shadow:0 10px 30px -8px rgba(217,70,168,.6);
  z-index:9999; opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.nivel-toast.mostrar{ opacity:1; transform:translateX(-50%) translateY(0); }

/* --- Typing indicator en chats --- */
.chat-typing-dots{
  display:inline-flex; gap:4px; align-items:center; padding:2px 4px;
}
.chat-typing-dots span{
  width:6px; height:6px; border-radius:50%; background:var(--sage-ink, #2f4f3f); opacity:.55;
  animation:chat-typing-bounce 1.1s infinite ease-in-out;
}
.chat-typing-dots span:nth-child(2){ animation-delay:.15s; }
.chat-typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes chat-typing-bounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.55; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* --- Recibos de lectura (✓✓), estilo WhatsApp: dentro de la burbuja --- */
.chat-msg-propio{ position:relative; padding-right:42px; padding-bottom:22px; }
.chat-msg-ticks{
  position:absolute; right:12px; bottom:8px;
  font-size:.68rem; color:rgba(255,255,255,.65); letter-spacing:-2px; line-height:1;
}
.chat-msg-ticks.leido{ color:#6fe0ff; letter-spacing:-1px; }

/* --- Picker de reacciones (❤️ 👏 💪 🙌 🔥 🌱) en discusiones y blogs --- */
.reaccion-wrap{ position:relative; display:inline-flex; }
.reaccion-toggle-btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-raise-2); color:var(--ink-soft);
  font-family:var(--font-display); font-size:.82rem; font-weight:600; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}
.reaccion-toggle-btn:hover{ border-color:var(--sage); color:var(--ink); }
.reaccion-toggle-btn.activa{ background:rgba(217,70,168,.18); border-color:var(--sage); color:var(--sage); }
.reaccion-toggle-btn .reaccion-icono{ font-size:1rem; line-height:1; }
.reaccion-toggle-btn .reaccion-contador{ font-family:var(--font-mono); font-size:.78rem; }
.reaccion-toggle-btn.reaccion-pop{ animation:reaccion-pop-anim .26s ease; }
@keyframes reaccion-pop-anim{
  0%{ transform:scale(1); } 40%{ transform:scale(1.18); } 100%{ transform:scale(1); }
}
.reaccion-solo-conteo{ font-size:.78rem; color:var(--ink-faint); }

.reaccion-picker{
  display:none; position:absolute; bottom:calc(100% + 8px); left:0; z-index:20;
  background:var(--bg-raise-2); border:1px solid var(--line); border-radius:999px;
  padding:6px 8px; gap:4px; box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
  animation:reaccion-picker-in .15s ease;
}
.reaccion-picker.abierto{ display:flex; }
@keyframes reaccion-picker-in{
  from{ opacity:0; transform:translateY(4px) scale(.9); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.reaccion-emoji-btn{
  appearance:none; border:0; background:transparent; font-size:1.25rem; line-height:1;
  padding:5px; border-radius:50%; cursor:pointer; transition:transform .12s ease, background .12s ease;
}
.reaccion-emoji-btn:hover{ transform:scale(1.25); background:var(--bg-raise-3, rgba(255,255,255,.06)); }
.reaccion-emoji-btn.activo{ background:rgba(217,70,168,.22); }
.reaccion-emoji-btn:disabled{ opacity:.5; cursor:default; transform:none; }

/* --- Scroll infinito (comunidad y discusiones) --- */
.infinite-scroll-sentinel{
  height:40px; margin-top:18px; display:flex; align-items:center; justify-content:center;
}
.infinite-scroll-sentinel.cargando::after{
  content:''; width:22px; height:22px; border-radius:50%;
  border:2.5px solid var(--line); border-top-color:var(--sage);
  animation:infinite-scroll-spin .7s linear infinite;
}
@keyframes infinite-scroll-spin{ to{ transform:rotate(360deg); } }
.infinite-scroll-fin{
  text-align:center; color:var(--ink-faint); font-size:.85rem; margin-top:12px;
}

/* --- Indicador de "escribiendo..." con avatar y nombre --- */
.chat-typing-wrap{ display:flex; align-items:center; gap:8px; }
.chat-typing-wrap img{
  width:22px !important; height:22px !important; max-width:22px; max-height:22px;
  min-width:22px; min-height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; display:block;
}
.chat-typing-nombre{ font-size:.72rem; color:var(--ink-faint); font-weight:600; }

/* --- Estado en línea / última actividad en el chat --- */
.chat-activo-estado{
  font-size:.72rem; color:var(--ink-faint); display:flex; align-items:center; gap:5px;
}
.chat-activo-estado .punto-online{
  width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex-shrink:0;
  transition:background .2s ease; flex-grow:0; flex-basis:7px;
}
.chat-activo-estado.en-linea .punto-online{ background:#3ecf7e; box-shadow:0 0 0 3px rgba(62,207,126,.18); }
.chat-item-estado-punto{
  width:8px; height:8px; border-radius:50%; background:#3ecf7e; border:2px solid var(--bg);
  position:absolute; margin-left:22px; margin-top:22px;
}

/* --- Reacción rápida (doble tap/clic) en mensajes de chat --- */
.chat-msg-wrap{ position:relative; }
.chat-msg-reaccion{
  position:absolute; bottom:-10px; font-size:.8rem; background:var(--bg-raise-2);
  border:1px solid var(--line); border-radius:999px; padding:1px 6px; line-height:1.4;
  display:none; align-items:center; gap:2px; box-shadow:0 2px 6px -2px rgba(0,0,0,.25);
}
.chat-msg-wrap.propio .chat-msg-reaccion{ right:8px; }
.chat-msg-wrap.otro .chat-msg-reaccion{ left:8px; }
.chat-msg-reaccion.visible{ display:inline-flex; }
.chat-msg-reaccion.pop{ animation:reaccion-pop-anim .28s ease; }
.chat-msg-corazon-flotante{
  position:absolute; left:50%; top:20%; transform:translate(-50%, 0); font-size:2.4rem;
  pointer-events:none; opacity:0; animation:chat-corazon-flotar .7s ease forwards;
}
@keyframes chat-corazon-flotar{
  0%{ opacity:0; transform:translate(-50%, 0) scale(.4); }
  30%{ opacity:1; transform:translate(-50%, -8px) scale(1.15); }
  100%{ opacity:0; transform:translate(-50%, -34px) scale(1); }
}

/* ================= Mejoras de hábitos más dinámicas ================= */

/* --- Anillo de progreso "Hoy" --- */
.hoy-ring{ position:relative; width:60px; height:60px; flex-shrink:0; }
.hoy-ring svg{ transform:rotate(-90deg); }
.hoy-ring-track{ fill:none; stroke:var(--line); stroke-width:5; }
.hoy-ring-progreso{
  fill:none; stroke:var(--sage); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:163.36; /* 2*pi*26 */
  stroke-dashoffset:calc(163.36 - (163.36 * var(--hoy-pct, 0) / 100));
  transition:stroke-dashoffset .5s ease;
}
.hoy-ring-texto{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.8rem; color:var(--ink);
}

/* --- Agrupación de "Hoy" por franja horaria --- */
.hoy-franja-titulo{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);
  font-weight:700; margin:16px 0 4px; padding-top:6px; border-top:1px dashed var(--line);
}
.hoy-franja-titulo:first-child{ margin-top:8px; border-top:none; padding-top:0; }

/* --- Actividad "en curso" resaltada --- */
.hoy-item.es-ahora{
  background:linear-gradient(90deg, rgba(139,213,158,.14), transparent);
  border-radius:var(--radius-sm); padding-left:8px; margin-left:-8px;
  animation:hoy-item-pulso 2.4s ease-in-out infinite;
}
@keyframes hoy-item-pulso{
  0%, 100%{ box-shadow:0 0 0 0 rgba(139,213,158,.25); }
  50%{ box-shadow:0 0 0 5px rgba(139,213,158,0); }
}

/* --- Feedback táctil al marcar un check --- */
.hoy-check.just-checked{ animation:hoy-check-pop .35s ease; }
@keyframes hoy-check-pop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.35); }
  100%{ transform:scale(1); }
}

/* --- Aviso de protector de racha --- */
.protector-racha-banner{
  background:linear-gradient(135deg, rgba(230,168,74,.16), rgba(230,120,74,.12));
  border:1px solid rgba(230,168,74,.4); color:var(--ink);
  border-radius:var(--radius-sm); padding:10px 14px; font-size:.84rem; margin:10px 0 14px;
}

/* --- Nota de insight automático --- */
.insight-nota{
  font-size:.82rem; color:var(--ink-soft); background:var(--bg-raise-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 12px; margin-top:12px;
}

/* --- Handle de arrastre en la rutina --- */
.rutina-panel .rutina-item-row{ position:relative; cursor:default; }
.rutina-drag-handle{
  cursor:grab; color:var(--ink-faint); font-size:1rem; padding:0 4px; user-select:none;
  align-self:center;
}
.rutina-drag-handle:active{ cursor:grabbing; }
.rutina-item-row.arrastrando{ opacity:.4; }
.rutina-item-row.drag-encima{ border-top:2px solid var(--sage); }
@media (min-width:761px){
  .rutina-panel .rutina-item-row{ grid-template-columns:auto 1.6fr 1fr auto auto auto; }
}

/* --- Toggle de vista compacta/calendario --- */
.heatmap-vista-toggle{ display:flex; gap:4px; background:var(--bg-raise-2); border:1px solid var(--line); border-radius:999px; padding:3px; }
.heatmap-vista-btn{
  appearance:none; border:0; background:transparent; padding:4px 12px; border-radius:999px;
  font-size:.76rem; font-weight:600; color:var(--ink-faint); cursor:pointer; transition:all .15s ease;
}
.heatmap-vista-btn.active{ background:var(--sage); color:var(--sage-ink); }

/* --- Vista de calendario mensual --- */
.calendario-mensual{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin-top:14px; }
.calendario-cabecera{ text-align:center; font-size:.68rem; color:var(--ink-faint); font-weight:700; padding-bottom:4px; }
.calendario-celda{
  appearance:none; border:1px solid var(--line); background:var(--bg-raise-2); border-radius:8px;
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.76rem;
  color:var(--ink-soft); cursor:pointer; transition:transform .1s ease, border-color .15s ease;
}
.calendario-celda:hover{ transform:translateY(-1px); border-color:var(--ink-soft); }
.calendario-celda.vacia{ visibility:hidden; cursor:default; }
.calendario-celda.sin-datos{ color:var(--ink-faint); }
.calendario-celda.nivel-0{ background:var(--bg-raise-2); }
.calendario-celda.nivel-1{ background:rgba(139,213,158,.25); border-color:rgba(139,213,158,.4); }
.calendario-celda.nivel-2{ background:rgba(139,213,158,.5); border-color:rgba(139,213,158,.6); color:var(--sage-ink); }
.calendario-celda.nivel-3{ background:rgba(139,213,158,.75); border-color:var(--sage); color:var(--sage-ink); }
.calendario-celda.nivel-4{ background:var(--sage); border-color:var(--sage); color:var(--sage-ink); font-weight:800; }
.calendario-celda.dia-seleccionado{ outline:2px solid var(--rose); outline-offset:1px; }

/* --- Comparación visual con el Partner --- */
.comparacion-padrino{ margin-bottom:16px; }
.comparacion-fila{ display:flex; align-items:center; gap:10px; }
.comparacion-etiqueta{ width:44px; flex-shrink:0; font-size:.76rem; color:var(--ink-faint); font-weight:600; }
.comparacion-barras{ flex:1; display:flex; flex-direction:column; gap:4px; }
.comparacion-barra{ height:8px; border-radius:999px; background:var(--bg-raise-2); overflow:hidden; }
.comparacion-barra span{ display:block; height:100%; border-radius:999px; transition:width .5s ease; }
.comparacion-barra.tu-barra span{ background:var(--sage); }
.comparacion-barra.partner-barra span{ background:var(--rose); }
.comparacion-valores{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-faint); margin:2px 0 0 54px; }

/* --- Badge de recordatorio en el navbar --- */
.user-avatar-btn{ position:relative; }
.rutina-badge-nav{
  position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--rose); color:#fff; font-size:.62rem; font-weight:800;
  align-items:center; justify-content:center; border:2px solid var(--bg);
}
.rutina-proxima-texto{
  display:block; font-size:.74rem; color:var(--sage); font-weight:600; margin-top:4px;
}

/* ================= Página de Configuración ================= */
.config-tabs{
  display:flex; gap:6px; border-bottom:1px solid var(--line); margin-top:22px; flex-wrap:wrap;
}
.config-tab{
  padding:10px 16px; font-size:.88rem; font-weight:600; color:var(--ink-faint);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s ease;
}
.config-tab:hover{ color:var(--ink); }
.config-tab.active{ color:var(--sage); border-bottom-color:var(--sage); }

.config-dato-fila{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:.88rem;
}
.config-dato-etiqueta{ color:var(--ink-faint); font-weight:600; }
.config-dato-valor{ color:var(--ink); text-align:right; }

.config-persona-fila{
  display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);
}
.config-persona-fila:last-child{ border-bottom:none; }
.config-persona-info{ display:flex; flex-direction:column; flex:1; min-width:0; }
.config-persona-info strong{ font-size:.9rem; }
.config-persona-info span{ font-size:.78rem; color:var(--ink-faint); }

.config-actividad-lista{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:9px; }
.config-actividad-lista li{ font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.config-actividad-lista li a{ color:var(--sage); font-weight:600; text-decoration:none; }
.config-actividad-lista li a:hover{ text-decoration:underline; }
.config-actividad-fecha{ color:var(--ink-faint); font-size:.76rem; display:block; }
.config-actividad-subtitulo{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
  font-weight:700; margin:0;
}

/* --- Botones Like / Dislike --- */
.like-dislike-wrap{ display:inline-flex; align-items:center; gap:4px; }
.like-btn, .dislike-btn{
  display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-raise-2); color:var(--ink-faint);
  cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}
.like-btn:hover{ border-color:#4fb877; color:#4fb877; transform:translateY(-1px); }
.dislike-btn:hover{ border-color:#e2604f; color:#e2604f; transform:translateY(-1px); }
.like-btn.activo{ background:rgba(79,184,119,.16); border-color:#4fb877; color:#4fb877; }
.dislike-btn.activo{ background:rgba(226,96,79,.16); border-color:#e2604f; color:#e2604f; }
.like-btn .like-contador{ font-family:var(--font-mono); font-size:.78rem; }
.like-btn:disabled, .dislike-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.like-solo-conteo{ font-size:.78rem; color:var(--ink-faint); }

/* ================= Chat ancla con el Partner (Padrino) ================= */

/* Tarjeta anclada en el sidebar: gradiente morado animado, para que se */
/* sienta distinta y especial frente a los chats normales de la lista. */
.padrino-anclado{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  padding:14px; border-radius:14px; border:1px solid rgba(168,120,255,.4);
  background:linear-gradient(120deg, #6b3fa0, #9b5de5, #7c4dcc, #5a2e91);
  background-size:300% 300%; animation:padrino-gradiente 8s ease infinite;
  color:#fff; cursor:pointer; margin-bottom:14px; position:relative;
  box-shadow:0 6px 20px -8px rgba(123,63,214,.6);
  transition:transform .15s ease, box-shadow .15s ease;
}
.padrino-anclado:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -8px rgba(123,63,214,.75); }
.padrino-anclado.activo{ outline:2px solid #fff; outline-offset:2px; }
@keyframes padrino-gradiente{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.padrino-anclado-icono{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0;
}
.padrino-anclado-info{ display:flex; flex-direction:column; min-width:0; }
.padrino-anclado-info strong{ font-size:.9rem; }
.padrino-anclado-info span{ font-size:.74rem; opacity:.85; }
.padrino-anclado-badge{
  margin-left:auto; background:#fff; color:#6b3fa0; font-weight:800; font-size:.72rem;
  min-width:20px; height:20px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  padding:0 5px; flex-shrink:0;
}

/* Avatar especial (sin foto real: el vínculo es anónimo) */
.chat-activo-avatar-padrino{
  width:46px; height:46px; border-radius:50%; flex:0 0 46px !important;
  background:linear-gradient(135deg, #9b5de5, #6b3fa0); background-size:200% 200%;
  animation:padrino-gradiente 6s ease infinite;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}

/* Header y fondo del panel de chat cuando estamos hablando con el Partner */
.chat-activo.chat-activo-padrino .chat-activo-header{
  background:linear-gradient(120deg, rgba(107,63,160,.18), rgba(155,93,229,.14), rgba(90,46,145,.18));
  background-size:300% 300%; animation:padrino-gradiente 10s ease infinite;
  border-radius:12px 12px 0 0;
}
.chat-activo.chat-activo-padrino .chat-mensajes{
  background:linear-gradient(180deg, rgba(107,63,160,.06), transparent 140px);
}
.chat-msg-padrino-propio{
  background:linear-gradient(135deg, #9b5de5, #6b3fa0) !important; color:#fff !important;
}
.chat-msg-padrino-otro{
  background:var(--bg-raise-2); border:1px solid rgba(155,93,229,.35);
}
.padrino-intro-vacio{ text-align:center; color:var(--ink-faint); font-size:.86rem; padding:30px 16px; }

/* --- Modal genérico propio (usado para el aviso de bloquear al Partner) --- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,8,16,.6); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px;
}
.modal-caja{
  background:var(--bg-raise-2); border:1px solid var(--line); border-radius:var(--radius-md);
  max-width:440px; width:100%; padding:24px; box-shadow:0 20px 50px -10px rgba(0,0,0,.5);
}
.modal-caja h3{ margin:0 0 10px; }
.modal-caja p{ color:var(--ink-soft); font-size:.9rem; line-height:1.5; margin:0 0 10px; }
.modal-lista{ margin:0 0 14px; padding-left:20px; color:var(--ink-soft); font-size:.88rem; line-height:1.6; }
.modal-lista li{ margin-bottom:4px; }
.modal-botones{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }

/* --- El textarea del chat crece con el contenido (ver JS), con tope máximo --- */
.form-chat-mensaje textarea{ transition:height .1s ease; resize:none; }

/* --- "Ver quién reaccionó" dentro del picker --- */
.reaccion-ver-quien-btn{
  appearance:none; border:0; background:transparent; color:var(--ink-faint); font-size:.85rem;
  padding:5px 6px; border-radius:50%; cursor:pointer; margin-left:2px;
}
.reaccion-ver-quien-btn:hover{ background:var(--bg-raise-3, rgba(255,255,255,.06)); color:var(--ink); }
.reaccion-quienes-lista{
  display:none; position:absolute; bottom:calc(100% + 8px); left:0; z-index:21; min-width:160px; max-width:220px;
  background:var(--bg-raise-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4); font-size:.8rem; color:var(--ink-soft);
}
.reaccion-quienes-lista.abierta{ display:block; }
.reaccion-quienes-lista .fila{ display:flex; justify-content:space-between; gap:8px; padding:3px 0; }
.reaccion-quienes-lista .cargando{ color:var(--ink-faint); }

/* --- Dropdown de @menciones --- */
.mencion-dropdown{
  position:absolute; z-index:9997; background:var(--bg-raise-2); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 10px 28px -8px rgba(0,0,0,.45); padding:4px; max-height:220px; overflow-y:auto;
}
.mencion-dropdown-item{
  display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:0; background:transparent;
  border-radius:6px; cursor:pointer; text-align:left; font-size:.85rem; color:var(--ink);
}
.mencion-dropdown-item:hover{ background:rgba(255,255,255,.06); }
.mencion-dropdown-item img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
.mencion-dropdown-hint{ display:block; padding:6px 8px; font-size:.78rem; color:var(--ink-faint); }

/* --- "Escribiendo..." en discusiones --- */
.discusion-escribiendo-indicador{
  font-size:.8rem; color:var(--sage); font-style:italic; margin:0 0 10px;
}

/* ---------- Psicólogos ---------- */
.field-label{ display:block; font-size:.8rem; color:var(--ink-faint); margin-bottom:6px; }
.alert-box{ padding:12px 16px; border-radius:10px; font-size:.9rem; }
.alert-ok{ background:rgba(139,92,246,.15); color:#c9b8fb; }
.alert-error{ background:rgba(226,96,79,.15); color:#f3a89c; }

.psic-registro-card{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; margin:24px 0 44px;
}
.psic-registro-card > button{ flex-shrink:0; }
@media (max-width:560px){
  .psic-registro-card{ flex-direction:column; align-items:stretch !important; padding:20px; }
  .psic-registro-card > button{ width:100%; }
}
.psic-form-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
@media (max-width: 760px){ .psic-form-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .psic-form-grid{ grid-template-columns:1fr; } }

.psic-grid-wrap{ margin-top:12px; }
.psic-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px;
  max-width:980px; margin:0 auto; /* centrado, con margen lateral en pantallas anchas */
}
@media (max-width: 900px){ .psic-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 600px){ .psic-grid{ grid-template-columns:1fr; } }

.psic-card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column;
}
.psic-card-portada{
  height:150px; background-size:cover; background-position:center; background-color:var(--bg-raise);
}
.psic-card-info{ padding:16px; }
.psic-card-info h3{ font-size:1.02rem; margin:0 0 4px; }
.psic-card-ciudad{ font-size:.84rem; color:var(--ink-faint); margin:0 0 2px; }
.psic-card-precio{ font-size:.88rem; color:var(--teal); font-weight:600; margin:0; }

/* Card propia del psicólogo/a dentro de la grilla: se ve su foto real, pero
   desenfocada (blur real de la imagen, no solo un tinte) detrás de una capa
   gris translúcida — como si estuviera cubierta por neblina. Debajo, un
   texto aclara que esa es su propia card. */
.psic-card-mia .psic-card-portada-neblina{ position:relative; overflow:hidden; }
.psic-card-mia .psic-card-portada-neblina::before{
  content:''; position:absolute; inset:-12px;
  background-image:inherit; background-size:cover; background-position:center;
  filter:blur(10px) grayscale(.25) brightness(.85);
  transform:scale(1.05); /* evita ver el borde sin desenfocar */
}
.psic-card-mia .psic-card-portada-neblina::after{
  content:''; position:absolute; inset:0;
  background:rgba(120,124,138,.45);
}
.psic-card-mia .psic-card-info{ padding:14px 16px; text-align:center; }
.psic-card-mia-texto{
  margin:0; font-size:.88rem; font-weight:600; color:var(--ink-soft);
}

.psic-detalle-lista{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.psic-detalle-lista strong{ color:var(--ink-faint); font-weight:600; margin-right:6px; }

/* ---------- Insignia de Psicólogo/a (comentarios de blog y discusiones) ---------- */
.psic-badge-titulo{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.02em;
  padding:2px 9px; border-radius:999px; margin-left:6px; vertical-align:middle;
  background:linear-gradient(135deg, rgba(232,87,155,.85), rgba(139,92,246,.85));
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.15);
}