/* =====================================================================
   RoFitGo — app.css
   Sistema de diseño "Active Calm / Stealth Work Mode"
   Una sola hoja para toda la app. Sin emojis, paleta neutra corporativa.
   ===================================================================== */

/* =========================
   1) Tokens (CSS variables)
========================= */
:root{
  /* Color: paleta slate corporativa */
  --c-bg:        #f8fafc;
  --c-surface:   #ffffff;
  --c-surface-2: #f1f5f9;
  --c-border:    #e2e8f0;
  --c-border-2:  #cbd5e1;
  --c-text:      #0f172a;
  --c-text-2:    #475569;
  --c-text-3:    #94a3b8;

  /* Acento único: blue-600 (Office/Teams-like) */
  --c-accent:        #2563eb;
  --c-accent-hover:  #1d4ed8;
  --c-accent-soft:   #dbeafe;
  --c-accent-text:   #1e40af;

  /* Semánticos apagados */
  --c-success:      #16a34a;
  --c-success-soft: #dcfce7;
  --c-warning:      #ea580c;
  --c-warning-soft: #ffedd5;
  --c-danger:       #dc2626;
  --c-danger-soft:  #fee2e2;

  /* Tipografía */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  15px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  /* Espacios */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radios */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 999px;

  /* Sombras (sutiles) */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-md: 0 2px 6px rgba(15, 23, 42, 0.06);
  --sh-lg: 0 8px 24px rgba(15, 23, 42, 0.10);

  /* Anillo de foco */
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* Contenedor */
  --container-max: 1100px;

  /* Transición estándar */
  --t: 160ms ease;

  /* Safe-area shortcuts (usados por debug panel y JS) */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* =========================
   2) Reset + base
========================= */
*, *::before, *::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
}

body{
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, p, ul, ol{ margin: 0; padding: 0; }
ul, ol{ list-style: none; }

h1{ font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.01em; }
h2{ font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.005em; }
h3{ font-size: var(--fs-lg); font-weight: 600; }

a{ color: var(--c-accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

img{ max-width: 100%; display: block; }

/* Anti-zoom iOS: inputs siempre 16px */
input, select, textarea, button{ font-family: inherit; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="tel"], input[type="url"],
input[type="date"], input[type="datetime-local"], input[type="time"],
select, textarea{
  font-size: 16px;
}

a, button, [role="button"]{ touch-action: manipulation; }

:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* Reduce motion: respeta preferencia del sistema */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =========================
   3) Container
========================= */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

@media (min-width: 768px){
  .container{ padding: 0 var(--sp-5); }
}

/* =========================
   4) App shell
   Top bar + sidebar (desktop) + tab bar (móvil) + drawer
========================= */

.app-topbar{
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  /* En iPhone PWA el status bar cubre el top del viewport.
     Añadimos safe-area-inset-top como padding para que el
     contenido del topbar quede debajo de la barra de estado. */
  height: calc(52px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) var(--sp-3) 0;
  gap: var(--sp-3);
}

.app-topbar__brand{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.app-topbar__brand:hover{ text-decoration: none; }

.app-topbar__brand-mark{
  width: 24px;
  height: 24px;
  background: var(--c-accent);
  border-radius: var(--r-sm);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex: 0 0 auto;
}

.app-topbar__search{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 480px;
  position: relative;
  display: none;
}
.app-topbar__search input{
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--fs-md);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.app-topbar__search input:focus{
  background: var(--c-surface);
  border-color: var(--c-accent);
  box-shadow: var(--ring);
  outline: none;
}
.app-topbar__search .ti{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-3);
  font-size: 16px;
  pointer-events: none;
}

.app-topbar__spacer{ flex: 1 1 auto; }

.app-topbar__actions{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  margin-left: auto;
}

.app-topbar__icon-btn{
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: transparent;
  border: none;
  color: var(--c-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.app-topbar__icon-btn:hover{ background: var(--c-surface-2); color: var(--c-text); }
.app-topbar__icon-btn .badge{
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--c-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (min-width: 768px){
  /* ≥768px: tablet/escritorio, safe-area-inset-top siempre 0 → altura fija */
  .app-topbar{ height: 56px; padding: 0 var(--sp-5); }
  .app-topbar__search{ display: block; }
  .app-topbar__spacer{ display: none; }
}

/* Sidebar desktop (estilo Teams) — fija, fuera del flujo */
.app-sidebar{
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  width: 220px;
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  border-right: 1px solid var(--c-border);
  background: var(--c-surface);
  padding: var(--sp-4) var(--sp-2);
  flex-direction: column;
  gap: var(--sp-1);
  overflow-y: auto;
  z-index: 20;
}

.app-sidebar__item{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.app-sidebar__item .ti{ font-size: 18px; flex: 0 0 auto; }
.app-sidebar__item:hover{ background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.app-sidebar__item.is-active{
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
}

.app-sidebar__divider{
  height: 1px;
  background: var(--c-border);
  margin: var(--sp-3) var(--sp-2);
}

@media (min-width: 1024px){
  .app-sidebar{ display: flex; }
}

/* Layout principal: con sidebar fija a la izquierda en desktop */
.app-layout{
  display: block;
  flex: 1 0 auto; /* sticky footer: ocupa todo el espacio restante */
}
@media (max-width: 1023px){
  /* En móvil, evitar que app-layout se expanda a 100dvh creando espacio en blanco */
  .app-layout{ flex: none; }
}
.app-footer{
  flex-shrink: 0;
}

.app-main{
  /* 80px para la tab bar + home indicator de iPhone (safe-area-inset-bottom)
     Evita que el contenido quede oculto detrás de la tab bar en iPhone PWA. */
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px){
  .app-main{
    padding-bottom: var(--sp-6);
  }
  /* Si la página tiene sidebar fija, dejarle 220px de margen */
  body:has(.app-sidebar) .app-main{
    margin-left: 220px;
  }
}

/* Tab bar móvil */
.app-tabbar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.app-tabbar__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  color: var(--c-text-3);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.app-tabbar__item .ti{ font-size: 22px; }
.app-tabbar__item span{
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  hyphens: auto;
}
.app-tabbar__item.is-active{ color: var(--c-accent); }
.app-tabbar__item:hover{ text-decoration: none; }
.app-tabbar__item .badge{
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translateX(14px);
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--c-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (min-width: 1024px){
  .app-tabbar{ display: none; }
}

/* Drawer hamburger (móvil overflow) */
.app-drawer{
  display: none;
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  width: min(280px, 80vw);
  z-index: 35;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  box-shadow: var(--sh-lg);
  padding: var(--sp-3) var(--sp-2);
  flex-direction: column;
  gap: var(--sp-1);
  overflow-y: auto;
}
.app-drawer.is-open{ display: flex; }
.app-drawer__item{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none;
}
.app-drawer__item .ti{ font-size: 18px; }
.app-drawer__item:hover{ background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.app-drawer__divider{
  height: 1px;
  background: var(--c-border);
  margin: var(--sp-2) 0;
}

.app-backdrop{
  display: none;
  position: fixed;
  inset: 52px 0 0 0;
  z-index: 34;
  background: rgba(15, 23, 42, 0.30);
}
.app-backdrop.is-open{ display: block; }

/* drawer disponible en escritorio y móvil */

/* =========================
   5a) Auth notice (usuarios sin sesión)
========================= */
.auth-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--c-accent-soft);
  border-bottom: 1px solid #93c5fd;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font);
}

.auth-notice > .ti {
  font-size: 1.2rem;
  color: var(--c-accent);
  flex-shrink: 0;
  opacity: .8;
}

.auth-notice__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.auth-notice__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-accent-text);
  line-height: 1.3;
}

.auth-notice__sub {
  font-size: var(--fs-sm);
  color: var(--c-accent-text);
  opacity: .85;
  line-height: 1.45;
}

.auth-notice__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .auth-notice {
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
  }
  .auth-notice__btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   5) Page header (hero)
========================= */
.page-header{
  padding: var(--sp-4) 0 var(--sp-3);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.page-header__title{
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-header__subtitle{
  margin: 4px 0 0;
  color: var(--c-text-2);
  font-size: var(--fs-md);
}
.page-header__actions{
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* =========================
   6) Botones
========================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  height: 36px;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), transform 80ms ease;
}
.btn:hover{ text-decoration: none; }
.btn:active{ transform: scale(0.98); }

.btn--primary{
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.btn--primary:hover{ background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: #fff; }

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

.btn--ghost{
  background: transparent;
  color: var(--c-text-2);
  border-color: transparent;
}
.btn--ghost:hover{ background: var(--c-surface-2); color: var(--c-text); }

.btn--danger{
  background: var(--c-surface);
  color: var(--c-danger);
  border-color: var(--c-border-2);
}
.btn--danger:hover{ background: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger); }

.btn--success{
  background: var(--c-success-soft);
  color: var(--c-success);
  border-color: var(--c-success);
}
.btn--success:hover{ background: var(--c-success); color: #fff; border-color: var(--c-success); }

.btn--lg{ height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-lg); }
.btn--sm{ height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn--block{ width: 100%; }

.btn .ti{ font-size: 16px; flex: 0 0 auto; }

/* =========================
   7) Cards y filas (list-row)
========================= */
.card{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.card__title{
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 600;
}

/* List-row: la unidad básica del nuevo feed */
.list-rows{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.list-row{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-text);
  transition: background var(--t);
}
.list-row:last-child{ border-bottom: none; }
.list-row:hover{ background: var(--c-surface-2); text-decoration: none; color: var(--c-text); }

.list-row__date{
  width: 40px;
  text-align: center;
  flex: 0 0 auto;
}

/* Thumbnail / icono de categoría (entre fecha y título) */
.list-row__thumb{
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex: 0 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface-2);
  transition: transform var(--t);
}
.list-row__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.list-row__thumb .ti{
  font-size: 20px;
}
/* Categorías - paleta apagada, "enterprise-safe" */
.list-row__thumb--ruta{
  background: #e0f2fe; /* sky-100 */
  color: #0369a1; /* sky-700 */
}
.list-row__thumb--entreno{
  background: #fef3c7; /* amber-100 */
  color: #b45309; /* amber-700 */
}
.list-row__thumb--plan,
.list-row__thumb--social{
  background: #ede9fe; /* violet-100 */
  color: #6d28d9; /* violet-700 */
}
.list-row__thumb--bienestar{
  background: #d1fae5; /* emerald-100 */
  color: #065f46; /* emerald-800 */
}

/* ── Type picker (formulario crear/editar) ─────────────────────────────── */
.type-picker{
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
}
.type-picker__opt{ display: none; }
.type-picker__label{
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 12px; border-radius: var(--r-lg);
  border: 2px solid var(--c-border); background: var(--c-surface);
  cursor: pointer; flex: 1 1 110px; min-width: 90px; max-width: 160px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.type-picker__label:hover{ border-color: var(--c-accent); }
.type-picker__opt:checked + .type-picker__label{
  border-color: var(--c-accent); background: var(--c-accent-soft);
}
.type-picker__icon{ font-size: 26px; line-height: 1; }
.type-picker__name{ font-weight: 600; font-size: var(--fs-md); color: var(--c-text); }
.type-picker__desc{ font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.3; }
.list-row__thumb--hoy{
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
}

.list-row:hover .list-row__thumb{ transform: scale(1.04); }

/* Resaltado sutil del día actual */
.list-row__date-num--today{
  color: var(--c-accent);
}

/* Memorias preview card (con miniaturas reales) */
.memories-preview{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}
.memories-preview:hover{ text-decoration: none; color: inherit; }
.memories-preview__thumbs{
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.memories-preview__thumb{
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.memories-preview__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.memories-preview__thumb:nth-child(2){ margin-left: -8px; }
.memories-preview__thumb:nth-child(3){ margin-left: -8px; }
.memories-preview__text{ flex: 1 1 auto; min-width: 0; }

/* Empty state ilustrado (suave, no infantil) */
.empty--illustrated .ti{
  font-size: 48px;
  padding: var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.list-row__date-day{
  font-size: 10px;
  color: var(--c-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.list-row__date-num{
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1;
  margin-top: 2px;
}
.list-row__date-month{
  font-size: 9px;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 1px;
}

.list-row__main{
  flex: 1 1 auto;
  min-width: 0;
}
.list-row__title{
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row__meta{
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.list-row__meta .ti{ font-size: 13px; }

/* Línea FOMO: personas + countdown */
.list-row__fomo{
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 3px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-3);
  flex-wrap: wrap;
}
.list-row__fomo .ti{ font-size: 12px; }
.list-row__fomo-people{ color: var(--c-text-2); }
.list-row__fomo-sep{ color: var(--c-text-3); font-weight: 400; }
.list-row__fomo-days{ color: var(--c-text-3); }
.list-row__fomo-days--urgent{
  color: var(--c-danger, #dc2626);
  font-weight: 700;
}

.list-row__aside{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

/* Etiqueta neutral de tipo (RUTA / ENTRENO / PLAN) */
.tag{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}
.tag--accent{ background: var(--c-accent-soft); color: var(--c-accent-text); }
.tag--success{ background: var(--c-success-soft); color: var(--c-success); }
.tag--warning{ background: var(--c-warning-soft); color: var(--c-warning); }
.tag--danger{ background: var(--c-danger-soft); color: var(--c-danger); }
.tag--info{   background: var(--c-accent-soft); color: var(--c-accent);  }
/* "Únete" — CTA suave en la lista */
.tag--cta{ background: #eff6ff; color: #1d4ed8; }

/* Section heading dentro de la página */
.section-heading{
  font-size: 11px;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: var(--sp-4) 0 var(--sp-2);
}

/* =========================
   8) Inputs / forms
========================= */
.field{ margin-bottom: var(--sp-4); }
.field__label{
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 6px;
}
.field__hint{
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  margin-top: 4px;
}

.input,
.select,
.textarea{
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--t), box-shadow var(--t);
}
.textarea{
  height: auto;
  min-height: 120px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
}
.input:focus,
.select:focus,
.textarea:focus{
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--ring);
}
.input::placeholder,
.textarea::placeholder{ color: var(--c-text-3); }

/* =========================
   9) Chips (filtros)
========================= */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.chip:hover{ background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.chip.is-active{
  background: var(--c-text);
  color: var(--c-surface);
  border-color: var(--c-text);
}

/* =========================
   10) Auth card
========================= */
.auth-card{
  max-width: 420px;
  margin: var(--sp-6) auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
}
.auth-card__title{
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-2xl);
  font-weight: 600;
}
.auth-card__sub{
  color: var(--c-text-2);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-md);
}
.auth-card__footer{
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =========================
   11) Alerts
========================= */
.alert{
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  margin-bottom: var(--sp-4);
}
.alert--success{ background: var(--c-success-soft); border-color: var(--c-success); color: #15803d; }
.alert--danger{ background: var(--c-danger-soft); border-color: var(--c-danger); color: #b91c1c; }
.alert--warning{ background: var(--c-warning-soft); border-color: var(--c-warning); color: #c2410c; }
.alert ul{ margin: 6px 0 0; padding-left: 18px; list-style: disc; }

/* =========================
   12) Avatar + iniciales
========================= */
.avatar{
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-sm);
  flex: 0 0 auto;
}
.avatar--lg{ width: 48px; height: 48px; font-size: var(--fs-lg); }
.avatar--sm{ width: 24px; height: 24px; font-size: 11px; }
/* Foto de perfil (img circular reemplaza div de iniciales) */
.avatar--photo{
  object-fit: cover;
  background: var(--c-surface-2);
  border: 2px solid var(--c-border);
  display: block;
}
/* Avatar pequeño inline en tarjetas de evento */
.avatar-inline{
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  object-fit: cover;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}
/* Avatar en menú de navegación (sidebar, tabbar, drawer)
   img.nav-avatar: compound selector (0,0,1,1) vence al reset global
   img { max-width:100%; display:block } del reset.
   min/max-width/height bloquean el tamaño absolutamente. */
img.nav-avatar{
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  border-radius: var(--r-full);
  object-fit: cover;
  flex-shrink: 0;
  flex-grow: 0;
  display: inline-block;
  vertical-align: middle;
  border: 1.5px solid rgba(255,255,255,.35);
  align-self: center;
}
img.nav-avatar--tab{
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
}
/* Guardas explícitas por contexto — impiden que el flex-container
   expanda la imagen aunque haya resets extra */
.app-drawer__item img.nav-avatar,
.app-sidebar__item img.nav-avatar{
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
}
.app-tabbar__item img.nav-avatar{
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
}

/* =========================
   13) Stats (perfil)
========================= */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.stat{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: center;
}
.stat__num{
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1;
  margin: 0;
}
.stat__label{
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  margin: 4px 0 0;
}

/* =========================
   14) Tabs (perfil)
========================= */
.tabs{
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--c-border);
  margin: var(--sp-3) 0;
}
.tab{
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
  color: var(--c-text-2);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.tab:hover{ color: var(--c-text); text-decoration: none; }
.tab.is-active{
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

/* =========================
   15) Footer
========================= */
.app-footer{
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
@media (max-width: 1023px){
  /* Añadir espacio inferior para que el footer no quede detrás de la tab bar fija */
  .app-footer{
    padding-bottom: calc(var(--sp-4) + 62px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================
   16) Empty state
========================= */
.empty{
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  color: var(--c-text-2);
}
.empty .ti{
  font-size: 36px;
  color: var(--c-text-3);
  margin-bottom: var(--sp-3);
}
.empty__title{
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 var(--sp-1);
}
.empty__sub{ margin: 0; font-size: var(--fs-md); }

/* =========================
   17) Utilities
========================= */
.muted{ color: var(--c-text-2); }
.text-xs{ font-size: var(--fs-xs); }
.text-sm{ font-size: var(--fs-sm); }
.text-lg{ font-size: var(--fs-lg); }
.text-xl{ font-size: var(--fs-xl); }
.fw-500{ font-weight: 500; }
.fw-600{ font-weight: 600; }

.hide-mobile{ display: none; }
.hide-desktop{ display: initial; }
@media (min-width: 768px){
  .hide-mobile{ display: initial; }
  .hide-desktop{ display: none !important; }
}

.flex{ display: flex; }
.flex-1{ flex: 1 1 auto; min-width: 0; }
.gap-1{ gap: var(--sp-1); }
.gap-2{ gap: var(--sp-2); }
.gap-3{ gap: var(--sp-3); }
.items-center{ align-items: center; }
.justify-between{ justify-content: space-between; }

.mt-2{ margin-top: var(--sp-2); }
.mt-3{ margin-top: var(--sp-3); }
.mt-4{ margin-top: var(--sp-4); }
.mt-5{ margin-top: var(--sp-5); }
.mb-2{ margin-bottom: var(--sp-2); }
.mb-3{ margin-bottom: var(--sp-3); }
.mb-4{ margin-bottom: var(--sp-4); }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* 18) Zona Zen — eliminado FAB flotante (movido al sidebar/drawer) */


/* =========================
   20) Instagram invite
   Card contextual en Eventos pasados + item del drawer
========================= */

/*
 * Card de invitación a Instagram.
 * Aparece al final del listado de Eventos pasados, solo cuando hay eventos.
 * Diseño: integrado con la paleta de la app, nada chillón.
 * El único color externo es el icono Instagram en rojo-rosa muy reconocible.
 */
.ig-invite {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--c-text-2);
  transition: border-color var(--t), background var(--t);
  cursor: pointer;
}
.ig-invite:hover,
.ig-invite:focus-visible {
  border-color: var(--c-border-2);
  background: var(--c-surface-2);
  text-decoration: none;
}

/* Icono Instagram: fondo neutro, color reconocible pero discreto */
.ig-invite__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: #fff0f3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #c13584;  /* magenta Instagram, sin el gradiente: no rompe el estilo */
}

.ig-invite__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ig-invite__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ig-invite__sub {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ig-invite__arrow {
  flex-shrink: 0;
  color: var(--c-text-3);
  font-size: 14px;
}

/* Drawer: item Instagram — mismo estilo que el resto pero icono en magenta */
.app-drawer__item--instagram .ti-brand-instagram {
  color: #c13584;
}

/* =========================
   19) Circadian — ajuste visual de hora (f.lux-like)
   Sistema: overlay cálido + barra lateral día/noche
========================= */

/*
 * Overlay warm: capa fija sobre toda la app, color ámbar muy suave.
 * opacity controlada por --circadian-o (variable en :root, seteada por JS).
 * pointer-events: none → no interfiere con clics ni gestos.
 * z-index 9990 → sobre todo el UI (como f.lux real), opacidad muy baja.
 * Sin transición inicial; JS añade .circadian-live tras primer render
 * para que los cambios a lo largo del día sean imperceptibles (90 s).
 */
:root {
  --circadian-o: 0;           /* opacity del overlay, set por JS en <head> */
}

#circadianOverlay {
  position: fixed;
  inset: 0;
  background: hsl(28, 88%, 56%);   /* ámbar cálido */
  opacity: var(--circadian-o, 0);
  pointer-events: none;
  z-index: 9990;
  will-change: opacity;
  /* Sin transition inicial; se activa cuando JS añade .circadian-live */
}
#circadianOverlay.circadian-live {
  transition: opacity 90s ease;
}

/*
 * Barra lateral: pegada al borde izquierdo, muy fina, pointer-events: none.
 * No bloquea clics. No roba espacio visual.
 * En desktop: aparece encima del borde izq. del sidebar (z-index 22 > sidebar 20).
 * En móvil: se mantiene dentro del área de contenido, por encima de la tab bar.
 * Tamaño: 20 px ancho en desktop, 14 px en móvil.
 */
#circadianBar {
  position: fixed;
  left: 0;
  top: calc(52px + env(safe-area-inset-top, 0px));
  bottom: 0;
  width: 20px;
  z-index: 22;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  /* Isolation para no verse afectada por el propio overlay (está debajo del overlay) */
}

/* En móvil: barra termina encima de la tab bar */
@media (max-width: 1023px) {
  #circadianBar {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    width: 14px;
  }
}

/* Línea guía vertical (track) */
#circadianTrack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5%;
  bottom: 5%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(148, 163, 184, 0.22) 12%,
    rgba(148, 163, 184, 0.22) 88%,
    transparent 100%
  );
  border-radius: 1px;
}

/* Punto indicador de hora actual */
#circadianDot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent, #2563eb);
  opacity: 0.55;
  z-index: 2;
  /* top se setea por JS; transition solo tras init */
}
#circadianDot.circadian-live {
  transition: top 45s ease;
}

/*
 * Cuerpo celeste (sol / luna) que asoma desde el borde izquierdo.
 * left: 0 + transform: translateX(-50%) → el centro del círculo
 * queda exactamente en el borde izquierdo del viewport,
 * mostrando solo la mitad derecha del círculo.
 * Se posiciona verticalmente junto al dot de hora actual.
 */
#circadianCelestial {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  z-index: 1;
  /* colores y box-shadow se aplican por JS según tramo horario */
  background: #f59e0b;
  box-shadow: 3px 0 10px rgba(245, 158, 11, 0.3);
  /* top se setea por JS; transition solo tras init */
}
#circadianCelestial.circadian-live {
  transition: top 45s ease, background 60s ease, box-shadow 60s ease;
}

/* Reducir tamaño del celestial en móvil para ser más discreto */
@media (max-width: 1023px) {
  #circadianCelestial {
    width: 16px;
    height: 16px;
    box-shadow: 2px 0 7px rgba(245, 158, 11, 0.28);
  }
}

/* Reducir motion: elimina todas las transiciones circadian */
@media (prefers-reduced-motion: reduce) {
  #circadianOverlay,
  #circadianDot,
  #circadianCelestial { transition: none !important; }
}

/* ── Segmented control de preferencia (en perfil.php) ── */
.circadian-pref-group {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}

.circadian-pref-btn {
  padding: 6px 18px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--font);
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.circadian-pref-btn:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--c-border-2);
}
.circadian-pref-btn.is-active {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
}
.circadian-pref-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* =========================
   20) Circadian — barra horizontal superior (reemplaza barra vertical)
   Ciclo 24h: izquierda (medianoche) → derecha (23:59)
========================= */

/* Ocultar la barra vertical izquierda anterior — ya no se usa */
#circadianBar { display: none !important; }

/*
 * Barra superior horizontal.
 *
 * height = env(safe-area-inset-top) + 20px de contenido visible.
 * En contextos sin safe-area (escritorio, Safari normal): 20px.
 * En PWA iPhone: ~47-59px según modelo (la zona del status bar
 * "envuelve" la barra; el track/pin quedan al borde inferior,
 * justo encima del header).
 *
 * z-index 50 → sobre el header (30) y el drawer (35).
 * pointer-events: none → no bloquea ningún clic ni gesto.
 * La barra NO tiene background propio: completamente transparente.
 */
#circadianTopBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /*
   * Solo 2px de línea en navegador normal.
   * En iPhone PWA (safe-area-inset-top > 0) se expande para que el
   * pin sol/luna quepa dentro del status bar, sin solapar el header.
   */
  height: calc(env(safe-area-inset-top, 0px) + 2px);
  pointer-events: none;
  z-index: 50;
  user-select: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}

/*
 * Track: línea horizontal de 2px, pegada al borde inferior del bar.
 * Gradiente sutil que evoca la temperatura del día:
 *   madrugada/amanecer (izq.) → cálido · mediodía → neutro · noche (der.) → cálido
 * Completamente transparente en los bordes (0% y 100%)
 * para una integración imperceptible con el fondo.
 */
#circadianTopTrack {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent                      0%,
    rgba(148, 163, 184, 0.18)        4%,
    rgba(251, 146,  60, 0.22)       21%,
    rgba(148, 163, 184, 0.16)       50%,
    rgba(249, 115,  22, 0.22)       78%,
    rgba(148, 163, 184, 0.18)       96%,
    transparent                    100%
  );
}

/*
 * Pin indicador: flota justo debajo de la línea de 2px del track.
 * Visible en todos los navegadores (no solo PWA standalone).
 * top: safe-area + 3px → arranca 1px por debajo del track.
 * pointer-events: none (heredado) → no bloquea ningún clic.
 */
#circadianTopPin {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 3px);
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/*
 * Icono sol/luna (Tabler Icons, ya cargado en la app).
 * 'ti ti-sun'  → días y transiciones (dawn, morning, afternoon, dusk)
 * 'ti ti-moon' → noche y madrugada
 * Tamaño: 12px — visible pero muy discreto.
 * Color actualizado por JS según tramo horario:
 *   ámbar (#f59e0b) · naranja-dawn (#fb923c) · naranja-dusk (#f97316)
 *   gris-azul (#94a3b8) para la luna.
 * Sin transition inicial; JS la activa (color 60s ease) tras init.
 */
#circadianTopIcon {
  font-size: 12px;
  line-height: 1;
  display: block;
  opacity: 0.82;
  color: #f59e0b;
}
/* Reducir motion: sin animaciones circadian */
@media (prefers-reduced-motion: reduce) {
  #circadianTopBar  { transition: none !important; }
  #circadianTopPin  { transition: none !important; }
  #circadianTopIcon { transition: none !important; }
}




/* ═══════════════════════════════════════════════════════════════════════════
   TABLÓN — "Nueva idea. ¿Te gusta?"
   Tarjetas de ideas, accordion, reacción de fuego, toast.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lista de tarjetas ──────────────────────────────────────────────────── */
.board-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

/* ── Tarjeta individual (página /tablon.php) ────────────────────────────── */
.board-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: box-shadow .15s, border-color .15s;
}
.board-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border-color: var(--c-border-2);
}

/* Cabecera: emoji + meta + toggle chevron */
.board-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.board-card__emoji {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  padding-top: 2px;
}

.board-card__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.board-card__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0;
}

/* Botón toggle accordion */
.board-card__toggle-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--r-sm);
  color: var(--c-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  line-height: 1;
  margin-top: 2px;
}
.board-card__toggle-btn:hover {
  background: var(--c-surface-2);
  color: var(--c-text-2);
}
.board-card__toggle-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.board-card__chevron {
  font-size: 1.1rem;
  transition: transform .28s ease;
  display: block;
}
.board-card--open .board-card__chevron {
  transform: rotate(180deg);
}

/* Textos */
.board-card__summary {
  font-size: var(--fs-md);
  color: var(--c-text-2);
  line-height: 1.6;
  margin: 0;
}

/* Accordion cuerpo */
.board-card__body-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.board-card--open .board-card__body-wrap {
  max-height: 800px;
}

.board-card__body-inner {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
}

.board-card__body {
  font-size: var(--fs-md);
  color: var(--c-text-2);
  line-height: 1.65;
  margin: 0;
}

/* Pie: contador + acciones */
.board-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  margin-top: var(--sp-1);
}

.board-card__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.board-card__count {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  font-weight: 600;
  white-space: nowrap;
}
.board-card__count-num {
  font-variant-numeric: tabular-nums;
}

/* ── Badges de estado ───────────────────────────────────────────────────── */
.board-status {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-full);
  width: fit-content;
  line-height: 1;
}
.board-status--soon   { background: #f1f5f9; color: #64748b; }
.board-status--test   { background: #fef3c7; color: #92400e; }
.board-status--active { background: #dcfce7; color: #166534; }

/* ── Botón de fuego ─────────────────────────────────────────────────────── */
.btn-fire {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--c-border-2);
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-fire:hover:not(:disabled) {
  background: var(--c-surface-2);
  border-color: #f97316;
}
.btn-fire:active:not(:disabled) {
  transform: scale(.95);
}

/* Estado "ya dado" — encendido + deshabilitado */
.btn-fire--on,
.btn-fire--on:disabled {
  background: #fff7ed;
  border-color: #f97316;
  color: #ea580c;
  opacity: 1;           /* No atenuar — el estado activo debe verse vivo */
  cursor: default;
}
.btn-fire--on:hover:not(:disabled) {
  background: #ffedd5;
}

/* Deshabilitado genérico (solo cuando NO está en estado --on) */
.btn-fire:disabled:not(.btn-fire--on) {
  opacity: .45;
  cursor: not-allowed;
}

.btn-fire__icon {
  font-size: 1rem;
  line-height: 1;
}

/* Variante compacta (home preview card) */
.btn-fire--sm {
  padding: 6px 12px;
  font-size: var(--fs-xs);
  gap: 4px;
}

/* ── Pista de ayuda inferior ────────────────────────────────────────────── */
.board-hint {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  margin-top: calc(-1 * var(--sp-2));
  margin-bottom: var(--sp-4);
}

/* ── Toast de feedback ──────────────────────────────────────────────────── */
.board-toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(15,23,42,.9);
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 1100;
  font-family: var(--font);
}
.board-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Tarjeta compacta en home (board-preview-card) ──────────────────────── */
.board-preview-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--sp-4);      /* Separación clara respecto al header/topbar */
  margin-bottom: var(--sp-4);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: border-color .15s, box-shadow .15s;
}
.board-preview-card:hover {
  border-color: var(--c-border-2);
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

/* Cabecera: info + toggle button */
.board-preview-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.board-preview-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.board-preview-card__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.board-preview-card__label .ti {
  font-size: .85rem;
  opacity: .85;
}

.board-preview-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.board-preview-card__emoji {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.board-preview-card__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
  line-height: 1.3;
}

.board-preview-card__sub {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  line-height: 1.5;
}

/* Botón toggle accordion (chevron) */
.board-preview-card__toggle-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--r-sm);
  color: var(--c-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  align-self: center;
}
.board-preview-card__toggle-btn:hover {
  background: var(--c-surface-2);
  color: var(--c-text-2);
}
.board-preview-card__toggle-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.board-preview-card__chevron {
  font-size: 1.05rem;
  transition: transform .28s ease;
  display: block;
}
.bpc--open .board-preview-card__chevron {
  transform: rotate(180deg);
}

/* Cuerpo accordion */
.board-preview-card__expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.bpc--open .board-preview-card__expand {
  max-height: 600px;
}

.board-preview-card__expand-inner {
  padding: 0 var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-3);
}

.board-preview-card__body {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 1.65;
  margin: 0;
}

/* Pie: contador + botones */
.board-preview-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
}

.board-preview-card__count-pill {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  white-space: nowrap;
}
.board-preview-card__count-num {
  font-variant-numeric: tabular-nums;
}

.board-preview-card__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* .board-list y .board-card: página /tablon.php (carta centrada, ancho moderado) */
  .board-list {
    max-width: 680px;
  }
  .board-card {
    padding: var(--sp-5) var(--sp-6);
  }
  /* .board-preview-card en home: sin max-width para alinearse con la lista de eventos */
}