/* OKR Educación Comfama — Design System (Wild Strawberry) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#FF277E; --primary-dark:#D4005E; --secondary:#FF5BA3;
  --tint:#FFF0F7; --tint2:#FFDCEC;
  --bg:#F5F5F5; --surface:#FFFFFF; --head:#1A1A1A; --body:#4A4A4A; --border:#E0E0E0;
  --verde:#16A34A; --verde-bg:#E9F7EF; --amarillo:#F59E0B; --amarillo-bg:#FEF3E2;
  --rojo:#EF4444; --rojo-bg:#FDEAEA; --gris:#9CA3AF; --gris-bg:#F1F2F4;
  --sh-card:0 2px 16px rgba(0,0,0,.08); --sh-hover:0 10px 32px rgba(255,39,126,.16);
  --r-card:1rem; --r-input:.5rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100vw}
body{font-family:'Inter','Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--head);font-weight:700;letter-spacing:-.01em}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark)}
::selection{background:var(--tint2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d8d8d8;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--secondary)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.4rem;border-radius:9999px;font-weight:600;font-size:.85rem;cursor:pointer;border:2px solid transparent;transition:all .2s;font-family:inherit}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 4px 16px rgba(255,39,126,.35);transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-secondary:hover{background:var(--primary);color:#fff}
.btn-ghost{background:transparent;color:var(--body)}
.btn-ghost:hover{background:var(--tint);color:var(--primary)}
.btn-sm{padding:.35rem .85rem;font-size:.78rem}
.btn-icon{padding:.45rem;border-radius:10px;background:transparent;border:1px solid transparent;color:var(--gris);cursor:pointer;display:inline-flex;transition:all .15s}
.btn-icon:hover{background:var(--tint);color:var(--primary);border-color:var(--tint2)}
.btn-icon.danger:hover{background:var(--rojo-bg);color:var(--rojo);border-color:#f6c8c8}
.btn:disabled{opacity:.5;pointer-events:none}
svg.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Login ---------- */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#fff}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 14s ease-in-out infinite}
.blob.b1{width:520px;height:520px;background:radial-gradient(circle,#FF5BA3,#FF277E);top:-140px;left:-120px}
.blob.b2{width:460px;height:460px;background:radial-gradient(circle,#FFD9EA,#FF8DBE);bottom:-160px;right:-100px;animation-delay:-5s}
.blob.b3{width:300px;height:300px;background:radial-gradient(circle,#FFC2DD,#FF5BA3);top:40%;left:60%;animation-delay:-9s;opacity:.35}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.06)}66%{transform:translate(-30px,25px) scale(.96)}}
.login-card{position:relative;z-index:2;width:min(460px,92vw);background:rgba(255,255,255,.72);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.9);border-radius:1.4rem;box-shadow:0 24px 70px rgba(212,0,94,.18);padding:2.2rem 2rem;animation:rise .6s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.brandmark{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.3rem;margin:0 auto .9rem;box-shadow:0 8px 22px rgba(255,39,126,.4);position:relative}
.brandmark::after{content:'';position:absolute;inset:-5px;border-radius:20px;border:2px solid transparent;background:conic-gradient(from 0deg,var(--primary),var(--secondary),#fff,var(--primary)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 5s linear infinite;opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
.login-card h1{text-align:center;font-size:1.28rem}
.login-card .sub{text-align:center;font-size:.82rem;color:var(--gris);margin:.2rem 0 1.4rem}
.userlist{display:grid;gap:.5rem;max-height:290px;overflow:auto;padding:2px;margin-bottom:1.1rem}
.userchip{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border:1.5px solid var(--border);border-radius:.8rem;cursor:pointer;background:#fff;transition:all .18s;text-align:left;font-family:inherit;font-size:.85rem}
.userchip:hover{border-color:var(--secondary);transform:translateX(3px)}
.userchip.sel{border-color:var(--primary);background:var(--tint);box-shadow:0 4px 14px rgba(255,39,126,.14)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--tint2),var(--secondary));color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex:none}
.userchip.sel .avatar{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.userchip .uname{font-weight:600;color:var(--head)}
.userchip .urole{font-size:.7rem;color:var(--gris)}
.field{width:100%;padding:.7rem .95rem;border:1.5px solid var(--border);border-radius:var(--r-input);font-family:inherit;font-size:.9rem;color:var(--head);background:#fff;transition:border .15s,box-shadow .15s}
.field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,39,126,.15)}
.login-err{color:var(--rojo);font-size:.78rem;text-align:center;margin-top:.6rem;min-height:1em}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.login-foot{text-align:center;font-size:.7rem;color:var(--gris);margin-top:1.2rem}

/* ---------- Shell ---------- */
#app{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
#sb{grid-row:1/3;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-right:1px solid var(--border);padding:1.2rem .9rem;display:flex;flex-direction:column;gap:.3rem;position:sticky;top:0;height:100vh}
.sb-brand{display:flex;align-items:center;gap:.65rem;padding:.3rem .5rem 1.1rem}
.sb-brand .brandmark{width:38px;height:38px;margin:0;font-size:1rem;border-radius:12px}
.sb-brand .brandmark::after{display:none}
.sb-brand b{display:block;font-size:.88rem;color:var(--head);line-height:1.15}
.sb-brand span{font-size:.68rem;color:var(--gris)}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.62rem .8rem;border-radius:.7rem;color:var(--body);font-weight:500;font-size:.86rem;cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left;position:relative;transition:all .15s}
.nav-item:hover{background:var(--tint);color:var(--primary-dark)}
.nav-item.on{background:var(--tint);color:var(--primary);font-weight:600}
.nav-item.on::before{content:'';position:absolute;left:-9px;top:20%;height:60%;width:3.5px;border-radius:4px;background:var(--primary)}
.nav-item .bdg{margin-left:auto;background:var(--rojo);color:#fff;font-size:.64rem;font-weight:700;border-radius:999px;padding:.1rem .42rem}
.sb-foot{margin-top:auto;font-size:.68rem;color:var(--gris);padding:.5rem}
#tb{grid-column:2;min-width:0;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1rem;padding:.8rem 1.6rem;background:rgba(245,245,245,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
#tb h2{font-size:1.02rem}
#tb .crumb{font-size:.72rem;color:var(--gris)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.sync{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--gris)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pulse 2.5s infinite}
.dot.busy{background:var(--amarillo)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.saved{font-size:.74rem;color:var(--verde);font-weight:600;opacity:0;transition:opacity .3s}
.saved.show{opacity:1}
.userpill{display:flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--border);border-radius:999px;padding:.28rem .75rem .28rem .3rem;font-size:.78rem;font-weight:600;color:var(--head)}
#view{grid-column:2;min-width:0;padding:1.5rem 1.7rem 4rem;max-width:1440px;width:100%;margin:0 auto;animation:viewin .35s ease}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Cards & KPIs ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:1.2rem 1.3rem;transition:transform .2s,box-shadow .2s;animation:fadeup .5s both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card.hov:hover{transform:translateY(-3px);box-shadow:var(--sh-hover);border-color:var(--tint2)}
.grid{display:grid;gap:1.1rem}
.g-kpi{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g-okr{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.g-2{grid-template-columns:2fr 1fr}
.kpi{display:flex;flex-direction:column;gap:.15rem}
.kpi .lbl{font-size:.72rem;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
.kpi .val{font-size:1.9rem;font-weight:800;color:var(--head);line-height:1.1}
.kpi .val.pink{background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .sub{font-size:.72rem;color:var(--gris)}
.kpi.warn .val{color:var(--rojo)}
.sechead{display:flex;align-items:center;gap:.7rem;margin:1.9rem 0 .9rem}
.sechead h3{font-size:.95rem}
.sechead .ln{flex:1;height:1px;background:var(--border)}
.sechead .btn{margin-left:auto}

/* OKR card */
.okr-card{display:flex;flex-direction:column;gap:.8rem;cursor:pointer;position:relative;overflow:hidden}
.okr-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));opacity:0;transition:opacity .2s}
.okr-card:hover::after{opacity:1}
.okr-top{display:flex;gap:1rem;align-items:center}
.okr-top .tt{flex:1;min-width:0}
.okr-top h4{font-size:.94rem;margin-bottom:.15rem}
.okr-top .rs{font-size:.7rem;color:var(--gris);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.krmini{display:flex;flex-direction:column;gap:.42rem}
.krmini .row{display:grid;grid-template-columns:44px 1fr 12px 38px;gap:.55rem;align-items:center;font-size:.7rem;color:var(--gris)}
.alert-pill{position:absolute;top:.85rem;right:.9rem;background:var(--rojo-bg);color:var(--rojo);font-size:.66rem;font-weight:700;border-radius:999px;padding:.14rem .5rem;display:flex;gap:.25rem;align-items:center}

/* ---------- Progreso ---------- */
.bar{height:8px;background:var(--gris-bg);border-radius:99px;overflow:hidden;position:relative}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .7s cubic-bezier(.3,.8,.3,1);position:relative}
.bar>i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:sheen 2.6s infinite}
@keyframes sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.bar.v>i{background:var(--verde)}.bar.a>i{background:var(--amarillo)}.bar.r>i{background:var(--rojo)}
.donut-txt{font-weight:800;fill:var(--head)}
.donut-val{transition:stroke-dashoffset 1s cubic-bezier(.3,.8,.3,1)}

/* ---------- Chips RAG / estado ---------- */
.chip{display:inline-flex;align-items:center;gap:.32rem;font-size:.7rem;font-weight:700;border-radius:999px;padding:.18rem .6rem;white-space:nowrap}
.chip::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.Verde{background:var(--verde-bg);color:var(--verde)}
.chip.Amarillo{background:var(--amarillo-bg);color:#B45309}
.chip.Rojo{background:var(--rojo-bg);color:var(--rojo)}
.chip.Sin{background:var(--gris-bg);color:var(--gris)}
.chip.info{background:var(--tint);color:var(--primary-dark)}
.tag{font-size:.66rem;font-weight:600;color:var(--gris);background:var(--gris-bg);border-radius:6px;padding:.12rem .45rem}

/* ---------- Tablas ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-card);background:#fff;box-shadow:var(--sh-card)}
table.tbl{width:100%;border-collapse:collapse;font-size:.8rem;min-width:820px}
.tbl th{position:sticky;top:0;background:var(--tint);color:var(--primary-dark);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--tint2);z-index:2}
.tbl td{padding:.6rem .8rem;border-bottom:1px solid #F0F0F0;vertical-align:middle;color:var(--body)}
.tbl tr:hover td{background:#FFF8FB}
.tbl tr.okr-row td{background:var(--gris-bg);font-weight:700;color:var(--head);font-size:.78rem}
.tbl .b{font-weight:600;color:var(--head)}

/* ---------- Editor plan (gerente) ---------- */
.kr-block{margin-bottom:1.2rem;animation:fadeup .4s both}
.kr-head{display:flex;align-items:center;gap:.9rem;cursor:pointer;padding:1rem 1.2rem}
.kr-head .num{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 5px 14px rgba(255,39,126,.3)}
.kr-head .tt{flex:1;min-width:0}
.kr-head h4{font-size:.92rem}
.kr-head .mt{font-size:.72rem;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kr-head .pctbox{text-align:right}
.kr-head .pctbox b{font-size:1.25rem;color:var(--head)}
.kr-head .chev{transition:transform .25s}
.kr-block.open .chev{transform:rotate(180deg)}
.kr-body{display:none;padding:0 1.2rem 1.2rem}
.kr-block.open .kr-body{display:block;animation:fadeup .3s}
.kr-fields{display:grid;grid-template-columns:1fr 1fr 150px;gap:.7rem;margin-bottom:1rem}
.fld label{display:block;font-size:.66rem;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}
.inp{width:100%;padding:.5rem .7rem;border:1.5px solid var(--border);border-radius:var(--r-input);font-family:inherit;font-size:.8rem;color:var(--head);background:#fff;transition:border .15s,box-shadow .15s}
.inp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,39,126,.12)}
textarea.inp{resize:vertical;min-height:38px}
select.inp{cursor:pointer}
.inp.mini{padding:.32rem .5rem;font-size:.76rem}
.inp.num{width:70px;text-align:center}
.fase{border:1px solid var(--border);border-radius:.9rem;margin-bottom:.9rem;overflow:hidden;background:#fff}
.fase-head{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;background:linear-gradient(90deg,var(--tint),#fff)}
.fase-head .fname{flex:1;font-weight:600;color:var(--head);border:none;background:transparent;font-family:inherit;font-size:.84rem;padding:.3rem .4rem;border-radius:6px}
.fase-head .fname:hover{background:rgba(255,255,255,.7)}
.fase-head .fname:focus{outline:2px solid var(--tint2);background:#fff}
.psum{font-size:.66rem;font-weight:700;border-radius:999px;padding:.15rem .55rem}
.psum.ok{background:var(--verde-bg);color:var(--verde)}
.psum.err{background:var(--rojo-bg);color:var(--rojo)}
.acc-grid{width:100%;border-collapse:collapse;font-size:.76rem}
.acc-grid th{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);text-align:left;padding:.45rem .55rem;border-bottom:1px solid var(--border);background:#FAFAFA}
.acc-grid td{padding:.45rem .55rem;border-bottom:1px solid #F2F2F2;vertical-align:top}
.acc-grid tr:last-child td{border-bottom:none}
.acc-grid tr:hover td{background:#FFFAFC}
.avcell{display:flex;align-items:center;gap:.5rem;min-width:150px}
input[type=range].rg{flex:1;accent-color:var(--primary);height:4px;cursor:pointer}
.avnum{width:52px;text-align:center;font-weight:700}
.rowadd{display:flex;gap:.6rem;padding:.55rem .9rem;background:#FCFCFC;border-top:1px dashed var(--border)}

/* ---------- Gantt ---------- */
.gantt{overflow-x:auto;border:1px solid var(--border);border-radius:.9rem;background:#fff}
.g-grid{display:grid;min-width:900px;font-size:.66rem}
.g-grid .gh{padding:.35rem .3rem;text-align:center;color:var(--gris);border-bottom:1px solid var(--border);background:#FAFAFA;white-space:nowrap;overflow:hidden}
.g-grid .gm{font-weight:700;color:var(--primary-dark);background:var(--tint);border-bottom:1px solid var(--tint2);text-align:center;padding:.3rem 0;border-left:1px solid var(--tint2)}
.g-grid .gl{padding:.42rem .6rem;border-bottom:1px solid #F2F2F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--body);background:#fff;position:sticky;left:0;border-right:1px solid var(--border);max-width:240px}
.g-grid .gc{border-bottom:1px solid #F2F2F2;border-left:1px solid #F7F7F7;min-height:26px;position:relative}
.g-grid .gc.p{background:var(--tint2)}
.g-grid .gc.p.done{background:#BEE8CD}
.g-grid .gc.obj::after{content:'';position:absolute;inset:4px 30%;background:var(--primary);border-radius:3px}
.g-grid .gc.cie::before{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--verde);font-weight:800;font-size:.72rem}
.g-grid .gc.today,.g-grid .gh.today{box-shadow:inset 2px 0 0 var(--primary),inset -2px 0 0 var(--primary)}
.g-grid .gc.edit{cursor:pointer}
.g-grid .gc.edit:hover{outline:2px solid var(--secondary);outline-offset:-2px;z-index:1}

/* ---------- Calendario heatmap ---------- */
.months{display:flex;gap:1rem;flex-wrap:wrap}
.month{flex:1;min-width:150px}
.month h5{font-size:.72rem;color:var(--gris);text-transform:capitalize;margin-bottom:.4rem}
.wcells{display:flex;gap:.4rem}
.wcell{flex:1;border-radius:.55rem;padding:.45rem .2rem;text-align:center;cursor:pointer;border:1.5px solid transparent;transition:all .15s;background:var(--gris-bg)}
.wcell b{display:block;font-size:.72rem;color:var(--head)}
.wcell span{font-size:.6rem;color:var(--gris)}
.wcell.h1{background:var(--tint)}
.wcell.h2{background:var(--tint2)}
.wcell.h3{background:var(--secondary);color:#fff}
.wcell.h3 b,.wcell.h3 span{color:#fff}
.wcell.h4{background:var(--primary)}
.wcell.h4 b,.wcell.h4 span{color:#fff}
.wcell.late{border-color:var(--rojo)}
.wcell.now{outline:2.5px solid var(--head);outline-offset:2px}
.wcell:hover{transform:translateY(-2px);box-shadow:var(--sh-card)}
.wcell.sel{border-color:var(--primary-dark);box-shadow:0 0 0 3px rgba(255,39,126,.2)}

/* ---------- Alertas ---------- */
.al-item{display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 1rem;border:1px solid var(--border);border-radius:.85rem;background:#fff;margin-bottom:.55rem;animation:fadeup .4s both;animation-delay:calc(var(--i,0)*35ms)}
.al-item .sev{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.al-item.s0 .sev{background:var(--rojo-bg);color:var(--rojo)}
.al-item.s1 .sev{background:var(--amarillo-bg);color:#B45309}
.al-item.s2 .sev{background:var(--tint);color:var(--primary)}
.al-item.s3 .sev{background:var(--verde-bg);color:var(--verde)}
.al-item.s0{border-left:4px solid var(--rojo)}
.al-item.s1{border-left:4px solid var(--amarillo)}
.al-item .t{font-weight:600;color:var(--head);font-size:.82rem}
.al-item .d{font-size:.74rem;color:var(--gris)}
.al-item .wk{margin-left:auto;flex:none}
.filterbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.fchip{border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:.3rem .85rem;font-size:.74rem;font-weight:600;color:var(--body);cursor:pointer;font-family:inherit;transition:all .15s}
.fchip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.fchip:hover:not(.on){border-color:var(--secondary);color:var(--primary)}

/* ---------- Comentarios ---------- */
.cbox{background:var(--tint);border:1px solid var(--tint2);border-radius:.9rem;padding:.9rem 1rem;margin-top:.9rem}
.cbox h5{font-size:.74rem;color:var(--primary-dark);margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem}
.cmt{background:#fff;border-radius:.7rem;padding:.55rem .8rem;margin-bottom:.5rem;font-size:.78rem;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.cmt .who{font-weight:700;color:var(--primary-dark);font-size:.7rem;display:flex;gap:.5rem;align-items:center}
.cmt .who time{color:var(--gris);font-weight:500}
.cmt .del{margin-left:auto;cursor:pointer;color:var(--gris);border:none;background:none;font-size:.9rem}
.cmt .del:hover{color:var(--rojo)}
.crow{display:flex;gap:.5rem}

/* ---------- Actividad ---------- */
.logline{display:flex;gap:.7rem;padding:.55rem .3rem;border-bottom:1px solid #F0F0F0;font-size:.78rem;align-items:baseline}
.logline time{font-size:.66rem;color:var(--gris);flex:none;width:118px}
.logline b{color:var(--primary-dark)}

/* ---------- Toast / modal ---------- */
#toasts{position:fixed;bottom:1.2rem;right:1.2rem;z-index:200;display:flex;flex-direction:column;gap:.5rem}
.toast{background:var(--head);color:#fff;padding:.65rem 1.1rem;border-radius:.7rem;font-size:.8rem;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:tin .3s;display:flex;gap:.5rem;align-items:center}
.toast.ok{background:var(--verde)}.toast.err{background:var(--rojo)}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.overlay{position:fixed;inset:0;background:rgba(26,26,26,.45);backdrop-filter:blur(3px);z-index:150;display:flex;align-items:center;justify-content:center;animation:fadein .2s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:1.1rem;padding:1.5rem 1.6rem;width:min(430px,92vw);box-shadow:0 24px 70px rgba(0,0,0,.3);animation:rise .3s}
.modal h4{margin-bottom:.5rem}
.modal p{font-size:.83rem;margin-bottom:1.2rem}
.modal .acts{display:flex;gap:.7rem;justify-content:flex-end}

/* ---------- Skeleton ---------- */
.skel{border-radius:var(--r-card);background:linear-gradient(90deg,#ececec 25%,#f7f7f7 40%,#ececec 55%);background-size:400% 100%;animation:sk 1.3s infinite;height:120px}
@keyframes sk{to{background-position:-140% 0}}

/* ---------- Densidad ---------- */
body[data-density=compact] .acc-grid td{padding:.28rem .45rem}
body[data-density=compact] .card{padding:.9rem 1rem}
body[data-density=compact] .kr-head{padding:.7rem .9rem}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  #app{grid-template-columns:minmax(0,1fr)}
  .inp,.fname,.field,select.inp,textarea.inp{font-size:16px}
  #sb{position:fixed;bottom:0;top:auto;height:auto;width:100%;flex-direction:row;padding:.4rem .6rem;z-index:60;border-top:1px solid var(--border);border-right:none;overflow-x:auto}
  .sb-brand,.sb-foot{display:none}
  .nav-item{flex-direction:column;gap:.15rem;font-size:.6rem;padding:.45rem .6rem}
  .nav-item.on::before{display:none}
  #tb,#view{grid-column:1}
  #view{padding:1rem .9rem 6.5rem}
  .g-2{grid-template-columns:1fr}
  .kr-fields{grid-template-columns:1fr}
}