/* ================================================================
   COWORKING DE BELLEZA — DOCS (estilo Docusaurus)
   Sidebar de navegación + contenido central + "en esta página" +
   paginación anterior/siguiente. Tema claro con modo oscuro.
   Acento: rosa salón (en vez del verde/azul por defecto de
   Docusaurus, para que siga siendo un documento de este negocio).
   ================================================================ */

:root{
  --bg:            #ffffff;
  --bg-alt:        #f6f7f9;
  --bg-hover:      #eef0f3;
  --ink:           #1c1e21;
  --ink-soft:      #565962;
  --border:        #e3e5e8;
  --primary:       #c2185b;
  --primary-dark:  #99123f;
  --primary-soft:  #fce4ec;
  --ok:            #2e8555;
  --ok-bg:         #e6f6ec;
  --warn:          #a66a00;
  --warn-bg:       #fff8e6;
  --bad:           #e13238;
  --bad-bg:        #ffebec;
  --shadow:        0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --radius:        10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1b1b1d; --bg-alt:#242526; --bg-hover:#2c2d2f; --ink:#e6e6e6; --ink-soft:#a8a9ac;
    --border:#3b3d40; --primary:#f48fb1; --primary-dark:#f8bbd0; --primary-soft:#3a2430;
    --ok:#8fcb9b; --ok-bg:#1f3327; --warn:#e3c17c; --warn-bg:#3a3020; --bad:#e2958e; --bad-bg:#3c2521;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1b1b1d; --bg-alt:#242526; --bg-hover:#2c2d2f; --ink:#e6e6e6; --ink-soft:#a8a9ac;
  --border:#3b3d40; --primary:#f48fb1; --primary-dark:#f8bbd0; --primary-soft:#3a2430;
  --ok:#8fcb9b; --ok-bg:#1f3327; --warn:#e3c17c; --warn-bg:#3a3020; --bad:#e2958e; --bad-bg:#3c2521;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.35);
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink); }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; font-size:18px;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
strong{ font-weight:700; }
.muted{ color:var(--ink-soft); }
.mono{ font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums; }
code{
  font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:5px; padding:.1em .4em; font-size:.9em;
}

/* ---------------- NAVBAR ---------------- */
.navbar{
  position:sticky; top:0; z-index:200; height:60px; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0 1.25rem; background:var(--bg); border-bottom:1px solid var(--border);
}
.navbar-left{ display:flex; align-items:center; gap:.8rem; min-width:0; }
.menu-toggle{
  display:none; border:1px solid var(--border); background:var(--bg-alt); border-radius:8px; width:36px; height:36px;
  align-items:center; justify-content:center; cursor:pointer; color:var(--ink); font-size:1.1rem; flex:none;
}
.navbar-brand{ display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.02rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.navbar-brand .logo{
  width:28px; height:28px; border-radius:8px; background:var(--primary); color:#fff; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:.95rem;
}
.navbar-right{ display:flex; align-items:center; gap:.6rem; flex:none; }
.theme-toggle{
  border:1px solid var(--border); background:var(--bg-alt); border-radius:8px; width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.05rem; color:var(--ink);
}
.theme-toggle:hover{ background:var(--bg-hover); }

/* ---------------- LAYOUT ---------------- */
.layout{ display:flex; max-width:1500px; margin:0 auto; align-items:flex-start; }

.sidebar{
  width:270px; flex:none; position:sticky; top:60px; align-self:flex-start;
  height:calc(100dvh - 60px); overflow-y:auto; border-right:1px solid var(--border);
  padding:1.4rem 1rem 2rem;
}
.sidebar-group-label{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  padding:.4rem .7rem; margin-top:.5rem;
}
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li a{
  display:flex; gap:.6rem; align-items:center; padding:.48rem .7rem; border-radius:7px; font-size:1rem;
  color:var(--ink); text-decoration:none;
}
.sidebar li a .num{ font-family:ui-monospace,monospace; font-size:.78em; color:var(--ink-soft); flex:none; }
.sidebar li a .icon{ font-size:1.15em; line-height:1; flex:none; }
.sidebar li a:hover{ background:var(--bg-hover); text-decoration:none; }
.sidebar li a.current{ background:var(--primary-soft); color:var(--primary-dark); font-weight:600; }
.sidebar li a.current .num{ color:var(--primary-dark); }
.sidebar-overlay{ display:none; }

.doc-main{ flex:1; min-width:0; padding:2.4rem clamp(1.1rem,4vw,3.2rem); }
.doc-content{ max-width:760px; margin:0 auto; }

.breadcrumbs{ font-size:.95rem; color:var(--ink-soft); margin-bottom:1.1rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.breadcrumbs a{ color:var(--ink-soft); }
.breadcrumbs a:hover{ color:var(--primary); }
.breadcrumbs .sep{ opacity:.6; }

.doc-content h1{ font-size:2.3rem; font-weight:800; line-height:1.15; margin:0 0 .9rem; display:flex; align-items:center; gap:.5rem; }
.doc-content h1 .icon-lg{ font-size:1.15em; line-height:1; }
.doc-content .lead{ font-size:1.25rem; color:var(--ink-soft); margin:0 0 1.6rem; }
.doc-content h2{
  font-size:1.6rem; font-weight:700; margin:2.4rem 0 .9rem; padding-top:1.4rem; border-top:1px solid var(--border);
  scroll-margin-top:76px;
}
.doc-content h2:first-of-type{ border-top:none; padding-top:0; margin-top:1.4rem; }
.doc-content h3{ font-size:1.25rem; font-weight:700; margin:1.4rem 0 .6rem; scroll-margin-top:76px; }
.doc-content p{ margin:0 0 1.1rem; max-width:70ch; font-size:1.08rem; }
.doc-content ul,.doc-content ol{ margin:0 0 1.1rem; padding-left:1.3rem; }
.doc-content li{ margin-bottom:.5rem; font-size:1.08rem; }
.doc-content li::marker{ color:var(--primary); }

/* ---------------- TOC (a la derecha) ---------------- */
.toc{
  width:230px; flex:none; position:sticky; top:76px; align-self:flex-start; padding:0 1rem 1rem 1.4rem;
  max-height:calc(100dvh - 90px); overflow-y:auto;
}
.toc-title{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.7rem; }
.toc ul{ list-style:none; margin:0; padding:0; border-left:2px solid var(--border); }
.toc li a{ display:block; padding:.35rem .85rem; font-size:.93rem; color:var(--ink-soft); text-decoration:none; }
.toc li a:hover{ color:var(--primary); }

/* ---------------- BLOQUES DE CONTENIDO ---------------- */
.cols{ display:grid; gap:1.3rem; margin:1.2rem 0; }
.cols-2{ grid-template-columns:1fr 1fr; }
.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .cols-2,.cols-3{ grid-template-columns:1fr; } }

.callout{
  border:1px solid var(--border); border-left:4px solid var(--primary); background:var(--bg-alt);
  border-radius:var(--radius); padding:1.1rem 1.3rem; margin:1.3rem 0;
}
.callout.ok{ border-color:var(--ok); background:var(--ok-bg); }
.callout.warn{ border-color:var(--warn); background:var(--warn-bg); }
.callout.bad{ border-color:var(--bad); background:var(--bad-bg); }
.callout .tag{ display:block; font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--primary); margin-bottom:.5rem; }
.callout.ok .tag{ color:var(--ok); } .callout.warn .tag{ color:var(--warn); } .callout.bad .tag{ color:var(--bad); }
.callout p,.callout li{ font-size:1.02rem; }
.callout p:last-child,.callout ul:last-child{ margin-bottom:0; }
.callout h3{ margin-top:0; }

.tag{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:999px; padding:.32rem .8rem; margin-bottom:.7rem;
}

/* ---------------- TABLAS ---------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); margin:1.3rem 0; }
table{ width:100%; border-collapse:collapse; font-size:1rem; }
th{ text-align:left; font-weight:700; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--bg-alt); padding:.75rem .9rem; border-bottom:1px solid var(--border); }
td{ padding:.8rem .9rem; border-bottom:1px solid var(--border); vertical-align:top; }
tr:last-child td{ border-bottom:none; }

.sem-dot{ display:inline-block; padding:.24rem .7rem; border-radius:999px; font-size:.84rem; font-weight:700; white-space:nowrap; }
.sem-ok{ background:var(--ok-bg); color:var(--ok); }
.sem-warn{ background:var(--warn-bg); color:var(--warn); }
.sem-bad{ background:var(--bad-bg); color:var(--bad); }

/* ---------------- KPI / BARRA DE INGRESOS ---------------- */
.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.2rem 0; }
.kpi{ text-align:center; padding:1.2rem .6rem; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); }
.kpi .num{ font-size:2.1rem; font-weight:800; color:var(--primary); display:block; }
.kpi .label{ font-size:.86rem; color:var(--ink-soft); margin-top:.35rem; display:block; }
@media (max-width:640px){ .kpi-row{ grid-template-columns:1fr; } }

.revbar-track{ display:flex; height:2.2rem; border-radius:999px; overflow:hidden; margin-top:.8rem; }
.revseg{ display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.78rem; color:#fff; }
.revseg.real{ background:var(--primary); }
.revseg.goal1{ background:var(--ok); opacity:.85; }
.revseg.goal2{ background:var(--ok); opacity:.55; }
.revbar-legend{ display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:.8rem; font-size:.9rem; color:var(--ink-soft); }
.revbar-legend span{ display:inline-flex; align-items:center; gap:.45rem; }
.revbar-legend i{ width:.85rem; height:.85rem; border-radius:3px; display:inline-block; }

/* ---------------- PLANTA DEL LOCAL ---------------- */
.floorplan{ display:grid; grid-template-columns:1.5fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:1.2rem 0; }
.fp-side{ display:grid; grid-template-rows:1fr 1fr; gap:1px; background:var(--border); }
.fp-cell{ background:var(--bg); padding:1.2rem; display:flex; flex-direction:column; gap:.55rem; justify-content:center; }
.fp-label{ font-weight:700; font-size:1.12rem; }
.fp-status{ font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; padding:.24rem .65rem; border-radius:999px; width:fit-content; font-weight:700; }
.fp-status.ok{ background:var(--ok-bg); color:var(--ok); }
.fp-status.free{ background:var(--primary-soft); color:var(--primary-dark); }
.fp-detail{ font-size:.96rem; color:var(--ink-soft); margin:0; }
.fp-caption{ margin-top:.7rem; font-size:.85rem; color:var(--ink-soft); text-align:center; }
@media (max-width:640px){ .floorplan{ grid-template-columns:1fr; } .fp-side{ grid-template-rows:none; } }

/* ---------------- ANTES / DESPUÉS ---------------- */
.transition{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:1rem; margin:1.2rem 0; }
.t-panel{ border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.4rem; background:var(--bg-alt); }
.t-panel-new{ border-color:var(--primary); background:var(--primary-soft); }
.t-tag{ font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:700; }
.t-panel-new .t-tag{ color:var(--primary-dark); }
.t-arrow{ font-size:1.7rem; color:var(--primary); display:flex; align-items:center; font-weight:700; }
.t-panel h3{ margin:.35em 0 .55em; }
.t-panel li{ font-size:1.02rem; }
@media (max-width:760px){ .transition{ grid-template-columns:1fr; } .t-arrow{ transform:rotate(90deg); justify-content:center; padding:.2rem 0; } }

/* ---------------- ORGANIGRAMA ---------------- */
.orgchart{ display:flex; flex-direction:column; align-items:center; padding-top:.5rem; margin:1.2rem 0; }
.org-top{ background:var(--primary); color:#fff; font-weight:700; padding:.7rem 1.5rem; border-radius:var(--radius); text-align:center; position:relative; box-shadow:var(--shadow); }
.org-top span{ display:block; font-weight:500; font-size:.8rem; opacity:.9; margin-top:.3rem; }
.org-top::after{ content:""; position:absolute; left:50%; bottom:-24px; width:2px; height:24px; background:var(--border); transform:translateX(-50%); }
.org-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:24px; width:100%; }
.org-node{ background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1rem; text-align:center; font-weight:700; flex:1 1 160px; }
.org-node span{ display:block; font-weight:500; font-size:.84rem; color:var(--ink-soft); margin-top:.4rem; }

/* ---------------- DAFO ---------------- */
.dafo{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.2rem 0; }
.dafo > div{ padding:1.1rem 1.3rem; border-radius:var(--radius); border:1px solid var(--border); }
.dafo h3{ font-weight:700; font-size:.9rem; letter-spacing:.03em; text-transform:uppercase; }
.dafo li{ font-size:1rem; }
.dafo .f{ background:var(--ok-bg); border-color:transparent; } .dafo .f h3{ color:var(--ok); }
.dafo .d{ background:var(--bg-alt); } .dafo .d h3{ color:var(--ink-soft); }
.dafo .o{ background:var(--primary-soft); border-color:transparent; } .dafo .o h3{ color:var(--primary-dark); }
.dafo .a{ background:var(--bad-bg); border-color:transparent; } .dafo .a h3{ color:var(--bad); }
@media (max-width:640px){ .dafo{ grid-template-columns:1fr; } }

/* ---------------- PASOS Y LÍNEA DE TIEMPO ---------------- */
.badge-step{
  display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--primary); color:#fff; font-weight:700; margin-right:.6rem; flex:none; font-size:.95rem;
}
.step-row{ display:flex; align-items:flex-start; margin-bottom:.7rem; }

.timeline{ display:flex; gap:.8rem; position:relative; padding-top:1.8rem; margin:1rem 0; }
.timeline::before{ content:""; position:absolute; top:16px; left:16px; right:16px; height:2px; background:var(--border); }
.tl-node{ flex:1; text-align:center; position:relative; }
.tl-dot{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; font-weight:700; font-size:.85rem; position:relative; z-index:1; }
.tl-node p{ font-size:.94rem; margin-top:.7rem; color:var(--ink); max-width:none; }
@media (max-width:760px){
  .timeline{ flex-direction:column; padding-top:0; gap:1.2rem; }
  .timeline::before{ display:none; }
  .tl-node{ display:flex; align-items:flex-start; gap:1rem; text-align:left; }
  .tl-node p{ margin-top:0; }
}

/* ---------------- DIAGRAMAS MERMAID ---------------- */
.mermaid-caption{ font-weight:700; font-size:1.02rem; margin:1.4rem 0 -0.6rem; text-align:center; }
.mermaid-wrap{ overflow-x:auto; margin:1.4rem 0; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; }
.mermaid-wrap .mermaid{ display:flex; justify-content:center; min-width:320px; }

/* ---------------- FUENTES (referencias al final de sección) ---------------- */
.sources{ margin-top:1.6rem; padding-top:.9rem; border-top:1px dashed var(--border); font-size:.85rem; line-height:1.6; color:var(--ink-soft); }
.sources .sources-label{ font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-right:.5rem; }
.sources a{ color:var(--primary); text-decoration:none; }
.sources a:hover{ text-decoration:underline; }
.sources .sep{ margin:0 .35rem; opacity:.6; }

/* ---------------- GRID DE SECCIONES (portada) ---------------- */
.chapter-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin:1.6rem 0; }
.chapter-card{
  display:block; border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.25rem;
  color:var(--ink); text-decoration:none; box-shadow:var(--shadow);
}
.chapter-card:hover{ border-color:var(--primary); text-decoration:none; }
.chapter-card .card-icon{ font-size:1.8rem; display:block; margin-bottom:.4rem; }
.chapter-card .num{ font-size:.8rem; font-weight:700; color:var(--primary); letter-spacing:.04em; }
.chapter-card h3{ margin:.35rem 0 .3rem; font-size:1.12rem; }
.chapter-card p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* ---------------- PAGINACIÓN ---------------- */
.pagination{ display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--border); }
.pag-link{
  flex:1 1 0; max-width:48%; border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.1rem;
  color:var(--ink); text-decoration:none; box-shadow:var(--shadow);
}
.pag-link:hover{ border-color:var(--primary); text-decoration:none; }
.pag-link.next{ text-align:right; margin-left:auto; }
.pag-dir{ display:block; font-size:.85rem; color:var(--ink-soft); margin-bottom:.25rem; }
.pag-title{ font-weight:700; color:var(--primary); font-size:1.05rem; }

/* ---------------- RESPONSIVE / MÓVIL ---------------- */
@media (max-width:996px){
  .toc{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .sidebar{
    position:fixed; left:-290px; top:60px; height:calc(100dvh - 60px); width:280px; background:var(--bg);
    z-index:210; box-shadow:2px 0 16px rgba(0,0,0,.18);
  }
  .sidebar.open{ left:0; }
  .sidebar-overlay.open{ display:block; position:fixed; inset:60px 0 0 0; background:rgba(0,0,0,.35); z-index:205; }
  .doc-main{ padding:1.6rem 1.1rem; }
}

a:focus-visible, .theme-toggle:focus-visible, .menu-toggle:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }