* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
  font-family: 'Postmark';
  src: url('../fonts/Postmark-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

:root {
  --fondo:        #111318;
  --card:         #1c1f28;
  --card-hover:   #242830;
  --surface:      #2a2f3a;
  --accent:       #7B4EF0;
  --accent2:      #008F80;
  --blanco:       #f2f2f2;
  --gris1:        rgba(242,242,242,0.85);
  --gris2:        rgba(242,242,242,0.5);
  --gris3:        rgba(242,242,242,0.25);
  --borde:        #2e3340;
  --radio:        12px;
  --radio-card:   16px;
}

body {
  font-family: 'Lato', sans-serif;
  background: var(--fondo);
  color: var(--blanco);
  min-height: 100vh;
  min-height: 100dvh;
}

/* LOGIN */
.login-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: #000;
  position: relative;
  overflow: hidden;
}

.login-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, #000 100%);
  z-index: 1;
}

.login-wordmark {
  position: absolute;
  top: 32px;
  left: 28px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--blanco);
  z-index: 2;
  letter-spacing: 0.01em;
}

.login-hero {
  position: relative;
  z-index: 2;
  padding: 40px 28px 60px;
  width: 100%;
}

.login-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 14px;
  color: var(--blanco);
}

.login-subtitulo {
  font-size: 16px;
  font-weight: 400;
  color: var(--gris2);
  margin-bottom: 40px;
  line-height: 1.5;
  max-width: 300px;
}

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--blanco);
  color: #000;
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-google:hover { opacity: 0.88; }

/* STICKY TOP WRAPPER */
.top-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fondo);
}
.top-sticky::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(to bottom, var(--fondo), transparent);
  pointer-events: none;
}

/* HEADER */
.header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.btn-topbar-ayuda {
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris2);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.btn-topbar-ayuda:hover { background: rgba(255,255,255,0.15); color: var(--blanco); }
.btn-topbar-logout { color: rgba(255,69,58,0.6); }
.btn-topbar-logout:hover { background: rgba(255,69,58,0.12) !important; color: #FF453A !important; }
.btn-topbar-lang {
  background: none; border: none; font-size: 18px; cursor: pointer;
  padding: 0 2px; line-height: 1; opacity: 0.6; transition: opacity .15s;
}
.btn-topbar-lang:hover, .btn-topbar-lang.activo { opacity: 1; }

.logo {
  font-family: 'Postmark', sans-serif;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0;
  color: var(--blanco);
}

.logo-accent { color: var(--accent); }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid var(--borde);
}

.avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

/* SEARCH */
.search-bar {
  display: block;
  width: calc(100% - 36px);
  margin: 12px 18px;
  padding: 10px 16px 10px 38px;
  background: var(--surface);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  color: var(--blanco);
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23EBEBF599' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.search-bar::placeholder { color: var(--gris2); }

/* Filtro personas — botón en fila de filtros */
.filtro-personas-btn { display: flex; align-items: center; gap: 5px; }
.filtro-personas-btn.activo { color: var(--accent); border-color: var(--accent); }

/* Popover personas */
.personas-popover {
  position: fixed;
  background: #1e2028;
  border-radius: 14px;
  padding: 12px;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 180px;
  max-width: 280px;
}
.pp-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 10px;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.pp-chip:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.pp-chip.activo { opacity: 1; background: rgba(52,199,89,0.12); }
.pp-av {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: var(--gris4);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--gris1);
  flex-shrink: 0;
}
.pp-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pp-av.activo-ring { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-nombre {
  font-size: 10px; color: var(--gris2); white-space: nowrap;
  max-width: 52px; overflow: hidden; text-overflow: ellipsis;
}
.pp-vacio { font-size: 12px; color: var(--gris2); padding: 4px 2px; white-space: normal; max-width: 220px; line-height: 1.4; }

/* FILTROS */
.filtros {
  display: flex;
  gap: 0;
  padding: 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--borde);
  background: var(--fondo);
}
.filtros::-webkit-scrollbar { display: none; }


.filtro-btn {
  flex: 0 0 auto;
  padding: 13px 10px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  color: var(--gris2);
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.filtro-btn.activo {
  color: var(--blanco);
  border-bottom-color: var(--accent);
}

/* GRID */
/* TIMELINE */
.timeline-seccion { padding: 0 0 8px; }
.timeline-anio-header { display: flex; align-items: center; gap: 16px; padding: 28px 18px 10px; }
.timeline-anio-num {
  font-family: 'Playfair Display', serif;
  font-size: 48px; font-weight: 700; letter-spacing: 0;
  color: var(--blanco); line-height: 1; flex-shrink: 0;
}
.timeline-anio-line { flex: 1; height: 1px; background: var(--borde); }
.timeline-anio-count { font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; color: var(--gris2); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.timeline-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 2px; padding: 0 0 4px; }
.timeline-card { cursor: pointer; background: var(--card); }
.timeline-card-media { aspect-ratio: 1; overflow: hidden; position: relative; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.timeline-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.timeline-card-badge { position: absolute; bottom: 4px; left: 4px; font-size: 13px; background: rgba(0,0,0,0.6); border-radius: 6px; padding: 1px 5px; }
.timeline-card-info { padding: 5px 7px 7px; }
.timeline-card-titulo { font-size: 11px; font-weight: 600; color: var(--blanco); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-sin-fecha .timeline-anio-num { font-size: 18px; color: var(--gris2); letter-spacing: 1px; text-transform: uppercase; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 2px;
}

.card {
  background: var(--card);
  border-radius: var(--radio-card);
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.15s;
}

.card:active { opacity: 0.75; }

.card-media {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--surface);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-emoji { font-size: 48px; }

.card-media--video  { background: #1a1f35; }
.card-media--carta  { background: #2a1f13; }
.card-media--doc    { background: #1a2415; }
.card-media--audio  { background: #251628; }
.card-media--foto   { background: var(--surface); }

.card-tipo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
}

.card-info {
  padding: 10px 12px 12px;
  background: var(--card);
}

.card-titulo {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
  color: var(--blanco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  font-size: 11px;
  color: var(--gris2);
}

.card-personas {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}

.tag-persona {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(27,110,99,0.15);
  border: 1px solid rgba(27,110,99,0.4);
  color: var(--accent);
}

.tag-persona-mas {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
}

.tag-etiqueta {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--borde);
  color: var(--gris1);
}

.tag-link {
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, filter 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}
.tag-link::after {
  content: " →";
  font-size: 0.85em;
}
.tag-link:active { opacity: 0.55; }
.tag-link:hover { filter: brightness(1.3); box-shadow: 0 0 0 1px rgba(255,255,255,0.5); }

/* TIPOS LISTA (paso 1) */
.tipos-subtitulo {
  font-size: 14px;
  color: var(--gris2);
  margin-bottom: 20px;
  font-weight: 500;
}

.tipos-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--borde);
}

.tipo-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s;
  border-bottom: 1px solid var(--borde);
}

.tipo-fila:last-child { border-bottom: none; }
.tipo-fila:active { background: var(--surface); }

.tipo-icono {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.tipo-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tipo-nombre {
  font-size: 16px;
  font-weight: 600;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  letter-spacing: 0;
}

.tipo-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
}

.tipo-chevron {
  font-size: 22px;
  color: var(--gris3);
  font-weight: 300;
  flex-shrink: 0;
}

/* FAB */
.fab-wrap {
  position: fixed;
  bottom: 28px;
  right: 18px;
  z-index: 200;
}

@media (max-width: 899px) {
  .fab-wrap { display: none; }
}

.sidebar-actions { display: none; }

.fab {
  height: 52px;
  padding: 0 22px 0 16px;
  border-radius: 26px;
  background: var(--accent2);
  color: var(--blanco);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(27,110,99,0.45);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s, opacity 0.15s;
}

.fab-icon {
  font-size: 26px;
  line-height: 1;
  margin-top: -1px;
}

.fab-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.fab:active { transform: scale(0.95); opacity: 0.85; }

/* BOTTOM SHEET */
.bs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.bs-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.bs-panel {
  background: var(--card);
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--borde);
  border-bottom: none;
  padding: 12px 0 env(safe-area-inset-bottom, 20px);
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.bs-overlay.visible .bs-panel {
  transform: translateY(0);
}

.bs-handle {
  width: 36px;
  height: 4px;
  background: var(--borde);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.bs-titulo {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris2);
  padding: 0 20px 10px;
}

.bs-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  border-top: 1px solid var(--borde);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.bs-option:active { background: var(--surface); }

.bs-option-icon {
  font-size: 22px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bs-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.bs-option-titulo {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--blanco);
}

.bs-option-desc {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: var(--gris2);
}

.bs-chevron {
  font-size: 22px;
  color: var(--gris3);
  font-weight: 300;
}

/* ── SECCIÓN PERFIL ── */
.perfil-header-wrap {
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--borde);
}

.perfil-avatar-grande {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--borde);
}

.perfil-avatar-inicial {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: var(--gris2);
}

.perfil-nombre {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--blanco);
  text-align: center;
  line-height: 1.2;
}

.perfil-email {
  font-size: 14px;
  color: var(--gris2);
  text-align: center;
}

.perfil-stats-row {
  display: flex;
  border-bottom: 1px solid var(--borde);
}

.perfil-stat-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 10px;
  gap: 4px;
}

.perfil-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--blanco);
  line-height: 1;
}

.perfil-stat-label {
  font-size: 12px;
  color: var(--gris2);
  font-weight: 500;
  text-align: center;
}

.perfil-seccion-titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris2);
  padding: 16px 18px 8px;
}

.perfil-mis-recuerdos .grid {
  padding: 0 2px 2px;
}

/* Vinculo persona */
.perfil-vinculo-seccion {
  padding: 0 18px 20px;
}
.perfil-vinculo-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris2);
  margin-bottom: 10px;
}
.perfil-vinculo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 12px 14px;
}
.vinculo-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.vinculo-avatar-inicial {
  background: var(--accent);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.vinculo-info { flex: 1; min-width: 0; }
.vinculo-nombre { font-size: 15px; font-weight: 700; color: var(--blanco); }
.vinculo-meta { font-size: 12px; color: var(--gris2); margin-top: 2px; }
.vinculo-btn-desvincular {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.vinculo-btn-desvincular:hover { color: var(--blanco); border-color: var(--gris2); }
.vinculo-btn-vincular {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px dashed var(--borde);
  border-radius: 14px;
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 18px;
  cursor: pointer;
  width: 100%;
  transition: color 0.15s, border-color 0.15s;
}
.vinculo-btn-vincular:hover { color: var(--accent); border-color: var(--accent); }

/* Modal vincular */
.vincular-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
}
.vincular-panel {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 20px 20px 16px 16px;
  padding: 24px 20px 16px;
  max-width: 480px;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
.vincular-cerrar {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--gris2);
  font-size: 18px;
  cursor: pointer;
}
.vincular-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 4px;
}
.vincular-instruccion {
  font-size: 13px;
  color: var(--gris2);
  margin: 0 0 14px;
}
.vincular-search {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  padding: 10px 14px;
  width: 100%;
  outline: none;
  margin-bottom: 10px;
}
.vincular-search:focus { border-color: var(--accent); }
.vincular-lista { overflow-y: auto; flex: 1; }
.vincular-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.vincular-item:hover { background: var(--surface); }
.vincular-av { width: 38px; height: 38px; font-size: 16px; }
.vincular-item-nombre { font-size: 15px; color: var(--blanco); font-weight: 500; }
.vincular-empty { padding: 24px; text-align: center; color: var(--gris2); font-size: 14px; }

/* Badge Vos en card de persona */
.ficha-foto-wrap { position: relative; }
.ficha-badge-vos {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--accent);
  color: var(--blanco);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  letter-spacing: 0.3px;
}

.perfil-acciones-wrap {
  padding: 20px 18px 32px;
}
.perfil-admin-wrap {
  margin: 0 18px 8px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 16px;
}
.perfil-admin-titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--gris2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}

.perfil-logout-btn {
  width: 100%;
  padding: 14px;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 50px;
  color: #FF453A;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.perfil-logout-btn:hover { background: rgba(255,69,58,0.08); }

.perfil-familias-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 50px;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
  margin-bottom: 10px;
}
.perfil-familias-btn:hover { background: var(--card); }

/* En desktop el botón Mis familias en perfil no hace falta (está en sidebar) */
@media (min-width: 900px) {
  .perfil-familias-btn { display: none; }
}

/* ESTADOS */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: var(--gris2);
}

.empty-state .icono { font-size: 52px; margin-bottom: 14px; }

.empty-state p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px;
  color: var(--gris2);
  font-size: 14px;
  font-weight: 500;
}

/* PANTALLAS */
.pantalla {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--fondo);
  z-index: 300;
  overflow-y: auto;
}

.pantalla.visible { display: block; }

.pantalla-header {
  background: var(--fondo);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--borde);
}

.btn-back {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--accent);
  font-family: 'Lato', sans-serif;
}

.pantalla-titulo {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blanco);
}

#ficha-titulo-header {
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

#ficha-acciones {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  /* pareja-fila: [chip][select][×] en fila 1, [fecha][clip] en fila 2 */
  .persona-chip.activo { order: 0; }
  .pareja-estado { order: 1; max-width: 130px; }
  .pareja-quitar { order: 2; margin-left: auto; }
  .pareja-fecha { order: 3; flex-basis: 100%; min-width: 0; }
  .pareja-adj-chip { order: 4; }
  .pareja-clip-btn { order: 5; }
  /* campo-row: inputs en columna en mobile */
  .campo-row { flex-wrap: wrap; }
  .campo-row .campo { min-width: 0; }
  #ficha-titulo-header { display: none; }
  #ficha-acciones .btn-texto { display: none; }
  #ficha-acciones .tooltip-info { display: none; }
  #ficha-acciones { gap: 6px; }
  #ficha-acciones .btn-compartir-ficha,
  #ficha-acciones .btn-editar-receta,
  #ficha-acciones .btn-eliminar-receta {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
}

.pantalla-body { padding: 20px 18px; }

/* FORMULARIO */
.campo { margin-bottom: 22px; }
.campo-row { display: flex; gap: 12px; }
.campo-row .campo { flex: 1; min-width: 0; }

.campo label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris2);
  margin-bottom: 8px;
}

/* INSTRUCCIONES VIDEO */
.video-instrucciones {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.video-instruc-bloque {
  border-left: 2px solid var(--borde);
  padding-left: 12px;
}

.video-instruc-titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris2);
  margin-bottom: 6px;
}

.video-instruc-pasos {
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.video-instruc-pasos li {
  font-size: 13px;
  color: var(--gris2);
  line-height: 1.5;
}

.video-instruc-pasos strong { color: var(--gris1); font-weight: 600; }

.video-instruc-aviso {
  font-size: 12px;
  color: #FF9F0A;
  font-weight: 500;
  padding: 0;
}

.campo-descripcion {
  font-size: 13px;
  color: var(--gris3);
  margin: -4px 0 10px 0;
  line-height: 1.5;
}
.label-opcional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 11px;
  color: var(--gris3);
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  color: var(--blanco);
  outline: none;
  transition: border-color 0.2s;
}

.campo input:focus,
.campo textarea:focus {
  border-color: var(--accent);
}

.campo input::placeholder,
.campo textarea::placeholder { color: var(--gris3); }

.campo textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.fecha-inputs { display: flex; gap: 8px; align-items: center; }
.fecha-inputs .fecha-dia { width: 72px; flex-shrink: 0; }
.fecha-inputs .fecha-año { width: 88px; flex-shrink: 0; }
.fecha-inputs .fecha-mes {
  flex: 1;
  max-width: 160px;
  background: var(--surface);
  border: 1px solid var(--borde);
  color: var(--blanco);
  border-radius: var(--radio);
  padding: 12px 14px;
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  outline: none;
  appearance: none;
  cursor: pointer;
}
.fecha-inputs .fecha-mes option { background: #1C1C1E; }
.fecha-inputs .fecha-mes:focus { border-color: var(--accent); }

.pareja-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pareja-fila .persona-chip { flex-shrink: 0; }
.pareja-estado { flex: 1; min-width: 90px; padding: 8px 12px; background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); font-size: 14px; font-family: 'Lato', sans-serif; color: var(--blanco); outline: none; appearance: none; cursor: pointer; }
.pareja-estado option { background: #1C1C1E; }
.pareja-fecha { flex: 1; min-width: 120px; padding: 8px 10px; background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); font-size: 13px; font-family: 'Lato', sans-serif; color: var(--blanco); outline: none; }
.pareja-quitar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--borde); background: none; color: var(--gris2); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.parejas-picker-panel { background: var(--card); border: 1px solid var(--borde); border-radius: 12px; padding: 12px; margin-top: 8px; }
.parejas-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.select-campo {
  width: 100%; padding: 13px 16px; margin-top: 8px;
  background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio);
  font-size: 15px; font-family: 'Lato', sans-serif; font-weight: 400;
  color: var(--blanco); outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23636366' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  cursor: pointer;
}
.select-campo option { background: #1C1C1E; color: var(--blanco); }
.select-campo:focus { border-color: var(--accent); }

.campo-hint {
  font-size: 12px;
  color: var(--gris2);
  margin-top: 6px;
  line-height: 1.5;
}

.btn-upload {
  width: 100%;
  padding: 13px;
  background: var(--card);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  color: var(--gris2);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}

.btn-upload:hover { border-color: var(--accent); color: var(--accent); }

/* FOTO CROP PREVIEW */
.foto-crop-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  user-select: none;
}
/* Banner preview (main draggable area) */
.foto-crop-banner-wrap {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: none;
  background: var(--surface);
}
.foto-crop-banner-wrap:active { cursor: grabbing; }
.foto-crop-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
/* Zoom controls */
.foto-crop-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.zoom-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--surface);
  color: var(--blanco);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.zoom-label {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--gris2);
  min-width: 44px;
  text-align: center;
}
/* Circle preview (secondary, for reference) */
.foto-crop-circulo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.foto-crop-circulo-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--borde);
  background: var(--surface);
}
.foto-crop-circulo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
.foto-crop-hint {
  font-size: 12px;
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
}

.btn-guardar {
  width: 100%;
  padding: 16px;
  background: var(--accent2);
  color: var(--blanco);
  border: none;
  border-radius: 50px;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.2s;
}

.btn-guardar:hover { opacity: 0.85; }
.btn-guardar:disabled { opacity: 0.4; cursor: not-allowed; }

.aviso-duplicado {
  background: rgba(200, 80, 40, 0.15);
  border: 1px solid rgba(200, 80, 40, 0.5);
  color: #e88060;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.campo-duplicado-highlight input {
  border-color: rgba(200, 80, 40, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(200, 80, 40, 0.2);
}

/* TAGS */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--borde);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
  color: var(--gris2);
  transition: all 0.15s;
  user-select: none;
}

.tag.activo {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--blanco);
}

/* ARCHIVOS PREVIEW */
.drop-zone {
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.drop-zone:hover {
  border-color: rgba(255,255,255,0.3);
}
.drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(10,132,255,0.08);
}
.drop-zone-icon {
  font-size: 28px;
  color: var(--gris2);
  line-height: 1;
  pointer-events: none;
}
.drop-zone.drag-over .drop-zone-icon {
  color: var(--accent);
}
.drop-zone-texto {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--gris2);
  pointer-events: none;
}
.drop-zone.drag-over .drop-zone-texto {
  color: var(--accent);
}
.drop-zone-o {
  font-size: 13px;
  color: var(--gris3);
}
.drop-zone-compact {
  padding: 16px 12px;
}
.drop-zone-compact .drop-zone-icon {
  font-size: 20px;
}
.drop-zone-compact .drop-zone-texto {
  font-size: 13px;
}

.foto-actual-preview {
  position: relative;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gris5);
}
.foto-actual-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}
.foto-actual-preview .foto-actual-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  padding: 5px 10px;
  text-align: center;
}
.archivos-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.archivo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.archivo-thumb img { width: 100%; height: 100%; object-fit: cover; }

.archivo-icono { font-size: 32px; }

.archivo-nombre {
  font-size: 9px;
  font-weight: 500;
  color: var(--gris2);
  text-align: center;
  padding: 4px 6px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-quitar-archivo {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* DETALLE */
#detalle-media img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #000;
  display: block;
}

.video-thumb-link {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
  text-decoration: none;
}

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

.video-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  background: var(--card);
}

.video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  font-size: 52px;
  color: white;
  transition: background 0.15s;
}

.video-thumb-link:hover .video-play-btn { background: rgba(0,0,0,0.55); }

.doc-wrap {
  padding: 32px 18px;
  display: flex;
  justify-content: center;
  background: var(--card);
}

.btn-ver-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--accent);
  color: white;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.audio-wrap { padding: 24px 18px; background: var(--card); }

.media-placeholder {
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  background: var(--card);
}

.detalle-body { padding: 20px 18px; }

.detalle-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 10px;
  color: var(--blanco);
}

.detalle-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gris2);
}

.tipo-badge {
  padding: 3px 10px;
  background: var(--surface);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris1);
}

.detalle-descripcion {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gris1);
  margin-bottom: 20px;
}

.detalle-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris2);
  margin-bottom: 8px;
  margin-top: 16px;
}

.tags-row { display: flex; flex-wrap: wrap; gap: 6px; }

.detalle-seccion { margin-top: 28px; }

/* ── TRANSCRIPCIÓN IA ── */
#detalle-transcripcion { margin-top: 4px; }
.transcripcion-cta { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.btn-transcribir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 50px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.15s;
}
.btn-transcribir:active { opacity: 0.75; }
.transcripcion-hint { font-size: 12px; color: var(--gris2); margin: 0; }
.transcripcion-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gris1);
  padding: 10px 0;
}
.transcripcion-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--borde);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: transcripcion-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes transcripcion-spin { to { transform: rotate(360deg); } }
.transcripcion-texto {
  font-size: 15px;
  color: var(--gris1);
  line-height: 1.75;
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.btn-retranscribir {
  font-size: 12px;
  color: var(--gris2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: 'Lato', sans-serif;
}
.btn-retranscribir:hover { color: var(--gris1); }
.transcripcion-error { font-size: 13px; color: #FF453A; margin: 0 0 6px; }

.detalle-seccion h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris2);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borde);
}

.sin-comentarios { font-size: 14px; color: var(--gris2); }

.historial-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--borde);
  padding: 14px 0;
  margin-top: 28px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris2);
  cursor: pointer;
}
.historial-toggle:hover { color: var(--gris1); }
.historial-chevron { font-size: 16px; }

.comentario-acciones {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.comentario-acciones button {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
  padding: 0;
}

.btn-editar-comentario { color: var(--accent); }
.btn-borrar-comentario { color: #FF453A; }

.comentario-edit-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  color: var(--blanco);
  outline: none;
  resize: none;
  min-height: 60px;
  margin-bottom: 6px;
}

.comentario-edit-acciones {
  display: flex;
  gap: 8px;
}

.btn-ok-edit, .btn-cancel-edit {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
  padding: 0;
}

.btn-ok-edit { color: var(--accent); }
.btn-cancel-edit { color: var(--gris2); }

/* COMENTARIOS */
.comentario { display: flex; gap: 10px; margin-bottom: 14px; }

.comentario-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  overflow: hidden;
}

.comentario-burbuja {
  background: var(--card);
  border-radius: 14px;
  border-top-left-radius: 4px;
  padding: 10px 14px;
  flex: 1;
  border: 1px solid var(--borde);
}

.comentario-autor {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 3px;
}

.comentario-texto { font-size: 14px; line-height: 1.5; color: var(--gris1); }

.comentario-input-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  background: var(--fondo);
  border-top: 1px solid var(--borde);
  position: sticky;
  bottom: 0;
}

.comentario-input {
  flex: 1;
  padding: 11px 16px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 20px;
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  color: var(--blanco);
  outline: none;
}

.comentario-input::placeholder { color: var(--gris3); }
.comentario-input:focus { border-color: var(--accent); }

.btn-enviar {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.btn-enviar:hover { opacity: 0.85; }

/* EDITAR / ELIMINAR */
.btn-compartir-ficha {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #2a2f3a;
  background: transparent;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-compartir-ficha:hover { background: #2a2f3a; }

.btn-editar-receta {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-editar-receta:hover { background: var(--accent); color: var(--blanco); }

.btn-eliminar-receta {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #FF453A;
  background: transparent;
  color: #FF453A;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-eliminar-receta:hover { background: #FF453A; color: var(--blanco); }

/* TOP NAV — hidden on mobile, sidebar replaces on desktop */
.top-nav {
  display: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--borde);
  padding: 0 18px;
}
.top-nav::-webkit-scrollbar { display: none; }

/* MOBILE BOTTOM NAV */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--borde);
  display: flex;
  padding: 8px 0 env(safe-area-inset-bottom, 10px);
  z-index: 150;
}

.mbnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 0;
  transition: color 0.15s;
}

.mbnav-icon { font-size: 24px; line-height: 1; }
.mbnav-label { font-size: 10px; font-weight: 600; }

.mbnav-item.activo { color: var(--accent); }
.mbnav-item:active { opacity: 0.6; }

.mbnav-nuevo { color: var(--blanco) !important; }
.mbnav-nuevo-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 12px rgba(27,110,99,0.4);
  margin-top: -10px;
}
.mbnav-nuevo .mbnav-label { color: var(--gris2); }

.mbnav-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff453a;
  border: 2px solid var(--card);
}

/* Familias vinculadas */
.vinculo-sol-card {
  background: linear-gradient(135deg, #1b3a36 0%, #1c1f28 100%);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}
.vinculo-sol-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 6px; }
.vinculo-sol-nombre { font-size: 16px; font-weight: 700; color: var(--blanco); margin-bottom: 12px; }
.vinculo-sol-acciones { display: flex; gap: 8px; }
.vinculo-btn-aceptar { flex: 1; background: var(--accent); color: var(--blanco); border: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'Lato', sans-serif; }
.vinculo-btn-rechazar { flex: 1; background: transparent; color: #aaa; border: 1px solid #2a2f3a; border-radius: 8px; padding: 10px; font-size: 14px; cursor: pointer; font-family: 'Lato', sans-serif; }
.mf-vinculada-card { background: var(--card); border-radius: 14px; padding: 16px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mf-vinculada-nombre { font-size: 15px; font-weight: 700; color: var(--blanco); }
.mf-vinculada-sub { font-size: 12px; color: #aaa; margin-top: 2px; }
.mf-btn-ver-arbol { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Lato', sans-serif; white-space: nowrap; }
.mf-btn-vincular { width: 100%; background: transparent; border: 1px dashed #2a2f3a; color: #aaa; border-radius: 12px; padding: 14px; font-size: 14px; cursor: pointer; font-family: 'Lato', sans-serif; margin-top: 8px; }
.mf-btn-vincular:hover { border-color: var(--accent); color: var(--accent); }
.mf-btn-tour { width: 100%; background: transparent; border: none; color: var(--gris2); border-radius: 12px; padding: 12px 14px; font-size: 13px; cursor: pointer; font-family: 'Lato', sans-serif; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mf-btn-tour:hover { color: var(--accent); }
.mf-seccion-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #aaa; margin: 20px 0 10px; }

/* Árbol vinculado read-only */
.ficha-card-readonly { cursor: pointer; }
.ficha-card-readonly:hover { background: var(--card-hover); }

/* Reserve space for bottom nav on mobile */
.app-main { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

.top-nav-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 13px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--gris2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.top-nav-btn.activo {
  color: var(--blanco);
  border-bottom-color: var(--accent);
}

/* PERSONAS ROW (stories) */
.personas-row {
  display: flex;
  gap: 16px;
  padding: 14px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--borde);
  background: var(--fondo);
}
.personas-row:empty { display: none; }
.personas-row::-webkit-scrollbar { display: none; }

.persona-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  width: 58px;
  background: none;
  border: none;
  padding: 0;
}

.persona-story-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.persona-story-ring img { width: 100%; height: 100%; object-fit: cover; }
.persona-story:active .persona-story-ring { border-color: var(--accent); }

.persona-story-inicial {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--gris2);
}

.persona-story-nombre {
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gris2);
  width: 58px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona-story-add .persona-story-ring {
  border-style: dashed;
}
.persona-story-add .persona-story-inicial { font-size: 24px; color: var(--gris3); }
.persona-story-add .persona-story-nombre { color: var(--gris3); }

/* CHIPS PICKER */
.chips-picker {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 0;
  margin-top: 6px;
  min-height: 32px;
}
.chips-picker .persona-chip,
.chips-picker .chip-texto-seleccionado {
  margin-bottom: 6px;
}

.persona-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--borde);
  background: var(--card);
  color: var(--gris1);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.persona-chip.activo {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
}
.persona-chip-foto {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.chips-vacio {
  font-size: 12px;
  color: var(--gris3);
  font-style: italic;
  padding: 4px 0;
}

/* chip-texto queda por compatibilidad pero se reemplaza por chip-texto-seleccionado */
.chip-texto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 20px;
  border: 1px dashed var(--gris3);
  background: transparent;
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-style: italic;
}

/* Chip de texto SELECCIONADO: se ve como activo */
.chip-texto-seleccionado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 5px 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  background: rgba(27,110,99,0.12);
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.chip-separador {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--borde);
  margin: 6px 0;
}

.chip-texto-quitar {
  background: none;
  border: none;
  color: var(--gris3);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}

.chip-texto-crear {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  padding: 0 4px 0 6px;
  border-left: 1px solid var(--borde);
  line-height: 1;
}

.chips-nuevo-input {
  border: none;
  background: none;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: var(--blanco);
  outline: none;
  padding: 6px 4px;
  min-width: 140px;
  flex-shrink: 0;
}
.chips-nuevo-input::placeholder { color: var(--gris3); }

.chips-unified-wrap {
  position: relative;
  width: 100%;
  flex-basis: 100%;
  margin-bottom: 4px;
}
.chips-unified-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--borde);
  background: none;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: var(--blanco);
  outline: none;
  padding: 8px 28px 8px 2px;
  box-sizing: border-box;
}
.chips-unified-input::placeholder { color: var(--gris3); }
.chips-hint { font-size: 12px; color: var(--gris3); margin: 4px 0 0 2px; }
.chips-unified-clear {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-60%);
  background: none;
  border: none;
  color: var(--gris2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.chip-crear-nuevo {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px dashed var(--verde);
  background: none;
  color: var(--verde);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}

.pm-hint {
  width: 100%;
  flex-basis: 100%;
  font-size: 12px;
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  margin: 0 0 6px;
}
.pm-frecuentes-wrap {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pm-resultados-wrap {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.sugerencia-vinculo {
  background: rgba(27,110,99,0.08);
  border: 1px solid rgba(27,110,99,0.3);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--gris1);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sugerencia-vinculo-acciones {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-vincular { background: var(--accent); color: white; border: none; border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 700; font-family: 'Lato', sans-serif; cursor: pointer; }
.btn-ignorar-vinculo { background: none; border: none; color: var(--gris2); font-size: 12px; font-family: 'Lato', sans-serif; cursor: pointer; padding: 5px 0; }

.retrovinculo-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom);
}
.retrovinculo-modal {
  background: var(--surface); border: 1px solid var(--borde);
  border-radius: 20px 20px 0 0; padding: 24px 20px 32px;
  width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto;
}
.retrovinculo-modal h3 { font-family: 'Lato', sans-serif; font-size: 20px; font-weight: 800; text-transform: uppercase; margin: 0 0 8px; }
.retrovinculo-modal p { font-size: 14px; color: var(--gris1); margin: 0 0 16px; line-height: 1.5; }
.retrovinculo-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.retrovinculo-item { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.retrovinculo-item input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.retrovinculo-item span { font-size: 14px; color: var(--gris1); line-height: 1.4; }
.retrovinculo-acciones { display: flex; flex-direction: column; gap: 8px; }

/* FAMILIA */

/* Stories scroll indicator */
.personas-row-container {
  position: relative;
}
.personas-row-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  background: linear-gradient(to left, var(--fondo) 0%, transparent 100%);
  pointer-events: none;
}

/* View toggle */
.familia-vista-toggle {
  display: flex;
  padding: 10px 18px;
  gap: 0;
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: var(--top-sticky-h, 0px);
  z-index: 50;
  background: var(--fondo);
}
.vista-btn {
  background: none;
  border: 1px solid var(--borde);
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
}
.vista-btn:first-child { border-radius: 8px 0 0 8px; }
.vista-btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.vista-btn.activa {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--blanco);
}

.familia-orden-toggle {
  display: flex;
  gap: 8px;
  padding: 10px 18px 8px;
}
.orden-btn {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 20px;
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.orden-btn.activa {
  border-color: var(--verde);
  color: var(--verde);
}
.familia-grupo-header {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris2);
  padding: 14px 2px 6px;
  border-bottom: 1px solid var(--borde);
}
.familia-grupo-header:first-child { padding-top: 4px; }

/* Tree view */
.arbol-avisos {
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,160,10,0.3);
  background: rgba(255,160,10,0.08);
}
.arbol-avisos-header {
  display: flex; align-items: center; gap: 12px;
}
.arbol-avisos-toggle {
  background: none; border: none; color: #FF9F0A; font-size: 13px;
  cursor: pointer; padding: 0; font-weight: 600;
}
.btn-reparar-todo {
  padding: 3px 12px; font-size: 11px; font-weight: 600;
  border: 1px solid rgba(255,160,10,0.5); border-radius: 20px;
  background: rgba(255,160,10,0.1); color: #FF9F0A; cursor: pointer;
}
.btn-reparar-todo:hover { background: rgba(255,160,10,0.2); }
.btn-reparar-todo.reparado { color: #30D158; border-color: rgba(48,209,88,0.4); background: rgba(48,209,88,0.08); cursor: default; }
.arbol-avisos-lista {
  display: none; margin: 8px 0 0; padding-left: 18px;
  font-size: 13px; color: var(--texto-secundario); line-height: 1.7;
}
.arbol-avisos-lista.visible { display: block; }
.btn-reparar-aviso {
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,160,10,0.5);
  border-radius: 20px;
  background: none;
  color: #FF9F0A;
  cursor: pointer;
  vertical-align: middle;
}
.btn-reparar-aviso:hover { background: rgba(255,160,10,0.12); }
.btn-reparar-aviso.reparado { color: #30D158; border-color: rgba(48,209,88,0.4); cursor: default; }
.btn-desestimar-aviso {
  margin-left: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  background: none;
  color: var(--gris2);
  cursor: pointer;
  vertical-align: middle;
}
.btn-desestimar-aviso:hover { background: rgba(255,255,255,0.06); color: var(--texto); }
.arbol-zoom-ctrl {
  display: flex; align-items: center; gap: 8px;
  padding: 20px 14px 8px; border-bottom: 1px solid var(--borde);
  flex-shrink: 0; background: var(--fondo); flex-wrap: wrap;
}
.arbol-color-panel {
  margin-left: auto; display: flex; flex-direction: column; gap: 5px;
  border-left: 2px solid var(--accent); padding-left: 10px;
}
.arbol-color-selector { display: flex; gap: 4px; }
.arbol-color-btn {
  background: transparent; border: 1px solid var(--borde);
  border-radius: 6px; color: var(--gris2); font-size: 12px;
  padding: 3px 10px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.arbol-color-btn.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.arbol-color-btn:hover:not(.activo) { color: var(--blanco); border-color: var(--gris2); }
.arbol-leyenda { display: flex; flex-wrap: wrap; gap: 3px 10px; }
.arbol-leyenda-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gris2); }
.arbol-leyenda-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 768px) {
  .arbol-color-panel { margin-left: 0; flex-basis: 100%; border-left: none; border-top: 1px solid var(--borde); padding-left: 0; padding-top: 8px; }
  .arbol-zoom-ctrl { padding: 8px 14px 6px; }
}
.arbol-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  user-select: none;
}
.arbol-canvas {
  display: grid;
  grid-template-columns: repeat(var(--dcols), 52px);
  grid-auto-rows: 84px;
  row-gap: 90px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
.arbol-nodo {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 72px;
  justify-self: center;
  align-self: start;
  transition: opacity 0.15s;
  position: relative;
  z-index: 1;
}
.arbol-nodo:active { opacity: 0.6; }
.arbol-nodo--ghost { cursor: default; pointer-events: none; opacity: 0.45; }
.arbol-nodo--ghost .arbol-foto { border: 2px dashed var(--gris3); background: transparent; }
.arbol-nodo--ghost .arbol-foto-inicial { color: var(--gris3); font-style: normal; }
.arbol-nombre--ghost { color: var(--gris3); font-style: italic; }
.arbol-foto {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--borde);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Colores por generación — tonos suaves */
:root {
  --gen0: #A993C8;
  --gen1: #7AAFD4;
  --gen2: #7DB87F;
  --gen3: #C9A96E;
  --gen4: #C97B9A;
  --gen5: #9E8E84;
  --gen0-bg: #F0EAF8; --gen1-bg: #E8F2F9; --gen2-bg: #EAF4EA;
  --gen3-bg: #F7F0E2; --gen4-bg: #F7E8EF; --gen5-bg: #EEEAE8;
}

/* ── Modo generación (default) ── */
#arbol-inner-el[data-color-mode="generacion"] .arbol-nodo[data-gen="0"] .arbol-foto,
.arbol-nodo[data-gen="0"] .arbol-foto { border-color: var(--gen0); background: var(--gen0-bg); }
#arbol-inner-el[data-color-mode="generacion"] .arbol-nodo[data-gen="1"] .arbol-foto,
.arbol-nodo[data-gen="1"] .arbol-foto { border-color: var(--gen1); background: var(--gen1-bg); }
#arbol-inner-el[data-color-mode="generacion"] .arbol-nodo[data-gen="2"] .arbol-foto,
.arbol-nodo[data-gen="2"] .arbol-foto { border-color: var(--gen2); background: var(--gen2-bg); }
#arbol-inner-el[data-color-mode="generacion"] .arbol-nodo[data-gen="3"] .arbol-foto,
.arbol-nodo[data-gen="3"] .arbol-foto { border-color: var(--gen3); background: var(--gen3-bg); }
#arbol-inner-el[data-color-mode="generacion"] .arbol-nodo[data-gen="4"] .arbol-foto,
.arbol-nodo[data-gen="4"] .arbol-foto { border-color: var(--gen4); background: var(--gen4-bg); }
#arbol-inner-el[data-color-mode="generacion"] .arbol-nodo[data-gen="5"] .arbol-foto,
.arbol-nodo[data-gen="5"] .arbol-foto { border-color: var(--gen5); background: var(--gen5-bg); }

.arbol-nodo[data-gen="0"] .arbol-foto-inicial { color: var(--gen0); }
.arbol-nodo[data-gen="1"] .arbol-foto-inicial { color: var(--gen1); }
.arbol-nodo[data-gen="2"] .arbol-foto-inicial { color: var(--gen2); }
.arbol-nodo[data-gen="3"] .arbol-foto-inicial { color: var(--gen3); }
.arbol-nodo[data-gen="4"] .arbol-foto-inicial { color: var(--gen4); }
.arbol-nodo[data-gen="5"] .arbol-foto-inicial { color: var(--gen5); }

/* ── Modo estado ── */
#arbol-inner-el[data-color-mode="estado"] .arbol-nodo .arbol-foto { border-color: var(--gen2); background: var(--gen2-bg); }
#arbol-inner-el[data-color-mode="estado"] .arbol-nodo .arbol-foto-inicial { color: var(--gen2); }
#arbol-inner-el[data-color-mode="estado"] .arbol-nodo[data-estado="fallecido"] .arbol-foto { border-color: var(--gen5); background: var(--gen5-bg); }
#arbol-inner-el[data-color-mode="estado"] .arbol-nodo[data-estado="fallecido"] .arbol-foto-inicial { color: var(--gen5); }

/* ── Modo apellido/rama ── */
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="0"] .arbol-foto { border-color: var(--gen0); background: var(--gen0-bg); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="1"] .arbol-foto { border-color: var(--gen1); background: var(--gen1-bg); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="2"] .arbol-foto { border-color: var(--gen2); background: var(--gen2-bg); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="3"] .arbol-foto { border-color: var(--gen3); background: var(--gen3-bg); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="4"] .arbol-foto { border-color: var(--gen4); background: var(--gen4-bg); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="5"] .arbol-foto { border-color: var(--gen5); background: var(--gen5-bg); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="0"] .arbol-foto-inicial { color: var(--gen0); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="1"] .arbol-foto-inicial { color: var(--gen1); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="2"] .arbol-foto-inicial { color: var(--gen2); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="3"] .arbol-foto-inicial { color: var(--gen3); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="4"] .arbol-foto-inicial { color: var(--gen4); }
#arbol-inner-el[data-color-mode="apellido"] .arbol-nodo[data-ap="5"] .arbol-foto-inicial { color: var(--gen5); }
.arbol-foto img { width: 100%; height: 100%; object-fit: cover; }
.arbol-foto-inicial {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--gris2);
}
.arbol-nombre {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--gris2);
  margin-top: 4px;
  line-height: 1.2;
  max-width: 100px;
  overflow-wrap: break-word;
  word-break: normal;
}
.arbol-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.arbol-svg line.half-sibling-line {
  stroke: #0A84FF55;
  stroke-dasharray: 7 5;
}

.grid-personas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 2px;
  padding-bottom: 100px;
}

.ficha-card {
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex;
  flex-direction: column;
}

.ficha-card:active { opacity: 0.7; }

.ficha-foto-wrap {
  aspect-ratio: 1;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.ficha-foto-wrap img { width: 100%; height: 100%; object-fit: cover; }

.ficha-inicial {
  font-family: 'Lato', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--gris3);
}

.ficha-info {
  padding: 6px 8px 8px;
  background: var(--card);
}

.ficha-nombre {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--blanco);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ficha-relacion { display: none; }
.ficha-years { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 1px; }

/* FICHA DETALLE */
.ficha-hero {
  width: 100%;
  aspect-ratio: 1;
  max-height: 280px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.ficha-hero img { width: 100%; height: 100%; object-fit: cover; }

/* Avatar when no photo */
.ficha-hero-inicial {
  font-family: 'Lato', sans-serif;
  font-size: 96px;
  font-weight: 900;
  color: var(--gris3);
}
.ficha-hero-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface) 0%, var(--card) 100%);
  border: 2px solid var(--borde);
  font-family: 'Lato', sans-serif;
  font-size: 40px;
  font-weight: 900;
  color: var(--gris2);
}

/* Sin foto: compact layout */
.ficha-hero--sin-foto {
  aspect-ratio: unset;
  max-height: none;
  background: none;
  padding: 24px 20px 8px;
  justify-content: flex-start;
  align-items: flex-start;
}

.ficha-avatar-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.ficha-avatar-wrap .ficha-hero-ctrls {
  position: absolute;
  bottom: -4px;
  right: -4px;
  gap: 0;
}

/* Photo edit/delete overlay */
.ficha-hero-ctrls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.ficha-hero-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--blanco);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.ficha-hero-btn:hover { background: rgba(0,0,0,0.85); }
.ficha-hero-btn input[type=file] { display: none; }

.ficha-header-info { padding: 20px 18px 0; }

.ficha-nombre-grande {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--blanco);
  line-height: 1.1;
}

@media (max-width: 600px) {
  .ficha-nombre-grande { font-size: 26px; }
}

.ficha-apodo { font-size: 16px; color: var(--gris2); margin-top: 4px; font-style: italic; }

.ficha-meta {
  font-size: 14px;
  color: var(--gris1);
  margin-top: 8px;
  display: grid;
  grid-template-columns: 112px 1fr auto;
  align-items: baseline;
  gap: 4px 8px;
}
.ficha-meta-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris2);
}

/* HISTORIA SECTION EN FICHA */
.historia-seccion {
  padding: 20px 18px 12px;
  border-top: 1px solid var(--borde);
  margin-top: 4px;
}
.historia-seccion-titulo {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 16px;
}
.historia-descripcion-legacy {
  font-size: 14px;
  line-height: 1.6;
  color: var(--blanco);
  opacity: 0.85;
  margin: 0 0 12px;
}
.historia-items-lista { margin-bottom: 4px; }
.historia-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}
.historia-item:last-child { border-bottom: none; }
.historia-item-main { flex: 1; min-width: 0; }
.historia-anio {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}
.historia-texto { font-size: 14px; line-height: 1.6; color: var(--blanco); margin: 0; }
.historia-acciones { display: flex; gap: 2px; flex-shrink: 0; padding-top: 2px; }
.historia-edit, .historia-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gris);
  font-size: 12px;
  padding: 3px 5px;
  border-radius: 6px;
  line-height: 1;
}
.historia-edit:hover { color: var(--accent); }
.historia-del:hover { color: var(--rojo); }
.historia-form {
  background: var(--surface);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--borde);
}
.historia-form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--borde);
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  padding: 4px 0 8px;
  margin-bottom: 8px;
  outline: none;
  box-sizing: border-box;
}
.historia-form-textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 0;
  outline: none;
  resize: none;
  box-sizing: border-box;
}
.historia-form-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.historia-form-cancelar-btn {
  background: none;
  border: none;
  color: var(--gris);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
}
.historia-btn-nuevo {
  background: var(--surface);
  border: 1px dashed var(--borde);
  border-radius: 10px;
  color: var(--accent);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 16px;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  box-sizing: border-box;
}
.historia-btn-nuevo:hover { border-color: var(--accent); background: rgba(27,110,99,0.08); }
.historia-edit-wrap { flex: 1; }

/* HISTORIA EN FORM NUEVA/EDITAR PERSONA */
.historia-form-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.historia-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 10px 12px;
}
.historia-row-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.historia-row-fecha {
  background: none;
  border: none;
  border-bottom: 1px solid var(--borde);
  color: var(--accent);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 0 6px;
  outline: none;
  width: 100%;
}
.historia-row-texto {
  background: none;
  border: none;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 2px 0;
  outline: none;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}
.historia-row-del {
  background: none;
  border: none;
  color: var(--gris);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.historia-row-del:hover { color: var(--rojo); }
.btn-historia-add-row {
  background: none;
  border: 1px dashed var(--borde);
  border-radius: 10px;
  color: var(--accent);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 14px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.btn-historia-add-row:hover { border-color: var(--accent); }

/* FAMILIARES SECTION EN FICHA */
.familiares-lista { display: flex; flex-direction: column; gap: 0; }

.familiar-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borde);
}
.familiar-fila:last-child { border-bottom: none; }
.familiar-fila-grupo { align-items: flex-start; }
.familiar-grupo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.familiar-label {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris2);
  min-width: 70px;
}

.familiar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 7px 14px 7px 7px;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
}
.familiar-link:hover { background: var(--card-hover); }
.familiar-link-foto {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.familiar-link-inicial {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.familiar-texto { font-size: 14px; color: var(--gris1); }

@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(4, 1fr); max-width: 1100px; }
}

/* HOME DASHBOARD */
#home-banner {
  padding: 16px 16px 0;
}
.home-sabias-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 14px 16px;
}
.home-sabias-loading {
  opacity: 0.5;
}
.home-sabias-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.home-sabias-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gris2);
  margin-bottom: 5px;
}
.home-sabias-texto {
  font-size: 14px;
  color: var(--gris1);
  line-height: 1.5;
}
.home-limite-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 16px;
  background: rgba(255,69,58,0.08);
  border: 1px solid rgba(255,69,58,0.35);
  border-radius: 14px;
  padding: 14px 16px;
}
.home-limite-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--rojo);
}
.home-limite-banner-body strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
  display: block;
  margin-bottom: 4px;
}
.home-limite-banner-body p {
  font-size: 13px;
  color: var(--gris1);
  line-height: 1.5;
  margin: 0 0 8px;
}
.home-limite-banner-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--rojo);
  text-decoration: none;
}
.home-banner-inner {
  background: var(--accent2);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.home-banner-left {
  flex: 1;
  min-width: 0;
}
.home-banner-saludo {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.home-banner-stats {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
}
.home-banner-stats strong { color: #fff; }
.home-banner-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}
.home-banner-ultimo {
  background: rgba(0,0,0,0.22);
  border-radius: 12px;
  padding: 12px 16px;
  width: 180px;
  flex-shrink: 0;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.home-banner-ultimo:active { background: rgba(0,0,0,0.38); }
.home-banner-ultimo-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 5px;
}
.home-banner-ultimo-emoji { font-size: 22px; margin-bottom: 4px; }
.home-banner-ultimo-titulo {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.efem-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 18px 4px;
}
.efem-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--superficie);
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.efem-item:active { opacity: 0.7; }
.efem-item.efem-hoy {
  border: 1px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 10%, var(--superficie));
}
.efem-icono { font-size: 18px; flex-shrink: 0; color: var(--gris2); line-height: 1; }
.efem-item.efem-hoy .efem-icono { color: var(--accent); }
.efem-cuando {
  font-size: 12px;
  font-weight: 700;
  color: var(--gris2);
  min-width: 68px;
  flex-shrink: 0;
}
.efem-item.efem-hoy .efem-cuando { color: var(--acento); }
.efem-nombre { font-size: 14px; color: var(--texto); }

.home-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gris2);
  padding: 20px 18px 10px;
}

#home-recientes {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 18px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#home-recientes::-webkit-scrollbar { display: none; }

.home-rec-card {
  flex-shrink: 0;
  width: 148px;
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--borde);
  transition: transform 0.15s;
}
.home-rec-card:active { transform: scale(0.97); }
.home-rec-thumb {
  width: 100%;
  height: 90px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  overflow: hidden;
}
.home-rec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-rec-info {
  padding: 8px 10px 10px;
}
.home-rec-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.home-rec-autor {
  font-size: 11px;
  color: var(--gris2);
}
/* ── DESTACADO DEL DÍA ── */
#home-top {
  display: flex;
  flex-direction: column;
}
.home-destacado-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}
.home-destacado-otro {
  background: none;
  border: none;
  color: var(--verde);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
#home-destacado-wrap .home-rec-destacado {
  margin: 0 18px 4px;
  width: calc(100% - 36px);
  flex-shrink: unset;
}
#home-destacado-wrap .home-rec-destacado .home-rec-thumb {
  height: 120px;
}
.home-destacado-anio {
  margin-left: 6px;
  color: var(--verde);
}

@media (min-width: 900px) {
  #home-top {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    padding: 16px 16px 0;
  }
  #home-banner {
    flex: 1;
    min-width: 0;
    padding: 0;
  }
  #home-banner .home-banner-inner {
    height: 100%;
    box-sizing: border-box;
    border-radius: 16px;
  }
  #home-destacado-wrap {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }
  .home-destacado-header {
    padding: 0 4px 8px;
  }
  #home-destacado-wrap .home-rec-destacado {
    margin: 0;
    width: 100%;
    flex: 1;
  }
  #home-destacado-wrap .home-rec-destacado .home-rec-thumb {
    height: 160px;
  }
}

/* ── LIGHTBOX FOTOS ── */
.foto-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9000;
  flex-direction: column;
}
.foto-lightbox.visible { display: flex; }
.foto-lightbox-cerrar {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 14px));
  right: max(14px, env(safe-area-inset-right, 14px));
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.foto-lightbox-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.foto-lightbox-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform 0.05s linear;
}

/* ── TIPOGRAFÍA — mejoras de accesibilidad ── */
/* ── TIPOGRAFÍA — escala de accesibilidad ──────────────────────────────────
   Las cards de la cuadrícula (.card-titulo, .card-meta, .tag-persona) no se
   tocan — el espacio es limitado y los nombres se cortan si la fuente crece */

/* Navegación */
.filtro-btn       { font-size: 15px; }
.mbnav-label      { font-size: 12px; }
.sidebar-link     { font-size: 15px; }

/* Contenido principal */
.detalle-titulo       { font-size: 28px; line-height: 1.1; }
.detalle-descripcion  { font-size: 16px; line-height: 1.7; }
.detalle-meta         { font-size: 14px; }
.familiar-texto       { font-size: 16px; }
.ficha-subtitulo      { font-size: 14px; }
.ficha-nombre         { font-size: 14px; }

/* Comentarios */
.comentario-texto  { font-size: 15px; line-height: 1.6; }
.comentario-autor  { font-size: 14px; }

/* Formularios */
.campo label   { font-size: 14px; }
.tag-etiqueta  { font-size: 13px; }

/* UI secundaria */
.pantalla-titulo  { font-size: 17px; }
.arbol-nombre     { font-size: 13px; }

/* UPDATE BANNER */
#update-banner {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0);
  left: 0; right: 0;
  background: var(--accent);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
}
#update-banner-btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
}

/* TAGS PICKER */
.tags-picker-wrap {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 12px;
  cursor: text;
  position: relative;
}
.tags-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.tags-picker-chips:empty { margin-bottom: 0; }
.tag-picker-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(27,110,99,0.25);
  border: 1px solid rgba(27,110,99,0.5);
  color: var(--blanco);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
.tag-picker-chip-remove {
  background: none;
  border: none;
  color: var(--gris2);
  cursor: pointer;
  padding: 0 0 0 2px;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
}
.tags-search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  width: 100%;
  padding: 2px 0;
}
.tags-search-input::placeholder { color: var(--gris3); }
.tags-picker-dropdown {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.tag-picker-option {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gris1);
  cursor: pointer;
  font-family: 'Lato', sans-serif;
}
.tag-picker-option:hover { background: var(--surface); color: var(--blanco); }
.tags-sugerencias-rapidas-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.tag-sugerencia-chip {
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: 'Lato', sans-serif;
  color: var(--gris1);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.tag-sugerencia-chip:hover { border-color: var(--verde); color: var(--blanco); }

/* ── BÚSQUEDA UNIVERSAL (HOME) ── */
.busqueda-personas-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 8px;
}
.busqueda-persona-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 50px;
  padding: 5px 14px 5px 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.busqueda-persona-chip:active { background: var(--surface); }
.busqueda-persona-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gris2);
  overflow: hidden;
  flex-shrink: 0;
}
.busqueda-persona-av img { width: 100%; height: 100%; object-fit: cover; }
.busqueda-persona-chip span { font-size: 13px; font-weight: 600; color: var(--blanco); }

.busqueda-recuerdos-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 18px 16px;
}

/* ── ACTIVIDAD RECIENTE ── */
.actividad-dia {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gris2);
  padding: 16px 18px 6px;
}

.actividad-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
  transition: background 0.12s;
}

.actividad-item:active { background: var(--surface); }
.actividad-item:hover  { background: var(--card); }

.actividad-av {
  display: none;
}

.actividad-texto {
  flex: 1;
  min-width: 0;
}

.actividad-desc {
  font-size: 14px;
  color: var(--gris1);
  line-height: 1.4;
}

.actividad-desc strong {
  color: var(--blanco);
  font-weight: 700;
}

.actividad-time {
  font-size: 12px;
  color: var(--gris2);
  margin-top: 3px;
}

.actividad-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  overflow: hidden;
  order: -1;
}

.actividad-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── SIDEBAR LAYOUT ── */
.app-sidebar { display: none; }

@media (min-width: 900px) {
  .app-sidebar {
    display: flex;
    flex-direction: column;
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: var(--card);
    border-right: 1px solid var(--borde);
    padding: 24px 0 20px;
    z-index: 90;
  }

  .app-main {
    margin-left: 200px;
  }

  .sidebar-brand {
    padding: 0 20px 28px;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
    flex: 1;
  }

  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gris2);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    font-family: 'Lato', sans-serif;
  }

  .sidebar-link:hover {
    background: var(--surface);
    color: var(--gris1);
  }

  .sidebar-link.activo {
    background: var(--surface);
    color: var(--blanco);
    font-weight: 600;
  }

  .sidebar-contacto-btn {
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    margin-top: 4px;
    opacity: 0.6;
  }
  .sidebar-contacto-btn:hover { opacity: 1; }

  .notif-badge { display: none; }

  .sidebar-link-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
  }

  /* Hide top-nav on desktop — sidebar replaces it */
  .top-nav { display: none; }
  .header { border-bottom: none; }

  /* Hide mobile bottom nav — sidebar replaces it */
  .mobile-bottom-nav { display: none; }
  .app-main { padding-bottom: 0; }

  /* Desktop header: thin top bar with just right-side actions */
  .header { border-bottom: 1px solid var(--borde); padding: 0 20px; }
  .header-top { justify-content: flex-end; margin-bottom: 0; padding: 8px 0; }
  .header-top .logo { display: none; }

  /* Desktop: bottom sheet centered and narrower */
  .bs-overlay { align-items: flex-end; justify-content: center; }
  .bs-panel { max-width: 420px; border-radius: 20px; margin-bottom: 20px; border: 1px solid var(--borde); }

  .fab-wrap { display: none; }

  .sidebar-actions {
    padding: 12px 10px;
    border-top: 1px solid var(--borde);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    transition: opacity 0.15s, background 0.12s;
  }

  .sidebar-action-btn:not(.sidebar-action-btn--ghost) {
    background: var(--accent2);
    color: var(--blanco);
  }
  .sidebar-action-btn:not(.sidebar-action-btn--ghost):hover { opacity: 0.85; }

  .sidebar-action-btn--ghost {
    background: var(--surface);
    color: var(--gris1);
  }
  .sidebar-action-btn--ghost:hover { background: var(--card-hover); color: var(--blanco); }

  .sidebar-action-icon { font-size: 16px; flex-shrink: 0; line-height: 1; }

  .sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 8px;
    cursor: pointer;
    background: none;
    border: none;
    flex: 1;
    min-width: 0;
    font-family: 'Lato', sans-serif;
    text-align: left;
    transition: opacity 0.15s;
  }
  .sidebar-user:hover { opacity: 0.7; }
  .sidebar-footer {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--borde);
  }
  .sidebar-logout-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    border-left: 1px solid var(--borde);
    padding: 10px 14px;
    color: rgba(255,255,255,0.35);
    font-size: 17px;
    cursor: pointer;
    transition: color .15s;
    display: flex;
    align-items: center;
    align-self: stretch;
  }
  .sidebar-logout-btn:hover { color: #FF453A; }
  .sidebar-user-foto {
    width: 28px; height: 28px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
  }
  .sidebar-user-nombre {
    font-size: 13px; font-weight: 600;
    color: var(--gris1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* SIDEBAR FAMILIA */
.sidebar-familia {
  padding: 4px 0 0;
}
.sb-familia-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: opacity 0.15s;
}
.sb-familia-btn:hover { opacity: 0.7; }
/* MIS FAMILIAS sección */
.mf-titulo {
  font-size: 22px;
  font-weight: 700;
  color: var(--blanco);
  padding: 24px 24px 16px;
}
.mf-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px;
}
.mf-card {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mf-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mf-card.activa { border-color: var(--accent); }
.mf-card:not(.activa) { cursor: pointer; }
.mf-card:not(.activa):hover { background: var(--card-hover); }
.mf-card-nombre {
  font-size: 16px;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 4px;
}
.mf-card-codigo {
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.mf-card-miembros {
  font-size: 12px;
  color: var(--gris2);
}
.mf-card-accion {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.mf-activa-badge {
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}
.mf-btn-copiar {
  background: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.mf-btn-copiar:hover { background: var(--accent); color: var(--blanco); }
.mf-btn-invitar {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--gris1);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mf-btn-invitar:hover { background: var(--surface); color: var(--blanco); }

/* Modal invitar */
.invitar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.invitar-panel {
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 28px;
  max-width: 460px;
  width: 100%;
  position: relative;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.invitar-cerrar {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--gris2);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.invitar-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 6px;
}
.invitar-instruccion {
  font-size: 13px;
  color: var(--gris2);
  margin: 0 0 14px;
}
.invitar-mensaje {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px;
  font-size: 14px;
  color: var(--gris1);
  line-height: 1.6;
  margin-bottom: 18px;
  white-space: pre-wrap;
}
.invitar-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.invitar-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.invitar-btn-copiar {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s;
}
.invitar-btn-copiar:hover { background: var(--card); }
.invitar-btn-wsp {
  flex: 1;
  background: #25D366;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.15s;
}
.invitar-btn-wsp:hover { opacity: 0.88; }

.mf-btn-principal {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.mf-btn-principal:hover { background: var(--card-hover); }
.mf-btn-salir {
  background: none;
  border: none;
  color: var(--gris);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  padding: 2px 4px;
  cursor: pointer;
  text-align: right;
}
.mf-btn-salir:hover { color: #e05252; }
.mf-btn-agregar {
  margin: 16px 24px;
  background: none;
  border: 1px dashed var(--borde);
  border-radius: var(--radio-card);
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  padding: 14px 20px;
  cursor: pointer;
  width: calc(100% - 48px);
  text-align: center;
  transition: color 0.15s, border-color 0.15s;
}
.mf-btn-agregar:hover { color: var(--blanco); border-color: var(--gris2); }

/* ONBOARDING */
.onboarding-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo);
  padding: 24px;
}
.ob-step {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  gap: 0;
}
.ob-step.activo { display: flex; }
.ob-logo {
  font-family: 'Postmark', serif;
  font-size: 36px;
  color: var(--blanco);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.ob-titulo {
  font-size: 22px;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 8px;
  text-align: center;
}
.ob-sub {
  font-size: 14px;
  color: var(--gris2);
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.5;
}
.ob-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 0;
}
.ob-card-btn {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
  font-family: 'Lato', sans-serif;
  color: var(--blanco);
}
.ob-card-btn:hover { background: var(--card-hover); border-color: var(--accent); }
.ob-card-btn strong { font-size: 16px; font-weight: 700; color: var(--blanco); display: block; margin-bottom: 3px; }
.ob-card-btn small { font-size: 13px; color: var(--gris2); }
.ob-card-btn-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 4px;
}
.ob-card-btn-desc {
  font-size: 13px;
  color: var(--gris2);
}
.ob-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.15s;
}
.ob-input:focus { border-color: var(--accent); }
.ob-input::placeholder { color: var(--gris3); }
.ob-btn-primary {
  width: 100%;
  background: var(--accent2);
  color: var(--blanco);
  border: none;
  border-radius: var(--radio);
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-bottom: 10px;
}
.ob-btn-primary:hover { opacity: 0.85; }
.ob-btn-secondary {
  background: none;
  color: var(--gris2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  transition: color 0.15s;
}
.ob-btn-secondary:hover { color: var(--blanco); }
.ob-codigo-box {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
  width: 100%;
}
.ob-codigo-label {
  font-size: 12px;
  color: var(--gris2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ob-codigo-valor {
  font-family: 'Courier New', monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--blanco);
  letter-spacing: 0.15em;
}
.ob-migrado-info {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--gris2);
  line-height: 1.5;
  margin-bottom: 16px;
  width: 100%;
}
.ob-back {
  background: none;
  border: none;
  color: var(--gris2);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  margin-bottom: 20px;
  transition: color 0.15s;
}
.ob-back:hover { color: var(--blanco); }
.ob-card-icon {
  font-size: 28px;
  color: var(--accent);
  margin-right: 16px;
  flex-shrink: 0;
}
.ob-card-btn {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.ob-check {
  font-size: 48px;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.ob-check--ok {
  font-size: 36px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ── ONBOARDING NUEVO ── */
.ob-logo--sm { font-size: 22px; margin-bottom: 20px; }
.ob-welcome-tag {
  font-size: 15px;
  color: var(--gris2);
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: 0.02em;
}
.ob-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-bottom: 36px;
}
@keyframes ob-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ob-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--blanco);
  line-height: 1.4;
  animation: ob-fade-up 0.35s ease both;
}
.ob-features li:nth-child(1) { animation-delay: 0.05s; }
.ob-features li:nth-child(2) { animation-delay: 0.18s; }
.ob-features li:nth-child(3) { animation-delay: 0.31s; }
.ob-feat-icon { font-size: 22px; flex-shrink: 0; color: var(--accent); }

.ob-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 28px;
}
.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--borde);
  transition: background 0.2s;
}
.ob-dot--on { background: var(--accent); }

.ob-input-anio { margin-bottom: 20px; }
.ob-tipos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-bottom: 16px;
}
.ob-tipo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 18px 8px;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: var(--gris2);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ob-tipo-btn i { font-size: 24px; color: var(--accent); }
.ob-tipo-btn:hover { border-color: var(--accent); color: var(--blanco); }
.ob-tipo-btn.ob-tipo-seleccionado { border-color: var(--accent); background: rgba(78,160,139,0.12); color: var(--blanco); }

.ob-upload-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  animation: ob-fade-up 0.2s ease both;
}
.ob-cambiar-tipo {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: 'Lato', sans-serif;
  text-align: left;
}
.ob-file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px dashed var(--borde);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--gris2);
  transition: border-color 0.15s;
  width: 100%;
}
.ob-file-label:hover { border-color: var(--accent); }
.ob-file-label i { font-size: 18px; color: var(--accent); flex-shrink: 0; }
.ob-file-label.ob-file-ok { border-color: var(--accent); color: var(--blanco); border-style: solid; }

.ob-btn-skip {
  background: none;
  border: none;
  color: var(--gris3);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  margin-top: -4px;
  transition: color 0.15s;
}
.ob-btn-skip:hover { color: var(--gris2); }

.ob-migrado-info:empty { display: none; }
.ob-hints {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 20px 0;
  border-top: 1px solid var(--borde);
  padding-top: 20px;
}
.ob-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ob-hint-icon { font-size: 18px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.ob-hint strong { font-size: 13px; font-weight: 700; color: var(--blanco); display: block; margin-bottom: 2px; }
.ob-hint p { font-size: 12px; color: var(--gris2); margin: 0; line-height: 1.4; }

/* ── TOUR GUIADO ── */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 32px;
}
.tour-panel {
  pointer-events: all;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 20px 24px;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  animation: ob-fade-up 0.3s ease both;
}
.tour-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tour-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--gris3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tour-skip {
  background: none;
  border: none;
  color: var(--gris3);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.tour-skip:hover { color: var(--gris2); }
.tour-body { display: flex; flex-direction: column; gap: 4px; }
.tour-titulo {
  font-size: 17px;
  font-weight: 700;
  color: var(--blanco);
}
.tour-desc {
  font-size: 14px;
  color: var(--gris2);
  line-height: 1.5;
}
.tour-next {
  background: var(--accent2);
  color: var(--blanco);
  border: none;
  border-radius: var(--radio);
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
  width: 100%;
}
.tour-next:hover { opacity: 0.85; }

.home-empty-inicio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px;
  gap: 16px;
}
.home-empty-icon { font-size: 52px; color: var(--accent); opacity: 0.7; }
.home-empty-titulo { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--blanco); margin: 0; }
.home-empty-desc { font-size: 15px; color: var(--gris2); max-width: 380px; line-height: 1.6; margin: 0; }
.home-empty-acciones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.home-empty-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--borde);
  color: var(--blanco); border-radius: 12px;
  padding: 13px 20px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'Lato', sans-serif;
  transition: border-color 0.15s;
}
.home-empty-btn:hover { border-color: var(--accent); }
.home-empty-btn--primary { background: var(--accent); border-color: var(--accent); color: #0F0F0F; }
.home-empty-btn--primary:hover { opacity: 0.9; }
.home-empty-btn i { font-size: 16px; }

.tour-fin-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  animation: ob-fade-up 0.3s ease both;
}
.tour-fin-icon { font-size: 24px; color: var(--accent); flex-shrink: 0; }
.tour-fin-banner div { flex: 1; }
.tour-fin-banner strong { display: block; font-size: 15px; color: var(--blanco); margin-bottom: 2px; }
.tour-fin-banner p { font-size: 13px; color: var(--gris2); margin: 0; }
.tour-fin-cerrar {
  background: none; border: none; color: var(--gris2); cursor: pointer;
  font-size: 18px; padding: 4px; line-height: 1;
}

/* ── EMPTY STATES MEJORADOS ── */
.empty-state-g {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  gap: 12px;
  grid-column: 1 / -1;
}
.empty-state-g .es-icono { font-size: 48px; line-height: 1; margin-bottom: 4px; }
.empty-state-g .es-titulo {
  font-size: 17px;
  font-weight: 700;
  color: var(--blanco);
}
.empty-state-g .es-desc {
  font-size: 14px;
  color: var(--gris2);
  max-width: 280px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.empty-cta {
  background: var(--accent);
  color: var(--blanco);
  border: none;
  border-radius: var(--radio);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 0.15s;
}
.empty-cta:hover { opacity: 0.85; }

@media (min-width: 600px) {
  .ficha-hero {
    aspect-ratio: 1;
    max-width: 360px;
    max-height: 360px;
    margin: 24px auto 0;
    border-radius: 16px;
  }
}

/* ── TOOLTIP INFO BUTTON ──────────────────────────────────────────────────── */
.tooltip-info {
  background: none;
  border: none;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  padding: 0 3px;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  transition: color 0.15s;
}
.tooltip-info:hover { color: #ccc; }

/* ── TOOLTIPS ─────────────────────────────────────────────────────────────── */
#tooltip-global {
  position: fixed;
  z-index: 9999;
  background: #2a2d3a;
  color: #f2f2f2;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 13px;
  border-radius: 10px;
  max-width: 220px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  pointer-events: none;
  opacity: 0;
  display: none;
  transition: opacity 0.15s ease;
}
#tooltip-global.visible {
  opacity: 1;
}

/* ── LANGUAGE SELECTOR ─────────────────────────────────────────────────────── */
.ob-lang-toggle {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
}
.login-lang-toggle {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 20px;
}
.ob-lang-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.45);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.ob-lang-btn--active {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.ob-lang-btn:not(.ob-lang-btn--active):hover {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.25);
}

/* Sidebar language toggle */
.sidebar-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  margin-bottom: 4px;
}
.sidebar-lang-sep {
  color: rgba(255,255,255,0.2);
  font-size: 13px;
}
.sidebar-lang-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.sidebar-lang-btn--active {
  color: rgba(255,255,255,0.85);
}
.sidebar-lang-btn:not(.sidebar-lang-btn--active):hover {
  color: rgba(255,255,255,0.55);
}
.sidebar-ayuda-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 22px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin-left: auto;
  transition: color 0.15s;
}
.sidebar-ayuda-btn:hover { color: rgba(255,255,255,0.9); }

/* ── OB-LANG STEP ──────────────────────────────────────────────────────────── */
.ob-logo--lang {
  margin-bottom: 28px;
}
.ob-lang-pregunta {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.5;
}
.ob-lang-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.ob-lang-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 18px 22px;
  cursor: pointer;
  transition: all 0.18s;
  color: #fff;
  font-size: 17px;
}
.ob-lang-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.ob-lang-card--active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 48, 209, 88), 0.1);
}
.ob-lang-flag {
  font-size: 32px;
  line-height: 1;
}
.ob-lang-nombre {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── SIDEBAR FLAGS ─────────────────────────────────────────────────────────── */
.sidebar-lang {
  gap: 8px;
}
.sidebar-lang-btn {
  font-size: 18px;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.12s;
}
.sidebar-lang-btn--active {
  opacity: 1;
  transform: scale(1.1);
}
.sidebar-lang-btn:not(.sidebar-lang-btn--active):hover {
  opacity: 0.7;
}
/* hide the old separator since we no longer have it */
.sidebar-lang-sep { display: none; }

/* ── SALUD FAMILIAR — FICHA ──────────────────────────────────────────────── */
.ficha-salud {
  margin: 0 18px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.ficha-salud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: none;
  width: 100%;
  cursor: pointer;
  color: var(--blanco);
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
}
.ficha-salud-header span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ficha-salud-chevron {
  transition: transform 0.2s;
  opacity: 0.5;
}
.ficha-salud-body {
  padding: 12px 16px 16px;
}
.ficha-salud-texto {
  font-size: 14px;
  color: var(--gris2);
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
}

/* ── SALUD FAMILIAR — DASHBOARD ──────────────────────────────────────────── */
.home-salud-card {
  margin: 0 18px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
}
.home-salud-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px;
  color: var(--gris2);
  font-size: 12px;
}
.home-salud-toggle {
  width: 100%;
  justify-content: space-between;
  cursor: pointer;
}
.home-salud-chevron { transition: transform 0.2s; font-size: 16px; }
.home-salud-lista {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-salud-item {
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.home-salud-item:hover {
  background: rgba(255,255,255,0.05);
}
.home-salud-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--blanco);
  margin-bottom: 3px;
}
.home-salud-texto {
  font-size: 13px;
  color: var(--gris2);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── CAMPO TEXTAREA ──────────────────────────────────────────────────────── */
.campo textarea {
  width: 100%;
  background: var(--input-bg, rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--blanco);
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
}
.campo textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── SOPORTE FOOTER + MODAL ──────────────────────────────────────────────── */
.soporte-footer {
  padding: 24px 18px 48px;
  text-align: center;
}
.soporte-footer-btn {
  background: none;
  border: none;
  color: var(--gris2);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.soporte-footer-btn:hover { opacity: 1; }

.soporte-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.soporte-modal {
  background: #1e2128;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 40px;
  width: 100%;
  max-width: 480px;
  position: relative;
}
.soporte-cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--gris2);
  font-size: 18px;
  cursor: pointer;
}
.soporte-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.soporte-desc {
  font-size: 14px;
  color: var(--gris2);
  margin-bottom: 16px;
}
.soporte-input, .soporte-textarea {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--blanco);
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 10px;
  display: block;
}
.soporte-textarea { resize: none; line-height: 1.5; }
.soporte-input:focus, .soporte-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.soporte-submit {
  width: 100%;
  background: var(--accent);
  color: var(--fondo);
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}
.soporte-submit:disabled { opacity: 0.6; }
.soporte-ok {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  color: var(--gris2);
  font-size: 15px;
  text-align: center;
}

/* ── SEARCH ROW + BOTÓN AYUDA ────────────────────────────────────────────── */
.search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}
.search-row .search-bar {
  flex: 1;
  width: auto;
  margin: 0;
}
.btn-ayuda {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.07);
  color: var(--gris2);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-ayuda:hover { background: rgba(255,255,255,0.12); color: var(--blanco); }

/* ── COMPARTIR / IMPORTAR RAMA ─────────────────────────────────── */
.rama-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
  padding-right: 2px;
}
.rama-persona-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--surface);
  border-radius: 10px;
  font-size: 14px;
  color: var(--blanco);
}
.rama-persona-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rama-persona-inicial {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.rama-persona-apodo {
  color: var(--gris2);
  font-size: 12px;
}
.rama-persona-nombre { flex: 1; min-width: 0; }
.rama-persona-acciones { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rama-excluir-btn {
  background: none;
  border: 1px solid var(--gris1);
  color: var(--gris2);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rama-excluir-btn:hover { border-color: var(--blanco); color: var(--blanco); }
.rama-excluir-rama-btn {
  background: none;
  border: 1px solid var(--gris1);
  color: var(--gris2);
  border-radius: 6px;
  padding: 0 5px;
  height: 24px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.rama-excluir-rama-btn:hover { border-color: var(--blanco); color: var(--blanco); }
.rama-persona-excluida {
  opacity: 0.35;
  background: transparent;
  border: 1px dashed var(--gris1);
}
.rama-persona-excluida .rama-excluir-btn { color: var(--accent); border-color: var(--accent); }
.rama-codigo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 16px;
}
.rama-codigo-label {
  font-size: 13px;
  color: var(--gris2);
}
.rama-codigo-valor {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--blanco);
  font-family: monospace;
}

/* ── TOGGLE APODO EN ÁRBOL ─────────────────────────────────────── */
.apodo-arbol-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--gris2);
  cursor: pointer;
}
.apodo-arbol-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.mf-btn-importar-rama-card {
  background: transparent;
  border: 1px dashed var(--borde);
  color: var(--gris2);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, color 0.15s;
}
.mf-btn-importar-rama-card:hover { border-color: var(--accent); color: var(--accent); }

/* --- NOTIFICACIONES --- */
.notif-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.4);
  display: flex; align-items: flex-start; justify-content: flex-start;
}
.notif-panel {
  background: var(--gris6, #1a1d24);
  border-right: 1px solid var(--gris5, #2a2d36);
  width: 340px;
  max-width: 90vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,.5);
}
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid var(--gris5, #2a2d36);
}
.notif-cerrar {
  background: none; border: none; color: var(--gris2); font-size: 16px; cursor: pointer; padding: 4px;
}
.notif-lista { flex: 1; overflow-y: auto; }
.notif-item {
  padding: 14px 18px;
  border-bottom: 1px solid var(--gris5, #2a2d36);
  cursor: pointer;
  transition: background .15s;
}
.notif-item:hover { background: rgba(255,255,255,.04); }
.notif-item.no-leida { border-left: 3px solid var(--accent); }
.notif-item-de { font-size: 12px; color: var(--accent); font-weight: 700; margin-bottom: 3px; }
.notif-item-texto { font-size: 13px; color: var(--gris1); line-height: 1.4; margin-bottom: 4px; }
.notif-item-meta { font-size: 11px; color: var(--gris3); }
.notif-vacia { padding: 40px 20px; text-align: center; color: var(--gris3); font-size: 14px; }

/* --- MENCIONES DROPDOWN --- */
.mencion-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0; right: 50px;
  background: var(--gris6, #1a1d24);
  border: 1px solid var(--gris5, #2a2d36);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
  z-index: 100;
}
.mencion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .12s;
  font-size: 14px;
}
.mencion-item:hover, .mencion-item.activo { background: rgba(255,255,255,.06); }
.mencion-item-foto {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.mencion-item-inicial {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.mencion-item-nombre { font-weight: 600; }

.mencion-tag {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 2px;
  transition: background .12s;
}
.mencion-tag:hover { background: rgba(var(--accent-rgb, 45,188,152),.15); }

/* --- MOBILE HEADER MENU --- */
.mb-menu-desplegable {
  position: absolute;
  top: calc(100% + 6px);
  right: 8px;
  background: var(--gris6, #1a1d24);
  border: 1px solid var(--gris5, #2a2d36);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 500;
  min-width: 160px;
  overflow: hidden;
}
.mb-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--gris1);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.mb-menu-item:hover { background: rgba(255,255,255,.06); }
.mb-menu-item.activo { color: var(--accent); }
.mb-menu-item--logout { color: #FF453A; }
.mb-menu-item--logout:hover { background: rgba(255,69,58,0.08); }
.mb-menu-sep { height: 1px; background: var(--gris5, #2a2d36); margin: 4px 0; }

/* ── HEADER DROPDOWN POSITION FIX ── */
.mb-menu-desplegable {
  top: calc(100% + 4px);
  right: 0;
}

/* ── DESKTOP: ocultar campana del sidebar (ya está en el header) ── */
@media (min-width: 900px) {
  #btn-notificaciones { display: none; }
}

.mb-menu-familia {
  padding: 12px 16px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blanco);
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mb-menu-familia::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.header-logo-wrap { display: flex; flex-direction: column; gap: 1px; }
.header-familia-nombre {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
}
/* On desktop: logo is hidden, so hide the family name in header too (it's in sidebar) */
@media (min-width: 900px) {
  .header-logo-wrap { display: none; }
}

.busqueda-persona-salud {
  display: block;
  font-size: 11px;
  color: var(--gris2);
  margin-top: 1px;
  line-height: 1.3;
}

/* --- ADJUNTOS A CAMPOS DE PERSONA --- */
.ficha-meta-clip { display: flex; align-items: center; gap: 6px; }
.ficha-clip-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 6px;
  color: var(--gris2);
  cursor: pointer;
  padding: 2px 5px;
  font-size: 13px;
  line-height: 1;
  transition: color .15s, border-color .15s;
}
.ficha-clip-btn:hover { color: var(--blanco); border-color: var(--gris2); }
.ficha-clip-btn.tiene { color: var(--accent); border-color: var(--accent); }

.ficha-salud-header-row { display: flex; align-items: center; gap: 8px; }
.ficha-salud-header-row .ficha-salud-header { flex: 1; }

/* Modal adjunto */
#adjunto-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0,0,0,0.78);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#adjunto-overlay.visible { display: flex; }
.adjunto-modal {
  background: var(--gris6);
  border-radius: 18px;
  padding: 20px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adjunto-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
  color: var(--blanco);
}
.adjunto-cerrar {
  background: none;
  border: none;
  color: var(--gris2);
  cursor: pointer;
  font-size: 18px;
  padding: 2px;
}
.adjunto-file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gris5);
  border: 1.5px dashed var(--borde);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--gris2);
  font-size: 14px;
  transition: border-color .15s;
}
.adjunto-file-label:hover { border-color: var(--accent); color: var(--blanco); }
.adjunto-file-label i { font-size: 20px; flex-shrink: 0; }
.adjunto-input {
  background: var(--gris5);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--blanco);
  font-size: 14px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}
.adjunto-input:focus { outline: none; border-color: var(--accent); }
.familiar-fila-clip { display: flex; align-items: center; gap: 6px; }

.adjunto-campo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px dashed var(--borde);
  border-radius: 8px;
  color: var(--gris2);
  cursor: pointer;
  font-size: 13px;
  padding: 7px 12px;
  margin: -4px 0 8px;
  width: 100%;
  transition: color .15s, border-color .15s;
}
.adjunto-campo-btn:hover { color: var(--blanco); border-color: var(--gris2); }
.adjunto-campo-btn.tiene { color: var(--accent); border-color: var(--accent); border-style: solid; }

.label-con-clip { display: flex; align-items: center; gap: 6px; }
.label-clip-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--gris1);
  cursor: pointer;
  padding: 6px 10px;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 8px;
  transition: color .15s, border-color .15s, background .15s;
}
.label-clip-btn:hover { color: var(--blanco); border-color: var(--gris2); background: var(--surface); }
.label-clip-btn.tiene { color: var(--accent); border-color: var(--accent); background: rgba(27,110,99,0.08); }

/* Preview inline de adjunto en ficha lectura */
.adjunto-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gris5);
  border-radius: 10px;
  margin: 4px 0 8px;
  cursor: pointer;
  overflow: hidden;
  transition: background .15s;
}
.adjunto-inline:hover { background: var(--gris4); }
.adjunto-inline.foto { flex-direction: column; align-items: flex-start; }
.adjunto-inline.foto img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
.adjunto-inline.doc { padding: 10px 14px; font-size: 14px; color: var(--blanco); }
.adjunto-inline.doc i { font-size: 20px; color: var(--accent); flex-shrink: 0; }
.adjunto-inline-titulo {
  font-size: 13px;
  color: var(--blanco);
  padding: 6px 12px;
}
.adjunto-inline.foto .adjunto-inline-titulo { padding: 6px 12px 10px; }

.adjunto-chip-adjuntado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(76,175,125,.12);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 4px 8px 4px 10px;
  font-size: 13px;
  color: var(--blanco);
  margin: 0 0 8px 8px;
  flex-wrap: nowrap;
}
.adjunto-chip-adjuntado i { color: var(--accent); font-size: 14px; flex-shrink: 0; }
.adjunto-chip-nombre { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto-chip-ver {
  background: none; border: 1px solid var(--accent); border-radius: 5px;
  color: var(--accent); cursor: pointer; font-size: 11px; padding: 1px 6px; flex-shrink: 0;
}
.adjunto-chip-quitar {
  background: none; border: none; color: var(--gris2); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 2px; flex-shrink: 0;
}
.adjunto-chip-quitar:hover { color: #e05555; }

.historia-row-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(76,175,125,.12);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 4px 8px 4px 10px;
  font-size: 12px;
  color: var(--blanco);
  margin-top: 6px;
}
.historia-row-chip i { color: var(--accent); font-size: 13px; }
.pareja-adj-chip { margin-top: 0; }
.historia-chip-nombre { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historia-chip-ver { background: none; border: 1px solid var(--accent); border-radius: 5px; color: var(--accent); cursor: pointer; font-size: 11px; padding: 1px 6px; }
.historia-chip-quitar { background: none; border: none; color: var(--gris2); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.historia-chip-quitar:hover { color: #e05555; }

.actividad-con { color: var(--gris2); font-size: 13px; }

.notif-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--fondo);
  line-height: 1;
  pointer-events: none;
}