/* Pachiviar · Sistema de gestión */
:root{
  --bg:#05080F; --glass:rgba(17,24,39,.62); --glass2:rgba(26,35,54,.7); --line:rgba(148,163,184,.14); --line2:rgba(148,163,184,.24);
  --text:#EEF2FA; --muted:#9AA6BD; --faint:#66728C;
  --blue:#0D5BFF; --blue2:#7FA6FF; --blue-soft:rgba(13,91,255,.16); --orange:#EA580C; --orange2:#FB8A4B; --orange-soft:rgba(234,88,12,.16);
  --good:#3DD68C; --good-soft:rgba(61,214,140,.13); --bad:#FF6B81; --bad-soft:rgba(255,107,129,.13);
  --serif:"Fraunces", Georgia, serif; --sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.2px); background-size:20px 20px}
.blob{position:fixed; border-radius:50%; filter:blur(90px); opacity:.32; pointer-events:none; z-index:0}
.blob.b1{width:520px; height:520px; background:var(--blue); top:-160px; right:-120px}
.blob.b2{width:440px; height:440px; background:var(--orange); bottom:-200px; left:120px; opacity:.18}
a{color:var(--blue2); text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--blue2); outline-offset:2px}
h1,h2,h3{margin:0; font-weight:600}
h1{font-family:var(--serif); font-size:34px; letter-spacing:-.02em; line-height:1.12}
h2{font-family:var(--serif); font-size:21px; letter-spacing:-.01em}
h3{font-size:15px}
.muted{color:var(--muted)} .faint{color:var(--faint)} .num{font-variant-numeric:tabular-nums}
.ic{flex:none}

/* Estructura */
.app{position:relative; z-index:1; display:grid; grid-template-columns:272px minmax(0,1fr); min-height:100vh}
.side{position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; gap:18px; padding:20px 14px 16px;
  background:rgba(10,14,24,.78); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-right:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:11px; padding:2px 8px; color:var(--text); text-decoration:none!important}
.brand .mark{width:36px; height:36px; border-radius:10px; background:var(--blue); display:grid; place-items:center; color:#fff; font-family:var(--serif); font-weight:700; font-size:20px; position:relative; flex:none}
.brand .mark::after{content:""; position:absolute; right:-3px; bottom:-3px; width:11px; height:11px; border-radius:50%; background:var(--orange); border:2px solid #0A0E18}
.brand b{font-family:var(--serif); font-size:19px; display:block; line-height:1.1}
.brand small{color:var(--faint); font-size:11.5px}
.brand.sm .mark{width:30px; height:30px; font-size:16px}
.idx{display:flex; flex-direction:column; gap:2px}
.idx-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:700; padding:14px 10px 6px}
.idx-top{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:var(--muted); font-weight:500; text-decoration:none!important}
.idx-top:hover{background:rgba(255,255,255,.05); color:var(--text)}
.idx-top.on{background:var(--blue-soft); color:var(--blue2); font-weight:600}
.idx-top.ai-link .ic{color:var(--orange2)}
.idx-area summary{list-style:none; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; color:var(--text); font-weight:600}
.idx-area summary::-webkit-details-marker{display:none}
.idx-area summary:hover{background:rgba(255,255,255,.05)}
.idx-area summary .t{flex:1; min-width:0}
.idx-area summary > .ic:last-child{color:var(--faint); transition:transform .2s}
.idx-area[open] summary > .ic:last-child{transform:rotate(90deg)}
.area-ic{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--c); flex:none}
.idx-mods{display:flex; flex-direction:column; margin:2px 0 8px 23px; padding-left:16px; border-left:1px solid var(--line)}
.idx-mods a{padding:6px 10px; border-radius:8px; color:var(--muted); font-size:13px; text-decoration:none!important}
.idx-mods a:hover{color:var(--text); background:rgba(255,255,255,.04)}
.idx-mods a.on{color:var(--text); background:rgba(255,255,255,.07); font-weight:600}
.idx-mods a.soon{color:var(--faint)}
.idx-mods .arrow{color:var(--faint); font-size:11px}
.side-foot{margin-top:auto; border-top:1px solid var(--line); padding:14px 8px 0}
.who{display:flex; gap:10px; align-items:center}
.who b{display:block; font-size:13px} .who small{color:var(--faint); font-size:12px}
.avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--orange), #F59E0B); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; flex:none}
.foot-links{display:flex; gap:14px; margin-top:12px; font-size:12.5px}
.foot-links a{display:inline-flex; align-items:center; gap:6px; color:var(--muted)}
.main{min-width:0; padding:30px 38px 70px; max-width:1360px; width:100%}
.mtop,.scrim{display:none}
.crumbs{font-size:12.5px; color:var(--faint); margin-bottom:10px}
.crumbs a{color:var(--muted)} .crumbs .cur{color:var(--text)}
.top{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px}
.top p{margin:8px 0 0; color:var(--muted); max-width:70ch}
.sec{margin-top:30px} .sec-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px} .sec-h p{margin:4px 0 0; color:var(--muted); font-size:13px}

/* Componentes */
.glass{background:var(--glass); border:1px solid var(--line); border-radius:var(--r); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.pad{padding:20px 22px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{padding:18px 20px}
.kpi .l{color:var(--muted); font-size:12.5px; font-weight:500}
.kpi .v{font-family:var(--serif); font-size:34px; font-weight:600; line-height:1.15; margin-top:2px}
.kpi .s{font-size:12px; color:var(--faint)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line2); background:rgba(255,255,255,.04); padding:10px 16px; border-radius:11px; cursor:pointer; font-weight:600; font-size:13.5px; color:var(--text); text-decoration:none!important; white-space:nowrap}
.btn:hover{border-color:var(--blue2)}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff}
.btn.orange{background:var(--orange); border-color:var(--orange); color:#fff}
.btn.ghost{background:transparent} .btn.sm{padding:6px 11px; font-size:12.5px; border-radius:9px} .btn.danger{color:var(--bad)}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:99px; white-space:nowrap; background:rgba(255,255,255,.06); color:var(--muted)}
.tag.blue{background:var(--blue-soft); color:var(--blue2)} .tag.orange{background:var(--orange-soft); color:var(--orange2)} .tag.good{background:var(--good-soft); color:var(--good)} .tag.bad{background:var(--bad-soft); color:var(--bad)}
.flash{padding:12px 16px; border-radius:12px; margin-bottom:18px; font-weight:600; font-size:13.5px; background:var(--good-soft); color:var(--good); border:1px solid rgba(61,214,140,.3)}
.flash.err{background:var(--bad-soft); color:var(--bad); border-color:rgba(255,107,129,.3)}
.note{font-size:12.5px; color:var(--faint)}
.empty{padding:28px; text-align:center; color:var(--muted)}

/* Tarjetas de área (inicio) */
.areas{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px}
.area-card{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:22px; color:var(--text); text-decoration:none!important; transition:transform .2s, border-color .2s}
.area-card::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--c)}
.area-card::after{content:""; position:absolute; width:220px; height:220px; right:-90px; top:-110px; border-radius:50%; background:var(--c); opacity:.10; filter:blur(30px)}
.area-card:hover{transform:translateY(-2px); border-color:var(--line2)}
.area-card .hd{display:flex; gap:12px; align-items:center}
.area-card .hd .area-ic{width:42px; height:42px; border-radius:12px}
.area-card h3{font-family:var(--serif); font-size:20px; font-weight:600}
.area-card p{margin:0; color:var(--muted); font-size:13px}
.mods{display:flex; flex-direction:column; gap:6px}
.mods span{display:flex; align-items:center; gap:8px; font-size:13px}
.mods i{width:7px; height:7px; border-radius:50%; background:var(--faint); flex:none}
.mods .listo i,.mods .enlace i{background:var(--c)} .mods .proximamente{color:var(--faint)}
.bar{height:6px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--c, var(--blue))}
.area-card .ft{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--faint); margin-top:auto}

/* Módulos (página de área) */
.mod-card{display:flex; flex-direction:column; gap:10px; padding:20px; color:var(--text); text-decoration:none!important; transition:border-color .2s}
.mod-card:hover{border-color:var(--line2)}
.mod-card .hd{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.mod-card h3{font-size:16px}
.mod-card p{margin:0; color:var(--muted); font-size:13px; flex:1}
.mod-card .go{display:flex; align-items:center; gap:6px; color:var(--c); font-weight:600; font-size:13px}
.mod-card.soon{opacity:.72}
.hero-area{display:flex; gap:18px; align-items:center}
.hero-area .area-ic{width:58px; height:58px; border-radius:16px}

/* Línea de tiempo / hoja de ruta */
.road{list-style:none; margin:0; padding:0}
.road li{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line)}
.road li:last-child{border-bottom:0}
.road .st{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.06); color:var(--faint); font-size:12px; font-weight:700}
.road .done .st{background:var(--good-soft); color:var(--good)} .road .now .st{background:var(--orange-soft); color:var(--orange2)}
.road b{display:block} .road small{color:var(--faint)}
.feed{list-style:none; margin:0; padding:0}
.feed li{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px}
.feed li:last-child{border-bottom:0}
.feed .avatar{width:28px; height:28px; font-size:11px}
.feed small{color:var(--faint); display:block}

/* Tablas y formularios */
.tw{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{font-size:11.5px; font-weight:600; color:var(--muted); text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px}
.in, select.in, textarea.in{width:100%; border:1px solid var(--line2); background:rgba(5,8,15,.6); border-radius:10px; padding:10px 12px; min-width:0}
.in:focus{border-color:var(--blue); outline:none; box-shadow:0 0 0 3px var(--blue-soft)}
textarea.in{min-height:70px; resize:vertical}
.frow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end}
.inline{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.checks{display:flex; flex-wrap:wrap; gap:8px}
.chk{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:10px; border:1px solid var(--line2); cursor:pointer; font-size:13px; user-select:none}
.chk input{accent-color:var(--blue)}
.chk:has(input:checked){border-color:var(--blue); background:var(--blue-soft)}
.dot{width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--c)}

/* Login / instalación */
.center{position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:20px}
.login{width:min(420px,100%); padding:32px 30px}
.login .brand{padding:0; margin-bottom:26px}

/* Módulo próximamente / enlace */
.mod-hero{padding:34px; display:flex; flex-direction:column; gap:14px; max-width:760px}
.embed{width:100%; height:calc(100vh - 170px); border:1px solid var(--line); border-radius:var(--r); background:#0A0F1C}

@media (max-width:1100px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .frow{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .mtop{display:flex; position:sticky; top:0; z-index:20; align-items:center; gap:12px; padding:10px 16px; background:rgba(10,14,24,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
  .icon-btn{background:none; border:0; color:var(--text); padding:6px; cursor:pointer}
  .side{position:fixed; z-index:40; left:0; top:0; width:290px; transform:translateX(-100%); transition:transform .25s}
  .side.open{transform:none}
  .scrim.open{display:block; position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.55)}
  .main{padding:22px 16px 60px}
  .g2,.g3{grid-template-columns:1fr}
  h1{font-size:28px}
}
@media (max-width:520px){ .g4{grid-template-columns:1fr 1fr} .frow{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* Índice: áreas como enlaces directos */
.idx-area-l{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; color:var(--text); font-weight:600; text-decoration:none!important}
.idx-area-l:hover{background:rgba(255,255,255,.05)}
.idx-area-l.on{background:color-mix(in srgb, var(--c) 16%, transparent); box-shadow:inset 3px 0 0 var(--c)}
.idx-area-l .t{flex:1; min-width:0}

/* Encabezado de área y pestañas */
.area-bar{position:sticky; top:0; z-index:15; margin:-30px -38px 22px; padding:22px 38px 0; background:linear-gradient(rgba(5,8,15,.92), rgba(5,8,15,.86)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.area-title{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.area-title h1{font-size:26px; flex:1}
.area-title .area-ic{width:40px; height:40px; border-radius:12px}
.tabs{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none; padding:10px 14px; border-bottom:2px solid transparent; color:var(--muted); font-weight:600; font-size:13.5px; text-decoration:none!important; white-space:nowrap}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--text); border-bottom-color:var(--c)}
.tabs a.soon{color:var(--faint)}
.tabs .arrow{font-size:11px; color:var(--faint)}
@media (max-width:900px){ .area-bar{margin:-22px -16px 18px; padding:16px 16px 0; top:52px} .area-title h1{font-size:22px} }

/* Edición de áreas y módulos */
.ed-area{margin-bottom:12px; overflow:hidden}
.ed-area.off{opacity:.6}
.ed-area > summary, .ed-mod > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px}
.ed-area > summary::-webkit-details-marker, .ed-mod > summary::-webkit-details-marker{display:none}
.ed-area > summary{padding:18px 22px}
.ed-area > summary .area-ic{width:42px; height:42px; border-radius:12px; flex:none}
.ed-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ed-t b{font-size:16px; display:flex; align-items:center; gap:6px}
.ed-t small{color:var(--muted); font-size:13px; line-height:1.45}
.ed-meta{color:var(--faint); font-size:12.5px; white-space:nowrap}
.ed-chev{color:var(--faint); transition:transform .2s; display:flex}
details[open] > summary .ed-chev{transform:rotate(90deg)}
.ed-area > summary:hover .ed-t b, .ed-mod > summary:hover .ed-t b{color:var(--blue2)}
.ed-body{padding:4px 22px 22px; border-top:1px solid var(--line)}
.ed-h{font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:22px 0 12px; font-family:var(--sans)}
.ed-form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; max-width:860px}
.ed-form .span2{grid-column:1/-1}
.ed-form .field label{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:6px; display:block}
.ed-form .in{width:100%; font-size:15px; padding:12px 14px; min-height:46px}
.ed-form textarea.in{resize:vertical; line-height:1.5; font-family:inherit}
.ed-form .in.color{padding:5px; height:46px; cursor:pointer}
.ed-form .hint{display:block; margin-top:5px; font-size:12px; color:var(--faint)}
.ed-actions{display:flex; gap:10px; flex-wrap:wrap; padding-top:4px}
.ed-mod{border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); margin-bottom:10px}
.ed-mod > summary{padding:14px 18px}
.ed-mod > summary .ed-t b{font-size:15px}
.ed-mod > summary .ed-t small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ed-mod[open]{border-color:var(--line2); background:rgba(255,255,255,.035)}
.ed-mod[open] > summary .ed-t small{white-space:normal}
.ed-mod > .ed-form{padding:6px 18px 18px}
.ed-mod.off{opacity:.6}
.ed-new{border-style:dashed}
.ed-foot{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
@media (max-width:700px){ .ed-form{grid-template-columns:1fr} .ed-area > summary{padding:16px} .ed-body{padding:4px 16px 18px} .ed-meta{display:none} .ed-mod > summary{flex-wrap:wrap} }

/* ───── Niveles de acceso ───── */
.niv-grid{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.niv-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--line); flex-wrap:wrap}
.niv-row:first-child{border-top:0}
.niv-a{display:flex; align-items:center; gap:10px; font-weight:600}
.niv-a .dot{width:10px; height:10px; border-radius:50%; background:var(--c)}
.seg{display:inline-flex; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px; flex-wrap:wrap}
.seg label{cursor:pointer} .seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{display:block; padding:7px 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--muted)}
.seg input:checked + span{background:var(--blue-soft); color:var(--text); box-shadow:inset 0 0 0 1px rgba(127,166,255,.45)}
.seg input:focus-visible + span{outline:2px solid var(--blue2); outline-offset:1px}
.niv-help{margin-top:10px; display:grid; gap:4px} .niv-help p{margin:0; font-size:13px; color:var(--muted)} .niv-help b{color:var(--text)}

/* ───── Índice: contador ───── */
.idx-top .badge{margin-left:auto; font-style:normal; background:var(--orange); color:#fff; font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:99px; display:grid; place-items:center; padding:0 6px}
.avatar.sm{width:32px; height:32px; font-size:12px} .avatar.xs{width:26px; height:26px; font-size:10.5px}

/* ───── Novedades del día ───── */
.nov-wrap{display:grid; grid-template-columns:minmax(280px, 360px) 1fr; gap:18px; align-items:start}
.nov-form{position:sticky; top:18px; display:grid; gap:14px} .nov-form h2{margin:0}
.nov-tipos{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px} .nov-tipos legend{font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; padding:0}
.nov-tipos label{cursor:pointer} .nov-tipos input{position:absolute; opacity:0}
.nov-tipos span{display:block; border:1px solid var(--line2); border-radius:99px; padding:7px 12px; font-size:13px; font-weight:600; color:var(--muted)}
.nov-tipos input:checked + span{background:var(--blue-soft); border-color:rgba(127,166,255,.55); color:var(--text)}
.nov-tipos input:focus-visible + span{outline:2px solid var(--blue2)}
.nov-urg{display:flex; align-items:center; gap:8px; font-size:13.5px; cursor:pointer}
.nov-main{display:grid; gap:12px; min-width:0}
.nov-kpi a.kpi{text-decoration:none; color:inherit} .nov-kpi .kpi{padding:14px 16px} .nov-kpi .v{font-size:28px}
.nov-ft{margin:4px 0} .nov-ft a{text-decoration:none; display:inline-flex; align-items:center}
.nov{padding:16px 18px; border-left:3px solid transparent}
.nov.urg{border-left-color:var(--bad)} .nov.resuelta{opacity:.72}
.nov header{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nov-who{display:flex; flex-direction:column; line-height:1.25} .nov-who small{color:var(--faint); font-size:12px}
.nov-tags{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.nov-tx{margin:12px 0 0; font-size:14.5px; line-height:1.6}
.nov-res{margin:10px 0 0; font-size:13px; color:var(--good)}
.nov-r{display:flex; gap:10px; margin-top:12px; padding:10px 12px; background:rgba(255,255,255,.03); border-radius:12px}
.nov-r p{margin:2px 0 0}
.nov-act{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:flex-start}
.nov-d summary{list-style:none; cursor:pointer} .nov-d summary::-webkit-details-marker{display:none}
.nov-d[open]{flex-basis:100%} .nov-d[open] summary{margin-bottom:8px}
.nov-inl{display:flex; gap:8px; flex-wrap:wrap} .nov-inl .in{flex:1 1 200px; min-width:0}

/* ───── Tareas ───── */
.tar-wrap{display:grid; grid-template-columns:1fr minmax(280px, 360px); gap:18px; align-items:start}
.tar-new{position:sticky; top:18px; display:grid; gap:14px} .tar-new h2{margin:0}
.tar-h{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:0; margin-bottom:6px}
.tar-h .sub-tabs{margin:0} .tar-h .in{width:auto}
.sub-tabs a{color:var(--muted); padding:8px 14px; border-radius:9px; font-weight:700; font-size:13.5px; text-decoration:none}
.sub-tabs a.on{background:var(--blue-soft); color:var(--text); box-shadow:inset 0 0 0 1px rgba(127,166,255,.4)}
.tar-g{margin:18px 0 8px} .tar-g.bad{color:var(--bad)}
.tar-list{padding:0 4px}
.tar{display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-top:1px solid var(--line)}
.tar-list > .tar:first-child, .tar-list > .tar:first-of-type{border-top:0}
.tar-b{flex:1; min-width:0} .tar-b b{font-weight:600} .tar-b p{margin:4px 0 0; color:var(--muted); font-size:13px}
.tar-m{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:6px; font-size:12.5px; align-items:center}
.tar-m .bad{color:var(--bad); font-weight:600} .tar-m .tar-hoy{color:var(--orange2); font-weight:600}
.tick{width:26px; height:26px; border-radius:8px; border:2px solid var(--line2); background:none; color:#05080F; font-weight:800; cursor:pointer; display:grid; place-items:center; flex:none; margin-top:1px}
.tick:hover{border-color:var(--good)} .tar.hecha .tick{background:var(--good); border-color:var(--good)} .tick.off{cursor:default; opacity:.5}
.tar.hecha .tar-b b{text-decoration:line-through; color:var(--muted)}
.tar.atr{background:linear-gradient(90deg, var(--bad-soft), transparent 60%)}
.tar-ed{padding:0 14px 10px 52px} .tar-ed summary{cursor:pointer; color:var(--blue2); font-size:12.5px; font-weight:600; width:max-content}
.tar-form{display:grid; gap:8px; margin:8px 0}

/* ───── Inicio: hoy ───── */
.hoy-b{margin-bottom:22px}
.hoy-n{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; padding:10px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit; align-items:center}
.hoy-n small{grid-column:2} .hoy-n .tx{font-size:13.5px}
.hoy-b .tar{padding:10px 0}

@media (max-width: 900px){
  .nov-wrap, .tar-wrap{grid-template-columns:1fr}
  .nov-form, .tar-new{position:static}
  .tar-wrap .tar-new{order:-1}
  .nov-tags{margin-left:0}
}
.tar-2{display:grid; grid-template-columns:1fr 1fr; gap:10px} .tar-2 .in{width:100%; min-width:0}

/* ───── Onboarding: ficha del socio ───── */
.ob-r{cursor:pointer} .ob-r:hover td{background:rgba(255,255,255,.03)} .ob-r:focus-visible{outline:2px solid var(--blue2); outline-offset:-2px}
.ob-modal{position:fixed; inset:0; background:rgba(3,6,12,.72); z-index:60; display:grid; place-items:start center; overflow:auto; padding:40px 16px}
.ob-modal[hidden]{display:none}
.ob-mbox{position:relative; width:min(680px, 100%); background:var(--glass2); backdrop-filter:blur(16px)}
.ob-mbox h2{margin:0; padding-right:36px}
.modal-x{position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:10px; border:1px solid var(--line2); background:none; color:var(--text); font-size:20px; cursor:pointer}
.ob-fk{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:14px}
.ob-fk > div{background:rgba(255,255,255,.04); border-radius:12px; padding:10px 12px} .ob-fk small{display:block; color:var(--faint); font-size:12px} .ob-fk b{font-size:18px}
.ob-int{margin:12px 0 0; font-size:13.5px; color:var(--muted)} .ob-int b{color:var(--text)}
.ob-resp{display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap} .ob-resp label{font-size:13px; color:var(--muted)} .ob-resp .in{width:auto}
.ob-task.done{opacity:.75} .ok-b.on{background:var(--good); border-color:var(--good); color:#05080F; display:grid; place-items:center}
@media (max-width: 600px){ .ob-fk{grid-template-columns:1fr 1fr} }
.niv-mods{flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:4px 0 2px 20px; font-size:13px}
.niv-mods[hidden]{display:none}
.chk.sm{font-size:13px; gap:6px; padding:5px 10px} .chk.soon{opacity:.6}

/* ───── Protocolo: edición de pasos ───── */
.pp-card{display:grid; gap:10px; padding:14px 16px; margin-top:10px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02)}
.pp-new{border-style:dashed}
.pp-2{display:grid; grid-template-columns:2fr 1fr; gap:10px}
@media (max-width: 700px){ .pp-2{grid-template-columns:1fr} }

/* ───── Onboarding en Mis tareas ───── */
.onbt{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line)}
.onbt:first-child{border-top:0}
.onbt .b{flex:1; min-width:0} .onbt small{display:block; color:var(--faint); font-size:12.5px; margin-top:2px}
.onbt .act{display:flex; gap:6px; flex-wrap:wrap}
.onbt.hecho{opacity:.5} .onbt.hecho b{text-decoration:line-through}
.onbt.hecho .tick{background:var(--good); border-color:var(--good)} .onbt-err{color:var(--bad)!important}
.pp-et{display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:10px; align-items:end} .pp-et-b{display:flex; gap:6px; padding-bottom:2px}
@media (max-width: 800px){ .pp-et{grid-template-columns:1fr 1fr} .pp-et .field:first-child, .pp-et-b{grid-column:1/-1} }
/* Logo */
.brand-logo{display:block; height:auto; width:150px; max-width:100%}
.brand.sm .brand-logo{width:110px}
.login-brand{flex-direction:column; align-items:center; gap:14px; text-align:center}
.login-brand .brand-logo{width:200px}
.brand-ico{width:64px; height:64px; border-radius:16px}