/* ===========================================================
   Familia Cool — Design tokens
   =========================================================== */
:root{
  --bg:#0F141B;
  --bg-sidebar:#0B0F15;
  --card:#1A2029;
  --card-2:#1E2530;
  --card-hover:#232B37;
  --border:rgba(255,255,255,0.06);
  --border-strong:rgba(255,255,255,0.12);
  --text:#F5F6F8;
  --text-dim:#9AA5B1;
  --text-dimmer:#6B7480;
  --accent:#FF7A30;
  --accent-2:#FF9558;
  --accent-soft:rgba(255,122,48,0.14);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
  --shadow-card:0 8px 24px rgba(0,0,0,0.35);
  --shadow-hover:0 16px 40px rgba(0,0,0,0.45);
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:250ms;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }

::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; }

/* El selector [data-lucide] reserva el mismo tamaño del icono final para el
   placeholder <i> antes de que lucide.createIcons() lo sustituya por el
   <svg>, evitando que el resto del layout salte al cargar los iconos. */
svg, [data-lucide]{ display:inline-block; width:20px; height:20px; flex-shrink:0; }

/* ===========================================================
   Shell layout
   =========================================================== */
.app-shell{
  display:flex;
  min-height:100vh;
  width:100%;
}

/* ===========================================================
   Sidebar
   =========================================================== */
.sidebar{
  width:280px;
  flex-shrink:0;
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:24px 16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  z-index:40;
}

.sidebar-logo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 8px 24px;
}
.logo-mark{ font-size:26px; line-height:1; }
.logo-mark img{ width:32px; height:32px; border-radius:9px; display:block; object-fit:cover; }
.logo-text{ display:flex; flex-direction:column; }
.logo-title{ font-size:17px; font-weight:700; letter-spacing:-.2px; }
.logo-sub{ font-size:12px; color:var(--text-dimmer); }
.sidebar-close{ display:none; margin-left:auto; color:var(--text-dim); }

/* Notificaciones y perfil: en escritorio están en el topbar; en móvil no
   caben ahí (la barra de búsqueda los empuja fuera de la pantalla), así que
   se repiten aquí, debajo del logo, y se ocultan los del topbar. */
.sidebar-mobile-actions{ display:none; }
.sidebar-mobile-name{
  font-size:13.5px; font-weight:600; color:var(--text); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; min-width:0;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.nav-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 12px;
  border-radius:var(--radius-sm);
  color:var(--text-dim);
  font-size:14.5px;
  font-weight:500;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item svg{ color:var(--text-dimmer); transition:color var(--dur) var(--ease); flex-shrink:0; }
.nav-item:hover{ background:rgba(255,255,255,0.04); color:var(--text); }
.nav-item.is-active{ background:var(--card); color:#fff; }
.nav-item.is-active svg{ color:var(--accent); }

.sidebar-section{ padding-top:20px; }
.sidebar-section-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-dimmer);
  padding:0 8px 12px;
  text-transform:uppercase;
}
.install-app-btn{
  display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px;
  border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent-2);
  font-size:14.5px; font-weight:600; border:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.install-app-btn:hover{ background:rgba(255,122,48,0.22); border-color:var(--accent); }
.install-app-btn svg, .install-app-btn [data-lucide]{ color:var(--accent); flex-shrink:0; }
.install-app-btn[hidden]{ display:none; }

.install-instructions{ font-size:13.5px; color:var(--text-dim); line-height:1.7; }
.install-instructions ol{ margin:0; padding-left:20px; }
.install-instructions li{ margin-bottom:6px; }
.install-instructions strong{ color:var(--text); }

.install-app-banner{
  display:flex; flex-direction:column; gap:10px; padding:16px; margin-bottom:24px;
  background:var(--accent-soft); border:1px solid rgba(255,122,48,0.3); border-radius:var(--radius-md);
}
.install-app-banner-text{ display:flex; flex-direction:column; gap:2px; }
.install-app-banner-text strong{ font-size:14px; color:var(--text); }
.install-app-banner-text span{ font-size:12.5px; color:var(--text-dim); }
.install-app-banner .install-app-btn{ justify-content:center; }

.sidebar-storage{
  margin-top:auto;
  padding:16px 8px 4px;
  border-top:1px solid var(--border);
}
.storage-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--text-dim); margin-bottom:10px;
}
.storage-row svg, .storage-row [data-lucide]{ width:16px; height:16px; color:var(--text-dimmer); }
.storage-bar{
  width:100%; height:6px; border-radius:6px; background:rgba(255,255,255,0.07); overflow:hidden; margin-bottom:8px;
}
.storage-fill{ height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:6px; }
.storage-text{ font-size:12px; color:var(--text-dimmer); }

.sidebar-overlay{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:35;
}

/* ===========================================================
   Main wrap / topbar
   =========================================================== */
.main-wrap{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

.topbar{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 32px;
  flex-shrink:0;
}
.hamburger{ display:none; color:var(--text-dim); padding:6px; }

.search-bar{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:0 8px 0 16px;
  height:52px;
  max-width:640px;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.search-bar:hover, .search-bar:focus-within{ border-color:var(--border-strong); background:var(--card-2); }
.search-icon-left{ display:none; }
.search-bar input{
  flex:1; background:none; border:none; outline:none; color:var(--text);
  font-size:14.5px; font-family:inherit;
}
.search-bar input::placeholder{ color:var(--text-dimmer); }
.search-btn{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); transition:background var(--dur) var(--ease);
}
.search-btn:hover{ background:rgba(255,255,255,0.06); color:var(--text); }

.topbar-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; flex-shrink:0; }
.btn-upload{
  display:flex; align-items:center; gap:8px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  font-size:14px;
  padding:12px 20px;
  border-radius:var(--radius-md);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-upload:hover{ background:var(--accent-2); transform:translateY(-1px); }
.btn-upload svg, .btn-upload [data-lucide]{ width:18px; height:18px; }

.icon-btn{
  position:relative;
  width:44px; height:44px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--border); color:var(--text-dim);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover{ background:var(--card-hover); color:var(--text); }
.icon-btn .badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--accent); color:#fff; font-size:10.5px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg); padding:0 3px;
}
.card-badge{
  background:var(--accent); color:#fff; font-size:10.5px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.avatar-btn{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--border); transition:border-color var(--dur) var(--ease); }
.avatar-btn:hover{ border-color:var(--accent); }
.avatar-btn img{ width:100%; height:100%; object-fit:cover; }

/* ===========================================================
   Content scroll area
   =========================================================== */
.content{
  flex:1;
  overflow-y:auto;
  padding:4px 32px 64px;
  scroll-behavior:smooth;
}

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  position:relative;
  height:300px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:64px;
}
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(0,0,0,.72) 10%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.25) 100%);
}
.hero-text{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 40px;
  max-width:640px;
}
.hero-text h1{ font-size:34px; font-weight:800; margin:0 0 12px; letter-spacing:-.5px; }
.wave{ display:inline-block; animation:wave 2.4s ease-in-out infinite; transform-origin:70% 70%; }
@keyframes wave{ 0%,60%,100%{ transform:rotate(0deg); } 10%{ transform:rotate(16deg); } 20%{ transform:rotate(-8deg); } 30%{ transform:rotate(14deg); } 40%{ transform:rotate(-4deg); } }
.hero-text p{ font-size:15.5px; color:rgba(255,255,255,0.82); line-height:1.5; margin:0; }

.stats-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px;
  margin-top:-96px;
  margin-bottom:40px;
  position:relative;
  z-index:3;
}
.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:var(--shadow-card);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.stat-card:hover{ transform:translateY(-4px); background:var(--card-2); box-shadow:var(--shadow-hover); cursor:pointer; }
.stat-icon{
  width:48px; height:48px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.icon-photos{ background:rgba(255,122,48,.15); color:var(--accent); }
.icon-videos{ background:rgba(88,166,255,.15); color:#58A6FF; }
.icon-events{ background:rgba(163,113,247,.15); color:#A371F7; }
.icon-members{ background:rgba(63,185,120,.15); color:#3FB978; }
.icon-tags{ background:rgba(240,197,74,.15); color:#F0C54A; }
.stat-info{ display:flex; flex-direction:column; min-width:0; }
.stat-number{ font-size:22px; font-weight:800; letter-spacing:-.3px; }
.stat-label{ font-size:13px; color:var(--text-dim); }

/* ===========================================================
   Chips / quick filters
   =========================================================== */
.chips-row{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:44px;
  scrollbar-width:none;
}
.chips-row::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0;
  padding:9px 18px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text-dim);
  font-size:13.5px;
  font-weight:500;
  white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover{ background:var(--card-hover); color:var(--text); }
.chip.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ===========================================================
   Blocks / section headers
   =========================================================== */
.block{ margin-bottom:56px; }
.block-header{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px;
}
.block-header h2{ font-size:20px; font-weight:700; margin:0; letter-spacing:-.2px; }
.link-see-all{
  display:flex; align-items:center; gap:4px;
  font-size:13.5px; font-weight:600; color:var(--text-dim);
  transition:color var(--dur) var(--ease);
}
.link-see-all svg, .link-see-all [data-lucide]{ width:16px; height:16px; }
.link-see-all:hover{ color:var(--accent); }

/* ===========================================================
   Carousels
   =========================================================== */
.carousel{ position:relative; margin:0 -4px; }
.carousel-track{
  display:flex; gap:20px; overflow-x:auto; padding:4px 4px 12px;
  scroll-snap-type:x proximity;
}

/* Memory cards */
.memory-card{
  flex:0 0 260px; scroll-snap-align:start; cursor:pointer;
  transition:transform var(--dur) var(--ease);
}
.memory-card:hover{ transform:translateY(-4px); }
.memory-media{
  position:relative; width:100%; height:170px; border-radius:var(--radius-lg);
  overflow:hidden; background:var(--card); margin-bottom:12px;
}
.memory-media img{
  width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--ease);
}
.memory-card:hover .memory-media img{ transform:scale(1.08); }
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(15,20,27,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; color:#fff;
  opacity:0; transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.play-btn svg{ width:20px; height:20px; }
.memory-card:hover .play-btn{ opacity:1; }
.play-btn:hover{ background:var(--accent); }
.duration-badge{
  position:absolute; bottom:8px; right:8px;
  background:rgba(0,0,0,.65); color:#fff; font-size:11.5px; font-weight:600;
  padding:3px 7px; border-radius:6px;
}
.memory-body{ display:flex; flex-direction:column; gap:2px; }
.memory-title{ font-size:14.5px; font-weight:600; }
.memory-date{ font-size:12.5px; color:var(--text-dimmer); }

/* Year cards */
.year-card{ flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform var(--dur) var(--ease); }
.year-card:hover{ transform:translateY(-4px); }
.year-collage{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:3px; height:170px; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:12px;
}
.year-collage img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--ease); }
.year-collage img:first-child{ grid-row:1 / 3; }
.year-card:hover .year-collage img{ transform:scale(1.06); }
.year-body{ display:flex; align-items:baseline; gap:10px; }
.year-num{ font-size:22px; font-weight:800; letter-spacing:-.3px; }
.year-count{ font-size:12.5px; color:var(--text-dimmer); }

/* Event cards */
.event-card{ flex:0 0 280px; scroll-snap-align:start; cursor:pointer; transition:transform var(--dur) var(--ease); }
.event-card:hover{ transform:translateY(-4px); }
.event-media{
  position:relative; height:160px; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:12px;
}
.event-media img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--ease); }
.event-card:hover .event-media img{ transform:scale(1.08); }
.event-icon{
  position:absolute; top:10px; left:10px; width:34px; height:34px; border-radius:10px;
  background:rgba(15,20,27,.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; color:var(--accent-2);
}
.event-icon svg, .event-icon [data-lucide]{ width:17px; height:17px; }
.event-body{ display:flex; flex-direction:column; gap:4px; }
.event-title{ font-size:15px; font-weight:600; }
.event-date{ font-size:12.5px; color:var(--text-dimmer); }
.event-meta{ display:flex; gap:14px; margin-top:4px; }
.event-meta span{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-dim); }
.event-meta svg, .event-meta [data-lucide]{ width:14px; height:14px; color:var(--text-dimmer); }

/* Rank cards */
.rank-card{
  flex:0 0 160px; scroll-snap-align:start; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 12px 18px; position:relative;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rank-card:hover{ transform:translateY(-4px); background:var(--card-2); }
.rank-num{
  position:absolute; top:10px; left:12px; font-size:12px; font-weight:800; color:var(--text-dimmer);
}
.rank-card img{ width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--border); }
.rank-name{ font-size:14px; font-weight:600; }
.rank-count{ font-size:11.5px; color:var(--text-dimmer); }

/* ===========================================================
   Personas destacadas (row)
   =========================================================== */
.people-row{ display:flex; gap:24px; overflow-x:auto; padding:6px 4px 12px; scrollbar-width:none; }
.people-row::-webkit-scrollbar{ display:none; }
.person-chip{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform var(--dur) var(--ease);
}
.person-chip:hover{ transform:translateY(-3px); }
.person-chip img{
  width:76px; height:76px; border-radius:50%; object-fit:cover;
  border:2px solid var(--border); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.person-chip:hover img{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.p-name{ font-size:13.5px; font-weight:600; }
.p-count{ font-size:11.5px; color:var(--text-dimmer); }

/* ===========================================================
   Throwback ("hace X años")
   =========================================================== */
.throwback-block .block-header{ align-items:center; }
.throwback-badge{
  background:var(--accent-soft); color:var(--accent-2); font-size:12.5px; font-weight:700;
  padding:6px 14px; border-radius:999px;
}
.throwback-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; }
.throwback-item{ display:block; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1; transition:transform var(--dur) var(--ease); }
.throwback-item:hover{ transform:translateY(-4px); }
.throwback-item img{ width:100%; height:100%; object-fit:cover; }
.throwback-caption{ margin:14px 2px 0; font-size:13px; color:var(--text-dimmer); }

/* ===========================================================
   Lugares
   =========================================================== */
.places-list{ display:flex; flex-wrap:wrap; gap:10px; }
.place-chip{
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border); border-radius:999px;
  padding:10px 16px; font-size:13.5px; font-weight:500; color:var(--text-dim);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.place-chip svg, .place-chip [data-lucide]{ width:15px; height:15px; color:var(--text-dimmer); }
.place-chip span{ font-weight:700; color:var(--text); margin-left:2px; }
.place-chip:hover{ background:var(--card-hover); color:var(--text); }

/* ===========================================================
   Botones genéricos
   =========================================================== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:var(--radius-md);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary:hover{ background:var(--accent-2); }
/* Añadir mascota, junto a Añadir persona: mismo tamaño que btn-primary pero
   con un color propio (verde) para distinguir de un vistazo qué botón añade
   qué, ya que van pegados uno al lado del otro. */
.btn-pet-add{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#3FB978; color:#fff; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:var(--radius-md);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-pet-add:hover{ background:#34A067; }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--card); border:1px solid var(--border); color:var(--text-dim);
  font-weight:600; font-size:14px; padding:12px 22px; border-radius:var(--radius-md);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-ghost:hover{ background:var(--card-hover); color:var(--text); }
.btn-sm{ padding:8px 14px; font-size:13px; }
.btn-block{ width:100%; }
.btn-lg{
  padding:18px 40px; font-size:16.5px; border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(255,122,48,.28);
}
.btn-lg svg, .btn-lg [data-lucide]{ width:20px; height:20px; }

/* ===========================================================
   Page header (páginas internas)
   =========================================================== */
.page-header{ margin-bottom:32px; }
.page-header h1{ font-size:26px; font-weight:800; margin:0 0 6px; letter-spacing:-.3px; }
.page-sub{ font-size:14px; color:var(--text-dim); margin:0; }

/* ===========================================================
   Flash messages
   =========================================================== */
.flash{
  padding:14px 18px; border-radius:var(--radius-md); font-size:13.5px; margin-bottom:20px;
  border:1px solid var(--border);
}
.flash-ok{ background:rgba(63,185,120,.1); color:#5FD897; border-color:rgba(63,185,120,.25); }
.flash-err{ background:rgba(248,81,73,.1); color:#FF8983; border-color:rgba(248,81,73,.25); }
.flash a{ text-decoration:underline; }

/* ===========================================================
   Empty states
   =========================================================== */
.empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:48px 24px; background:var(--card); border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg); color:var(--text-dim);
}
.empty-state[hidden]{ display:none; }
.empty-state svg, .empty-state [data-lucide]{ width:32px; height:32px; color:var(--text-dimmer); }
.empty-state p{ margin:0; font-size:14px; max-width:420px; }
.empty-state a{ color:var(--accent-2); font-weight:600; }

/* ===========================================================
   Avatar fallback (iniciales)
   =========================================================== */
.avatar-fallback{
  width:100%; height:100%; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px;
}
.avatar-fallback-sm{ width:38px; height:38px; font-size:14px; flex-shrink:0; }
.avatar-fallback-lg{ width:76px; height:76px; font-size:26px; border:2px solid var(--border); }
.fa-placeholder{
  width:44px; height:44px; border-radius:10px; background:var(--card-2);
  display:flex; align-items:center; justify-content:center; color:var(--text-dimmer); flex-shrink:0;
}
.fa-placeholder svg, .fa-placeholder [data-lucide]{ width:18px; height:18px; }

/* ===========================================================
   Search dropdown
   =========================================================== */
.search-bar{ position:relative; }
.search-results{
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--card-2); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  box-shadow:var(--shadow-hover); max-height:420px; overflow-y:auto; z-index:50; padding:8px;
}
.search-results.is-open{ display:block; }
.search-group{ padding:6px 4px; }
.search-group-title{
  display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-dimmer); padding:6px 8px;
}
.search-result-item{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:8px;
  font-size:13.5px; color:var(--text); transition:background var(--dur) var(--ease);
}
.search-result-item svg, .search-result-item [data-lucide]{ width:15px; height:15px; color:var(--text-dimmer); }
.search-result-item:hover{ background:rgba(255,255,255,0.06); }
.search-empty{ padding:16px; text-align:center; font-size:13px; color:var(--text-dimmer); }
.search-see-all{ border-top:1px solid var(--border); margin-top:4px; padding-top:12px; color:var(--accent-2); font-weight:600; }
.search-see-all svg, .search-see-all [data-lucide]{ color:var(--accent-2); }

/* ===========================================================
   Dropzone / subida
   =========================================================== */
.upload-success-banner{
  display:flex; align-items:center; gap:10px; background:rgba(63,185,120,0.12);
  border:1px solid #3FB978; color:#3FB978; border-radius:var(--radius-md);
  padding:14px 18px; margin-bottom:20px; font-weight:600; font-size:14px;
}
.upload-success-banner[hidden]{ display:none; }
.upload-success-banner svg, .upload-success-banner [data-lucide]{ width:20px; height:20px; flex-shrink:0; }

.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border:2px dashed var(--border-strong); border-radius:var(--radius-lg); background:var(--card);
  padding:56px 24px; text-align:center; margin-bottom:28px;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dropzone.is-dragover{ border-color:var(--accent); background:var(--accent-soft); }
.dropzone svg, .dropzone [data-lucide]{ width:40px; height:40px; color:var(--text-dimmer); margin-bottom:4px; }
.dropzone p{ margin:0; color:var(--text-dim); font-size:14px; }
.dz-sub{ color:var(--text-dimmer); font-size:12.5px; }

.upload-meta{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:32px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.person-family-field[hidden]{ display:none; }
.field-full{ grid-column:1 / -1; }
.field-row{ display:flex; justify-content:flex-end; margin:-4px 0 4px; }
/* Dos campos a la misma altura (p.ej. primer y segundo apellido) */
.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field span{ font-size:13px; font-weight:600; color:var(--text-dim); }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="date"], .field select{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--text); font-size:14px; font-family:inherit; outline:none;
  transition:border-color var(--dur) var(--ease);
}
/* Sin esto el icono del calendario nativo sale negro sobre fondo oscuro */
.field input[type="date"]{ color-scheme:dark; }
.field input:focus, .field select:focus{ border-color:var(--accent); }
.field input::placeholder{ color:var(--text-dimmer); }
.link-muted{ font-size:13px; color:var(--text-dimmer); transition:color var(--dur) var(--ease); }
.link-muted:hover{ color:var(--accent-2); }

/* ===========================================================
   Fecha con precisión (año / mes / día)
   =========================================================== */
.date-precision-row{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:10px; }
.date-precision-row select:disabled{ opacity:.45; cursor:not-allowed; }

/* ===========================================================
   Input predictivo (álbum, evento, lugar, etiquetas)
   =========================================================== */
.predictive{ position:relative; }
.predictive input[type="text"]{
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; color:var(--text); font-size:13.5px; font-family:inherit; outline:none;
  transition:border-color var(--dur) var(--ease);
}
.predictive input[type="text"]:focus{ border-color:var(--accent); }
.predictive input[type="text"]::placeholder{ color:var(--text-dimmer); }
.predictive-dropdown{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--card-2); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  box-shadow:var(--shadow-hover); max-height:240px; overflow-y:auto; padding:6px;
}
.predictive-dropdown.is-open{ display:block; }
.predictive-option{
  display:block; width:100%; text-align:left; padding:9px 10px; border-radius:8px;
  font-size:13.5px; color:var(--text); transition:background var(--dur) var(--ease);
}
.predictive-option:hover{ background:rgba(255,255,255,0.06); }

/* Buscador de personas con autocompletado (subir.php): reemplaza la
   rejilla de casillas cuando hay muchas personas creadas. */
.person-picker{ position:relative; }
.person-picker input[type="text"]{
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; color:var(--text); font-size:13.5px; font-family:inherit; outline:none;
  transition:border-color var(--dur) var(--ease);
}
.person-picker input[type="text"]:focus{ border-color:var(--accent); }
.person-picker input[type="text"]::placeholder{ color:var(--text-dimmer); }
.person-picker-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.person-picker-chips:not(:empty){ margin-bottom:8px; }
.person-picker-chip{
  display:flex; align-items:center; gap:6px; padding:4px 8px 4px 4px; border-radius:999px;
  background:var(--card); border:1px solid var(--border); font-size:13px; color:var(--text);
}
.person-picker-remove{ display:flex; color:var(--text-dimmer); }
.person-picker-remove:hover{ color:var(--text); }
.person-picker-remove svg, .person-picker-remove [data-lucide]{ width:14px; height:14px; }
.person-picker-option{ display:flex; align-items:center; gap:10px; }
.picker-kind-badge{ margin-left:4px; font-size:12px; }

.people-checks{ display:flex; flex-wrap:wrap; gap:10px; }
.check-chip{
  display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
  background:var(--card); border:1px solid var(--border); font-size:13px; color:var(--text-dim);
  cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.check-chip:has(input:checked){ background:var(--accent-soft); color:var(--accent-2); border-color:var(--accent); }
.hint{ font-size:12.5px; color:var(--text-dimmer); }
.check-chip-person{ padding:6px 16px 6px 6px; }
.check-chip-avatar{
  width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0;
  font-size:11px; display:flex; align-items:center; justify-content:center;
}

.upload-queue{ display:flex; flex-direction:column; gap:12px; }
.upload-row{
  display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:12px 16px;
}
.upload-thumb{
  width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0;
  background:var(--card-2); display:flex; align-items:center; justify-content:center; color:var(--text-dimmer);
}
.upload-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.upload-name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.upload-progress{ height:5px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; }
.upload-progress-fill{ height:100%; width:0; background:var(--accent); transition:width 200ms ease; }
.upload-status{ font-size:12px; color:var(--text-dimmer); }
.upload-row.is-done .upload-progress-fill{ background:#3FB978; }
.upload-row.is-done .upload-status{ color:#5FD897; }
.upload-row.is-error .upload-progress-fill{ background:#F85149; }
.upload-row.is-error .upload-status{ color:#FF8983; }
.upload-remove{
  width:30px; height:30px; border-radius:8px; flex-shrink:0; color:var(--text-dimmer);
  display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.upload-remove svg, .upload-remove [data-lucide]{ width:15px; height:15px; }
.upload-remove:hover{ background:rgba(248,81,73,.12); color:#FF8983; }

.upload-actions{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:24px; padding:20px 24px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.upload-count{ font-size:14.5px; font-weight:600; color:var(--text-dim); }
.upload-actions .btn-primary:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }

@media (max-width:600px){
  .upload-actions{ flex-direction:column; align-items:stretch; text-align:center; }
  .btn-lg{ width:100%; }
}
.upload-actions .btn-primary svg, .upload-actions .btn-primary [data-lucide]{ width:16px; height:16px; }
.spin{ animation:spin 900ms linear infinite; }
@keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ===========================================================
   Tabla de usuarios (admin)
   =========================================================== */
.user-table{ display:flex; flex-direction:column; gap:8px; }
.user-row{
  display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; align-items:center; gap:16px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 18px;
}
.user-cell{ min-width:0; }
.user-identity{ display:flex; align-items:center; gap:12px; }
.user-identity > div{ display:flex; flex-direction:column; min-width:0; }
.u-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-email{ font-size:12.5px; color:var(--text-dimmer); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-date{ font-size:13px; color:var(--text-dim); }
.u-self{ font-size:13px; color:var(--text-dimmer); font-style:italic; }
.admin-tag{
  display:inline-block; background:var(--accent-soft); color:var(--accent-2); font-size:10.5px; font-weight:700;
  padding:2px 7px; border-radius:6px; margin-left:6px; text-transform:uppercase; vertical-align:middle;
}
.status-pill{ font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; }
.status-active{ background:rgba(63,185,120,.12); color:#5FD897; }
.status-pending{ background:rgba(240,197,74,.12); color:#F0C54A; }
.status-suspended{ background:rgba(248,81,73,.12); color:#FF8983; }
.user-actions{ display:flex; gap:8px; justify-content:flex-end; align-items:flex-end; }
/* La tabla de miembros lleva una columna extra con su ficha del árbol */
.user-row-linked{ grid-template-columns:2fr .8fr .8fr .8fr 1.6fr 1.3fr; }
.user-person-link{ display:flex; flex-direction:column; gap:4px; }
.user-person-link a{ color:var(--accent-2); }
.hint-warn{ color:#F0C54A; }

/* ===========================================================
   Registro de actividad (admin)
   =========================================================== */
.activity-filters{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.activity-filters select{
  background:var(--card-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 11px; color:var(--text); font-size:13px; font-family:inherit; outline:none;
}
.activity-row{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px;
}
.activity-icon{
  width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.activity-icon [data-lucide]{ width:17px; height:17px; }
.activity-avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.activity-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.activity-desc{ font-size:13.5px; line-height:1.4; }
.activity-ago{ font-size:12px; color:var(--text-dimmer); }

/* ===========================================================
   Solicitudes de retirada (admin)
   =========================================================== */
.removal-row{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px;
}
.removal-thumb{ width:56px; height:56px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; background:var(--card-2); }
.removal-thumb img{ width:100%; height:100%; object-fit:cover; }
.removal-body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.removal-desc{ font-size:13.5px; line-height:1.4; }
.removal-reason{ font-size:13px; color:var(--text-dim); font-style:italic; }
.removal-ago{ font-size:12px; color:var(--text-dimmer); }

/* Vincular una cuenta con una ficha ya existente del árbol */
.person-link-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.person-link-field > span:first-child{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dimmer); }
.person-link-field select, .person-relink select{
  background:var(--card-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 11px; color:var(--text); font-size:13px; font-family:inherit; outline:none; max-width:100%;
}
.person-link-field select:focus, .person-relink select:focus{ border-color:var(--accent); }
.user-actions form{ display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.person-relink summary{ font-size:12px; color:#F0C54A; cursor:pointer; }
.person-relink form{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }

/* ===========================================================
   Auth (login / registro / recuperación)
   =========================================================== */
.auth-body{ background:var(--bg); }
.auth-shell{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.auth-visual{ position:relative; overflow:hidden; }
.auth-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.auth-visual-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,20,27,.55), rgba(15,20,27,.92)); }
.auth-visual-text{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:64px; max-width:520px;
}
.auth-visual-text h2{ font-size:30px; font-weight:800; margin:16px 0 12px; }
.auth-visual-text p{ font-size:15px; color:rgba(255,255,255,.82); line-height:1.6; margin:0; }
.auth-panel{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-card{ width:100%; max-width:400px; }
.auth-title{ font-size:26px; font-weight:800; margin:0 0 8px; }
.auth-sub{ font-size:14px; color:var(--text-dim); margin:0 0 28px; }
.auth-form{ display:flex; flex-direction:column; gap:18px; }
.auth-form .btn-primary{ margin-top:6px; }
.auth-footer{ text-align:center; margin-top:24px; font-size:13.5px; color:var(--text-dim); }
.auth-footer a{ color:var(--accent-2); font-weight:600; }

@media (max-width:900px){
  .auth-shell{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }
}

/* ===========================================================
   Media grid genérico (Fotos, Vídeos, Favoritos, Recientes, Papelera)
   =========================================================== */
.media-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px;
}
.g-tile{
  position:relative; display:block; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden;
  background:var(--card); transition:transform var(--dur) var(--ease);
}
.g-tile:hover{ transform:translateY(-3px); }
.g-tile img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--ease); }
.g-tile:hover img{ transform:scale(1.06); }
.g-tile .play-btn{ width:38px; height:38px; }
.g-tile .fav-badge{
  position:absolute; top:8px; left:8px; width:26px; height:26px; border-radius:50%;
  background:rgba(15,20,27,.6); display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.g-tile .fav-badge svg, .g-tile .fav-badge [data-lucide]{ width:14px; height:14px; }
.gallery-loader{ height:1px; }

/* ===========================================================
   Lightbox
   =========================================================== */
.lightbox{
  position:fixed; inset:0; background:var(--bg); z-index:200;
  display:none; flex-direction:column;
}
.lightbox.is-open{ display:flex; }

.lb-topbar{
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  padding:14px 24px; border-bottom:1px solid var(--border);
}
.lb-close-x{
  width:40px; height:40px; border-radius:50%; color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease);
}
.lb-close-x:hover{ background:rgba(255,255,255,.08); }
.lb-topbar-actions{ display:flex; align-items:center; gap:8px; }
.lb-top-btn{
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--radius-sm);
  color:var(--text-dim); font-size:13.5px; font-weight:600; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lb-top-btn:hover{ background:var(--card); color:var(--text); }
.lb-top-btn.is-active{ color:var(--accent); }
.lb-top-btn.lb-danger:hover{ background:rgba(248,81,73,.12); color:#FF8983; }

.lb-body{ flex:1; display:flex; min-height:0; }
.lb-main{ flex:1; min-width:0; display:flex; flex-direction:column; padding:20px 24px; }
.lb-title-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.lb-title-text{ font-size:20px; font-weight:700; margin:0; }
.lb-title-input{
  font-size:20px; font-weight:700; background:var(--card); border:1px solid var(--accent); border-radius:var(--radius-sm);
  padding:4px 10px; color:var(--text); font-family:inherit; outline:none;
}
.lb-title-edit{ width:30px; height:30px; border-radius:8px; color:var(--text-dimmer); display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lb-title-edit:hover{ background:var(--card); color:var(--text); }
.lb-title-edit svg, .lb-title-edit [data-lucide]{ width:15px; height:15px; }

.lb-media-wrap{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; position:relative; }
.lb-media{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
.lb-media img, .lb-media video{ max-width:100%; max-height:100%; border-radius:12px; object-fit:contain; }
.lb-media img{ cursor:zoom-in; transition:transform .08s linear; }
.lb-media img.is-zoomed{ cursor:grab; }
.lb-media img.is-panning{ cursor:grabbing; transition:none; }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease); z-index:5;
}
.lb-nav:hover{ background:rgba(255,255,255,.18); }
.lb-prev{ left:12px; }
.lb-next{ right:12px; }

.lb-filmstrip{
  display:flex; gap:8px; overflow-x:auto; padding-top:16px; flex-shrink:0; scrollbar-width:thin;
}
.lb-film-item{
  position:relative; flex:0 0 64px; height:64px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; opacity:.55; transition:opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lb-film-item:hover{ opacity:.85; }
.lb-film-item.is-active{ opacity:1; border-color:var(--accent); }
.lb-film-item img{ width:100%; height:100%; object-fit:cover; }
.lb-film-duration{
  position:absolute; bottom:2px; right:3px; background:rgba(0,0,0,.7); color:#fff; font-size:9px;
  padding:1px 4px; border-radius:4px;
}

.lb-panel{
  width:340px; flex-shrink:0; background:var(--bg-sidebar); border-left:1px solid var(--border);
  padding:0 24px 24px; overflow-y:auto;
}

/* Pestañas del panel: Detalles / Comentarios */
.lb-tabs{
  display:flex; gap:4px; position:sticky; top:0; z-index:5;
  /* Se queda fija arriba al desplazar; el margen negativo compensa el
     padding del panel para que el fondo tape todo el ancho. */
  margin:0 -24px 20px; padding:16px 24px 0;
  background:var(--bg-sidebar); border-bottom:1px solid var(--border);
}
.lb-tab{
  display:flex; align-items:center; gap:7px; padding:10px 2px 12px; margin-right:16px;
  font-size:13px; font-weight:600; color:var(--text-dimmer);
  border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lb-tab:hover{ color:var(--text-dim); }
.lb-tab.is-active{ color:var(--accent); border-color:var(--accent); }
.lb-tab svg, .lb-tab [data-lucide]{ width:14px; height:14px; }
.lb-comment-count{
  font-size:10.5px; font-weight:700; color:var(--text-dimmer);
  background:var(--card); border-radius:999px; padding:1px 6px;
}
.lb-tab.is-active .lb-comment-count{ background:var(--accent-soft); color:var(--accent-2); }
.lb-comment-count:empty{ display:none; }

/* La caja de escribir va arriba, separada de la lista, para encontrarla
   nada más entrar en la pestaña sin tener que desplazarse. */
.lb-comments-pane{ display:flex; flex-direction:column; }
.lb-comments-pane .lb-comment-form{
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border);
}
/* Imprescindible: `display:flex` de la línea de arriba pisa el
   `[hidden]{display:none}` del navegador (un selector de clase tiene más
   especificidad), y la pestaña oculta se seguía viendo debajo de Detalles. */
.lb-tab-pane[hidden]{ display:none; }
.lb-section{ margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.lb-section:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.lb-section-title{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text); margin-bottom:12px; }
.lb-section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lb-section-header .lb-section-title{ margin-bottom:0; }
.lb-add-toggle{
  width:24px; height:24px; border-radius:7px; color:var(--text-dimmer); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lb-add-toggle:hover{ background:var(--card); color:var(--text); }
.lb-add-toggle.is-open{ transform:rotate(45deg); color:var(--accent); }
.lb-add-toggle svg, .lb-add-toggle [data-lucide]{ width:14px; height:14px; }
.lb-collapsible{ margin-top:10px; }
.lb-collapsible[hidden]{ display:none; }

.lb-details-list, .lb-info-list{ display:flex; flex-direction:column; gap:10px; }
.lb-detail-row{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-dim); }
.lb-detail-row svg, .lb-detail-row [data-lucide]{ width:16px; height:16px; color:var(--text-dimmer); margin-top:1px; flex-shrink:0; }

.lb-details-text{ font-size:13.5px; color:var(--text-dim); margin:0 0 12px; }
.lb-details-input{
  width:100%; font-size:13.5px; background:var(--card); border:1px solid var(--accent); border-radius:var(--radius-sm);
  padding:6px 10px; color:var(--text); font-family:inherit; outline:none; margin-bottom:12px;
}
.lb-details-edit{ width:26px; height:26px; border-radius:8px; color:var(--text-dimmer); display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lb-details-edit:hover{ background:var(--card); color:var(--text); }

/* Pequeño y discreto a propósito: no es una acción que se quiera destacar. */
.lb-report-btn{
  display:block; margin:4px auto 0; font-size:11.5px; color:var(--text-dimmer);
  text-decoration:underline; text-underline-offset:2px; background:none; border:none;
}
.lb-report-btn:hover{ color:var(--text-dim); }
/* Por encima del lightbox (z-index 200), si no quedaría tapado. */
.lb-report-modal{ z-index:210; }
.lb-report-reason{
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--text); font-size:14px; font-family:inherit; outline:none; margin-bottom:14px; resize:vertical;
}
.lb-report-reason:focus{ border-color:var(--accent); }
.lb-details-edit svg, .lb-details-edit [data-lucide]{ width:14px; height:14px; }
.lb-info-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.lb-info-row span{ color:var(--text-dimmer); }
.lb-info-row strong{ font-weight:600; text-align:right; }

.lb-location-name{ font-size:13.5px; color:var(--text-dim); margin-bottom:10px; }
.lb-map{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); height:160px; }
.lb-map iframe{ width:100%; height:100%; border:0; filter:grayscale(.15) brightness(.9); }

.lb-people-grid{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:4px; }
/* Igual que arriba: el grupo de personas de más viene con `hidden`. */
.lb-people-grid[hidden]{ display:none; }
.lb-person-item{ display:flex; flex-direction:column; align-items:center; gap:6px; width:56px; }
.lb-person-avatar{ position:relative; width:48px; height:48px; }
.lb-person-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.lb-person-avatar .avatar-fallback{ width:48px; height:48px; font-size:16px; }
.lb-person-remove{
  position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%;
  background:#F85149; color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.lb-person-remove svg, .lb-person-remove [data-lucide]{ width:11px; height:11px; }
.lb-person-item:hover .lb-person-remove{ opacity:1; }
.lb-person-name{ font-size:11.5px; color:var(--text-dim); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.lb-people-extra{ margin-top:14px; }
.lb-people-more{
  margin-top:10px; font-size:12.5px; font-weight:600; color:var(--accent-2);
  padding:6px 0; transition:color var(--dur) var(--ease);
}
.lb-people-more:hover{ color:var(--accent); }

.lb-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.lb-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-size:12.5px; color:var(--text-dim);
}
.lb-chip button{ color:var(--text-dimmer); font-size:14px; line-height:1; }
.lb-chip button:hover{ color:#FF8983; }
.lb-add-form{ display:flex; gap:6px; }
.lb-add-form input{
  flex:1; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 10px; color:var(--text); font-size:13px; outline:none;
}
.lb-add-form button{ width:34px; border-radius:var(--radius-sm); background:var(--card); border:1px solid var(--border); color:var(--text-dim); display:flex; align-items:center; justify-content:center; }
.lb-add-form button:hover{ background:var(--card-hover); }

@media (max-width:900px){
  .lb-topbar-actions span{ display:none; }
  .lb-body{ flex-direction:column; overflow-y:auto; }
  .lb-panel{ width:auto; border-left:none; border-top:1px solid var(--border); }
  .lb-main{ flex:none; }
  .lb-media-wrap{ min-height:50vh; }
}

/* ===========================================================
   Card grid (uso: Eventos, Álbumes en cuadrícula)
   =========================================================== */
.card-grid{ display:flex; flex-wrap:wrap; gap:20px; }
.card-grid .event-card, .card-grid .year-card{ flex:0 0 280px; }

/* ===========================================================
   Acciones de admin sobre tarjetas (álbumes, eventos, personas)
   =========================================================== */
.entity-card{ position:relative; }
.entity-card-actions{
  position:absolute; top:10px; right:10px; display:flex; gap:6px; z-index:5;
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.entity-card:hover .entity-card-actions, .entity-card:focus-within .entity-card-actions{ opacity:1; }
.entity-card-actions button{
  width:30px; height:30px; border-radius:8px; background:rgba(15,20,27,.75); backdrop-filter:blur(4px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease);
}
.entity-card-actions button:hover{ background:var(--accent); }
.entity-card-actions svg, .entity-card-actions [data-lucide]{ width:14px; height:14px; }

.place-chip-row{ display:inline-flex; align-items:center; gap:4px; }
.place-chip-btn{
  width:28px; height:28px; border-radius:8px; background:var(--card); border:1px solid var(--border);
  color:var(--text-dimmer); display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.place-chip-btn:hover{ background:var(--card-hover); color:var(--text); }
.place-chip-btn svg, .place-chip-btn [data-lucide]{ width:13px; height:13px; }

/* ===========================================================
   Personas (listado + perfil)
   =========================================================== */
/* El enlace de volver va en su propia fila, encima del nombre; y la fila del
   avatar+nombre+acciones puede pasar a dos líneas en pantallas estrechas
   (antes no envolvía, así que en un móvil los botones Editar/Borrar
   quedaban recortados fuera del ancho de la pantalla). */
.person-header{ display:flex; flex-direction:column; gap:14px; }
/* Genérico: lo reutilizan también las fichas de Álbumes, Eventos y Lugares
   (ver más abajo, sección "Cabecera de ficha reutilizable"). */
.detail-back-link{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:13.5px; font-weight:600; color:var(--text-dim);
  transition:color var(--dur) var(--ease);
}
.detail-back-link:hover{ color:var(--text); }
.detail-back-link svg, .detail-back-link [data-lucide]{ width:15px; height:15px; }
.person-header-main{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.person-header-actions{ display:flex; gap:10px; margin-left:auto; }

/* ===========================================================
   Cabecera de ficha reutilizable (Álbumes, Eventos, Lugares)
   Mismo patrón que .person-header: el enlace de volver arriba, y el título
   +las acciones pueden pasar a dos líneas en móvil en vez de desbordar y
   recortar los botones Editar/Borrar.
   =========================================================== */
.entity-detail-header{ display:flex; flex-direction:column; gap:14px; }
.entity-detail-main{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.entity-detail-actions{ display:flex; gap:10px; }
.person-avatar-lg, .avatar-fallback-xl{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.avatar-fallback-xl{ font-size:28px; }
.person-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:20px; }
.person-card{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 12px;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.person-card:hover{ transform:translateY(-4px); background:var(--card-2); }
.person-card img{ width:76px; height:76px; border-radius:50%; object-fit:cover; }
.person-card .p-name{ font-size:14px; font-weight:600; }
.member-badge{
  display:inline-block; background:rgba(63,185,120,.14); color:#5FD897; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.03em; vertical-align:middle;
  margin-left:4px;
}

/* Overlay de cámara para cambiar la foto de una persona */
.avatar-upload{ position:relative; display:inline-flex; flex-shrink:0; }
.avatar-upload-btn{
  position:absolute; bottom:-2px; right:-2px; width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg-sidebar); cursor:pointer; transition:background var(--dur) var(--ease);
}
.avatar-upload-btn:hover{ background:var(--accent-2); }
.avatar-upload-btn svg, .avatar-upload-btn [data-lucide]{ width:13px; height:13px; }
.avatar-upload-lg .avatar-upload-btn{ width:30px; height:30px; bottom:-4px; right:-4px; }
.avatar-upload-lg .avatar-upload-btn svg, .avatar-upload-lg .avatar-upload-btn [data-lucide]{ width:15px; height:15px; }
.avatar-upload.is-uploading{ opacity:.5; pointer-events:none; }

/* ===========================================================
   Modal genérico
   =========================================================== */
.modal{
  display:none; position:fixed; inset:0; background:rgba(6,8,11,.7); z-index:150;
  align-items:center; justify-content:center; padding:20px;
}
.modal.is-open{ display:flex; }
.modal-card{
  background:var(--bg-sidebar); border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  padding:28px; width:100%; max-width:420px; box-shadow:var(--shadow-hover);
  /* Sin esto, un formulario más alto que la pantalla (como "Añadir persona",
     con más de 10 campos) queda centrado por .modal y se recorta tanto por
     arriba como por abajo, sin ninguna forma de desplazarse para verlo. */
  max-height:90vh; overflow-y:auto;
  position:relative;
}
/* La X para cerrar se inserta sola (ver main.js) en toda ventana emergente,
   así no hay que tocar cada formulario uno a uno ni acordarse de añadirla
   a los nuevos que se creen en el futuro. */
.modal-close-x{
  position:absolute; top:16px; left:16px; width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--text-dimmer); z-index:1;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal-close-x:hover{ background:var(--card-hover); color:var(--text); }
.modal-close-x svg, .modal-close-x [data-lucide]{ width:16px; height:16px; }
/* El título se desplaza para no quedar debajo del botón. */
.modal-card h3{ margin:0 36px 18px 34px; font-size:18px; font-weight:700; }
.modal-card input[type="text"], .modal-card input[type="date"], .modal-card textarea, .modal-card select{
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--text); font-size:14px; font-family:inherit; outline:none; margin-bottom:14px;
}
.modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus{ border-color:var(--accent); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }

.geocode-options{ display:flex; flex-direction:column; gap:8px; }
.geocode-option{
  text-align:left; padding:12px 14px; border-radius:var(--radius-sm); background:var(--card);
  border:1px solid var(--border); color:var(--text-dim); font-size:13.5px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.geocode-option:hover{ background:var(--card-hover); color:var(--text); border-color:var(--border-strong); }
.geocode-option.geocode-skip{ color:var(--text-dimmer); font-size:12.5px; margin-top:4px; }

/* ===========================================================
   Timeline lateral
   =========================================================== */
.timeline{
  width:64px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:32px 0;
  border-left:1px solid var(--border);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.timeline-year{
  font-size:11.5px; font-weight:600; color:var(--text-dimmer);
  padding:6px 4px; border-radius:8px; writing-mode:horizontal-tb;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.timeline-year:hover{ color:var(--text); background:rgba(255,255,255,0.05); }
.timeline-year.is-active{ color:var(--accent); font-weight:800; }
.timeline-dots{ color:var(--text-dimmer); font-size:12px; letter-spacing:1px; }

/* ===========================================================
   Skeleton loaders
   =========================================================== */
img{ background:linear-gradient(90deg, var(--card) 25%, var(--card-2) 37%, var(--card) 63%); background-size:400% 100%; }
img.is-loaded{ animation:none; background:none; }
img:not(.is-loaded){ animation:skeleton 1.4s ease-in-out infinite; }
@keyframes skeleton{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:1280px){
  .timeline{ display:none; }
}

@media (max-width:1024px){
  .sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform var(--dur) var(--ease); box-shadow:var(--shadow-hover);
  }
  .sidebar.is-open{ transform:translateX(0); }
  .sidebar-close{ display:flex; }
  .sidebar-overlay.is-open{ display:block; }
  .hamburger{ display:flex; }
  .sidebar-mobile-actions{
    display:flex; align-items:center; gap:12px; padding:0 8px 20px; margin-bottom:20px;
    border-bottom:1px solid var(--border);
  }
  .topbar-actions .notif-wrap, .topbar-actions .avatar-btn{ display:none; }
  /* Las 5 tarjetas ya no caben en fila: en vez de ocultar 2 de ellas, se
     convierte en un carril horizontal deslizable (mismo patrón que
     .carousel-track) para poder llegar a las 5 arrastrando con el dedo. */
  .stats-row{
    display:flex; gap:14px; overflow-x:auto; padding-bottom:6px;
    scroll-snap-type:x proximity; scrollbar-width:none;
  }
  .stats-row::-webkit-scrollbar{ display:none; }
  .stat-card{ flex:0 0 160px; scroll-snap-align:start; }
  .throwback-grid{ grid-template-columns:repeat(3,1fr); }
  .throwback-grid a:nth-child(4), .throwback-grid a:nth-child(5){ display:none; }
  .upload-meta{ grid-template-columns:1fr; }
  .user-row{ grid-template-columns:1fr; gap:10px; }
  .user-actions{ justify-content:flex-start; }
}

@media (max-width:768px){
  .topbar{ padding:16px 20px; gap:10px; }
  .content{ padding:4px 20px 48px; }
  .hero{ height:340px; }
  .hero-text{ padding:0 24px; }
  .hero-text h1{ font-size:26px; }
  .hero-text p{ font-size:14px; }
  .stats-row{ margin-top:-64px; gap:12px; }
  .stat-card{ padding:14px; flex:0 0 148px; }
  /* Año/Mes/Día uno junto a otro no caben en un móvil estrecho: el texto
     largo de los placeholders ("Día (si lo recuerdas)") se corta. Se apilan
     en una columna para que cada select tenga todo el ancho disponible. */
  .date-precision-row{ grid-template-columns:1fr; }
  .memory-card{ flex:0 0 210px; }
  .year-card{ flex:0 0 190px; }
  .event-card{ flex:0 0 230px; }
  .block-header h2{ font-size:17px; }
  .throwback-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px){
  .search-bar input{ font-size:13.5px; }
  .btn-upload span{ display:none; }
  .btn-upload{ padding:12px; }
  .hero{ height:380px; }
  .stat-card{ flex:0 0 132px; padding:12px; }
}

/* ===========================================================
   Árbol genealógico
   =========================================================== */
.tree-tabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tree-tab{
  display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  background:var(--card); border:1px solid var(--border); color:var(--text-dim); font-size:13.5px; font-weight:600;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tree-tab:hover{ background:var(--card-hover); color:var(--text); }
.tree-tab.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tree-tab svg, .tree-tab [data-lucide]{ width:15px; height:15px; }

.tree-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-bottom:20px; padding:12px 16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
}
.tree-zoom-label{ font-size:13px; font-weight:600; color:var(--text-dim); min-width:44px; text-align:center; display:inline-block; }

/* Alto del lienzo del árbol y del panel de detalle: van juntos para que
   queden alineados. */
.tree-layout{ display:flex; gap:20px; align-items:flex-start; --tree-h:84vh; }
.tree-canvas-wrap{
  flex:1; min-width:0; overflow:auto; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:40px 32px;
  /* Crece con el árbol hasta el tope, pero sin quedarse enano si hay
     poca familia todavía. */
  min-height:min(620px, 70vh); max-height:var(--tree-h);
}
.tree-canvas{ position:relative; display:inline-block; min-width:100%; }
.tree-lines{ position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }
.tree-line{ fill:none; stroke:var(--border-strong); stroke-width:2; }
.tree-line-arrow-head{ fill:var(--border-strong); }

.tree-row{
  display:flex; gap:36px; justify-content:center; margin-bottom:82px; position:relative; z-index:1;
}
.tree-row:last-child{ margin-bottom:0; }
.tree-unit{
  display:flex; align-items:center; gap:8px; background:var(--card-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:14px 18px;
}
.tree-couple-icon{ font-size:15px; flex-shrink:0; }

.tree-person{
  display:flex; flex-direction:column; align-items:center; gap:3px; width:102px;
  transition:transform var(--dur) var(--ease);
}
.tree-age{
  font-size:10.5px; font-weight:600; color:var(--accent-2);
  background:var(--accent-soft); padding:1px 7px; border-radius:999px;
}
.tree-person.is-deceased .tree-age{ color:var(--text-dim); background:rgba(255,255,255,.06); }
.tree-pets{ font-size:10px; color:var(--text); }
.tree-person:hover{ transform:translateY(-3px); }
.tree-avatar{ position:relative; width:56px; height:56px; border-radius:50%; }
.tree-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.tree-avatar .avatar-fallback{ width:100%; height:100%; font-size:18px; }
.tree-person[data-gender="male"] .tree-avatar{ box-shadow:0 0 0 2.5px #58A6FF; border-radius:50%; }
.tree-person[data-gender="female"] .tree-avatar{ box-shadow:0 0 0 2.5px #F672B6; border-radius:50%; }
.tree-person.is-deceased .tree-avatar img,
.tree-person.is-deceased .tree-avatar .avatar-fallback{ filter:grayscale(1); opacity:.7; }
.tree-person.is-deceased .tree-avatar{ box-shadow:0 0 0 2.5px var(--text-dimmer); }
.tree-deceased-badge{
  position:absolute; bottom:-2px; right:-2px; width:20px; height:20px; border-radius:50%;
  background:var(--card-2); border:2px solid var(--bg-sidebar); color:var(--text-dimmer);
  display:flex; align-items:center; justify-content:center;
}
.tree-deceased-badge svg, .tree-deceased-badge [data-lucide]{ width:10px; height:10px; }
.tree-name{ font-size:12.5px; font-weight:600; text-align:center; line-height:1.25; }
.tree-years{ font-size:11px; color:var(--text-dimmer); }

.tree-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:24px; }
.tree-legend{ display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--text-dim); align-items:center; }
.tree-legend span{ display:flex; align-items:center; gap:6px; }
.legend-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.legend-deceased{ background:var(--text-dimmer); }
.legend-couple{ font-size:14px; }

/* Panel de detalle lateral */
.tree-detail-panel{
  width:320px; flex-shrink:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; position:sticky; top:0; max-height:var(--tree-h); overflow-y:auto;
}
.tree-detail-close{ float:right; width:28px; height:28px; border-radius:8px; color:var(--text-dimmer); display:flex; align-items:center; justify-content:center; }
.tree-detail-close:hover{ background:var(--card-hover); color:var(--text); }
.tree-detail-header{ display:flex; align-items:center; gap:14px; margin-bottom:16px; clear:both; }
.tree-avatar-lg{ width:64px; height:64px; }
.tree-avatar-lg .avatar-fallback{ font-size:22px; }
.tree-detail-header h3{ font-size:16px; font-weight:700; margin:0; }
.tree-detail-years{ font-size:12px; color:var(--text-dimmer); }
.tree-detail-relation{ font-size:12.5px; color:var(--text-dim); margin:4px 0 0; }
.btn-block{ display:flex; align-items:center; justify-content:center; width:100%; margin-top:4px; text-decoration:none; }

.tree-detail-tabs{ display:flex; gap:4px; margin:18px 0 14px; border-bottom:1px solid var(--border); }
.tree-detail-tab{
  padding:8px 4px 10px; font-size:12.5px; font-weight:600; color:var(--text-dimmer); border-bottom:2px solid transparent;
  margin-right:14px; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tree-detail-tab:hover{ color:var(--text-dim); }
.tree-detail-tab.is-active{ color:var(--accent); border-color:var(--accent); }
.tree-detail-pane .lb-detail-row{ margin-bottom:10px; }
.tree-media-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.tree-media-thumb{ display:block; aspect-ratio:1/1; border-radius:8px; overflow:hidden; }
.tree-media-thumb img{ width:100%; height:100%; object-fit:cover; }

.tree-family-group{ margin-bottom:14px; }
.tree-family-label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dimmer); margin-bottom:6px; }
.tree-family-item{
  display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--text-dim);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tree-family-item:hover{ background:var(--card-hover); color:var(--text); }
.tree-family-item em{ color:var(--text-dimmer); font-style:normal; font-size:11.5px; }

/* Mascotas en el panel de detalle del árbol */
.tree-pet-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
/* Las mascotas de más nacen con `hidden` hasta pulsar "Ver todas": sin esto,
   el `display:flex` de arriba lo anula y se ven todas desde el principio. */
.tree-pet-item[hidden]{ display:none; }
.tree-pet-item:last-of-type{ border-bottom:none; }
.tree-pet-item.is-deceased .tree-pet-avatar img{ filter:grayscale(1); opacity:.7; }
.tree-pet-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--card-2); display:flex; align-items:center; justify-content:center;
  color:var(--accent-2); overflow:hidden; flex-shrink:0;
}
.tree-pet-avatar img{ width:100%; height:100%; object-fit:cover; }
.tree-pet-avatar svg, .tree-pet-avatar [data-lucide]{ width:16px; height:16px; }
.tree-pet-info{ display:flex; flex-direction:column; min-width:0; flex:1; }
.tree-pet-name{ font-size:13px; font-weight:600; }
.tree-pet-meta{ font-size:11px; color:var(--text-dimmer); }
.tree-pet-count{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-dimmer); flex-shrink:0; }
.tree-pet-count svg, .tree-pet-count [data-lucide]{ width:12px; height:12px; }

/* Mascotas (grid) */
.pet-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:16px; }
.pet-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 12px;
}
.pet-card.is-deceased .pet-avatar img{ filter:grayscale(1); opacity:.7; }
.pet-avatar{
  width:64px; height:64px; border-radius:50%; background:var(--card-2); display:flex; align-items:center; justify-content:center;
  color:var(--accent-2); overflow:hidden;
}
.pet-avatar img{ width:100%; height:100%; object-fit:cover; }
.pet-avatar svg, .pet-avatar [data-lucide]{ width:26px; height:26px; }
.pet-name{ font-size:13.5px; font-weight:600; }
.pet-species{ font-size:11.5px; color:var(--text-dimmer); }
.pet-years{ font-size:11px; color:var(--text-dimmer); }

/* Formulario "Añadir persona" */
.tree-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.tree-form-grid .field-full{ grid-column:1 / -1; }

@media (max-width:900px){
  .tree-layout{ flex-direction:column; }
  .tree-detail-panel{ width:100%; position:static; max-height:none; }
  .tree-form-grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   Documentos
   =========================================================== */
.doc-stats{ margin-top:0; }
.doc-layout{ display:flex; gap:20px; align-items:flex-start; margin-top:24px; }
.doc-main{ flex:1; min-width:0; }

/* Carpetas: fila baja (icono + texto en horizontal) en vez de tarjeta
   apilada, para que la lista no ocupe media pantalla con pocas carpetas. */
.folder-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:12px; }
.folder-card{
  position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.folder-card:hover{ background:var(--card-hover); transform:translateY(-2px); }
.folder-card.is-active{ border-color:var(--accent); }
.folder-card > a{
  display:flex; flex-direction:row; align-items:center; gap:12px; padding:12px 14px; text-decoration:none; color:inherit;
}
.folder-info{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.folder-icon{ width:20px; height:20px; color:#F0C54A; flex-shrink:0; }
.folder-name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.folder-count{ font-size:11.5px; color:var(--text-dimmer); }
.folder-card-new{
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px;
  border-style:dashed; color:var(--text-dimmer); font-size:13px; padding:12px 14px;
}
.folder-card-new:hover{ color:var(--text); border-color:var(--accent); }

/* Buscador propio de la sección de documentos */
.doc-search-bar{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:0 16px; height:46px; margin-bottom:18px;
  transition:border-color var(--dur) var(--ease);
}
.doc-search-bar:focus-within{ border-color:var(--border-strong); }
.doc-search-bar i{ color:var(--text-dim); width:18px; height:18px; flex-shrink:0; }
.doc-search-bar input{
  flex:1; background:none; border:none; outline:none; color:var(--text);
  font-size:14.5px; font-family:inherit;
}
.doc-search-bar input::placeholder{ color:var(--text-dimmer); }

/* Rejilla de documentos */
.doc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:18px; }
.doc-grid[hidden]{ display:none; }
.doc-card{
  display:flex; flex-direction:column; text-align:left; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.doc-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.doc-card[hidden]{ display:none; }
.doc-thumb{
  position:relative; aspect-ratio:4/3; background:var(--card-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.doc-thumb img{ width:100%; height:100%; object-fit:cover; }
.doc-thumb svg, .doc-thumb [data-lucide]{ width:38px; height:38px; color:var(--text-dimmer); }
.doc-fav, .doc-badge{
  position:absolute; top:8px; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(6,8,11,.72);
}
.doc-fav{ left:8px; color:#F0C54A; }
.doc-badge-shared{ right:8px; color:var(--accent-2); }
.doc-fav svg, .doc-badge svg{ width:13px; height:13px; }
.doc-info{ display:flex; flex-direction:column; gap:3px; padding:12px 14px 14px; }
.doc-name{ font-size:13.5px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--text-dimmer); }
.doc-ext{
  background:var(--card-2); border:1px solid var(--border); border-radius:5px;
  padding:1px 6px; font-size:10px; font-weight:700; letter-spacing:.03em; flex-shrink:0;
}
.doc-expired{ display:flex; align-items:center; gap:4px; font-size:11px; color:#FF8983; margin-top:2px; }
.doc-expired svg{ width:12px; height:12px; }
.doc-expired-text{ color:#FF8983; }

/* Panel de detalle */
.doc-detail-panel{
  width:340px; flex-shrink:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; position:sticky; top:0; max-height:88vh; overflow-y:auto;
}
/* En escritorio este envoltorio no existe visualmente: sus hijos (el botón
   de cerrar y el contenido) se comportan como si colgaran directamente de
   .doc-detail-panel, igual que antes de añadirlo. Solo cobra forma propia
   de "tarjeta" en móvil (ver el media query de abajo). */
.doc-detail-card{ display:contents; }
.doc-detail-title{ font-size:16px; font-weight:700; margin:0 30px 0 0; clear:both; line-height:1.3; }
.doc-preview{
  position:relative; display:block; border-radius:var(--radius-md); overflow:hidden;
  margin-bottom:16px; background:var(--card-2);
}
.doc-preview.is-clickable{ cursor:zoom-in; }
.doc-preview img{ width:100%; display:block; }
.doc-preview iframe{ width:100%; height:260px; border:0; display:block; background:#fff; }
/* Sobre el iframe no llegan los clics, así que la capa de "ampliar" los recoge */
.doc-preview.is-clickable::after{ content:''; position:absolute; inset:0; }
.doc-preview-expand{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px; font-size:12px; font-weight:600; color:#fff;
  background:linear-gradient(transparent, rgba(6,8,11,.85));
}
.doc-preview-expand svg{ width:13px; height:13px; }
.doc-preview-icon{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:36px 18px; color:var(--text-dimmer); text-align:center;
}
.doc-preview-icon svg{ width:40px; height:40px; }
.doc-preview-icon span{ font-size:12px; font-weight:700; letter-spacing:.04em; }
.doc-preview-icon em{ font-size:11.5px; font-style:normal; color:var(--text-dimmer); max-width:220px; }

/* Visor a pantalla completa */
.doc-viewer{
  position:fixed; inset:0; z-index:200; background:rgba(6,8,11,.94);
  display:flex; flex-direction:column;
}
.doc-viewer[hidden]{ display:none; }
.doc-viewer-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.doc-viewer-title{ font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-viewer-actions{ display:flex; gap:8px; flex-shrink:0; }
.doc-viewer-body{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:20px;
}
.doc-viewer-body iframe{ width:100%; height:100%; border:0; border-radius:var(--radius-md); background:#fff; }
.doc-viewer-body img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--radius-md); }

/* Nadie con quien compartir todavía */
.doc-share-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:26px 14px; background:var(--card-2); border:1px dashed var(--border-strong); border-radius:var(--radius-md);
}
.doc-share-empty svg{ width:26px; height:26px; color:var(--accent-2); }
.doc-share-empty strong{ font-size:13.5px; }
.doc-share-empty p{ font-size:12.5px; color:var(--text-dim); margin:0; line-height:1.5; }
.doc-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;
}
.doc-row span{ color:var(--text-dimmer); flex-shrink:0; }
.doc-row strong{ font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere; }
.doc-notes{ font-size:12.5px; color:var(--text-dim); margin:12px 0 0; }
.doc-actions{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.doc-actions .btn-block{ justify-content:center; gap:8px; }
.doc-danger{ color:#FF8983; }

.doc-share-list{ margin:12px 0; }
.doc-share-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;
}
.doc-share-add{ display:flex; gap:8px; margin-top:12px; }
.doc-share-add select{
  flex:1; min-width:0; background:var(--card-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 11px; color:var(--text); font-size:13px; font-family:inherit; outline:none;
}
.doc-share-add select:focus{ border-color:var(--accent); }

/* Aviso de privacidad */
.doc-privacy-banner{
  display:flex; gap:16px; align-items:flex-start; margin-top:28px; padding:20px 24px;
  background:rgba(63,185,120,.07); border:1px solid rgba(63,185,120,.22); border-radius:var(--radius-lg);
}
.doc-privacy-banner > svg, .doc-privacy-banner > [data-lucide]{ width:22px; height:22px; color:#5FD897; flex-shrink:0; margin-top:2px; }
.doc-privacy-banner strong{ font-size:14px; }
.doc-privacy-banner p{ font-size:12.5px; color:var(--text-dim); margin:4px 0 0; max-width:640px; }

@media (max-width:1024px){
  .doc-layout{ flex-direction:column; }
  /* En móvil, al tocar un documento se abre como una ventana emergente
     centrada (con fondo oscuro detrás), en vez de aparecer como un bloque
     estático debajo de la rejilla que obligaba a bajar para verlo. En
     escritorio el panel lateral de toda la vida sigue igual (arriba). */
  .doc-detail-panel{
    width:auto; position:fixed; inset:0; max-height:none; background:rgba(6,8,11,.7);
    display:flex; align-items:center; justify-content:center; padding:20px; z-index:150;
    border:none; border-radius:0;
  }
  .doc-detail-panel[hidden]{ display:none; }
  .doc-detail-card{
    display:block; width:100%; max-width:420px; max-height:88vh; overflow-y:auto;
    background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-lg);
    padding:22px; box-shadow:var(--shadow-hover);
  }
}

/* ===========================================================
   Notificaciones (desplegable de la campana)
   =========================================================== */
.notif-wrap{ position:relative; }
/* position:fixed (no absolute respecto a .notif-wrap) porque el panel lo
   puede abrir cualquiera de los dos botones-campana que existen en la
   página (el del topbar en escritorio, el del menú lateral en móvil) y
   así se coloca igual sea cual sea quien lo abrió. */
.notif-panel{
  position:fixed; top:76px; right:24px; width:340px; max-width:calc(100vw - 32px);
  background:var(--bg-sidebar); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  box-shadow:var(--shadow-hover); z-index:200; overflow:hidden;
}
.notif-panel[hidden]{ display:none; }
.notif-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--border); font-size:13.5px; font-weight:700;
}
.notif-link{ font-size:11.5px; font-weight:600; color:var(--accent-2); }
.notif-link:hover{ text-decoration:underline; }
.notif-list{ max-height:min(420px, 60vh); overflow-y:auto; }
.notif-item{
  display:flex; flex-direction:column; gap:3px; padding:12px 16px;
  border-bottom:1px solid var(--border); text-decoration:none; color:var(--text-dim);
  transition:background var(--dur) var(--ease);
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--card); color:var(--text); }
.notif-item.is-unread{ background:rgba(240,124,74,.06); color:var(--text); }
.notif-item.is-unread .notif-msg{ font-weight:600; }
.notif-msg{ font-size:13px; line-height:1.4; }
.notif-ago{ font-size:11.5px; color:var(--text-dimmer); }
.notif-empty{ padding:24px 16px; text-align:center; font-size:12.5px; color:var(--text-dimmer); }

/* ===========================================================
   Comentarios (dentro del visor de foto/vídeo)
   =========================================================== */
.lb-comments{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.lb-comment{ display:flex; gap:10px; align-items:flex-start; }
.lb-comment-avatar{
  width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--card-2);
}
.lb-comment-avatar img{ width:100%; height:100%; object-fit:cover; }
.lb-comment-avatar .avatar-fallback{ width:100%; height:100%; font-size:12px; }
.lb-comment-body{ flex:1; min-width:0; }
.lb-comment-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.lb-comment-head strong{ font-size:12.5px; font-weight:600; }
.lb-comment-head span{ font-size:11px; color:var(--text-dimmer); }
.lb-comment-text{ font-size:13px; color:var(--text-dim); line-height:1.5; margin-top:2px; overflow-wrap:anywhere; }
.comment-mention{
  color:var(--accent-2); font-weight:600; text-decoration:none;
  background:var(--accent-soft); padding:0 4px; border-radius:4px;
}
.comment-mention:hover{ text-decoration:underline; }
.lb-comment-del{
  flex-shrink:0; width:24px; height:24px; border-radius:6px; color:var(--text-dimmer);
  display:flex; align-items:center; justify-content:center; opacity:0;
  transition:opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lb-comment:hover .lb-comment-del{ opacity:1; }
.lb-comment-del:hover{ color:#FF8983; background:var(--card); }
.lb-comment-del svg{ width:13px; height:13px; }

.lb-comment-form{ display:flex; flex-direction:column; gap:8px; }
.lb-comment-input-wrap{ position:relative; }
.lb-comment-input{
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; color:var(--text); font-size:13px; font-family:inherit; outline:none; resize:vertical;
  min-height:56px;
}
.lb-comment-input:focus{ border-color:var(--accent); }
.lb-comment-form .btn-primary{ align-self:flex-end; }

/* Desplegable de menciones @ */
.mention-dropdown{
  /* Se abre hacia ABAJO: la caja de comentar está arriba del panel, así que
     desplegarlo hacia arriba lo dejaría fuera de la pantalla. */
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:10;
  background:var(--bg-sidebar); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-hover); max-height:220px; overflow-y:auto;
}
.mention-dropdown[hidden]{ display:none; }
.mention-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:9px 12px; text-align:left; font-size:13px; color:var(--text-dim);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mention-option:hover, .mention-option.is-active{ background:var(--card); color:var(--text); }
.mention-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mention-note{ font-size:10.5px; color:var(--text-dimmer); flex-shrink:0; }