:root {
  --bg: #eef3ea;
  --surface: #ffffff;
  --surface-2: #f7faf4;
  --ink: #1e2a1c;
  --ink-soft: #5d6b58;
  --line: #dde6d6;
  --brand: #5aa524;
  --brand-dark: #3f7d18;
  --brand-deep: #2c5c10;
  --brand-soft: #e9f3df;
  --brand-glass: rgba(90,165,36,.10);
  --danger: #c8443c;
  --ok: #3f9a3d;
  --warn: #d98a1e;
  --shadow: 0 1px 2px rgba(30,50,20,.06), 0 10px 30px rgba(40,70,25,.10);
  --shadow-soft: 0 1px 3px rgba(30,50,20,.05);
  --raise: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(30,50,20,.10), 0 4px 10px rgba(40,70,25,.10);
  /* Cristal estilo Apple */
  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.65);
  --glass-blur: blur(20px) saturate(180%);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 1px rgba(30,50,20,.04) inset, 0 8px 30px rgba(40,70,25,.14);
  --radius: 16px;
  --p0:#94a08c; --p1:#3f9a3d; --p2:#2f7fb8; --p3:#d98a1e; --p4:#c8443c;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); font-size: 15px; line-height: 1.45;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(134,198,64,.22), transparent 60%),
    radial-gradient(900px 560px at -6% 108%, rgba(63,125,24,.16), transparent 58%),
    linear-gradient(180deg, #f1f6ec 0%, #e7efe1 100%);
  background-attachment: fixed;
}
/* Trazo abstracto inspirado en la "V" (sin ser el logo) */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(135deg, transparent 0 46%, rgba(90,165,36,.05) 46% 50%, transparent 50%),
    linear-gradient(225deg, transparent 0 46%, rgba(63,125,24,.045) 46% 50%, transparent 50%);
  background-size: 320px 320px, 320px 320px;
}
button { font-family: inherit; font-size: 14px; cursor: pointer; }
input, select, textarea {
  font-family: inherit; font-size: 14px; width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glass);
}
label { display:block; font-size: 13px; color: var(--ink-soft); margin: 0 0 5px; font-weight: 600; }
.field { margin-bottom: 14px; }
a { color: var(--brand-dark); }
h1,h2,h3 { margin: 0 0 .4em; }

/* Botones de cristal (estilo Apple) */
.btn {
  position: relative; overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--ink); padding: 9px 16px; border-radius: 12px; font-weight: 600;
  display:inline-flex; align-items:center; gap:7px;
  box-shadow: var(--glass-shadow);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}
/* Reflejo especular superior */
.btn::before {
  content:""; position:absolute; left:0; right:0; top:0; height:50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none; opacity:.9;
}
.btn:hover { transform: translateY(-1px); background: var(--glass-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 10px 30px rgba(40,70,25,.20); }
.btn:active { transform: translateY(0) scale(.99);
  box-shadow: inset 0 2px 6px rgba(30,50,20,.18), 0 2px 8px rgba(40,70,25,.12); }
.btn.primary {
  background: linear-gradient(180deg, rgba(120,196,52,.85), rgba(63,125,24,.9));
  border-color: rgba(255,255,255,.4); color:#fff; text-shadow: 0 1px 1px rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 26px rgba(40,90,15,.32);
}
.btn.primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, rgba(128,206,58,.92), rgba(67,134,25,.95)); }
.btn.danger { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(252,238,237,.6)); border-color: rgba(214,69,60,.35); color: var(--danger); }
.btn.danger:hover { filter:none; background: rgba(253,242,242,.85); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-icon { background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding:6px; border-radius:10px; color:var(--ink-soft); }
.btn-icon:hover { background:rgba(255,255,255,.8); color:var(--ink); box-shadow: var(--shadow-soft); }

/* Marco de logo con profundidad (cristal) */
.logo-frame {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(30,50,20,.08), 0 14px 34px rgba(40,70,25,.16);
}
.logo-frame img { display:block; }

/* Centrado de login/setup */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  width:100%; max-width:410px; border-radius:22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 24px 60px rgba(30,55,15,.20);
  border:1px solid var(--glass-border); padding:32px;
}
.auth-logo { text-align:center; margin-bottom:20px; }
.auth-logo .logo-frame { margin-bottom:10px; }
.auth-logo img { max-height:78px; max-width:210px; }
.auth-logo .org { font-size:20px; font-weight:700; margin-top:8px; color:var(--brand-deep); letter-spacing:.3px; }
.msg { padding:10px 12px; border-radius:9px; font-size:13px; margin-bottom:14px; }
.msg.error { background:#fdecec; color:#a02e2a; border:1px solid #f3c9c7; }
.msg.ok { background:#e8f7ee; color:#1f7a45; border:1px solid #bfe6cd; }
.muted { color: var(--ink-soft); font-size:13px; }

/* Layout principal */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:236px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(240,247,234,.5));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-right:1px solid var(--glass-border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  box-shadow: 1px 0 0 rgba(255,255,255,.6), 10px 0 30px rgba(40,70,25,.07);
}
.brand { padding:18px 18px 14px; border-bottom:1px solid var(--line); display:flex; justify-content:center; }
.brand .logo-frame { padding:10px 14px; }
.brand img { max-height:48px; max-width:180px; display:block; }
.brand .org { font-weight:700; font-size:16px; color:var(--brand-deep); }
.nav { padding:10px; flex:1; overflow:auto; }
.nav a {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:var(--ink-soft); text-decoration:none; font-weight:600; margin-bottom:3px;
  border:1px solid transparent; transition: background .12s, box-shadow .12s, color .12s;
}
.nav a:hover { background:rgba(255,255,255,.8); color:var(--ink); box-shadow: var(--shadow-soft); }
.nav a.active {
  background: linear-gradient(180deg, rgba(108,181,45,.16), rgba(90,165,36,.1));
  color:var(--brand-deep); border-color:rgba(63,125,24,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(40,70,25,.08);
}
.nav a .badge { margin-left:auto; background:var(--danger); color:#fff; border-radius:20px;
  font-size:11px; padding:1px 7px; font-weight:700; }
.nav .ico { width:20px; text-align:center; }
.userbox { padding:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.avatar {
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(180deg, #6cb52d, #3f7d18); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 5px rgba(40,70,25,.25);
}
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  display:flex; align-items:center; gap:12px; padding:14px 22px;
  border-bottom:1px solid var(--glass-border);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  position:sticky; top:0; z-index:5;
}
.topbar h2 { margin:0; font-size:18px; color:var(--brand-deep); }
.topbar .spacer { flex:1; }
.content { padding:24px; max-width:1100px; width:100%; margin:0 auto; }

/* Tarjetas de cristal */
.card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:var(--radius);
  box-shadow: var(--glass-shadow); padding:18px; margin-bottom:16px;
}
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3,1fr); }

/* Prioridades */
.prio { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:2px 9px; border-radius:20px; }
.prio::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.prio.p0 { color:var(--p0); background:#f0f2ee; }
.prio.p1 { color:var(--p1); background:#e8f5e6; }
.prio.p2 { color:var(--p2); background:#e7f1f8; }
.prio.p3 { color:var(--p3); background:#fcf2e3; }
.prio.p4 { color:var(--p4); background:#fdecec; }

/* Calendario */
.cal-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.cal-head .title { font-size:18px; font-weight:700; min-width:170px; text-transform:capitalize; color:var(--brand-deep); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow { text-align:center; font-size:12px; font-weight:700; color:var(--ink-soft); padding:4px 0; }
.cal-cell { background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:10px;
  min-height:104px; min-width:0; padding:6px; cursor:pointer; display:flex; flex-direction:column; gap:3px;
  transition: border-color .12s, box-shadow .12s; }
.cal-cell:hover { border-color:var(--brand); box-shadow: var(--shadow-soft); }
.cal-cell.dim { background:rgba(248,250,246,.7); color:#a7b0a0; }
.cal-cell.today { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-glass); }
/* Sábados: azul celeste transparente */
.cal-cell.saturday { background:rgba(135,206,235,.16); border-color:rgba(135,206,235,.45); }
.cal-cell.saturday.dim { background:rgba(135,206,235,.09); }
/* Festivos y domingos: rojo transparente */
.cal-cell.holiday, .cal-cell.sunday { background:rgba(220,38,38,.13); border-color:rgba(220,38,38,.40); }
.cal-cell.holiday.dim, .cal-cell.sunday.dim { background:rgba(220,38,38,.07); }
.cal-cell.holiday .day, .cal-cell.sunday .day { color:#c81e1e; }
.cal-holiday { font-size:10px; line-height:1.15; font-weight:700; color:#c81e1e;
  background:rgba(220,38,38,.10); border-radius:5px; padding:1px 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-cell .day { font-size:12px; font-weight:700; }
.cal-ev { display:block; font-size:11px; padding:2px 6px; border-radius:6px; background:var(--brand-soft);
  color:var(--brand-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0; max-width:100%; border-left:3px solid var(--brand); }
.cal-ev.p1{border-color:var(--p1)} .cal-ev.p2{border-color:var(--p2)}
.cal-ev.p3{border-color:var(--p3)} .cal-ev.p4{border-color:var(--p4)}

/* Menú desplegable (botón Imprimir / Exportar, ampliable a más opciones) */
.menu-wrap { position:relative; display:inline-block; }
.menu { position:absolute; right:0; top:calc(100% + 4px); z-index:60; background:#fff;
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-soft);
  padding:4px; min-width:190px; display:flex; flex-direction:column; gap:2px; }
.menu[hidden] { display:none; }
.menu-item { text-align:left; background:none; border:0; padding:9px 11px; border-radius:8px;
  font:inherit; font-size:14px; cursor:pointer; color:var(--brand-deep); white-space:nowrap; }
.menu-item:hover { background:var(--brand-glass); }

/* Árbol de departamentos (casillas) en el formulario de usuario */
.dept-tree { border:1px solid var(--line); border-radius:10px; padding:6px 8px; max-height:220px; overflow:auto; background:rgba(255,255,255,.5); }
.dept-node { display:flex; align-items:center; gap:8px; padding:3px 2px; font-weight:500; cursor:pointer; }
.dept-node input { width:auto; margin:0; }

/* Listas */
.list-row { display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--line); }
.list-row:last-child { border-bottom:none; }
.list-row .grow { flex:1; min-width:0; }
.list-row h4 { margin:0 0 2px; font-size:15px; }
.list-row.clickable { cursor:pointer; border-radius:8px; transition:background .12s; }
.list-row.clickable:hover { background:var(--brand-glass); }
.tag { font-size:12px; background:#eef2ea; color:var(--ink-soft); padding:2px 8px; border-radius:20px; font-weight:600; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--brand-soft); color:var(--brand-deep); border-radius:20px; padding:3px 10px;
  font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.chip button { background:none; border:none; color:inherit; cursor:pointer; font-size:14px; line-height:1; }
.status-pill { font-size:12px; font-weight:700; padding:2px 9px; border-radius:20px; }
.st-pending{background:#f0f2ee;color:#5d6b58}
.st-in_progress{background:#e7f1f8;color:#2f7fb8}
.st-done{background:#e8f5e6;color:var(--ok)}
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.toolbar .spacer{flex:1}
.empty { text-align:center; color:var(--ink-soft); padding:40px 10px; }

/* Modal */
.modal-back { position:fixed; inset:0; background:rgba(20,35,12,.34); display:flex;
  align-items:flex-start; justify-content:center; padding:30px 16px; z-index:50; overflow:auto;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal { width:100%; max-width:560px; border-radius:20px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 30px 70px rgba(15,35,8,.38);
  border:1px solid var(--glass-border);
  /* Redimensionable según preferencia del usuario (se arrastra la esquina ↘) */
  display:flex; flex-direction:column; max-height:92vh;
  resize:both; overflow:hidden; min-width:300px; min-height:220px; }
.modal.wide { max-width:760px; }
.modal-head { display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); flex:0 0 auto; cursor:move; touch-action:none; user-select:none; -webkit-user-select:none; }
.modal-head .btn-icon { cursor:pointer; }
.modal.dragging { transition:none; }
.modal.dragging .modal-head { cursor:grabbing; }
.modal-head h3 { margin:0; font-size:17px; color:var(--brand-deep); }
.modal-head .spacer{flex:1}
.modal-body { padding:20px; flex:1 1 auto; overflow:auto; }
.modal-foot { padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; flex:0 0 auto; flex-wrap:wrap; }
.modal-resized { max-width:95vw !important; max-height:95vh !important; }
.modal-reset { font-size:12px; color:var(--brand-deep); background:none; border:none; cursor:pointer; opacity:.7; }
.modal-reset:hover { opacity:1; text-decoration:underline; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.checks { display:grid; gap:8px; }
.check { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line);
  border-radius:9px; cursor:pointer; background:rgba(255,255,255,.6); }
.check:hover { border-color:var(--brand); }
.check input{ width:auto; }
.subrow { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.subrow input[type=checkbox]{ width:auto; flex:none; }
.subrow .grow{ flex:1; }
.donecheck { display:inline-flex; align-items:center; gap:5px; flex:none;
  font-size:12px; font-weight:600; color:var(--ink-soft); white-space:nowrap;
  cursor:pointer; padding:5px 9px; border:1px solid var(--line); border-radius:8px;
  background:#fff; }
.donecheck input[type=checkbox]{ width:auto; flex:none; margin:0; }
.donecheck.on { color:var(--ok); border-color:var(--ok); background:#e8f5e6; }
.donecheck:has(input:disabled){ opacity:.55; cursor:default; }
.subitem { margin-bottom:10px; }
.subitem .subrow { margin-bottom:4px; }
.subcomment { display:flex; gap:8px; align-items:center; padding-left:26px; }
.subcomment .scom { flex:1; font-size:13px; }
.subcomment .ssave { flex:none; }

/* Barra de progreso de una tarea */
.progress-wrap { position:relative; height:22px; border-radius:12px; background:#eef1ec;
  border:1px solid var(--line); overflow:hidden; }
.progress-fill { position:absolute; inset:0 auto 0 0; height:100%;
  background:linear-gradient(90deg, var(--brand), var(--brand-dark));
  border-radius:12px 0 0 12px; transition:width .35s ease; min-width:0; }
.progress-num { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; color:var(--ink);
  text-shadow:0 0 3px rgba(255,255,255,.7); }
.progress-wrap.mini { height:14px; margin-top:6px; max-width:280px; }
.progress-wrap.mini .progress-num { font-size:10px; }

/* Fila de fecha + hora separadas (eventos) */
.dtrow { display:flex; gap:8px; align-items:center; }
.dtrow input[type=date]{ flex:1 1 55%; }
.dtrow input:disabled{ opacity:.5; }
.timesel { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.timesel .tsel { width:auto; padding:9px 8px; text-align:center; }
.timesel .tsep { font-weight:700; color:var(--ink-soft); }
.timesel .tsel:disabled{ opacity:.5; }

/* Auditoría: detalle desplegable antes/después */
.audit-detail { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.audit-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.audit-box { background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:13px; }
.audit-box h5 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); }
.audit-box .ch { color:var(--brand-dark); font-weight:600; }
.audit-row { display:flex; gap:6px; padding:2px 0; }
.audit-row .k { color:var(--ink-soft); min-width:96px; flex:none; }
.audit-toggle { background:none; border:none; color:var(--brand-dark); font-weight:600; cursor:pointer; padding:0; font-size:13px; text-decoration:underline; }
/* Etiqueta de acción (descriptiva, NO es un botón) */
.audit-act { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700;
  min-width:104px; }
.audit-act.a-crear{ color:var(--ok); }
.audit-act.a-editar{ color:#2f7fb8; }
.audit-act.a-eliminar{ color:var(--danger); }
.audit-act.a-acceso{ color:var(--ink-soft); }

/* Chat */
.chat-wrap { display:grid; grid-template-columns:280px 1fr; gap:0; height:calc(100vh - 130px);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow); }
.chat-list { border-right:1px solid var(--line); overflow:auto; background:rgba(250,252,247,.7); }
.chat-item { padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
.chat-item:hover{ background:rgba(255,255,255,.85); }
.chat-item.active{ background:var(--brand-soft); }
.chat-item .name{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.chat-item .prev{ font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-main { display:flex; flex-direction:column; min-width:0; }
.chat-msgs { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,#fbfdf9,#f4f8f0); }
.bubble { max-width:70%; padding:8px 12px; border-radius:14px; font-size:14px; }
.bubble .who{ font-size:11px; font-weight:700; color:var(--ink-soft); margin-bottom:2px; }
.bubble.me { align-self:flex-end; background: linear-gradient(180deg,#5aa524,#3f7d18); color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(40,70,25,.2); }
.bubble.them { align-self:flex-start; background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-soft); }
.chat-input { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:rgba(255,255,255,.7); }
.chat-empty{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--ink-soft); }

@media (max-width: 820px) {
  .sidebar { position:fixed; left:0; top:0; z-index:40; transform:translateX(-100%); transition:.2s; }
  .sidebar.open { transform:none; box-shadow:var(--shadow); }
  .menu-toggle{ display:inline-flex !important; }
  .grid.two,.grid.three{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
  .chat-wrap{ grid-template-columns:1fr; }
  .chat-list.hide-mobile{ display:none; }
  .audit-cols{ grid-template-columns:1fr; }
}
.menu-toggle{ display:none; }

/* Ficha de usuario: árbol de departamentos con rol (colaborador/responsable) */
.dept-role-node { display:flex; align-items:center; gap:10px; padding:4px 0; }
.dept-role-node .grow { flex:1 1 auto; min-width:0; }
.dept-role-node select.u_dept_role { width:auto; min-width:150px; flex:0 0 auto; }

/* Organigrama navegable */
.org-wrap { max-width:760px; margin:0 auto; }
.org-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:14px; }
.org-crumbs a { color:var(--brand-deep); text-decoration:none; font-weight:600; font-size:14px;
  padding:5px 12px; border-radius:999px; background:var(--glass); border:1px solid var(--line); }
.org-crumbs a:hover { background:var(--glass-strong); }
.org-crumbs .sep { opacity:.45; }
.org-stage { position:relative; overflow:hidden; }
.org-panel { background:var(--glass-strong); border:1px solid var(--glass-border); border-radius:18px;
  padding:22px; box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.org-head { display:flex; align-items:center; gap:12px; margin-bottom:4px; flex-wrap:wrap; }
.org-head h3 { margin:0; color:var(--brand-deep); font-size:20px; }
.org-section { margin-top:18px; }
.org-label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-dark);
  opacity:.8; margin-bottom:9px; font-weight:700; }
.org-people { display:flex; flex-wrap:wrap; gap:10px; }
.org-person { display:flex; align-items:center; gap:10px; background:var(--glass); border:1px solid var(--line);
  border-radius:14px; padding:8px 12px; min-width:185px; }
.org-person.resp { border-color:var(--brand); background:var(--brand-soft); }
.org-ava { width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto; }
.org-person.resp .org-ava { background:var(--brand-deep); }
.org-person-name { font-weight:600; font-size:14px; color:var(--ink); }
.org-person-pos { font-size:12px; color:#5a4a00; }
.org-branches { display:flex; flex-wrap:wrap; gap:14px; padding-top:24px; position:relative; }
.org-branches::before { content:""; position:absolute; top:0; left:14px; right:14px; height:2px; background:var(--line); }
.org-branch { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  background:var(--brand-soft); border:1px solid var(--glass-border); border-radius:14px;
  padding:11px 15px; cursor:pointer; min-width:150px; text-align:left;
  transition:transform .12s, box-shadow .12s; }
.org-branch::before { content:""; position:absolute; top:-24px; left:50%; width:2px; height:24px; background:var(--line); }
.org-branch:hover { transform:translateY(3px); box-shadow:0 10px 22px rgba(15,35,8,.18); }
.org-branch-name { font-weight:700; color:var(--brand-deep); }
.org-branch-meta { font-size:12px; color:var(--brand-dark); opacity:.85; }
@keyframes orgSlideFwd { from { opacity:0; transform:translateX(42px); } to { opacity:1; transform:none; } }
@keyframes orgSlideBack { from { opacity:0; transform:translateX(-42px); } to { opacity:1; transform:none; } }
.org-panel.slide-fwd { animation:orgSlideFwd .22s ease; }
.org-panel.slide-back { animation:orgSlideBack .22s ease; }

/* Impresión */
@media print {
  body { background:#fff !important; }
  body::before { display:none !important; }
  .sidebar, .topbar, .toolbar, .no-print, .modal-back { display:none !important; }
  .content { padding:0; max-width:none; }
  .card { box-shadow:none; border:1px solid #ccc; background:#fff; }
  /* Conservar los colores de sábados (azul), domingos y festivos (rojo) en papel */
  .cal-cell, .cal-cell.saturday, .cal-cell.sunday, .cal-cell.holiday {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  .cal-cell.holiday .day, .cal-cell.sunday .day, .cal-holiday { color:#c81e1e !important; }
}