/* ============================================================
   AMMJE León — Panel de Gestión
   Sistema de tokens (variables CSS) · tema claro/oscuro
   Paleta: Verde Lima Consejo (D) · #CADB44 + #87E772 + #6D6E70
   ============================================================ */

:root {
  /* paleta marca AMMJE — Verde Lima */
  --brand-50:  #FBFDE8;
  --brand-100: #F5FBC9;
  --brand-200: #E8F0A8;
  --brand-300: #D9E87A;
  --brand-400: #CADB44;  /* color principal escogido por consejo */
  --brand-500: #B3C238;
  --brand-600: #8FA02D;
  --brand-700: #6B7A22;  /* tono base botones/links */
  --brand-800: #4F5A19;
  --brand-900: #333B10;

  /* acento verde fresh */
  --accent-400: #87E772;
  --accent-500: #5BCB46;

  /* acentos oficiales del brand book (paleta primaria 7 colores) */
  --ammje-yellow: #FFEF38;
  --ammje-blue:   #396BB2;
  --ammje-rose:   #BE69A4;
  --ammje-sky:    #86D1E4;

  /* neutros (gris del consejo #6D6E70 mantiene escala neutra) */
  --gray-50:  #FAFAF7;
  --gray-100: #F2F2EC;
  --gray-200: #E5E5E0;
  --gray-300: #CFCFC9;
  --gray-400: #A1A1A0;
  --gray-500: #6D6E70;  /* gris del consejo */
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;
  --gray-950: #09090B;

  /* semánticos */
  --success: #5BB698;
  --warning: #D97706;
  --danger:  #EF4444;
  --info:    #3B82F6;

  /* tipografía — Montserrat (manual de marca) */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* radios + sombras */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(143,160,45,0.06);
  --shadow-lg: 0 12px 32px rgba(143,160,45,0.10);
  --shadow-focus: 0 0 0 3px rgba(202,219,68,0.30);

  /* layout */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 64px;
}

/* TEMA CLARO (default) */
[data-theme="light"] {
  --bg:        #FAFAF5;
  --bg-card:   #ffffff;
  --bg-elev:   #ffffff;
  --bg-side:   #ffffff;
  --bg-hover:  #F5FBC9;
  --bg-active: #E8F0A8;

  --text:        var(--gray-900);
  --text-soft:   var(--gray-600);
  --text-muted:  var(--gray-500);
  --text-invert: #ffffff;
  --ink:         var(--brand-800);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  --input-bg:     #fff;
  --input-border: var(--gray-300);
}

/* TEMA OSCURO */
[data-theme="dark"] {
  --bg:        #0F1208;
  --bg-card:   #1A1D12;
  --bg-elev:   #21251A;
  --bg-side:   #14180D;
  --bg-hover:  #2D331F;
  --bg-active: #404A28;

  --text:        #F0F3E0;
  --text-soft:   #C4C8B0;
  --text-muted:  #8B9070;
  --text-invert: #1A1D12;
  --ink:         #E8F0A8;

  --border:        #2D331F;
  --border-strong: #404A28;

  --input-bg:     #14180D;
  --input-border: #404A28;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-900); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-side);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   BRAND / SIDEBAR
   ============================================================ */
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.brand:hover { color: var(--brand-700); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  border-radius: 12px;
}
.brand-mark svg { color: #fff; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.nav { padding: 12px 8px; flex: 1; }
.nav-group-title {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 16px 12px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  margin: 2px 0;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--bg-hover); color: var(--ink); }
.nav-item.is-active {
  background: var(--bg-active);
  color: var(--brand-800);
  font-weight: 600;
}
[data-theme="dark"] .nav-item.is-active { color: var(--brand-300); }
.nav-icon { display: inline-flex; flex-shrink: 0; }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 16px;
}
.meta-progress-label {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-soft);
  margin-bottom: 6px;
}
.meta-progress-bar {
  height: 6px; background: var(--bg-hover); border-radius: 999px; overflow: hidden;
}
.meta-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-700));
  border-radius: 999px;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 50;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }
.page-title { font-size: 18px; font-weight: 600; margin: 0; color: var(--ink); }
.sidebar-toggle { display: none; }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text-soft); border-radius: var(--r-md);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
[data-theme="light"] .theme-icon-dark  { display: none; }
[data-theme="dark"]  .theme-icon-light { display: none; }

.user-chip {
  display: flex; flex-direction: column; line-height: 1.15; text-align: right;
  padding-left: 12px; border-left: 1px solid var(--border);
}
.user-name  { font-size: 13px; font-weight: 600; color: var(--text); }
.user-cargo { font-size: 11px; color: var(--text-muted); }

/* ============================================================
   CONTENT + CARDS
   ============================================================ */
.content {
  padding: 24px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin: 0 0 16px;
}
.card-wide { grid-column: 1 / -1; }
.card-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px; color: var(--text-soft); gap: 12px;
}
.card-empty h2, .card-empty h3 { margin: 0; color: var(--text); font-weight: 600; }
.card-empty p { margin: 0; max-width: 380px; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.card-hero {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: #fff;
  border: none;
  box-shadow: var(--shadow-lg);
}
.card-hero-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}
.card-hero-main { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 16px; }
.big-num  { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.big-unit { font-size: 15px; color: rgba(255,255,255,0.85); }
.progress-bar { height: 8px; background: rgba(255,255,255,0.2); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: rgba(255,255,255,0.95); border-radius: 999px; transition: width 0.6s ease; }
.card-hero-sub { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.8); }

.kpi-card { display: flex; flex-direction: column; gap: 4px; position: relative; }
.kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--bg-hover);
  color: var(--brand-700);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.kpi-val   { font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.kpi-label { font-size: 13px; color: var(--text-soft); }
.kpi-link  { font-size: 12px; color: var(--brand-700); margin-top: 8px; align-self: flex-start; }
.kpi-warn    .kpi-icon { background: rgba(245,158,11,0.12); color: var(--warning); }
.kpi-success .kpi-icon { background: rgba(16,185,129,0.12); color: var(--success); }
.kpi-danger  .kpi-icon { background: rgba(239,68,68,0.12); color: var(--danger); }

.evento-prox { display: flex; align-items: center; gap: 20px; }
.evento-prox-fecha {
  display: flex; flex-direction: column; align-items: center;
  width: 72px; padding: 12px 0;
  background: var(--bg-hover); border-radius: var(--r-md);
  flex-shrink: 0;
}
.evento-dia { font-size: 30px; font-weight: 700; color: var(--brand-800); line-height: 1; }
.evento-mes { font-size: 11px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.08em; margin-top: 4px; }
.evento-prox-info { flex: 1; }
.evento-prox-info h3 { margin: 0 0 4px; font-size: 16px; }
.evento-prox-info p { margin: 0; font-size: 13px; color: var(--text-soft); }

.status-list { list-style: none; padding: 0; margin: 0; }
.status-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--text-soft); border-bottom: 1px dashed var(--border); }
.status-list li:last-child { border-bottom: none; }
.status-list li svg { color: var(--success); flex-shrink: 0; }
.status-list li [data-lucide="clock"] { color: var(--warning); }

/* ============================================================
   FORMS + BUTTONS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field span { font-size: 13px; font-weight: 500; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--text);
  transition: border 0.12s, box-shadow 0.12s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}

.code-input {
  font-family: var(--font-mono);
  font-size: 28px !important;
  text-align: center;
  letter-spacing: 12px;
  font-weight: 600;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  background: var(--bg-hover); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.12s;
}
.btn:hover { background: var(--bg-active); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff !important;
  border-color: transparent;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-800));
  box-shadow: var(--shadow-md);
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--ink); }
.btn-danger { color: var(--danger) !important; border-color: rgba(239,68,68,0.3) !important; }
.btn-danger:hover { background: rgba(239,68,68,0.1) !important; border-color: var(--danger) !important; color: var(--danger) !important; }
.btn-block { width: 100%; }

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash {
  padding: 12px 16px;
  margin: 0 24px 16px;
  border-radius: var(--r-md);
  border-left: 3px solid;
  font-size: 14px;
}
.flash-info    { background: rgba(59,130,246,0.08); border-color: var(--info);    color: var(--info); }
.flash-error   { background: rgba(239,68,68,0.08);  border-color: var(--danger);  color: var(--danger); }
.flash-success { background: rgba(16,185,129,0.08); border-color: var(--success); color: var(--success); }
.flash-warning { background: rgba(245,158,11,0.08); border-color: var(--warning); color: var(--warning); }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F5FBC9, #E8F0A8);
  padding: 24px;
}
.auth-card {
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: 0 24px 48px rgba(143,160,45,0.12);
  padding: 40px;
}
.auth-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.auth-brand .brand-mark { width: 56px; height: 56px; border-radius: var(--r-md); }
.auth-brand h1 { font-size: 22px; font-weight: 700; margin: 0; color: var(--brand-900); }
.auth-brand p  { font-size: 13px; color: var(--gray-500); margin: 2px 0 0; }
.auth-form { margin-top: 8px; }
.auth-help { text-align: center; color: var(--gray-500); font-size: 13px; margin: 20px 0 0; }
.auth-help a { color: var(--brand-700); font-weight: 500; }

/* ============================================================
   PAGE ACTIONS / TABLES / FILTERS
   ============================================================ */
.page-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.search-form { display: flex; gap: 8px; flex: 1; max-width: 480px; }
.search-form input {
  flex: 1; padding: 10px 14px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--r-md); font-size: 14px; color: var(--text);
}
.search-form input:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--shadow-focus); }

.filter-tabs { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; }
.filter-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  color: var(--text-soft); font-size: 13px; font-weight: 500;
  background: var(--bg-card); border: 1px solid var(--border);
  white-space: nowrap;
}
.filter-tab:hover { background: var(--bg-hover); }
.filter-tab.is-active { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
.filter-tab.is-active.warn { background: var(--warning); border-color: var(--warning); }
.filter-tab span {
  background: rgba(0,0,0,0.1); padding: 1px 8px; border-radius: 999px; font-size: 11px;
}
.filter-tab.is-active span { background: rgba(255,255,255,0.25); }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 14px 16px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
  background: var(--bg-elev); border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover { background: var(--bg-hover); }
.data-table tr.row-warn { background: rgba(245,158,11,0.04); }
.cell-name { font-weight: 600; color: var(--ink); }
.cell-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.muted { color: var(--text-muted); }

.badge {
  display: inline-flex; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
  background: var(--bg-hover); color: var(--text-soft);
}
.badge-activa  { background: rgba(16,185,129,0.12); color: var(--success); }
.badge-vencida { background: rgba(245,158,11,0.12); color: var(--warning); }
.badge-baja    { background: rgba(239,68,68,0.12);  color: var(--danger);  }
.badge-tier    { background: var(--brand-100); color: var(--brand-800); }
[data-theme="dark"] .badge-tier { background: rgba(143,160,45,0.18); color: var(--brand-300); }

.perfil-mini { display: inline-flex; gap: 4px; }
.perfil-mini span {
  width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-hover); color: var(--text-muted);
  font-size: 10px; font-weight: 700;
}
.perfil-mini span.on { background: var(--success); color: #fff; }

/* Asistencia en lista */
.asistencia-mini { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.asistencia-num { font-size: 18px; font-weight: 700; color: var(--brand-700); }
.asistencia-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Asistencia en ficha — tarjetas por tipo */
.asistencia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.asistencia-tipo-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; background: var(--bg-hover);
  border-radius: var(--r-md); text-align: center;
}
.asistencia-tipo-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700);
}
[data-theme="dark"] .asistencia-tipo-icon { background: rgba(143,160,45,0.2); color: var(--brand-300); }
.asistencia-tipo-num   { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1; }
.asistencia-tipo-label { font-size: 12px; color: var(--text-soft); }

/* ============================================================
   SHOW / DETAIL
   ============================================================ */
.show-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.show-header { display: flex; align-items: center; gap: 24px; }
.show-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; font-size: 32px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.show-num { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.08em; }
.show-meta h2 { margin: 4px 0; font-size: 22px; color: var(--ink); }
.show-cargo { color: var(--text-soft); margin: 0 0 8px; }
.show-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; margin: 0; }
.kv dt { color: var(--text-muted); font-size: 13px; }
.kv dd { margin: 0; color: var(--text); font-size: 14px; }

.perfil-checklist { list-style: none; padding: 0; margin: 0; }
.perfil-checklist li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; color: var(--text-muted);
}
.perfil-checklist li.done { color: var(--success); }
.perfil-checklist li svg { color: inherit; }

/* ============================================================
   FORM CARD
   ============================================================ */
.form-card { max-width: 880px; margin: 0 auto; }
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
}
.field-span-2 { grid-column: 1 / -1; }
.field-legend { font-size: 13px; font-weight: 500; margin-bottom: 8px; display: block; }
.field textarea { resize: vertical; min-height: 80px; font-family: var(--font-sans); }
.check { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.check input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand-600); }

.form-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
}

/* ============================================================
   EVENTOS · LISTA + DETALLE + CHECKLIST SOP
   ============================================================ */
.eventos-list { display: flex; flex-direction: column; gap: 12px; }
.evento-row {
  display: flex; align-items: center; gap: 24px; padding: 18px 24px;
  text-decoration: none; color: var(--text);
  transition: transform 0.1s, box-shadow 0.12s;
}
.evento-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--text); }
.evento-fecha-bloque {
  display: flex; flex-direction: column; align-items: center;
  width: 76px; padding: 10px 0;
  background: var(--bg-hover); border-radius: var(--r-md);
  flex-shrink: 0;
}
.evento-fecha-bloque .evento-dia { font-size: 28px; font-weight: 700; color: var(--brand-800); line-height: 1; }
.evento-fecha-bloque .evento-mes { font-size: 10px; font-weight: 700; color: var(--text-soft); letter-spacing: 0.1em; margin-top: 4px; }
.evento-fecha-bloque .evento-ano { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.evento-info { flex: 1; min-width: 0; }
.evento-titulo { font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.evento-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); flex-wrap: wrap; }
.evento-progreso { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.evento-progreso-bar { flex: 1; max-width: 300px; height: 6px; background: var(--bg-hover); border-radius: 999px; overflow: hidden; }
.evento-progreso-fill { height: 100%; background: linear-gradient(90deg, var(--brand-400), var(--success)); }
.evento-progreso-text { font-size: 12px; color: var(--text-muted); }

.evento-side { flex-shrink: 0; }
.evento-dias-falta {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 14px; background: var(--brand-100); color: var(--brand-800);
  border-radius: var(--r-md); min-width: 70px;
}
[data-theme="dark"] .evento-dias-falta { background: rgba(143,160,45,0.2); color: var(--brand-300); }
.evento-dias-num { font-size: 24px; font-weight: 700; line-height: 1; }
.evento-dias-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; margin-top: 4px; }

.badge-tipo { background: var(--brand-100); color: var(--brand-800); }
[data-theme="dark"] .badge-tipo { background: rgba(143,160,45,0.18); color: var(--brand-300); }
.badge-planeado    { background: rgba(59,130,246,0.12);  color: var(--info); }
.badge-abierto     { background: rgba(16,185,129,0.12);  color: var(--success); }
.badge-cerrado     { background: rgba(113,113,122,0.12); color: var(--text-soft); }
.badge-realizado   { background: rgba(16,185,129,0.18);  color: var(--success); }
.badge-cancelado   { background: rgba(239,68,68,0.12);   color: var(--danger); }

.evento-hero { display: flex; align-items: center; gap: 32px; margin-bottom: 16px; }
.evento-hero-fecha {
  width: 110px; padding: 18px 0;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: #fff; border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
}
.evento-hero-fecha .evento-dia { font-size: 48px; font-weight: 700; line-height: 1; }
.evento-hero-fecha .evento-mes { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; margin-top: 6px; }
.evento-hero-fecha .evento-ano { font-size: 12px; opacity: 0.8; margin-top: 4px; }
.evento-hero-info { flex: 1; }
.evento-hero-info h2 { margin: 8px 0; font-size: 24px; color: var(--ink); }
.evento-hero-info p { margin: 4px 0; color: var(--text-soft); }
.evento-hero-meta { text-align: right; }
.evento-cupo .big-num.small { font-size: 32px; color: var(--brand-700); }

.card-checklist-header { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 16px; }
.checklist-progreso { text-align: right; }
.checklist-progreso .progress-bar { background: var(--bg-hover); height: 8px; margin-bottom: 4px; }

.semana-block { padding: 0; overflow: hidden; margin-bottom: 12px; }
.semana-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.semana-header h4 { margin: 0; font-size: 15px; color: var(--ink); }
.semana-urgencia { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; display: block; }
.semana-stats { font-size: 14px; font-weight: 600; color: var(--text-soft); }
.semana-red    .semana-header { border-left: 4px solid var(--danger);  }
.semana-orange .semana-header { border-left: 4px solid var(--warning); }
.semana-yellow .semana-header { border-left: 4px solid #eab308;        }
.semana-green  .semana-header { border-left: 4px solid var(--success); }
.semana-blue   .semana-header { border-left: 4px solid var(--info);    }
.semana-purple .semana-header { border-left: 4px solid var(--brand-600); }
.semana-gray   .semana-header { border-left: 4px solid var(--gray-400); }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.checklist-item:last-child { border-bottom: none; }
.check-form { margin: 0; flex-shrink: 0; }
.check-btn {
  border: none; background: transparent; padding: 0; cursor: pointer;
  color: var(--text-muted); display: inline-flex;
  transition: color 0.12s, transform 0.1s;
}
.check-btn:hover { color: var(--success); transform: scale(1.1); }
.checklist-item.done .check-btn { color: var(--success); }
.checklist-body { flex: 1; }
.checklist-tarea { color: var(--text); font-size: 14px; line-height: 1.4; }
.checklist-item.done .checklist-tarea { text-decoration: line-through; color: var(--text-muted); }
.checklist-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--text-soft); }

/* ============================================================
   PIPELINE KANBAN PROSPECTAS
   ============================================================ */
.vista-tabs { display: flex; gap: 4px; }

.pipeline-kpis { display: flex; gap: 12px; margin-bottom: 20px; }
.kpi-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.kpi-pill-num   { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1; }
.kpi-pill-label { font-size: 12px; color: var(--text-soft); }
.kpi-pill.kpi-success .kpi-pill-num { color: var(--success); }

.kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.kanban-col {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  min-height: 320px;
}
.kanban-col-header {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-soft);
}
.kanban-col-count {
  background: var(--bg-hover); padding: 1px 8px; border-radius: 999px;
  color: var(--text); font-size: 11px;
}
.kanban-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kanban-empty { text-align: center; color: var(--text-muted); padding: 24px 0; font-size: 12px; }

.kanban-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px;
  text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.1s, box-shadow 0.12s;
}
.kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--text); }
.kanban-nombre  { font-weight: 600; font-size: 14px; color: var(--ink); }
.kanban-empresa { font-size: 12px; color: var(--text-muted); }
.kanban-meta    { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.kanban-resp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-700); color: #fff; font-size: 11px; font-weight: 700;
}
.kanban-accion {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--text-soft); display: flex; align-items: center; gap: 4px;
}

.kanban-gray   .kanban-col-header { border-bottom-color: var(--gray-400);   }
.kanban-blue   .kanban-col-header { border-bottom-color: var(--info);       }
.kanban-purple .kanban-col-header { border-bottom-color: var(--brand-600);  }
.kanban-orange .kanban-col-header { border-bottom-color: var(--warning);    }
.kanban-green  .kanban-col-header { border-bottom-color: var(--success);    }
.kanban-red    .kanban-col-header { border-bottom-color: var(--danger);     }

.kanban-badge-gray   { background: rgba(113,113,122,0.12); color: var(--text-soft); }
.kanban-badge-blue   { background: rgba(59,130,246,0.12);  color: var(--info);     }
.kanban-badge-purple { background: var(--brand-100); color: var(--brand-800); }
[data-theme="dark"] .kanban-badge-purple { background: rgba(143,160,45,0.2); color: var(--brand-300); }
.kanban-badge-orange { background: rgba(245,158,11,0.12);  color: var(--warning); }
.kanban-badge-green  { background: rgba(16,185,129,0.12);  color: var(--success); }
.kanban-badge-red    { background: rgba(239,68,68,0.12);   color: var(--danger);  }

.etapa-form select {
  width: 100%; padding: 10px 14px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--r-md); color: var(--text); font-size: 14px;
}

/* ============================================================
   GRID CARDS (ponentes, etc.) + PARTICIPACIONES
   ============================================================ */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.ponente-card {
  display: flex; gap: 16px; padding: 18px;
  text-decoration: none; color: var(--text);
  transition: transform 0.1s, box-shadow 0.12s;
}
.ponente-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text); }
.ponente-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; font-size: 22px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ponente-info { flex: 1; min-width: 0; }
.ponente-info h3 { margin: 0 0 2px; font-size: 16px; color: var(--ink); }
.ponente-info p  { margin: 0 0 4px; font-size: 13px; }
.ponente-cargo   { color: var(--text-soft) !important; font-size: 12px !important; }
.ponente-meta    { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; font-size: 12px; }

.participaciones { list-style: none; padding: 0; margin: 0; }
.participaciones li { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.participaciones li:last-child { border-bottom: none; }
.participaciones li a { color: var(--text); }

.filter-divider { display: inline-block; width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ============================================================
   PAQUETES SPONSORS
   ============================================================ */
.paquetes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.paquete-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.paquete-header { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.paquete-header h3 { margin: 12px 0 4px; font-size: 18px; color: var(--ink); }
.paquete-precio { font-size: 32px; font-weight: 700; color: var(--brand-700); margin-bottom: 8px; }
.paquete-precio span { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.paquete-stats { margin-top: 12px; font-size: 13px; color: var(--text-soft); }
.paquete-tier-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg-hover); color: var(--brand-700);
}
.paquete-tier-icon[data-tier="2"] { color: var(--info); }
.paquete-tier-icon[data-tier="3"] { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; }
.paquete-aliado      .paquete-header { border-bottom-color: var(--gray-300); }
.paquete-impulso     .paquete-header { border-bottom-color: var(--info); }
.paquete-estrategico .paquete-header { border-bottom-color: #d97706; }
.paquete-estrategico { box-shadow: 0 0 0 2px rgba(217,119,6,0.15); }
.paquete-beneficios { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.paquete-beneficios li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); line-height: 1.4; }
.paquete-beneficios li svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   DIRECTORIO PÚBLICO (vista sin login)
   ============================================================ */
.public-page { background: var(--bg); min-height: 100vh; }
.public-header { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 16px 0; }
.public-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
main.public-container { display: block; padding: 40px 24px; }
.public-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.public-nav { display: flex; align-items: center; gap: 20px; }
.public-nav a { color: var(--text-soft); font-weight: 500; }
.public-nav a:hover { color: var(--brand-700); }

.public-hero { text-align: center; padding: 24px 0 40px; }
.public-hero h1 { font-size: 36px; margin: 0 0 12px; color: var(--brand-900); }
.public-hero p { font-size: 17px; color: var(--text-soft); max-width: 640px; margin: 0 auto; }

.directorio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 32px 0 40px; }
.directorio-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.directorio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.directorio-foto { width: 100%; height: 240px; object-fit: cover; display: block; }
.directorio-foto-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; font-size: 80px; font-weight: 700;
}
.directorio-body { padding: 20px; }
.directorio-body h3 { margin: 0 0 4px; font-size: 18px; color: var(--ink); }
.directorio-cargo { font-size: 13px; color: var(--brand-700); margin: 0 0 6px; font-weight: 500; }
.directorio-empresa { font-size: 14px; color: var(--text); margin: 0 0 10px; }
.directorio-bio { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 0 0 12px; }
.directorio-redes { display: flex; gap: 10px; }
.directorio-redes a { color: var(--text-muted); display: inline-flex; }
.directorio-redes a:hover { color: var(--brand-700); }

.public-cta { background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); color: #fff; padding: 40px; border-radius: var(--r-xl); text-align: center; margin: 40px 0; }
.public-cta h2 { color: #fff; margin: 0 0 12px; font-size: 28px; }
.public-cta p { color: rgba(255,255,255,0.9); margin: 0 0 20px; }
.public-cta .btn { background: #fff; color: var(--brand-800) !important; }

.public-footer { padding: 24px 0; border-top: 1px solid var(--border); color: var(--text-soft); text-align: center; font-size: 13px; }

/* ============================================================
   KPIs SECCION
   ============================================================ */
.seccion-kpis { padding: 0; overflow: hidden; margin-bottom: 16px; }
.seccion-kpis-header { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-elev); border-left: 4px solid var(--gray-400); }
.seccion-kpis-header h3 { margin: 0; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 10px; }

/* ============================================================
   FINANZAS — Proyección vs Real (estilo Excel HF)
   ============================================================ */
.proyeccion-card { padding: 16px 0 0; margin-bottom: 16px; }
.proyeccion-card .card-title { padding: 0 20px; }
.proyeccion-scroll { overflow-x: auto; max-width: 100%; }
.proyeccion-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  min-width: 920px;
}
.proyeccion-table th, .proyeccion-table td {
  padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.proyeccion-table th {
  background: var(--bg-elev); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); text-align: center; position: sticky; top: 0;
}
.proyeccion-table th.sticky-col, .proyeccion-table td.sticky-col {
  position: sticky; left: 0; background: var(--bg-card);
  text-align: left; min-width: 200px; max-width: 240px; z-index: 2;
  white-space: normal;
}
.proyeccion-table .proyec-row td.cell-p { color: var(--text-muted); font-style: italic; }
.proyeccion-table .real-row td.cell-r {
  font-weight: 600; color: var(--ink);
  border-top: 1px dotted transparent;
}
.proyeccion-table .real-row.totales-row td { background: rgba(124,31,74,0.04); }
.proyeccion-table .proyec-row.totales-row td { background: rgba(124,31,74,0.04); }
.proyeccion-table td.col-total {
  background: var(--bg-elev); font-weight: 700;
  border-left: 2px solid var(--brand-200);
}
.proyeccion-table .r-ok { color: var(--success); }
.proyeccion-table .r-mid { color: var(--warning); }
.proyeccion-table .r-low { color: var(--danger); }
.proyeccion-table tr.real-row td { background: rgba(0,0,0,0.015); }
[data-theme="dark"] .proyeccion-table tr.real-row td { background: rgba(255,255,255,0.02); }

.proy-leyenda { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.proy-p { background: var(--text-muted); opacity: 0.4; }
.proy-r { background: var(--ink); }
.proy-ok { background: var(--success); }
.proy-mid { background: var(--warning); }
.proy-low { background: var(--danger); }

/* Prioridad pasivos badges */
.prio-urgente { background: rgba(239,68,68,0.18); color: var(--danger); }
.prio-alta    { background: rgba(245,158,11,0.18); color: var(--warning); }
.prio-media   { background: var(--bg-hover); color: var(--text-soft); }
.prio-baja    { background: rgba(16,185,129,0.12); color: var(--success); }
.prio-aclarar { background: rgba(99,102,241,0.15); color: #6366f1; }

/* ============================================================
   CIRKLE GRID — cards de socias estilo Cirkle/BuddyBoss
   ============================================================ */
.cirkle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.cirkle-card {
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column;
}
.cirkle-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cirkle-cover {
  height: 70px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-800));
}
.cirkle-photo-wrap {
  display: flex; justify-content: center;
  margin-top: -36px; position: relative; z-index: 1;
}
.cirkle-photo {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid var(--bg-card); object-fit: cover;
  background: var(--bg-card);
}
.cirkle-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
  color: #fff; font-size: 28px; font-weight: 700;
}
.cirkle-body {
  padding: 14px 18px 20px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;  /* el cuerpo llena la tarjeta para que el botón quede al fondo */
}
.cirkle-body h3 {
  margin: 4px 0 2px; font-size: 15px; color: var(--ink);
  min-height: 2.6em; display: flex; align-items: center; justify-content: center;
}
.cirkle-cargo { font-size: 12px; color: var(--brand-700); font-weight: 500; margin: 0; min-height: 1.1em; }
.cirkle-empresa {
  font-size: 13px; color: var(--text); margin: 0;
  min-height: 2.4em; display: flex; align-items: center; justify-content: center;
}
.cirkle-since { font-size: 11px; margin-top: 4px; }

.cirkle-badges {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 12px; flex-wrap: wrap;
}
.cirkle-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-hover); color: var(--text-soft);
  font-size: 11px; font-weight: 600;
}
.cirkle-b-gold   { background: linear-gradient(135deg,#fbbf24,#d97706); color: #fff; }
.cirkle-b-rose   { background: rgba(232,180,200,0.4); color: var(--brand-800); }
.cirkle-b-pink   { background: rgba(244,114,182,0.25); color: #be185d; }
.cirkle-b-purple { background: var(--brand-100); color: var(--brand-800); }
.cirkle-b-orange { background: rgba(245,158,11,0.2); color: var(--warning); }
.cirkle-b-green  { background: rgba(16,185,129,0.2); color: var(--success); }
.cirkle-b-more   { background: var(--bg-hover); color: var(--text); }
[data-theme="dark"] .cirkle-b-rose,
[data-theme="dark"] .cirkle-b-purple { color: var(--brand-300); }

.cirkle-actions {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cirkle-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--bg-hover); color: var(--text-soft);
  transition: all 0.15s;
}
.cirkle-action:hover { background: var(--brand-700); color: #fff; }

/* ============================================================
   LAYOUT SOCIA (Mi Área) — distinto al admin
   ============================================================ */
.socia-page { background: var(--bg); min-height: 100vh; }
.socia-topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.socia-topbar-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 0 24px; height: 68px;
  display: flex; align-items: center; gap: 20px;
}
.socia-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.socia-nav { display: flex; gap: 4px; flex: 1; flex-wrap: nowrap; justify-content: center; }
.socia-nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 13px; border-radius: var(--r-md);
  color: var(--text-soft); font-weight: 500; font-size: 14px;
  text-decoration: none; white-space: nowrap;
  transition: all 0.15s;
}
.socia-nav-item:hover { background: var(--bg-hover); color: var(--ink); }
.socia-nav-item.is-active { background: var(--bg-active); color: var(--brand-800); }
[data-theme="dark"] .socia-nav-item.is-active { color: var(--brand-300); }
.socia-user { display: flex; align-items: center; gap: 8px; }
/* Igualar el toggle de tema (visor claro/oscuro) con el botón de ayuda (?): mismo box, sin chrome de <button>, alineados */
.socia-user .icon-btn {
  width: 38px; height: 38px; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; box-shadow: none;
}
.socia-user .icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
.socia-user .theme-toggle .theme-icon-light,
.socia-user .theme-toggle .theme-icon-dark { display: inline-flex; align-items: center; justify-content: center; }
.socia-main { padding: 0 0 64px; }

.socia-container { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.socia-hero {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: #fff; padding: 48px 0;
  margin-bottom: 32px;
}
.socia-hero h1 { font-size: 32px; margin: 6px 0 4px; color: #fff; font-weight: 600; letter-spacing: -0.02em; }
.socia-hero p { margin: 0; color: rgba(255,255,255,0.85); font-size: 15px; }
.socia-page-header { padding: 32px 0 16px; }
.socia-page-header h1 { font-size: 28px; margin: 0 0 6px; color: var(--ink); font-weight: 600; }
.socia-page-header p { color: var(--text-soft); margin: 0; }

.socia-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 16px;
}
.socia-grid .card-wide { grid-column: 1 / -1; }

/* Tarjeta de membresía destacada */
.socia-tarjeta {
  grid-row: span 2;
  padding: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%);
  color: #fff; border: none;
}
.socia-tarjeta-band {
  background: rgba(0,0,0,0.15);
  padding: 12px 20px;
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.socia-tarjeta-body { padding: 32px 24px; text-align: center; }
.socia-avatar-xl {
  width: 96px; height: 96px; border-radius: 50%;
  margin: 0 auto 18px;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 700;
}
.socia-tarjeta h2 { color: #fff; margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.socia-tarjeta p { color: rgba(255,255,255,0.85); margin: 0; font-size: 14px; }
.socia-tarjeta .socia-empresa { font-weight: 600; color: #fff; margin-top: 4px; }
.socia-tarjeta-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.socia-tarjeta-meta > div { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.socia-tarjeta-meta .lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

/* Responsive Mi Área */
@media (max-width: 980px) {
  .socia-grid { grid-template-columns: 1fr 1fr; }
  .socia-tarjeta { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 720px) {
  .socia-topbar-inner { padding: 0 16px; height: auto; flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .socia-nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .socia-nav-item span { display: none; }
  .socia-grid { grid-template-columns: 1fr; }
  .user-chip { display: none; }
  .socia-hero h1 { font-size: 24px; }
}

/* ============================================================
   RESPONSIVE — PASADA FINAL
   ============================================================ */
@media (max-width: 1024px) {
  .show-grid { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
  .form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.2s; width: 280px; }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .card-hero { grid-column: span 1; }
  .user-chip { display: none; }
  .topbar { padding: 0 16px; }
  .topbar-right { gap: 6px; }
  .kanban { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .evento-row { flex-direction: row; padding: 14px 16px; gap: 12px; }
  .evento-side { display: none; }
  .public-hero h1 { font-size: 28px; }
  .public-nav a:not(.btn) { display: none; }
}
@media (max-width: 640px) {
  .content { padding: 16px; }
  .auth-card { padding: 28px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-span-2 { grid-column: 1; }
  .kanban { grid-template-columns: 1fr; }
  .page-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-actions > * { width: 100%; }
  .search-form { max-width: none !important; }
  .filter-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { font-size: 13px; }
  .data-table th, .data-table td { padding: 10px 8px; }
  .data-table th:nth-child(n+5), .data-table td:nth-child(n+5) { display: none; } /* esconder columnas secundarias en móvil */
  .evento-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .evento-hero-meta { text-align: left; }
  .show-header { flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; }
  .show-avatar { width: 64px; height: 64px; font-size: 24px; }
  .card-checklist-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pipeline-kpis { flex-direction: column; }
  .kpi-pill { width: 100%; }
  .grid-cards { grid-template-columns: 1fr; }
  .directorio-grid { grid-template-columns: 1fr; }
  .paquetes-grid { grid-template-columns: 1fr; }
  .big-num { font-size: 42px; }
  .topbar { height: 56px; }
  .page-title { font-size: 16px; }
}
@media (max-width: 420px) {
  .auth-card { padding: 24px 16px; }
  .auth-card h1 { font-size: 18px; }
  .code-input { font-size: 22px !important; letter-spacing: 8px; }
}

/* ─────────── VISTA EVENTOS: toggle Lista/Calendario + grid mensual (socia y admin) ─────────── */
.eventos-vista-toggle{display:inline-flex;gap:4px;background:var(--bg-elev,#f1f1ea);padding:4px;border-radius:10px;margin:0 0 12px;}
.vista-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text-soft);text-decoration:none;}
.vista-tab.is-active{background:var(--bg-card,#fff);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10);}
.cal-head{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 16px;}
.cal-title{font-size:20px;margin:0;color:var(--ink);}
.cal-nav{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;color:var(--text-soft);text-decoration:none;}
.cal-nav:hover{background:var(--bg-hover);color:var(--ink);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-dow{text-align:center;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--text-soft);padding:4px 0;text-transform:uppercase;}
.cal-cell{min-height:94px;border:1px solid var(--border,#e7e7df);border-radius:10px;padding:6px;background:var(--bg-card,#fff);display:flex;flex-direction:column;gap:3px;}
.cal-empty{border:0;background:transparent;}
.cal-day{font-size:12px;font-weight:700;color:var(--text-soft);}
.cal-today{border-color:var(--brand-600,#8FA02D);box-shadow:0 0 0 1px var(--brand-600,#8FA02D);}
.cal-today .cal-day{color:var(--brand-700,#6B7A22);}
.cal-ev{display:flex;align-items:center;gap:3px;font-size:11px;line-height:1.2;padding:3px 5px;border-radius:5px;text-decoration:none;background:#eef2cf;color:#4a5510;overflow:hidden;}
.cal-ev-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-ev.t-gala{background:#f3e1ee;color:#7a2e63;}
.cal-ev.t-cumbre{background:#dff0e4;color:#1f5a37;}
.cal-ev.t-cierre{background:#fdeccc;color:#8a5a12;}
.cal-ev.t-taller,.cal-ev.t-mesa{background:#e0eef6;color:#235a7a;}
.cal-ev.t-nacional{background:#e6ecf7;color:#2a4a8a;}
.cal-ev.t-otro{background:#ececec;color:#444;}
.cal-ev.c-curso{background:#e0eef6;color:#235a7a;border-left:3px solid #235a7a;}
.evento-row:target{box-shadow:0 0 0 2px var(--brand-600,#8FA02D);transition:box-shadow .3s;}
@media (max-width:640px){
  .cal-grid{gap:3px;}
  .cal-cell{min-height:66px;padding:3px;border-radius:7px;}
  .cal-day{font-size:11px;}
  .cal-ev{font-size:9px;padding:2px 3px;gap:2px;}
  .cal-dow{font-size:9px;}
  .cal-title{font-size:17px;}
}

/* ─── Logo de marca en header (login, sidebar admin, topbar socia) ─── */
.brand-logo{height:30px;width:auto;display:block;flex-shrink:0;}
[data-theme="dark"] .brand-logo{filter:brightness(0) invert(.92);}
@media (max-width:640px){ .brand-logo{height:26px;} }