/* =========================================================
   Somasoft — UI Kit (Refactor + Limpieza)
   - Variables centralizadas
   - Base + Header (v1 y v2 suave) + Componentes
   - Calendario (mes/semana/día) + Modales
   - Perfil (p2), Auth, Facturación, Notas
   - Configuración (grid bonito)
   - Modo oscuro opcional
========================================================= */

/* =========================
   1) TOKENS / VARIABLES
========================= */
:root{
  /* Brand */
  --brand-300:#CFEFD3;   /* fondos suaves */
  --brand-500:#7CCB7F;   /* barra */
  --brand-600:#68BC71;   /* activo */
  --brand-700:#56AA62;

  /* Surface & Ink */
  --paper:#ffffff;
  --ink:#0f1b12;
  --muted:#4f6a56;
  --line:#dfe7e1;
  --accent:#2e7d32;

  /* Layout */
  --radius:14px;
  --header-h:0px;
  --container-w:1240px;

  /* Menús (contextuales) */
  --menu-bg:#0f1630;
  --menu-bg-hover:#162148;
  --menu-ring:rgba(255,255,255,.14);

  /* Header v2, tonos suaves */
  --hdr-bg1:#f7fbf8;
  --hdr-bg2:#eef7f1;
  --hdr-ink:#143b22;
  --hdr-ring:rgba(18,50,30,.08);
  --hdr-pill:#ffffffcc;
  --hdr-pill-hover:#ffffffee;
  --hdr-active:#56AA62;
  --hdr-active-ink:#fff;
}

/* =========================
   2) BASE
========================= */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
}
body.with-header{ padding-top:var(--header-h); }
h1{ font-size:1.6rem; margin:14px 0 18px }
.small{ font-size:.85rem }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(46,125,50,.35);
  outline-offset:2px;
  border-radius:10px;
}

/* =========================
   3) HEADER v1 (actual)
========================= */
.topbar{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:120;
  background:linear-gradient(180deg,var(--brand-500),var(--brand-600));
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  padding-inline:18px;
}
@media (min-width:1024px){
  .topbar{ padding-inline:calc((100vw - var(--container-w))/2); }
}
.topbar__inner{
  max-width:var(--container-w); width:100%; margin-inline:auto; height:100%;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
}

/* Marca */
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#0b2311; font-weight:800;
}
.brand__logo{ display:grid; place-items:center; width:42px; height:42px; border-radius:999px }
.brand__logo img{ width:100%; height:100%; object-fit:contain; display:block }
.brand__name{ letter-spacing:.5px; font-size:20px }
.brand--pro{
  display:flex; align-items:center; gap:10px; height:44px; padding:6px 10px; border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.15));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

/* NAV + submenú */
.nav-toggle{
  display:none; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.55);
  padding:10px 12px; border-radius:12px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.nav{ align-self:center }
.nav ul{ display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0 }
.nav a,.nav .sub-toggle{
  display:flex; align-items:center; gap:8px; height:42px; padding:0 14px;
  border-radius:999px; border:1px solid transparent; font-weight:800;
  text-decoration:none; color:#0b2311; background:transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nav a svg,.nav .sub-toggle svg{ width:18px; height:18px; fill:currentColor }
.nav a:hover,.nav .sub-toggle:hover{ background:rgba(255,255,255,.38); border-color:rgba(0,0,0,.08) }
.nav a.active,.nav .sub-toggle.active{
  background:linear-gradient(180deg,#62c274,#4cae62); color:#fff; border-color:rgba(0,0,0,.08)
}
.nav a.active svg,.nav .sub-toggle.active svg{ color:#fff }

.has-sub{ position:relative }
.has-sub .chev{ font-size:.8rem; opacity:.85 }
.has-sub .sub{
  position:absolute; top:calc(100% + 10px); left:0; min-width:240px; padding:8px;
  background:var(--menu-bg); color:#e8f7ea; border:1px solid var(--menu-ring);
  border-radius:16px; box-shadow:0 16px 36px rgba(0,0,0,.28);
  transform:scale(.96) translateY(-6px); opacity:0; pointer-events:none;
  transition:transform .14s ease,opacity .14s ease; z-index:1000;
}
.has-sub.is-open .sub{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }
.has-sub .sub a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:#e8f7ea }
.has-sub .sub a:hover{ background:var(--menu-bg-hover) }
.has-sub .sub a.active{ background:#203268; color:#c6f0cc }

/* Usuario */
.topbar__right{ display:flex; align-items:center; gap:12px; justify-self:end }
.user{ display:flex; align-items:center; gap:10px }
.user--pro{ position:relative }
.user-toggle{
  display:flex; align-items:center; gap:10px; height:42px; padding:0 10px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.38);
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.15));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.avatar{
  width:32px; height:32px; border-radius:999px; display:grid; place-items:center;
  background:#fff; border:1px solid #cbd5ce; color:#2a5e32; font-weight:800; font-size:12px;
}
.user__meta{ display:flex; flex-direction:column; line-height:1.05 }
.user__name{ font-weight:800; font-size:.95rem; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.user-toggle .chev{ font-size:.8rem; opacity:.75 }
.user-panel{
  position:absolute; right:0; top:calc(100% + 10px); width:280px;
  background:#ffffff; color:#0f1b12; border:1px solid var(--line);
  border-radius:16px; z-index:1000; box-shadow:0 18px 38px rgba(0,0,0,.16);
  padding:10px; transform:scale(.98) translateY(-6px); opacity:0; pointer-events:none; transition:.14s ease;
}
.user-panel.open{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto }
.user-panel__head{ display:flex; gap:10px; align-items:center; padding:6px 6px 10px; border-bottom:1px solid var(--line) }
.user-panel .avatar.big{ width:42px; height:42px; background:#f7faf8; border:1px solid #cfe8d1; color:#2a5e32 }
.user-item{ display:block; text-decoration:none; color:inherit; padding:10px 12px; border-radius:10px; margin-top:6px }
.user-item:hover{ background:#f4faf5 }
.user-item.danger{ color:#861c2b } .user-item.danger:hover{ background:#fdecee }

.nav a:focus-visible,
.nav .sub-toggle:focus-visible,
.user-toggle:focus-visible,
.nav-toggle:focus-visible{
  outline:3px solid rgba(46,125,50,.35); outline-offset:3px; border-radius:12px;
}

/* Responsive header v1 */
@media (max-width:980px){
  .nav-toggle{ display:block }
  .user__name{ display:none }
  .nav{
    position:absolute; left:0; right:0; top:var(--header-h);
    background:linear-gradient(180deg,var(--brand-500),var(--brand-600));
    border-bottom:1px solid rgba(0,0,0,.08); box-shadow:0 10px 20px rgba(0,0,0,.08);
    display:none; z-index:200;
  }
  .nav.open{ display:block }
  .nav ul{ flex-direction:column; gap:6px; padding:10px }
  .has-sub .sub{
    position:static; transform:none; opacity:1; pointer-events:auto; background:transparent; border:0; box-shadow:none; padding:4px 0
  }
  .has-sub .sub a{ padding:8px 10px }
}

/* =========================
   4) HEADER v2 (píldoras suaves)
========================= */
header.topbar.topbar--v2{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:120;
  background:linear-gradient(180deg,var(--hdr-bg1),var(--hdr-bg2));
  border-bottom:1px solid #e5efe7;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding-inline:18px;
}
@media (min-width:1024px){
  header.topbar.topbar--v2{ padding-inline:calc((100vw - var(--container-w))/2); }
}
header.topbar.topbar--v2 .topbar__inner{
  max-width:var(--container-w); margin-inline:auto; height:100%;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
}

/* Marca v2 */
header.topbar.topbar--v2 .brand--v2{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--hdr-ink); font-weight:900; padding:6px 10px; border-radius:14px;
  background:var(--hdr-pill); border:1px solid var(--hdr-ring);
  backdrop-filter:saturate(1.2) blur(2px);
}
header.topbar.topbar--v2 .brand--v2 .brand__logo{ width:38px; height:38px; border-radius:999px; overflow:hidden }
header.topbar.topbar--v2 .brand--v2 .brand__logo img{ width:100%; height:100%; object-fit:contain; display:block }

/* Nav v2 */
header.topbar.topbar--v2 .nav ul{ display:flex; align-items:center; gap:8px; margin:0; padding:0; list-style:none }
header.topbar.topbar--v2 .nav a,
header.topbar.topbar--v2 .nav .sub-toggle{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 14px;
  border-radius:999px; text-decoration:none; font-weight:800;
  color:var(--hdr-ink); background:var(--hdr-pill); border:1px solid var(--hdr-ring);
  transition:.15s ease;
}
header.topbar.topbar--v2 .nav a:hover,
header.topbar.topbar--v2 .nav .sub-toggle:hover{ background:var(--hdr-pill-hover) }
header.topbar.topbar--v2 .nav a.active,
header.topbar.topbar--v2 .nav .sub-toggle.active{
  background:var(--hdr-active); color:var(--hdr-active-ink); border-color:transparent;
}
header.topbar.topbar--v2 .nav svg{ width:18px; height:18px; fill:currentColor }

/* Submenú v2 */
header.topbar.topbar--v2 .has-sub{ position:relative }
header.topbar.topbar--v2 .has-sub .sub{
  position:absolute; top:calc(100% + 8px); left:0; min-width:240px; padding:8px;
  background:#fff; color:var(--hdr-ink); border:1px solid #e1efe6;
  border-radius:14px; box-shadow:0 18px 38px rgba(0,0,0,.12);
  transform:scale(.98) translateY(-4px); opacity:0; pointer-events:none; transition:.14s ease;
}
header.topbar.topbar--v2 .has-sub.is-open .sub{ transform:none; opacity:1; pointer-events:auto }
header.topbar.topbar--v2 .has-sub .sub a{ display:block; padding:10px 12px; border-radius:10px }
header.topbar.topbar--v2 .has-sub .sub a:hover{ background:#f4faf5 }

/* Acciones derecha v2 */
header.topbar.topbar--v2 .topbar__right--v2{ display:flex; align-items:center; gap:10px; justify-self:end }
header.topbar.topbar--v2 .iconbtn--v2{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  border:1px solid var(--hdr-ring); background:var(--hdr-pill);
  color:var(--hdr-ink); box-shadow:0 2px 8px rgba(0,0,0,.06);
}
header.topbar.topbar--v2 .iconbtn--v2:hover{ background:var(--hdr-pill-hover) }
header.topbar.topbar--v2 .iconbtn--v2.active{ background:var(--hdr-active); color:#fff; border-color:transparent }
header.topbar.topbar--v2 .iconbtn--v2 svg{ width:18px; height:18px; fill:currentColor }

/* Usuario (pill) v2 */
header.topbar.topbar--v2 .user-toggle--v2{
  display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; cursor:pointer;
  background:var(--hdr-pill); border:1px solid var(--hdr-ring); border-radius:999px; font-weight:800;
}
header.topbar.topbar--v2 .user-toggle--v2 .avatar{
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  background:#fff; border:1px solid #dfe9e3; color:#2a5e32; font-weight:800; font-size:12px;
}
header.topbar.topbar--v2 .user-panel--v2{
  position:absolute; right:0; top:calc(100% + 10px); width:280px;
  background:#fff; border:1px solid #e1efe6; border-radius:14px; z-index:1000;
  box-shadow:0 18px 38px rgba(0,0,0,.14); padding:10px;
  transform:scale(.98) translateY(-6px); opacity:0; pointer-events:none; transition:.14s ease;
}
header.topbar.topbar--v2 .user-panel--v2.open{ transform:none; opacity:1; pointer-events:auto }
header.topbar.topbar--v2 .user-panel--v2 .user-panel__head{
  display:flex; gap:10px; align-items:center; padding:6px 6px 10px; border-bottom:1px solid #eef3ee;
}
header.topbar.topbar--v2 .user-panel--v2 .avatar.big{
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  background:#f7faf8; border:1px solid #dfe9e3; color:#2a5e32; font-weight:900;
}
header.topbar.topbar--v2 .user-item{ display:block; padding:10px 12px; border-radius:10px; color:inherit; text-decoration:none }
header.topbar.topbar--v2 .user-item:hover{ background:#f7fbf8 }
header.topbar.topbar--v2 .user-item.danger{ color:#861c2b }
header.topbar.topbar--v2 .user-item.danger:hover{ background:#fdecee }

/* Mobile v2 */
@media (max-width:980px){
  header.topbar.topbar--v2 .nav{
    position:absolute; left:0; right:0; top:var(--header-h);
    background:linear-gradient(180deg,var(--hdr-bg1),var(--hdr-bg2));
    border-bottom:1px solid #e5efe7; box-shadow:0 10px 20px rgba(0,0,0,.06);
    display:none; z-index:200;
  }
  header.topbar.topbar--v2 .nav.open{ display:block }
  header.topbar.topbar--v2 .nav ul{ flex-direction:column; gap:6px; padding:10px }
  header.topbar.topbar--v2 .has-sub .sub{
    position:static; transform:none; opacity:1; pointer-events:auto; border:0; box-shadow:none; background:transparent; padding:4px 0;
  }
  header.topbar.topbar--v2 .has-sub .sub a{ padding:8px 10px }
}

/* =========================
   5) LAYOUTS & COMPONENTES
========================= */
.page{ max-width:1100px; margin:22px auto 44px; padding:0 18px }
.controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px }

/* Inputs / Selects */
.input{
  display:inline-flex; align-items:center; gap:8px; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; min-width:220px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.input input{ border:0; outline:0; font:inherit; color:inherit; width:100% }

.select{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:linear-gradient(180deg,#fff,#f7fbf8);
  border-radius:12px; padding:6px 12px; min-width:220px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.select select{
  appearance:none; border:0; background:transparent; font:700 .95rem/1.2 Inter,system-ui;
  color:#214b29; padding:8px 24px 8px 2px; outline:0; width:100%;
}
.select:focus-within{ box-shadow:0 0 0 4px rgba(104,188,113,.18); border-color:#bfe3c2 }
.select::after{
  content:""; position:absolute; right:12px; top:50%; width:8px; height:8px;
  border-right:2px solid #2a5e32; border-bottom:2px solid #2a5e32;
  transform:translateY(-60%) rotate(45deg); pointer-events:none;
}

/* Fallback select suelto */
select{
  appearance:none; border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:10px 34px 10px 12px; font:inherit; color:inherit;
}
select:focus{ outline:3px solid rgba(46,125,50,.25); outline-offset:2px; border-color:#a9dfb0 }
select::-ms-expand{ display:none }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; cursor:pointer;
  border-radius:12px; padding:12px 16px; border:1px solid #5fb469;
  background:linear-gradient(180deg,#e9f7ea,#d8f0db);
  color:#134d1f; box-shadow:0 4px 12px rgba(42,125,50,.15);
  transition:transform .06s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.02); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn.ghost{ background:rgba(255,255,255,.6); border-color:#b7e0ba; color:#134d1f; box-shadow:none }
.btn.outline{ background:transparent; border-color:#6fbf78; color:#1a5226; box-shadow:none }

/* Tarjetas & tablas */
.card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.06) }
.table{ width:100%; border-collapse:separate; border-spacing:0 }
.table thead th{ background:var(--brand-300); color:#214b29; text-align:left; font-weight:800; padding:14px 12px; border-bottom:1px solid var(--line) }
.table tbody td{ padding:14px 12px; border-bottom:1px solid #edf2ee }
.table tbody tr:hover{ background:#f9fdf9 }
.table .muted{ color:var(--muted) }
.alert{ border:1px solid #ef9aa3; background:#fde9ec; color:#8a1927; padding:10px 12px; border-radius:10px }
.notice{ border:1px solid #cfe8d1; background:#f3fbf5; color:#214b29; padding:10px 12px; border-radius:12px }

/* =========================
   6) DASHBOARD
========================= */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px }
@media (max-width:980px){ .kpis{ grid-template-columns:1fr 1fr } }
.kpi{
  display:flex; align-items:center; gap:12px; padding:16px; border-radius:16px;
  background:linear-gradient(180deg,#eaf7ec,#dff2e2); border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
.kpi__icon{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid #cfe8d1; font-size:22px }
.kpi__value{ font-size:1.6rem; font-weight:900; color:#114d1d }
.kpi__label{ color:var(--muted); font-weight:600 }
.quick{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 16px }
.section{ margin-top:12px }
.section__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.section__head h2{ margin:0; font-size:1.2rem }

/* =========================
   7) FACTURACIÓN
========================= */
.fact-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px }
.fact-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0 }
@media (max-width:1100px){ .fact-summary{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .fact-summary{ grid-template-columns:1fr } }
.fact-summary .stat{
  display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px;
  background:linear-gradient(180deg,#f3fbf5,#e9f7ee); border:1px solid var(--line);
}
.stat__icon{ width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid #cfe8d1; display:grid; place-items:center; font-weight:900; color:#114d1d }
.stat__label{ font-weight:800; color:#214b29 }
.stat__value{ margin-left:auto; font-weight:900; color:#114d1d }

.badge-link{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #a7dcb0; background:#eaf8ec; color:#1e4e25;
  font-weight:800; padding:8px 12px; border-radius:999px; text-decoration:none;
}
.badge-link:hover{ filter:brightness(1.03) }

.bill-modal .modal__card{
  border-radius:18px; background:linear-gradient(180deg,#ffffff 0%, #fbfefd 100%);
  border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.bill-modal .modal__header{ background:linear-gradient(180deg,#eaf7ec,#dff2e2); border-bottom:1px solid var(--line) }
.bill-modal .modal__footer{ background:#fbfefd; border-top:1px solid var(--line) }

/* =========================
   8) CALENDARIO
========================= */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 10px }
.cal-nav{ display:flex; align-items:center; gap:10px }
.cal-head h1{ margin:0; min-width:220px; text-align:center }
.calendar{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.06) }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr) }
.cal-weekdays{ background:var(--brand-300); border-bottom:1px solid var(--line) }
.cal-weekdays>div{ padding:10px 12px; font-weight:800; color:#214b29 }

.day{
  min-height:110px; border-right:1px solid #edf2ee; border-bottom:1px solid #edf2ee;
  padding:8px; position:relative; cursor:pointer; background:#fff; transition:background .12s ease;
}
.day:hover{ background:#f7fcf7 }
.day:nth-child(7n){ border-right:none }
.day__num{ font-weight:800; color:#114d1d }
.day.muted{ background:#fafdfb; color:#7a8b7d }
.day .events{ margin-top:6px; display:flex; flex-direction:column; gap:6px }

.chip{
  font-size:.82rem; padding:6px 8px; border-radius:10px; background:#eaf8ec;
  border:1px solid #bfe9c4; color:#1e4e25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chip{ cursor:pointer; border:1px solid #bfe3c2 }
.chip--confirmada{ background:#e9f8ec; border-color:#a7dcb0 }
.chip--propuesta{ background:#fff7e6; border-color:#ffd899 }
.chip--cancelada{ background:#fde9ec; border-color:#ef9aa3; text-decoration:line-through }

/* Modales base */
.modal{ padding:0; border:0; background:transparent }
.modal::backdrop{ background:rgba(0,0,0,.25) }
.modal[open]{ animation: modalIn .12s ease-out }
@keyframes modalIn{ from{ transform:translateY(4px); opacity:0 } to{ transform:none; opacity:1 } }
.modal__card{ width:min(600px,92vw); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.15) }
.modal__header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line) }
.modal__header h3{ margin:0 }
.icon-close{ border:1px solid #e5efe7; background:#f6fbf7; border-radius:10px; padding:6px 10px; cursor:pointer }
.modal__body{ padding:16px; display:grid; gap:12px }
.modal__footer{ padding:12px 16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px }
.form-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:0 }
textarea,select,input[type="time"],input[type="date"]{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; font:inherit
}

/* Segmented control */
.segmented{ display:inline-flex; background:rgba(255,255,255,.6); border:1px solid #bfe3c2; border-radius:12px; padding:4px; gap:4px; box-shadow:0 4px 10px rgba(0,0,0,.06) }
.seg-btn{ border:0; background:transparent; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:800; color:#134d1f }
.seg-btn.active{ background:#56AA62; color:#fff }
.goto{ border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; margin:0 8px }

/* Schedule contenedor */
.schedule{ overflow:hidden }
.sched-body{ overflow:auto }

/* Timeline horizontal */
.tl-wrap{
  --hours:13;      /* set por JS */
  --hourW:120px;   /* set por JS */
  --labelW:170px;  /* set por JS */
  background:#fff;
}
.tl-scale{
  position:sticky; top:0; z-index:5;
  display:grid; grid-template-columns:var(--labelW) 1fr;
  background:var(--brand-300); border-bottom:1px solid var(--line);
}
.tl-scale-left{ height:40px }
.tl-ticks{
  display:grid; grid-template-columns:repeat(var(--hours), var(--hourW));
  min-width:calc(var(--hours) * var(--hourW));
  background-image:repeating-linear-gradient(to right, #edf2ee, #edf2ee 1px, transparent 1px, transparent var(--hourW));
}
.tl-tick{ padding:8px 6px; font-weight:800; color:#214b29 }

.tl-rows{ display:block }
.tl-row{ display:grid; grid-template-columns:var(--labelW) 1fr; border-bottom:1px solid #edf2ee }
.tl-label{
  padding:10px; font-weight:800; color:#214b29;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-canvas{
  position:relative; min-width:calc(var(--hours) * var(--hourW));
  background-image:repeating-linear-gradient(to right, #f1f5f2, #f1f5f2 1px, transparent 1px, transparent var(--hourW));
  background-color:#fff; cursor:crosshair;
}

/* Evento horizontal */
.event.hbar{
  position:absolute; border-radius:8px;
  border:1px solid var(--ev-border,#bfe9c4);
  background:var(--ev-bg,#eaf8ec); color:var(--ev-ink,#1e4e25);
  padding:4px 8px; line-height:1.2; font-size:.86rem;
  display:flex; align-items:center; gap:6px; box-shadow:0 6px 14px rgba(0,0,0,.08);
  cursor:pointer; overflow:hidden;
}
.hbar .ev-time{ font-weight:900; font-size:.8rem }
.hbar .ev-title{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hbar .ev-sub{ font-size:.76rem; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Estados de evento */
.event{ cursor:pointer; border:1px solid #bfe3c2; background:#eaf8ec; color:#1e4e25 }
.ev--propuesta{ background:#fff7e6; border-color:#ffd899; color:#8a5a00 }
.ev--cancelada{ background:#fde9ec; border-color:#ef9aa3; color:#8a1927; text-decoration:line-through }

/* Resize handles */
.resize-h{ position:absolute; top:-3px; bottom:-3px; width:8px; background:transparent; cursor:ew-resize }
.resize-h.left{ left:-3px } .resize-h.right{ right:-3px }
.resize-h::after{
  content:""; position:absolute; inset:2px; border-radius:4px; background:rgba(0,0,0,.08);
  opacity:0; transition:opacity .12s ease;
}
.event:hover .resize-h::after{ opacity:.45 }

/* Responsive general */
@media (max-width:980px){
  .day{ min-height:90px; padding:6px }
  .form-row{ grid-template-columns:1fr }
}

/* Motion reduce */
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }

/* =========================
   9) PROFESIONALES (UI bonita)
========================= */
.modal--pro::backdrop{ background:rgba(15,22,34,.55); backdrop-filter:blur(2px) }
body.no-scroll{ overflow:hidden }

.pro-card{
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:radial-gradient(120% 140% at 110% 120%, rgba(124,203,127,.08), transparent 60%), #fff;
  box-shadow:0 20px 44px rgba(0,0,0,.18);
}
.pro-header{
  display:flex; align-items:center; justify-content:space-between; padding:16px;
  background:#eef8f0; border-bottom:1px solid var(--line);
}
.pro-head-left{ display:flex; align-items:center; gap:12px }
.pro-avatar{
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  font-weight:900; letter-spacing:.5px; color:#1f5b2b;
  background:#ffffff; border:1px solid #cfe8d1; box-shadow:0 4px 12px rgba(42,125,50,.15);
}
.pro-title-wrap h3{ margin:0 }
.pro-sub{ margin:.1rem 0 0; color:#4f6a56 }

.pro-body{ padding:16px 16px 8px }
.pro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.field-span2{ grid-column:1 / -1 }

.field-ico{ display:flex; flex-direction:column; gap:6px; position:relative }
.field-ico .lbl{ font-weight:800; color:#214b29; font-size:.9rem }
.field-ico .ico{ position:absolute; left:12px; top:38px; opacity:.65; pointer-events:none }
.field-ico input{
  width:100%; padding:12px 12px 12px 34px; border-radius:12px; border:1px solid #cfe8d1;
  background:linear-gradient(180deg,#fff,#f7fbf8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(42,125,50,.06);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field-ico input:focus{
  outline:0; border-color:var(--brand-600); background:#fff;
  box-shadow:0 0 0 4px rgba(104,188,113,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
.pro-esp{ display:grid; gap:8px }
.pro-esp .select{ width:100% }
.pro-esp-manual input{ width:100% }
.pro-note{ margin-top:6px }
.pro-footer{ padding:12px 16px; border-top:1px solid var(--line) }

@media (max-width:700px){ .pro-grid{ grid-template-columns:1fr } }

.table--pro td{ vertical-align:middle }
.table--pro .pro-cell{ display:flex; align-items:center; gap:10px }
.table--pro .pro-cell .avatar{ width:36px; height:36px; font-size:12px }
.table--pro .pro-cell-meta{ display:flex; flex-direction:column; line-height:1.2 }
.table--pro .row-actions{ display:flex; gap:8px; justify-content:flex-end }
.table--pro .th-actions{ width:190px }

.badge.soft{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-weight:800; border:1px solid #a7dcb0; background:#eaf8ec; color:#1e4e25;
}

/* =========================
   10) PERFIL (p2)
========================= */
.profile-shell{ display:grid; gap:14px }

.p2-hero{
  display:flex; align-items:center; justify-content:space-between; padding:16px;
  background:linear-gradient(180deg,#eaf7ec,#dff2e2);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.p2-hero__left{ display:flex; align-items:center; gap:14px }
.p2-avatar-xl{
  width:72px; height:72px; border-radius:999px; display:grid; place-items:center;
  background:#fff; border:2px solid #cfe8d1; color:#2a5e32; font-weight:900; font-size:1.2rem;
  background-size:cover; background-position:center;
}
.p2-avatar--img{ color:transparent !important }
.p2-hero__title{ margin:0; font-size:1.35rem }
.p2-hero__meta{ margin:.25rem 0 0; color:var(--muted) }
.p2-hero__actions{ display:flex; gap:10px; flex-wrap:wrap }

.p2-card{ padding:0 }
.p2-tabs{
  display:flex; gap:6px; padding:8px; background:#f4faf5; border-bottom:1px solid var(--line)
}
.p2-tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:10px 12px; border-radius:10px; font-weight:800; color:#1a5226;
}
.p2-tab.active{ background:#56AA62; color:#fff }

.p2-form{ padding:14px; display:grid; gap:14px }
.p2-panel{ display:none } .p2-panel.active{ display:block }

.p2-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px }
@media (max-width:980px){ .p2-grid-3{ grid-template-columns:1fr } }

.p2-form label{ display:flex; flex-direction:column; gap:6px; font-weight:800; color:#214b29; font-size:.92rem }
.p2-form input, .p2-form textarea, .p2-form select{
  width:100%; padding:12px; border-radius:12px; border:1px solid #cfe8d1;
  background:linear-gradient(180deg,#fff,#f7fbf8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(42,125,50,.06);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.p2-form input:focus, .p2-form textarea:focus, .p2-form select:focus{
  outline:0; border-color:var(--brand-600); background:#fff;
  box-shadow:0 0 0 4px rgba(104,188,113,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
.p2-actions{ display:flex; align-items:center; justify-content:space-between; padding-top:6px }

.p2-avatar-uploader{
  display:flex; align-items:center; gap:12px; border:1px dashed #cfe8d1; border-radius:12px; padding:10px; background:#fbfefd;
}
.p2-avatar-sml{
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center; font-weight:900; color:#2a5e32;
  background:#fff; border:1px solid #cfe8d1; background-size:cover; background-position:center;
}
.p2-upload-label{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 10px; border-radius:10px; border:1px solid #5fb469;
  background:linear-gradient(180deg,#e9f7ea,#d8f0db); color:#134d1f;
}

/* Password */
.p2-pass{ position:relative }
.p2-pass input{ padding-right:40px }
.p2-eye{
  position:absolute; right:6px; top:6px; border:0; background:transparent; cursor:pointer;
  width:32px; height:32px; border-radius:8px;
}

/* Strength meter */
.p2-strength{ margin-top:8px; display:flex; align-items:center; gap:8px }
.p2-strength__bar{ height:8px; width:0%; border-radius:6px; background:#e2e8e6; flex:1; transition:width .18s ease }
.p2-strength__bar.s1{ background:#ef9aa3 } .p2-strength__bar.s2{ background:#f6c57d }
.p2-strength__bar.s3{ background:#c7e59b } .p2-strength__bar.s4{ background:#8bd38b } .p2-strength__bar.s5{ background:#56AA62 }
.p2-strength__txt{ font-size:.85rem; color:#4f6a56 }

.p2-pref{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff }
.p2-quick{ display:flex; align-items:end }

/* Dark quick theme */
:root.theme-dark{ color-scheme:dark }
:root.theme-dark body{ background:#0d1320; color:#eaf5ee }
:root.theme-dark .card, :root.theme-dark .p2-panel, :root.theme-dark .p2-pref{ background:#121a2a; border-color:#253246 }
:root.theme-dark .p2-hero{ background:linear-gradient(180deg,#133021,#0f291c); border-color:#253246 }
:root.theme-dark .p2-tabs{ background:#101a2a; border-color:#253246 }
:root.theme-dark .p2-form input,
:root.theme-dark .p2-form textarea,
:root.theme-dark .p2-form select{
  background:linear-gradient(180deg,#0f1726,#0c1421); border-color:#243247; color:#eaf5ee;
}

/* KPIs compactos */
.p2-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.p2-kpi{ display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,#f7fcf9,#eef8f0) }
.p2-kpi .i{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid #cfe8d1 }
.p2-kpi .v{ font-weight:900; color:#114d1d }

.p2-timeline{ display:grid; gap:10px; padding:6px 2px }
.p2-tl-item{ display:flex; gap:10px; align-items:flex-start }
.p2-tl-item .dot{ width:18px; height:18px; border-radius:999px; display:inline-grid; place-items:center; background:#eaf8ec; border:1px solid #bfe9c4 }
.p2-tl-item.muted{ color:var(--muted) }

.p2-devices{ display:grid; gap:10px }
.p2-device{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff }
.p2-device .tag{ font-weight:800; color:#214b29 }
.p2-2fa{ margin-top:8px; padding:12px; border:1px dashed #cfe8d1; border-radius:12px; background:#fbfefd }
.p2-2fa__head{ display:flex; align-items:center; gap:8px }

.theme-dark .p2-kpi{ background:linear-gradient(180deg,#0e1f19,#0a1a14); border-color:#274134 }
.theme-dark .p2-device{ background:#0f1b12; border-color:#274134 }
.theme-dark .p2-2fa{ background:#0f1b12; border-color:#274134 }

/* =========================
   11) AUTH (split)
========================= */
.auth-split{
  min-height:100vh; display:grid; grid-template-columns:1fr minmax(460px,40vw);
  background:
    linear-gradient(90deg, rgba(28,120,82,.90) 0%, rgba(28,120,82,.70) 26%, rgba(28,120,82,.42) 50%, rgba(28,120,82,.20) 70%, rgba(28,120,82,.08) 86%, rgba(28,120,82,0) 100%),
    radial-gradient(120% 140% at 20% 50%, rgba(46,125,50,.35) 0%, rgba(46,125,50,0) 65%),
    linear-gradient(180deg,#0f142b 0%, #0b1020 100%);
  color:#e9f2ee;
}
.auth-split__left{ position:relative; overflow:hidden; isolation:isolate }
.auth-split__left::before{
  content:""; position:absolute; inset:0; background: var(--hero) center/cover no-repeat; transform:scale(1.02); z-index:0;
  filter:saturate(112%) contrast(102%);
  -webkit-mask-image:linear-gradient(90deg,#000 68%,rgba(0,0,0,0) 98%); mask-image:linear-gradient(90deg,#000 68%,rgba(0,0,0,0) 98%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.auth-split__left::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(110% 90% at 15% 85%, rgba(255,214,102,.18) 0%, rgba(255,214,102,0) 60%),
    radial-gradient(90% 70% at 70% 30%, rgba(88,207,156,.16) 0%, rgba(88,207,156,0) 60%),
    radial-gradient(130% 120% at 5% 95%, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 60%);
  z-index:1;
}
.auth-split__right{ display:flex; place-items:center; padding-left:5%; padding-right:5%; padding-top:2%; padding-bottom:5%; background:transparent }
.auth-card{
  position:relative; width:min(540px,94vw); border-radius:20px; padding:22px;
  background:rgba(18,24,44,.55); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.auth-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(124,203,127,.9), rgba(124,203,127,0) 45%, rgba(167,214,180,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.auth-card::after{
  content:""; position:absolute; left:10%; right:10%; top:0; height:60px;
  background:radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,.18), transparent 70%);
  border-top-left-radius:inherit; border-top-right-radius:inherit;
}

.auth-split__header{ text-align:center; margin-bottom:12px }
.auth-logo{ width:70px; height:70px; object-fit:contain; margin:4px auto 10px; display:block }
.auth-title{ display: none; margin:.2rem 0 .15rem; letter-spacing:.6px; font-weight:900; color:#d3f1df }
.auth-split__header .sub{ margin:0; color:#a9b8c8 }

.auth-form{ display:flex; flex-direction:column; gap:14px; margin-top:8px }
.field-dark{ display:flex; flex-direction:column; gap:6px }
.field-dark .lbl{ font-size:.9rem; color:#a9bdd0; font-weight:700 }
.field-dark input{
  width:100%; border-radius:12px; padding:14px;
  background:linear-gradient(180deg,#0f172a,#0e1626);
  border:1px solid rgba(255,255,255,.08); color:#eaf5ee;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border .15s ease, box-shadow .15s ease, transform .06s ease, background .15s ease;
}
.field-dark input::placeholder{ color:#7f90a8 }
.field-dark input:hover{ transform:translateY(-1px) }
.field-dark input:focus{
  outline:none; border-color:#67c775;
  box-shadow:0 0 0 4px rgba(103,199,117,.18), inset 0 1px 0 rgba(255,255,255,.08);
  background:#101b33;
}
.field-dark.password{ position:relative }
.field-dark.password .eye{
  position:absolute; right:8px; bottom:9px; width:36px; height:36px;
  border-radius:10px; border:0; background:transparent; color:#b7c4d9; cursor:pointer;
}
.field-dark.password .eye:hover{ color:#d7e2ef }

.btn-cta{
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  height:46px; border-radius:12px; cursor:pointer; border:1px solid #6fbf78; color:#0b2311; font-weight:900; letter-spacing:.2px;
  background:linear-gradient(180deg,#a2edaa 0%, #7ccb7f 100%);
  box-shadow:0 10px 30px rgba(124,203,127,.28), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .08s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-cta:hover{ filter:brightness(1.03); transform:translateY(-1px); box-shadow:0 14px 34px rgba(124,203,127,.34), inset 0 1px 0 rgba(255,255,255,.7) }

.links{ display:flex; justify-content:flex-end }
.links .muted{ color:#95a9bf }
.divider{ position:relative; text-align:center; margin:10px 0 2px }
.divider::before,.divider::after{ content:""; position:absolute; top:50%; width:38%; height:1px; background:#26324a }
.divider::before{ left:0 } .divider::after{ right:0 }
.divider span{
  display:inline-block; padding:6px 10px; border:1px solid #26324a; border-radius:999px;
  color:#93a6bb; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.btn-social{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:44px; border-radius:12px; cursor:pointer; background:linear-gradient(180deg,#0f172a,#0d1424);
  border:1px solid rgba(255,255,255,.08); color:#e8f1ee; font-weight:800;
  transition:border .15s ease, transform .06s ease, box-shadow .15s ease;
}
.btn-social:hover{ border-color:#2f4264; transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.25) }
.btn-social .g{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; background:#fff; color:#202124; font-weight:900 }
.btn-social.apple .a{ font-size:18px; margin-right:2px }

.register{ text-align:center; margin:.35rem 0 0 }
.legal{ margin:.25rem 0 0; text-align:center }
.alert.dark{ border:1px solid #9b2d40; background:#2a0f16; color:#ffd6dc; padding:10px 12px; border-radius:10px; margin-bottom:10px }

@media (max-width:980px){
  .auth-split{ grid-template-columns:1fr }
  .auth-split__left{ display:none }
  .auth-split__right{ padding:8% }
  .auth-card{ width:min(560px,96vw) }
}

/* =========================
   12) NUEVA SESIÓN (modal)
========================= */
.session-modal .modal__card{
  border-radius:18px; background:linear-gradient(180deg,#ffffff 0%, #fbfefd 100%);
  border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.session-modal .modal__header{ background:linear-gradient(180deg,#eaf7ec,#dff2e2); border-bottom:1px solid var(--line) }
.session-modal .modal__body .form-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:10px }
@media (max-width:980px){ .session-modal .modal__body .form-row{ grid-template-columns:1fr } }
.session-modal label{ display:flex; flex-direction:column; gap:6px; font-weight:800; color:#214b29; font-size:.92rem }
.session-modal input,
.session-modal select,
.session-modal textarea{
  width:100%; padding:12px; border-radius:12px; border:1px solid #cfe8d1;
  background:linear-gradient(180deg,#fff,#f7fbf8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .06s ease;
}
.session-modal input:hover,
.session-modal select:hover,
.session-modal textarea:hover{ transform:translateY(-1px) }
.session-modal input:focus,
.session-modal select:focus,
.session-modal textarea:focus{
  outline:0; border-color:var(--brand-600); background:#fff;
  box-shadow:0 0 0 4px rgba(104,188,113,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
.session-modal .modal__footer{ background:#fbfefd; border-top:1px solid var(--line) }

/* Typeahead paciente */
.typeahead{ position:relative }
.typeahead input[type="text"]{ padding-right:36px }
.ta-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 24px rgba(0,0,0,.10);
  max-height:260px; overflow:auto; display:none; z-index:20;
}
.ta-panel.open{ display:block }
.ta-item{ width:100%; text-align:left; border:0; background:transparent; padding:10px 12px; cursor:pointer; display:block }
.ta-item:hover{ background:#f4faf5 }

/* Cabecera calendario pro */
.cal-head.pro{ margin-bottom:16px }
.cal-head.pro .cal-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px }
.cal-title-nav{ display:flex; align-items:center; gap:12px }
.cal-title-nav h1{ margin:0 }
.cal-head.pro .cal-toolbar{
  display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:10px 12px; box-shadow:0 8px 18px rgba(0,0,0,.05);
}
.cal-head.pro .filters{ display:flex; gap:8px; align-items:center }
.cal-head.pro .spacer{ flex:1 }
.cal-head.pro .goto{ min-width:220px }
.cal-head.pro .filters select{
  appearance:none; border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:10px 34px 10px 12px; font:inherit; color:inherit;
}
.cal-head.pro .filters select:focus{ outline:3px solid rgba(46,125,50,.25); outline-offset:2px; border-color:#a9dfb0 }

/* =========================
   13) NOTAS
========================= */
.notes-page{ max-width:980px; margin:22px auto 44px; padding:0 18px }
.notes-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.notes-title{ margin:0 }
.notes-card{ padding:14px }

.note-list{ display:grid; gap:12px }
.note-item{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px; box-shadow:0 10px 22px rgba(0,0,0,.06);
}
.note-meta{ display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:700 }
.note-meta .dot{ opacity:.5 }
.note-title{ margin:8px 0 6px }
.note-body{ white-space:pre-wrap; line-height:1.5 }
.note-actions{ margin-left:auto; display:flex; gap:8px }

.pill{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px;
  border:1px solid #cfe8d1; background:#f7fcf9; color:#214b29; font-weight:800;
}
.pill-green{ background:#eaf8ec; border-color:#a7dcb0 }
.btn.sm.pin{ border:1px dashed #bfe3c2; background:#f7fcf7; color:#1a5226 }

.flash-ok{
  border:1px solid #a9dfb0; background:#eaf8ec; color:#114d1d;
  padding:10px 12px; border-radius:10px; margin:10px 0;
}
.flash-err{
  border:1px solid #ef9aa3; background:#fde9ec; color:#8a1927;
  padding:10px 12px; border-radius:10px; margin:10px 0;
}

/* =========================
   14) CONFIGURACIÓN (grid)
========================= */
.cfg .muted{ color:var(--muted) }

.cfg-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:6px 0 12px;
}
.cfg-title h1{ margin:0; font-size:1.5rem }
.cfg-search{ min-width:320px }
@media (max-width:760px){
  .cfg-head{ flex-direction:column; align-items:stretch }
  .cfg-search{ width:100%; min-width:auto }
}

.cfg-section{ margin-top:14px }
.cfg-h2{ margin:.2rem 0 .6rem; font-size:1.1rem; color:#214b29 }

.cfg-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
@media (max-width:1100px){ .cfg-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .cfg-grid{ grid-template-columns:1fr } }

.cfg-card{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:14px; border-radius:14px; text-decoration:none; color:inherit;
  background:linear-gradient(180deg,#f7fcf9,#eef8f0);
  border:1px solid var(--line); box-shadow:0 10px 22px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.cfg-card:hover{
  transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.08);
  background:#ffffff; border-color:#cfe8d1;
}
.cfg-card .i{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid #cfe8d1;
}
.cfg-card .i svg{ width:22px; height:22px; fill:#1e4e25 }
.cfg-card .t{ display:flex; flex-direction:column; gap:4px }
.cfg-card .t strong{ font-weight:900; color:#114d1d }
.cfg-card .t p{ margin:0; color:var(--muted); line-height:1.35 }
.cfg-card .cta{
  display:inline-flex; align-items:center; height:28px; padding:0 10px;
  border-radius:999px; font-weight:800; color:#134d1f;
  background:linear-gradient(180deg,#e9f7ea,#d8f0db);
  border:1px solid #5fb469; box-shadow:0 4px 10px rgba(42,125,50,.12);
}

/* Dark cfg */
:root.theme-dark .cfg-card{
  background:linear-gradient(180deg,#111b2a,#0e1624); border-color:#253246; color:#eaf5ee;
}
:root.theme-dark .cfg-card .i{ background:#0f1726; border-color:#243247 }
:root.theme-dark .cfg-card:hover{ background:#0e1624; border-color:#2b3a52 }
:root.theme-dark .cfg-h2{ color:#d4efe0 }

.cfg-grid > a, .cfg-card { width:100% !important; }
.cfg-grid { justify-items:stretch !important; align-items:stretch !important; }

.cfg-grid{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }

/* =========================
   HEADER v3 (estilos globales)
   - Activo suave (como botones +Nuevo)
   - Mejora contraste
   - Mobile acordeón cerrado por defecto
========================= */

:root{
  /* por si algún sitio usa esta var para el padding-top */
  --header-h: 64px;
}

/* Fondo suave tras el header para que “no se note el corte” */
body.with-header{
  padding-top: var(--header-h);
  background:
    linear-gradient(180deg,#f6faf7 0%, rgba(246,250,247,0) 140px),
    var(--paper, #fff);
}

/* Opcional: tono del activo de navegación más suave */
.nav a.active, .nav .sub-toggle.active{
  background:linear-gradient(180deg,#e9f7ea,#d8f0db) !important;
  border-color:#6fbf78 !important; color:#134d1f !important;
  box-shadow:0 4px 10px rgba(42,125,50,.12);
}

/* Estado hover coherente */
.nav a:hover, .nav .sub-toggle:hover{
  background:#ffffff;
  border-color:rgba(17,77,29,.18);
}

/* En móvil, el submenú solo se muestra si el elemento tiene .is-open */
@media (max-width:1024px){
  .submenu{ display:none }
  .has-sub.is-open .submenu{ display:block }
}
/* Fondo suave bajo el header + padding global */
body.with-header{
  padding-top: var(--header-h);
  background:
    linear-gradient(180deg,#f6faf7 0%, rgba(246,250,247,0) 140px),
    var(--paper, #fff);
}