/* ═══════════════════════════════════════════════════════════════
   QUIMII PERFIL — perfil.css
   Diseño profesional, dopaminico, dark/light
═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --accent:        #1da1f2;
  --accent-2:      #0d8ed9;
  --accent-glow:   rgba(29,161,242,0.25);
  --accent-soft:   rgba(29,161,242,0.10);
  --danger:        #ef4444;
  --danger-soft:   rgba(239,68,68,0.12);
  --success:       #22c55e;

  --bg:            #f0f4f8;
  --surface:       #ffffff;
  --surface-2:     #f7fafc;
  --surface-3:     #edf2f7;
  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);

  --text-1:        #0f172a;
  --text-2:        #475569;
  --text-3:        #94a3b8;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.14);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.18);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  --hero-h: 220px;
  --avatar-size: 110px;
}

/* ── DARK TOKENS ── */
html.dark {
  --bg:            #0a0e1a;
  --surface:       #111827;
  --surface-2:     #1a2236;
  --surface-3:     #1e293b;
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --text-1:        #f1f5f9;
  --text-2:        #94a3b8;
  --text-3:        #475569;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.7);
}

/* Compatibilidad con body.modo-oscuro */
body.modo-oscuro { --bg:#0a0e1a; --surface:#111827; --surface-2:#1a2236; --surface-3:#1e293b; --border:rgba(255,255,255,0.07); --border-strong:rgba(255,255,255,0.12); --text-1:#f1f5f9; --text-2:#94a3b8; --text-3:#475569; }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  transition: background .3s, color .3s;
}

img { display: block; }
button { cursor: pointer; font-family: inherit; }
a { text-decoration: none; }

/* ════════════════════════════════
   NAV
════════════════════════════════ */
.pf-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pf-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: opacity .15s;
}
.pf-nav-back:hover { opacity: .75; }
.pf-nav-back svg { width: 20px; height: 20px; }

.pf-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-icon-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: background .15s, color .15s, border-color .15s;
}
.pf-icon-btn:hover { background: var(--surface-3); color: var(--text-1); }
.pf-icon-btn svg { width: 18px; height: 18px; }

/* theme toggle icons */
.icon-sun  { display: block; }
.icon-moon { display: none; }
html.dark .icon-sun  { display: none; }
html.dark .icon-moon { display: block; }
body.modo-oscuro .icon-sun  { display: none; }
body.modo-oscuro .icon-moon { display: block; }

.pf-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.pf-logout-btn:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.pf-logout-btn svg { width: 16px; height: 16px; }

/* ════════════════════════════════
   HERO / BANNER
════════════════════════════════ */
.pf-hero {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
}

.pf-banner-gradient {
  position: absolute;
  inset: 0;
  animation: bannerShift 12s ease-in-out infinite alternate;
}

@keyframes bannerShift {
  0%   { filter: hue-rotate(0deg)  brightness(1); }
  100% { filter: hue-rotate(20deg) brightness(1.08); }
}

/* Avatar flotante */
.pf-avatar-anchor {
  position: absolute;
  bottom: calc(var(--avatar-size) * 0.1);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.pf-avatar-ring {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg, var(--accent), #8b5cf6, #ec4899, var(--accent));
  box-shadow: 0 0 0 4px var(--bg), var(--shadow-lg);
  animation: ringRotate 6s linear infinite;
}

@keyframes ringRotate {
  to { background: conic-gradient(from 360deg, var(--accent), #8b5cf6, #ec4899, var(--accent)); }
}

.pf-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg);
}

.pf-avatar-status {
  position: absolute;
  bottom: 6px; right: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: var(--text-3);
  transition: background .3s;
}
.pf-avatar-status.online  { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.pf-avatar-status.away    { background: #f59e0b; }
.pf-avatar-status.offline { background: var(--text-3); }

/* ════════════════════════════════
   HEADER BLOCK
════════════════════════════════ */
.pf-header-block {
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--avatar-size) * 0.52) 20px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pf-header-left { flex: 1; min-width: 0; }

.pf-name {
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.verified-badge {
  flex-shrink: 0;
  color: var(--accent);
}
.verified-badge svg { width: 22px; height: 22px; }

.pf-username {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}

.pf-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.pf-status-pill::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.pf-status-pill.status-online  { color: var(--success); background: rgba(34,197,94,.12); }
.pf-status-pill.status-away    { color: #f59e0b; background: rgba(245,158,11,.12); }
.pf-status-pill.status-offline { color: var(--text-3); background: var(--surface-3); }

.pf-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 2px;
}

/* ── BUTTONS ── */
.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  transition: all .18s;
  white-space: nowrap;
}
.pf-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pf-btn:active { transform: scale(.96); }

.pf-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.pf-btn-primary:hover { background: var(--accent-2); box-shadow: 0 6px 18px var(--accent-glow); }

.pf-btn-ghost {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border-strong);
}
.pf-btn-ghost:hover { background: var(--surface-3); color: var(--text-1); }

.pf-btn-edit {
  background: var(--surface-2);
  color: var(--text-1);
  border-color: var(--border-strong);
}
.pf-btn-edit:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.pf-btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}
.pf-btn-danger:hover { background: var(--danger); color: #fff; }

.pf-btn-secondary { background: var(--surface-3); color: var(--text-2); border-color: var(--border); }
.pf-btn-secondary:hover { background: var(--surface-2); color: var(--text-1); }

.pf-btn.gris { opacity: .55; }

/* ════════════════════════════════
   STATS BAR
════════════════════════════════ */
.pf-stats-bar {
  max-width: 680px;
  margin: 20px auto 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pf-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  transition: background .15s;
}
.pf-stat:hover { background: var(--surface-2); cursor: default; }

.pf-stat strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pf-stat span {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pf-stat-sep {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

/* ════════════════════════════════
   BIO
════════════════════════════════ */
.pf-bio-block {
  max-width: 680px;
  margin: 20px auto 0;
  padding: 0 20px;
}

.pf-bio {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.pf-info { margin-top: 6px; font-size: 13px; color: var(--text-3); }

.profile-location-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}
.profile-location-link:hover { text-decoration: underline; }

/* ════════════════════════════════
   POSTS SECTION
════════════════════════════════ */
.pf-posts-section {
  max-width: 680px;
  margin: 28px auto 60px;
  padding: 0 20px;
}

.pf-tabs-wrap { border-bottom: 2px solid var(--border); margin-bottom: 20px; }

.pf-tabs {
  display: inline-flex;
  gap: 0;
}

.pf-tab {
  padding: 10px 22px;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: color .2s, border-color .2s;
}
.pf-tab:hover { color: var(--text-2); }
.pf-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Posts grid */
.pf-posts-grid {
  display: grid;
  gap: 16px;
}

/* Post card */
.post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s, border-color .2s;
  position: relative;
}

.post.post-clickable { cursor: pointer; }
.post.post-clickable:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.post h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}
.post p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 10px;
}
.post small {
  font-size: 12px;
  color: var(--text-3);
}

.publicacion-foto {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-top: 12px;
}

.publicacion-video-wrap {
  position: relative;
  margin-top: 12px;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.publicacion-video { width: 100%; display: block; border-radius: var(--r-sm); max-height: 360px; object-fit: cover; }

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  border: none;
}
.video-play-overlay.hidden { display: none; }
.play-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: block;
  clip-path: polygon(30% 20%, 80% 50%, 30% 80%);
}

.delete-btn {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: none;
  background: var(--danger-soft);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.delete-btn:hover { background: var(--danger); }
.delete-btn img { width: 16px; height: 16px; filter: none; }

/* Empty states */
.pf-posts-grid p {
  padding: 40px 0;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

/* ════════════════════════════════
   BLOCKED MESSAGE
════════════════════════════════ */
.blocked-message {
  max-width: 680px;
  margin: 24px auto;
  padding: 32px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.blocked-message h2 { font-size: 20px; margin-bottom: 10px; }
.blocked-message p  { font-size: 14px; color: var(--text-2); }

/* ════════════════════════════════
   MODAL BASE
════════════════════════════════ */
.ep-overlay, .confirm-overlay, .post-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s, visibility .22s;
}
.ep-overlay.open, .confirm-overlay.open, .post-detail-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ════════════════════════════════
   EDIT PROFILE MODAL
════════════════════════════════ */
.ep-modal {
  width: min(460px, 100%);
  max-height: 90dvh;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn .25s cubic-bezier(.34,1.56,.64,1);
}

@keyframes modalIn {
  from { transform: scale(.88) translateY(20px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ep-header h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.ep-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Avatar section */
.ep-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.ep-avatar-wrap {
  position: relative;
  width: 90px; height: 90px;
  border-radius: 50%;
}

.ep-avatar-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-strong);
}

.ep-avatar-edit-btn {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s;
  cursor: pointer;
  color: #fff;
  border: none;
}
.ep-avatar-wrap:hover .ep-avatar-edit-btn { opacity: 1; }
.ep-avatar-edit-btn svg { width: 24px; height: 24px; }

.ep-avatar-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
}

/* Fields */
.ep-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}

.ep-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.ep-field-group:last-child { border-bottom: none; }

.ep-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ep-input, .ep-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 15px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  resize: none;
}
.ep-input:focus, .ep-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--surface);
}
.ep-input::placeholder, .ep-textarea::placeholder { color: var(--text-3); }

.ep-prefix-wrap {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.ep-prefix-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.ep-prefix {
  padding: 0 10px 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-3);
  flex-shrink: 0;
}
.ep-input-indented {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 0;
  padding-left: 0;
  box-shadow: none !important;
}
.ep-input-indented:focus { box-shadow: none !important; }

.ep-textarea { min-height: 80px; line-height: 1.5; }

.ep-hint {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}
.ep-hint.ok   { color: var(--success); }
.ep-hint.warn { color: #f59e0b; }

.ep-char-count {
  font-size: 12px;
  color: var(--text-3);
  text-align: right;
}

.ep-cooldown-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  vertical-align: middle;
}

/* Location results */
.location-results {
  position: absolute;
  left: 20px; right: 20px;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  max-height: 180px;
  overflow-y: auto;
}
.location-result-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.location-result-item:hover { background: var(--surface-2); }

.ep-footer {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ep-footer .pf-btn { flex: 1; justify-content: center; }

/* ════════════════════════════════
   CONFIRM MODAL
════════════════════════════════ */
.confirm-modal {
  width: min(360px, 100%);
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-xl);
  text-align: center;
  animation: modalIn .22s cubic-bezier(.34,1.56,.64,1);
}

.confirm-icon { font-size: 40px; margin-bottom: 14px; }
.confirm-modal h4 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.confirm-modal p  { font-size: 14px; color: var(--text-2); line-height: 1.5; margin-bottom: 24px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .pf-btn { flex: 1; justify-content: center; }

/* ════════════════════════════════
   POST DETAIL MODAL
════════════════════════════════ */
.post-detail-modal {
  width: min(860px, 100%);
  max-height: 88vh;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn .22s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}

.post-detail-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 10;
  width: 36px; height: 36px;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: background .15s;
}
.post-detail-close:hover { background: rgba(0,0,0,0.75); }

.post-detail-body { overflow-y: auto; flex: 1; }
.post-detail-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; }
.post-detail-media { background: #000; display: flex; align-items: center; justify-content: center; }
.post-detail-image { width: 100%; height: 100%; object-fit: contain; max-height: 60vh; }
.post-detail-video { width: 100%; max-height: 60vh; }
.post-detail-content { padding: 24px; overflow-y: auto; }
.post-detail-content h3 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.post-detail-text { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 14px; }
.post-detail-date { font-size: 12px; color: var(--text-3); }
.post-detail-stats { display: flex; gap: 16px; margin: 12px 0; font-size: 13px; color: var(--text-2); font-weight: 600; }
.post-detail-comments h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.post-comment-item { margin-bottom: 12px; }
.post-comment-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.post-comment-head strong { font-size: 13px; }
.post-comment-head small  { font-size: 11px; color: var(--text-3); }
.post-comment-item p { font-size: 13px; color: var(--text-2); }
.post-detail-no-comments { font-size: 13px; color: var(--text-3); padding: 16px 0; }

@media (max-width: 640px) {
  .post-detail-layout { grid-template-columns: 1fr; }
  .post-detail-media { min-height: 200px; }
}

/* ════════════════════════════════
   CROP MODAL (canvas nativo)
════════════════════════════════ */
.avatar-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s, visibility .22s;
}
.avatar-crop-overlay.open { opacity: 1; visibility: visible; }

.avatar-crop-modal {
  width: min(480px, 100%);
  background: #111827;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  animation: modalIn .25s cubic-bezier(.34,1.56,.64,1);
}
html:not(.dark) body:not(.modo-oscuro) .avatar-crop-modal { background: #fff; }

.avatar-crop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
}
.avatar-crop-head h4 { font-size: 15px; font-weight: 700; color: #f1f5f9; }
html:not(.dark) body:not(.modo-oscuro) .avatar-crop-head h4 { color: var(--text-1); }

.avatar-crop-close {
  width: 36px; height: 36px;
  border: none;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .15s;
}
.avatar-crop-close:hover { background: rgba(255,255,255,0.2); }
.avatar-crop-close svg { width: 18px; height: 18px; }

.avatar-crop-stage {
  position: relative;
  width: 100%; aspect-ratio: 1;
  background: #000;
  cursor: grab;
  touch-action: none;
  user-select: none;
  overflow: hidden;
}
.avatar-crop-stage:active { cursor: grabbing; }
#avatar-crop-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.avatar-crop-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--ring-d, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.52), inset 0 0 0 1px rgba(255,255,255,0.1);
  pointer-events: none;
}

.avatar-crop-controls {
  padding: 14px 20px 20px;
  display: flex; flex-direction: column; gap: 16px;
  background: #111827;
}
html:not(.dark) body:not(.modo-oscuro) .avatar-crop-controls { background: #fff; }

.avatar-crop-zoom-row { display: flex; align-items: center; gap: 10px; }
.zoom-icon { width: 18px; height: 18px; flex-shrink: 0; color: rgba(255,255,255,0.4); }
.zoom-icon-lg { width: 22px; height: 22px; }

.avatar-crop-slider {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.15);
  outline: none; cursor: pointer;
}
.avatar-crop-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow);
  transition: transform .1s;
}
.avatar-crop-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.avatar-crop-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: none; }

.avatar-crop-actions { display: flex; gap: 10px; }

.acrop-btn {
  flex: 1; padding: 12px 0;
  border: none; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: opacity .15s, transform .1s;
}
.acrop-btn:active { transform: scale(.97); }
.acrop-btn:disabled { opacity: .5; cursor: not-allowed; }

.acrop-btn-cancel { background: rgba(255,255,255,0.1); color: #fff; }
.acrop-btn-cancel:hover { opacity: .75; }
.acrop-btn-confirm { background: var(--accent); color: #fff; }
.acrop-btn-confirm:hover { opacity: .88; }
.acrop-btn-confirm svg { width: 18px; height: 18px; }

/* ════════════════════════════════
   TOAST
════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  padding: 10px 20px;
  border-radius: 999px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════
   REQUIM
════════════════════════════════ */
.requim-owner-row { margin-top: 6px; }
.requim-owner-link {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}
.requim-owner-link:hover { text-decoration: underline; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 520px) {
  :root { --hero-h: 170px; --avatar-size: 90px; }
  .pf-header-block { flex-direction: column; align-items: flex-start; }
  .pf-header-actions { width: 100%; }
  .pf-btn { font-size: 13px; padding: 0 14px; height: 36px; }
  .pf-stats-bar { border-radius: var(--r-lg); }
  .pf-stat strong { font-size: 18px; }
  .ep-modal { border-radius: var(--r-lg); }
  .avatar-crop-modal { border-radius: var(--r-lg); }
}

/* ════════════════════════════════
   SCROLLBAR
════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
/* ════════════════════════════════════════════════════════════
   QPOST CARDS — diseño único Quimii
════════════════════════════════════════════════════════════ */

.pf-posts-grid {
  display: grid;
  gap: 20px;
}

/* ── Card base ── */
.qpost {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .22s, transform .22s, border-color .22s;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.qpost:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: rgba(29,161,242,.25);
}

/* Card con media: imagen a la izquierda en desktop */
@media (min-width: 560px) {
  .qpost--media {
    grid-template-columns: 260px 1fr;
  }
}

/* ── Media ── */
.qpost-media {
  position: relative;
  background: #000;
  overflow: hidden;
  min-height: 200px;
  border-radius: 0;
}

@media (min-width: 560px) {
  .qpost--media .qpost-media {
    border-radius: 20px 0 0 20px;
  }
}

@media (max-width: 559px) {
  .qpost--media .qpost-media {
    border-radius: 20px 20px 0 0;
    min-height: 220px;
  }
}

.qpost-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
  position: absolute;
  inset: 0;
}
.qpost:hover .qpost-img { transform: scale(1.04); }

.qpost-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

/* Play button */
.qpost-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.28);
  border: none;
  color: #fff;
  transition: background .18s;
  z-index: 2;
}
.qpost-play-btn:hover { background: rgba(0,0,0,.45); }
.qpost-play-btn svg {
  width: 48px; height: 48px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}

/* Video badge */
.qpost-media-badge {
  position: absolute;
  bottom: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  z-index: 3;
}

/* Gradient overlay en media */
.qpost-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* ── Body ── */
.qpost-body {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* Requim badge */
.qpost-requim-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(236,72,153,.12));
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  width: fit-content;
  letter-spacing: .03em;
}

/* Título */
.qpost-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.3;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Contenido */
.qpost-content {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* ── Footer ── */
.qpost-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Stats row */
.qpost-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.qpost-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  transition: color .15s;
}
.qpost-stat svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

.qpost-stat--likes:hover    { color: #ef4444; }
.qpost-stat--comments:hover { color: var(--accent); }
.qpost-stat--requim         { color: #818cf8; }

/* Fecha tooltip nativo */
.qpost-fecha { cursor: help; }

/* ── Actions ── */
.qpost-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.qpost-delete-btn,
.qpost-open-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: all .15s;
}
.qpost-delete-btn svg,
.qpost-open-btn svg { width: 15px; height: 15px; }

.qpost-delete-btn:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
  transform: scale(1.08);
}
.qpost-open-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}

/* Requim author row */
.qpost-requim-author {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── Empty state ── */
.pf-posts-grid .qpost-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-3);
}
.qpost-empty svg { width: 48px; height: 48px; opacity: .4; }
.qpost-empty p   { font-size: 14px; font-weight: 500; }

/* Sobreescribir el p genérico de vacío */
.pf-posts-grid > p {
  padding: 56px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 500;
  grid-column: 1 / -1;
}

/* ── Skeleton de carga ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.qpost-skeleton {
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  height: 180px;
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
}