@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Tipografía unificada — todo el SaaS usa Carlito (clon libre de Calibri) */
*, *::before, *::after {
  font-family: 'Carlito', Calibri, 'Segoe UI', system-ui, sans-serif !important;
}

:root {
  /* ── Paleta principal ── */
  --bg:       #FAFAF8;
  --bg2:      #F4F3F0;
  --bg3:      #ECEAE6;
  --border:   #D0CCC6;
  --border2:  #B8B4AE;

  /* ── Texto ── */
  --text:     #111110;
  --text2:    #3A3530;
  --text3:    #5A5550;

  /* ── Acento negro/amarillo ── */
  --acc:      #E8C832;
  --acc2:     #D4B520;
  --yel:      #E8C832;
  --yel2:     #D4B520;
  --yelbg:    #FDFBE8;
  --yelb:     #E8D870;

  /* ── Sidebar oscuro ── */
  --nav-bg:   #141412;
  --nav-bg2:  #1E1D1A;
  --nav-bg3:  #2A2926;
  --nav-text: #F0EDE8;
  --nav-text2:#F0EDE8;
  --nav-acc:  #E8C832;

  /* ── Estados ── */
  --red:  #C0392B; --rbg: #FDF1F0; --rb: #EAB5B0;
  --amb:  #B7620A; --abg: #FDF6EC; --abb: #E8CB96;
  --grn:  #1A6B35; --gbg: #EDF7F1; --gbb: #90C8A8;
  --blu:  #1A4A7A; --bbg: #EBF2FA; --bbb: #8AAED8;
  --pur:  #4A3B8C; --pbg: #EFECFA; --pbb: #B5A8E8;

  /* ── Tipografía ── */
  --fs:    14px;   /* cuerpo principal */
  --fs-sm: 12px;   /* texto secundario */
  --fs-xs: 11px;   /* etiquetas, metadatos */
  --fs-2xs:10px;   /* badges, indicadores */

  /* ── Layout ── */
  --nw: 220px;
  --r:  7px;
  --rs: 5px;
}

/* ── Modo oscuro ── */
body.dark, .dark-early body {
  --bg:      #1C1B19;
  --bg2:     #242320;
  --bg3:     #2E2C29;
  --border:  #3A3835;
  --border2: #4A4844;
  --text:    #F0EDE8;
  --text2:   #E4E0D8;
  --text3:   #C0BCB4;

  /* Colores de estado — suavizados para fondo oscuro */
  --red:  #D96A5E;
  --amb:  #C98040;
  --grn:  #4AA870;
  --blu:  #5A8FC0;
  --pur:  #8A7BC0;

  /* Fondos de estado — oscuros pero legibles */
  --rbg: #2A1614; --rb: #6A3028;
  --abg: #281C0C; --abb: #6A4020;
  --gbg: #102018; --gbb: #2A5838;
  --bbg: #0E1C2E; --bbb: #284870;
  --pbg: #1A1630; --pbb: #40306A;

  --yelbg: #272210;
  --yelb:  #504018;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════
   NAV — sidebar oscuro
══════════════════════════════════════════ */
.nav {
  width: var(--nw);
  flex-shrink: 0;
  background: var(--nav-bg);
  border-right: none;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow: hidden;
  z-index: 10;
}
.nav::-webkit-scrollbar { width: 3px; }
.nav::-webkit-scrollbar-thumb { background: var(--nav-bg3); }
.nav-list::-webkit-scrollbar { width: 3px; }
.nav-list::-webkit-scrollbar-thumb { background: var(--nav-bg3); }

.nb {
  padding: 20px 16px 14px;
  border-bottom: 1px solid var(--nav-bg3);
}
.nsec::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--acc); margin-right: 5px; vertical-align: middle; opacity: 0.7; }
.nl {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: #fff;
  margin-bottom: 2px;
}
.ns {
  font-size: 10px;
  color: var(--nav-text2);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.np {
  padding: 10px 14px;
  border-bottom: 1px solid var(--nav-bg3);
}
.np label {
  font-size: 10px;
  color: var(--nav-text2);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.np select {
  width: 100%;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  padding: 5px 8px;
  border: 1px solid var(--nav-bg3);
  border-radius: var(--rs);
  background: var(--nav-bg2);
  color: var(--nav-text);
  cursor: pointer;
}

.nav-list { padding: 8px 0; overflow-y: auto; min-height: 0; }

.nsec {
  font-size: 10px;
  font-weight: 600;
  color: #888070;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 10px 16px 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nsec::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--acc); display: inline-block; flex-shrink: 0; opacity: .8; }

.ni {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--nav-text2);
  border-left: 2px solid transparent;
  transition: all .12s;
}
.ni:hover { background: var(--nav-bg2); color: var(--nav-text); }
.ni.active {
  background: var(--nav-bg2);
  border-left-color: var(--acc);
  border-left-width: 3px;
  color: var(--nav-acc);
  font-weight: 600;
}
.ni.active .nic { color: var(--acc); font-size: 14px; }
.ni.active .nic { color: var(--nav-acc); }

.nic { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }

.nbd {
  margin-left: auto;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}
.nr { background: var(--red); color: #fff; }
.na { background: #E8C832; color: #111110; }
.nb2 { background: var(--nav-bg3); color: var(--nav-text); }
.nv { background: rgba(245,158,11,.18); color: #D97706; font-style: normal; }

.nfoot {
  padding: 12px 16px;
  border-top: 1px solid var(--nav-bg3);
  font-size: 11px;
  color: var(--nav-text2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--nav-bg);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════
   PANEL GLOBAL (Mi cuenta · Admin · Ayuda)
══════════════════════════════════════════ */
#gp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 300;
}
#gp-panel {
  display: none;
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 340px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 301;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.18);
}
#gp-panel.open { transform: translateX(0); }
.gpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 8px;
  margin: 1px 12px;
  transition: background .12s;
  text-decoration: none;
}
.gpi:hover { background: var(--bg2); }
.gpi-ic {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.gpi-t { font-size: 13px; font-weight: 600; color: var(--text); }
.gpi-s { font-size: 11px; color: var(--text3); margin-top: 1px; }
.gp-sec {
  font-size: 10px; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 14px 20px 6px;
}
.gp-user-card {
  display: flex; align-items: center; gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}
.gp-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--nav-bg);
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* header user-btn */
#gp-hdr-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--nav-bg);
  font-size: 10px; font-weight: 700;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity .12s;
}
#gp-hdr-btn:hover { opacity: .85; }

/* ══════════════════════════════════════════
   CONTENIDO PRINCIPAL
══════════════════════════════════════════ */
.cnt {
  margin-left: var(--nw);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ch {
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--nav-bg3);
}
.ct {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  letter-spacing: -.2px;
  color: #FFFFFF;
}
.ct.amarillo { color: var(--acc); }
.cs2 { font-size: 12px; color: var(--nav-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb { padding: 28px 36px; flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-x: hidden; }

/* pg-wrap — contenedor interno consistente para todas las páginas */
.pg-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* empty-state — estado vacío centrado vertical y horizontalmente */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 48px 24px;
  color: var(--text3);
  min-height: 240px;
}
.empty-state .es-icon { font-size: 36px; margin-bottom: 4px; }
.empty-state .es-title { font-size: 15px; font-weight: 600; color: var(--text2); }
.empty-state .es-sub { font-size: 13px; max-width: 420px; line-height: 1.6; }

/* ══════════════════════════════════════════
   STATS
══════════════════════════════════════════ */
.sg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.sc {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  transition: all .15s;
}
.sc:hover { box-shadow: 0 2px 12px rgba(232,200,50,.1); border-color: rgba(232,200,50,.4); }
.sl {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}
.sv { font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
.ss2 { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ══════════════════════════════════════════
   ALERTAS
══════════════════════════════════════════ */
.as { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.al {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--rs);
  border: 1px solid;
  font-size: 12px;
  cursor: pointer;
}
.al:hover { opacity: .85; }
.ad { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.at { flex: 1; line-height: 1.4; }
.at strong { font-weight: 600; }
.ak { font-size: 11px; opacity: .7; white-space: nowrap; }
.al-r { background: var(--rbg); border-color: var(--rb); color: var(--red); }
.al-r .ad { background: var(--red); }
.al-a { background: var(--abg); border-color: var(--abb); color: var(--amb); }
.al-a .ad { background: var(--amb); }
.al-g { background: var(--gbg); border-color: var(--gbb); color: var(--grn); }
.al-g .ad { background: var(--grn); }

.al-danger { background: var(--rbg); border: 1px solid var(--rb); color: var(--red); }
.al-danger .al-dot { background: var(--red); }
.al-warn { background: var(--abg); border: 1px solid var(--abb); color: var(--amb); }
.al-warn .al-dot { background: var(--amb); }
.al-info { background: var(--gbg); border: 1px solid var(--gbb); color: var(--grn); }
.al-info .al-dot { background: var(--grn); }
.alert-line {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r);
  border: 1px solid; margin-bottom: 4px; font-size: 12px; cursor: pointer;
}
.al-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.al-text { flex: 1; }
.alerts-stack { margin-bottom: 14px; }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 8px;
  transition: box-shadow .15s, border-color .15s;
}
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 0 0 1px rgba(232,200,50,.2); border-color: rgba(232,200,50,.25); }
.two-col { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }

/* ══════════════════════════════════════════
   PILLS / CHIPS
══════════════════════════════════════════ */
.pill {
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.p-ok { background: var(--gbg); color: var(--grn); border-color: var(--gbb); }
.p-w  { background: #FDF8DC; color: #7A5500; border-color: #D4B520; }
.p-r  { background: var(--rbg); color: var(--red); border-color: var(--rb); }
.p-p  { background: var(--bg2); color: var(--text3); border-color: var(--border2); }
.p-i  { background: var(--bbg); color: var(--blu); border-color: var(--bbb); }
.p-u  { background: var(--pbg); color: var(--pur); border-color: var(--pbb); }

/* ── Chips de proceso ── */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: opacity .1s;
}
.chip:hover { opacity: .8; }
.chip-ok  { background: var(--gbg); color: var(--grn); border-color: var(--gbb); }
.chip-rev { background: #FDF8DC; color: #7A5500; border-color: #D4B520; }
.chip-pen { background: var(--bg2); color: var(--text3); border-color: var(--border); }
.chip-err { background: var(--rbg); color: var(--red); border-color: var(--rb); }
.chip-wip { background: var(--bbg); color: var(--blu); border-color: var(--bbb); }

/* ══════════════════════════════════════════
   PROGRESS BARS
══════════════════════════════════════════ */
.pw { display: flex; align-items: center; gap: 8px; }
.pb { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.pf { height: 100%; border-radius: 2px; }
.pp { font-size: 11px; color: var(--text3); min-width: 28px; text-align: right; }
.prog-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 2px; }

/* ══════════════════════════════════════════
   TABLA
══════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th {
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  text-align: left;
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg2); }
td { padding: 8px 10px; vertical-align: middle; }
td.num { text-align: right; font-family: 'DM Mono', monospace; font-size: 12px; }
td.over { color: var(--red); font-weight: 500; }
td.okc { color: var(--grn); }
.dr td {
  background: var(--bg2);
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 5px 10px;
}
.mono { font-family: 'DM Mono', monospace; font-size: 11px; }

/* ══════════════════════════════════════════
   BOTONES
══════════════════════════════════════════ */
.btn {
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  padding: 6px 13px;
  border-radius: var(--rs);
  border: 1px solid var(--nav-bg3);
  background: var(--nav-bg2);
  color: var(--nav-text);
  cursor: pointer;
  font-weight: 500;
  transition: all .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--nav-bg3); border-color: var(--nav-bg3); color: #fff; }
.btn-p {
  background: var(--acc);
  color: var(--nav-bg);
  border-color: var(--acc);
  font-weight: 600;
}
.btn-p:hover { background: var(--acc2); border-color: var(--acc2); }

/* Botón acento amarillo para acciones destacadas */
.btn-y {
  background: var(--yel);
  color: var(--acc);
  border-color: var(--yel);
  font-weight: 600;
}
.btn-y:hover { background: var(--yel2); }

/* ══════════════════════════════════════════
   TABS
══════════════════════════════════════════ */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
  gap: 0;
  background: transparent;
}
.tab-btn {
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .12s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--acc);
  border-bottom-color: var(--acc);
  font-weight: 600;
}

/* ══════════════════════════════════════════
   STACK / PANEL
══════════════════════════════════════════ */
.sp {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
}
.stl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}
.tar {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.tar:last-child { border-bottom: none; }
.td2 { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }

/* ══════════════════════════════════════════
   SEMÁFORO
══════════════════════════════════════════ */
.sem {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid;
  margin-bottom: 14px;
}
.sem-ok { background: var(--gbg); border-color: var(--gbb); }
.sem-w  { background: var(--yelbg); border-color: var(--yelb); }
.sem-r  { background: var(--rbg); border-color: var(--rb); }
.se { font-size: 28px; flex-shrink: 0; }
.sem-t { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.sem-ok .sem-t { color: var(--grn); }
.sem-w .sem-t  { color: #7A5500; }
.sem-r .sem-t  { color: var(--red); }
.sem-d { font-size: 12px; line-height: 1.5; opacity: .8; }

/* ══════════════════════════════════════════
   HITOS
══════════════════════════════════════════ */
.hito-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.hito-row:last-child { border-bottom: none; }

/* ══════════════════════════════════════════
   AVATAR
══════════════════════════════════════════ */
.av {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
  font-family: 'Syne', sans-serif;
}

/* ══════════════════════════════════════════
   CALENDARIO
══════════════════════════════════════════ */
.cal-hg {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r) var(--r) 0 0;
}
.cal-hg div {
  padding: 6px;
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
  border-right: 1px solid var(--border);
}
.cal-hg div:last-child { border-right: none; }
.cal-bg {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  overflow: hidden;
}
.cal-c {
  min-height: 78px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5px 4px;
  transition: background .1s;
}
.cal-c:hover { background: var(--bg2); }
.cal-c:nth-child(7n) { border-right: none; }
.cal-c.today { background: #FDF8DC; border-left: 2px solid var(--acc); }
.cal-n {
  font-size: 12px;
  font-weight: 500;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 3px;
}
.cal-n.tn { background: var(--acc); color: var(--nav-bg); font-weight: 700; }
.cal-ev {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   WEEK / DAY
══════════════════════════════════════════ */
.day {
  background: var(--bg2);
  border-radius: var(--rs);
  padding: 6px 3px;
  text-align: center;
  border: 1px solid var(--border);
}
.day-today { border-color: var(--acc); background: #FDF8DC; }
.day-name { font-size: 10px; color: var(--text3); margin-bottom: 2px; }
.day-num { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.day-today .day-num { color: #B7920A; font-weight: 700; }

/* ══════════════════════════════════════════
   CHAT
══════════════════════════════════════════ */
.chat-l {
  display: grid;
  grid-template-columns: 260px 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  height: 560px;
}
.chat-sb {
  border-right: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-sb-list { flex: 1; overflow-y: auto; }
.chat-sb-hdr {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ci {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  gap: 9px;
  align-items: center;
  transition: background .1s;
  position: relative;
}
.ci:hover { background: var(--bg3); }
.ci.active { background: var(--bg); border-left: 2px solid var(--acc); padding-left: 10px; }
.ci-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.ci-av.group { border-radius: 10px; font-size: 16px; }
.ci-body { flex: 1; min-width: 0; }
.ci-top { display: flex; align-items: baseline; gap: 4px; }
.ci-name { font-size: 12px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-time { font-size: 10px; color: var(--text3); flex-shrink: 0; }
.ci-preview { font-size: 11px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.ci-unread { position: absolute; right: 10px; bottom: 10px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.chat-bod { display: flex; flex-direction: column; background: var(--bg); }
.chi {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ma {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-date-sep {
  text-align: center;
  font-size: 10px;
  color: var(--text3);
  margin: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg-date-sep::before, .msg-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.mr { display: flex; gap: 7px; align-items: flex-end; }
.mr.mine { flex-direction: row-reverse; }
.mb2 {
  max-width: 65%;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 12px;
}
.mb2.other { background: var(--bg2); border-radius: 12px 12px 12px 2px; }
.mb2.mine  { background: var(--acc); color: var(--nav-bg); border-radius: 12px 12px 2px 12px; font-weight: 500; }
.mt2 { font-size: 10px; color: var(--text3); margin-top: 2px; }
.mr.mine .mt2 { text-align: right; }
.cir {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cinp {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg2);
  color: var(--text);
  outline: none;
  transition: border-color .12s;
}
.cinp:focus { border-color: var(--acc); }

/* ══════════════════════════════════════════
   DOCS
══════════════════════════════════════════ */
.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
.tree-panel { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.tree-hdr {
  padding: 9px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background .1s;
}
.tree-item:hover { background: var(--bg2); }
.tree-item.active {
  background: #FDF8DC;
  border-left: 2px solid var(--acc);
  font-weight: 500;
}
.files-panel { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.files-hdr {
  padding: 9px 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  padding: 14px;
}
.file-card {
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all .12s;
}
.file-card:hover { background: var(--bg2); border-color: var(--border2); }

/* ══════════════════════════════════════════
   PERMISOS
══════════════════════════════════════════ */
.perm-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid transparent;
}
.pd-f { background: var(--gbg); color: var(--grn); border-color: var(--gbb); }
.pd-r { background: var(--bbg); color: var(--blu); border-color: var(--bbb); }
.pd-o { background: var(--yelbg); color: #7A5500; border-color: var(--yelb); }
.pd-n { background: var(--bg2); color: var(--text3); border-color: var(--border); }

/* ══════════════════════════════════════════
   HILO VERSIONES
══════════════════════════════════════════ */
.hilo-inner { padding: 14px 16px; border-top: 1px solid var(--border); }
.ver-block { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 8px; overflow: hidden; }
.ver-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.ver-body { padding: 12px 14px; }
.add-cmt {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.cmt-inp {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg2);
  color: var(--text);
  resize: none;
  min-height: 36px;
  outline: none;
}
.cmt-inp:focus { border-color: var(--acc); }
.new-ver { border: 1px dashed var(--border2); border-radius: var(--r); padding: 10px 14px; margin-top: 8px; }
.nv-inp {
  width: 100%;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: var(--rs);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 5px;
  outline: none;
}
.nv-inp:focus { border-color: var(--acc); }

/* ══════════════════════════════════════════
   MISC
══════════════════════════════════════════ */
.wg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dc {
  background: var(--bg2);
  border-radius: var(--rs);
  padding: 5px 3px;
  text-align: center;
  border: 1px solid var(--border);
}
.dn { font-size: 10px; color: var(--text3); margin-bottom: 2px; }
.dd { font-size: 13px; font-weight: 500; }
.dt .dd { color: var(--acc); }

/* Portada proyecto */
.pw-bar { display: flex; align-items: center; gap: 8px; }

/* Scrollbars ── webkit */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* Focus ring amarillo */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* ── Tab bar — activo siempre visible ── */
.tab-btn:hover { background: var(--bg2); border-radius: var(--rs) var(--rs) 0 0; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

#search-overlay { display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.45); backdrop-filter:blur(3px); }
#search-box { position:absolute; top:60px; left:50%; transform:translateX(-50%); width:min(620px,92vw); background:var(--bg); border:1px solid var(--border); border-radius:var(--r); box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; }
#search-input { flex:1; border:none; outline:none; font-size:14px; background:transparent; font-family:DM Sans,sans-serif; color:var(--text); }
#search-input::placeholder { color:var(--text3); }
.sr-group { padding:4px 0; border-bottom:1px solid var(--border); }
.sr-group:last-child { border-bottom:none; }
.sr-group-label { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; padding:8px 16px 4px; }
.sr-item { display:flex; align-items:center; gap:10px; padding:7px 16px; cursor:pointer; transition:background .1s; }
.sr-item:hover { background:var(--bg2); }
.sr-item-label { font-size:13px; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-item-val { font-size:12px; color:var(--text3); max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-item-mod { font-size:10px; background:var(--bg2); border:1px solid var(--border); border-radius:3px; padding:1px 5px; color:var(--text3); white-space:nowrap; }
mark { background:var(--yelbg); color:var(--text); border-radius:2px; padding:0 1px; }