/* ============================================================
   CHURCH CENTER — Documentación de usuario
   Mismo sistema de diseño "Lumen" que la app (frontend/src/index.css)
   ============================================================ */

:root{
  --bg-base:     #F5F5F5;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #FAFAFA;
  --bg-hover:    rgba(0,0,0,.04);
  --bg-active:   rgba(0,0,0,.08);

  --border:        #E6E6E6;
  --border-strong: #D0D0D0;

  --text:        #0D0D0D;
  --text-strong: #0D0D0D;
  --text-muted:  #6B7280;

  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-subtle: rgba(37,99,235,.09);
  --accent-muted:  rgba(37,99,235,.18);

  --success: #22C55E;
  --danger:  #EF4444;
  --warning: #F59E0B;

  --r:    14px;
  --r-sm: 10px;
  --r-lg: 18px;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow-card:  0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-hover: 0 8px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

  --glass: rgba(255,255,255,.93);

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', monospace;
  --snap: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='dark']{
  --bg-base:     #0d0d14;
  --bg-surface:  #141729;
  --bg-elevated: #1E2235;
  --bg-hover:    #252B40;
  --bg-active:   #2C3357;

  --border:        rgba(148,163,184,.09);
  --border-strong: rgba(148,163,184,.18);

  --text:        #94A3B8;
  --text-strong: #E2E8F0;
  --text-muted:  #475569;

  --accent:        #3B82F6;
  --accent-hover:  #60A5FA;
  --accent-subtle: rgba(59,130,246,.12);
  --accent-muted:  rgba(59,130,246,.25);

  --success: #34D399;
  --danger:  #F87171;
  --warning: #FBBF24;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
  --shadow-card:  0 2px 12px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.25);
  --shadow-hover: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);

  --glass: rgba(20,23,41,.95);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ color-scheme: light dark; }

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg-base);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color .2s, color .2s;
}

a{ color:var(--accent); }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--bg-base); }
::-webkit-scrollbar-thumb{ background:rgba(148,163,210,.25); border-radius:99px; }

.eyebrow{
  font:700 10px/1 var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--text-muted);
}

/* ============================================================
   HEADER
   ============================================================ */
.docs-header{
  width:100%;
  background:var(--glass);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  position:sticky; top:0; z-index:100;
}
.docs-header-inner{
  display:flex; align-items:center; gap:16px;
  height:58px;
  max-width:1360px; margin:0 auto; padding:0 24px;
}
.docs-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex-shrink:0; }
.docs-logo-sq{
  width:32px; height:32px; border-radius:9px;
  background:var(--text-strong);
  display:flex; align-items:center; justify-content:center;
  font:700 12px/1 var(--font); color:var(--bg-surface); flex-shrink:0;
}
.docs-logo-name{ font:600 14px/1.2 var(--font); letter-spacing:-.01em; color:var(--text); }
.docs-logo-name small{ display:block; font:500 11px var(--font); color:var(--text-muted); margin-top:2px; }

.docs-header-spacer{ flex:1; }

.docs-search{
  position:relative; width:220px; max-width:40vw;
}
.docs-search input{
  width:100%; height:34px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--bg-elevated);
  color:var(--text); font:500 13px var(--font);
  padding:0 12px 0 32px; outline:none;
}
.docs-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-subtle); }
.docs-search .material-symbols-outlined{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  font-size:16px; color:var(--text-muted); pointer-events:none;
}

.docs-icon-btn{
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--bg-surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text); flex-shrink:0;
  transition:background .15s, border-color .15s;
}
.docs-icon-btn:hover{ background:var(--bg-hover); border-color:var(--border-strong); }
.docs-icon-btn .material-symbols-outlined{ font-size:18px; }
.docs-icon-btn .icon-dark{ display:none; }
[data-theme='dark'] .docs-icon-btn .icon-light{ display:none; }
[data-theme='dark'] .docs-icon-btn .icon-dark{ display:block; }

.docs-role-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent-subtle); color:var(--accent);
  font:700 11px/1 var(--font); text-transform:uppercase; letter-spacing:.04em;
  padding:7px 12px; border-radius:99px; white-space:nowrap;
}

.docs-menu-btn{ display:none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.docs-layout{
  max-width:1360px; margin:0 auto; padding:0 24px;
  display:flex; align-items:flex-start; gap:32px;
}

.docs-sidebar{
  width:220px; flex-shrink:0;
  position:sticky; top:82px;
  max-height:calc(100vh - 100px);
  overflow-y:auto; scrollbar-width:none;
  padding:24px 0 40px;
  display:flex; flex-direction:column; gap:1px;
}
.docs-sidebar::-webkit-scrollbar{ display:none; }

.docs-sidebar-label{
  padding:14px 12px 6px;
  font:700 10px var(--font-mono); text-transform:uppercase;
  letter-spacing:.16em; color:var(--text-muted);
}
.docs-sidebar-label:first-child{ padding-top:0; }

.docs-navitem{
  display:flex; align-items:center; gap:9px;
  padding:8px 12px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500; color:var(--text-muted);
  text-decoration:none; cursor:pointer; border:none; background:none;
  width:100%; text-align:left;
  transition:background .15s, color .15s;
}
.docs-navitem:hover{ background:var(--bg-hover); color:var(--text); }
.docs-navitem.active{ background:var(--text-strong); color:var(--bg-surface); font-weight:600; }
[data-theme='dark'] .docs-navitem.active{ background:var(--accent-subtle); color:var(--accent-hover); }
.docs-navitem .material-symbols-outlined{ font-size:19px; flex-shrink:0; }
.docs-navitem[hidden]{ display:none; }

.docs-sidebar-sep{ height:1px; background:var(--border); margin:10px 4px; }

.docs-sidebar-foot{
  margin-top:16px; padding:12px; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--bg-elevated); font-size:12px; color:var(--text-muted); line-height:1.5;
}
.docs-sidebar-foot a{ font-weight:600; }

/* ============================================================
   CONTENT
   ============================================================ */
.docs-content{ flex:1; min-width:0; padding:28px 0 80px; max-width:840px; }

.docs-panel{ animation:docsFadeIn .2s var(--snap) both; }
@keyframes docsFadeIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none; } }

.docs-panel h1{ font-size:26px; font-weight:700; letter-spacing:-.01em; margin:6px 0 12px; color:var(--text-strong); }
.docs-panel h2{ font-size:17px; font-weight:700; margin:32px 0 10px; color:var(--text-strong); }
.docs-panel h2:first-of-type{ margin-top:24px; }
.docs-panel p{ line-height:1.7; color:var(--text); margin:0 0 14px; font-size:14.5px; }
.docs-panel .lead{ font-size:16px; color:var(--text-strong); }
.docs-panel ul{ margin:0 0 16px; padding-left:20px; line-height:1.7; color:var(--text); font-size:14.5px; }
.docs-panel li{ margin-bottom:4px; }
.docs-panel strong{ color:var(--text-strong); }

code{
  background:var(--bg-elevated); border:1px solid var(--border);
  padding:1px 6px; border-radius:5px; font-family:var(--font-mono); font-size:13px;
}

.callout{
  background:var(--accent-subtle); border:1px solid var(--accent-muted);
  border-left:3px solid var(--accent);
  padding:14px 16px; border-radius:var(--r-sm);
  margin:16px 0 22px; font-size:14px; line-height:1.6; color:var(--text-strong);
}
.callout strong{ color:var(--text-strong); }
.callout.tip{ background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.3); border-left-color:var(--success); }
.callout.warn{ background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); border-left-color:var(--warning); }

figure{
  margin:16px 0 26px; background:var(--bg-surface);
  border:1px solid var(--border); border-radius:var(--r);
  padding:10px; box-shadow:var(--shadow-card);
}
figure img{ width:100%; display:block; border-radius:8px; border:1px solid var(--border); }
figcaption{ font-size:12.5px; color:var(--text-muted); margin-top:9px; padding:0 4px; line-height:1.5; }

.badge{
  display:inline-block; background:var(--accent-subtle); color:var(--accent);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 11px; border-radius:99px; margin-bottom:16px;
}

.footer-note{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--border);
  color:var(--text-muted); font-size:12px; line-height:1.6;
}

/* ============================================================
   HUB (index.html — selector de perfil)
   ============================================================ */
.hub-hero{ max-width:760px; margin:64px auto 8px; padding:0 24px; text-align:center; }
.hub-hero h1{ font-size:34px; font-weight:700; letter-spacing:-.02em; margin:0 0 12px; color:var(--text-strong); }
.hub-hero p{ font-size:15.5px; color:var(--text-muted); line-height:1.6; margin:0 auto; max-width:520px; }

.hub-grid{
  max-width:1000px; margin:40px auto 100px; padding:0 24px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px;
}
.hub-card{
  position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--shadow-card);
  transition:transform .18s var(--snap), box-shadow .18s var(--snap), border-color .18s;
  overflow:hidden;
}
.hub-card.enabled:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--border-strong); }
.hub-card.disabled{ opacity:.55; cursor:default; }
.hub-card-icon{
  width:44px; height:44px; border-radius:var(--r-sm); background:var(--accent-subtle); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.hub-card-icon .material-symbols-outlined{ font-size:24px; }
.hub-card h3{ font-size:16px; font-weight:700; margin:0 0 6px; color:var(--text-strong); }
.hub-card p{ font-size:13px; color:var(--text-muted); line-height:1.55; margin:0 0 14px; }
.hub-card-status{
  display:inline-flex; align-items:center; gap:6px;
  font:700 10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em;
}
.hub-card-status.ready{ color:var(--success); }
.hub-card-status.soon{ color:var(--text-muted); }
.hub-card-status .dot{ width:6px; height:6px; border-radius:99px; background:currentColor; }
.hub-card .material-symbols-outlined.arrow{
  position:absolute; top:22px; right:22px; font-size:18px; color:var(--text-muted);
  transition:transform .18s var(--snap);
}
.hub-card.enabled:hover .arrow{ transform:translate(3px,-3px); color:var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.docs-footer{
  background:var(--text-strong); color:var(--bg-surface);
  margin-top:40px;
}
[data-theme='dark'] .docs-footer{ background:#000; }
.docs-footer-inner{
  max-width:1360px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12px; color:rgba(255,255,255,.6);
}
.docs-footer-inner a{ color:rgba(255,255,255,.85); text-decoration:none; }
.docs-footer-inner a:hover{ text-decoration:underline; }
.docs-footer-brand{ display:flex; align-items:center; gap:8px; color:#fff; font-weight:600; }
.docs-footer-status{ display:flex; align-items:center; gap:6px; }
.docs-footer-status .dot{ width:6px; height:6px; border-radius:99px; background:var(--success); }

/* ============================================================
   QUICK FACTS ROW (intro strip of small stats)
   ============================================================ */
.quickfacts{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:18px 0 26px;
}
.quickfact{
  display:flex; flex-direction:column; gap:2px;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:10px 14px; min-width:110px;
}
.quickfact b{ font-size:19px; color:var(--text-strong); line-height:1.1; }
.quickfact span{ font:700 10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }

/* ============================================================
   FEATURE / HUB OVERVIEW CARDS  (non-link variant of .hub-card)
   ============================================================ */
.feature-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:14px;
  margin:18px 0 26px;
}
.feature-card{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r);
  padding:18px; box-shadow:var(--shadow-card);
}
.feature-card .feature-icon{
  width:38px; height:38px; border-radius:var(--r-sm); background:var(--accent-subtle); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.feature-card .feature-icon .material-symbols-outlined{ font-size:20px; }
.feature-card h4{ font-size:14.5px; font-weight:700; margin:0 0 6px; color:var(--text-strong); }
.feature-card p{ font-size:13px; color:var(--text-muted); line-height:1.55; margin:0; }

/* ============================================================
   PERMISSION / DATA TABLE
   ============================================================ */
.docs-table-wrap{ overflow-x:auto; margin:16px 0 26px; border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-card); }
table.docs-table{ width:100%; border-collapse:collapse; font-size:13px; background:var(--bg-surface); }
table.docs-table th, table.docs-table td{ padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
table.docs-table td:nth-child(1), table.docs-table th:nth-child(1){ white-space:normal; min-width:150px; }
table.docs-table thead th{
  background:var(--bg-elevated); color:var(--text-muted);
  font:700 10.5px var(--font-mono); text-transform:uppercase; letter-spacing:.06em;
  position:sticky; top:0;
}
table.docs-table tbody tr:last-child td{ border-bottom:none; }
table.docs-table tbody tr:hover{ background:var(--bg-hover); }
.perm-yes{ color:var(--success); font-weight:700; }
.perm-no{ color:var(--text-muted); }
.perm-partial{ color:var(--warning); font-weight:700; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-item{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-sm);
  margin-bottom:8px; overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:14px 16px;
  font-size:14px; font-weight:600; color:var(--text-strong);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'expand_more'; font-family:'Material Symbols Outlined'; font-size:18px;
  color:var(--text-muted); transition:transform .18s var(--snap); flex-shrink:0;
}
.faq-item[open] summary::after{ transform:rotate(180deg); }
.faq-item[open] summary{ border-bottom:1px solid var(--border); }
.faq-item p{ padding:4px 16px 15px; margin:0; font-size:13.5px; color:var(--text); line-height:1.65; }

/* ============================================================
   TOC / SECTION NAV CHIP (jump links within a panel)
   ============================================================ */
.docs-chiplist{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.docs-chip{
  font:600 12px var(--font); color:var(--text); text-decoration:none;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:99px;
  padding:6px 13px; transition:background .15s, border-color .15s;
}
.docs-chip:hover{ background:var(--bg-hover); border-color:var(--border-strong); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .docs-search{ display:none; }
  .docs-menu-btn{ display:flex; }
  .docs-layout{ gap:0; }
  .docs-sidebar{
    position:fixed; top:58px; left:0; bottom:0; width:260px;
    background:var(--bg-surface); border-right:1px solid var(--border);
    z-index:90; padding:16px; transform:translateX(-100%);
    transition:transform .22s var(--snap); box-shadow:var(--shadow-hover);
    max-height:none;
  }
  .docs-sidebar.open{ transform:translateX(0); }
  .docs-sidebar-overlay{
    display:none; position:fixed; inset:58px 0 0 0; background:rgba(0,0,0,.35); z-index:80;
  }
  .docs-sidebar-overlay.open{ display:block; }
  .docs-content{ padding-top:20px; max-width:100%; }
  .hub-hero{ margin-top:36px; }
}