/* Plataforma 360 · Movilizar-te — identidad visual de la marca */
:root{
--teal-lt:#00E4D9; --teal:#03BBB2; --teal-deep:#027B80; --ink:#10484B; --navy:#141233;
--azul-deep:#0C0A1E; --azul-mid:#232A52; --azul-slate:#363A57; --gold:#FFC002;
--gray-500:#6E7480; --gray-300:#A1A6B0; --gray-200:#C9CDD4; --gray-100:#E4E6EA; --gray-050:#F5F6F8; --paper:#FFFFFF;
--f-head:"Quicksand",system-ui,sans-serif; --f-body:"Poppins",system-ui,sans-serif;
--r-s:12px; --r-m:20px; --r-l:28px; --ease:cubic-bezier(.2,.7,.2,1);
--brand-flow:linear-gradient(90deg,#141233 0%,#027B80 50%,#0B6F76 75%,#141233 100%,#027B80 150%,#141233 200%);
--shadow:0 18px 44px rgba(16,72,75,.10),0 4px 12px rgba(16,72,75,.05);
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-weight:300;font-size:1rem;line-height:1.6;color:var(--azul-slate);background:var(--gray-050)}
h1,h2,h3{font-family:var(--f-head);color:var(--navy);line-height:1.1;letter-spacing:-.02em;margin:0}
a{color:var(--teal-deep);text-decoration:none}
img{max-width:100%}
button,input,select{font:inherit}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:.5rem 1rem;border-radius:8px;z-index:999}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.muted{color:var(--gray-500)}.block{display:block}.t-right{text-align:right}
.eyebrow{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin:0 0 .35rem}
.eyebrow--light{color:var(--teal-lt)}
/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-weight:500;font-size:.95rem;padding:.8rem 1.5rem;border-radius:999px;border:1.5px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s;white-space:nowrap}
.btn:hover{background:var(--azul-mid);border-color:var(--azul-mid)}
.btn--flow{background-image:var(--brand-flow);background-size:200% 100%;background-color:var(--teal-deep);border:0;font-weight:600;animation:brandFlow 4.5s linear infinite;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.btn--flow:hover{animation-duration:2.2s;box-shadow:0 12px 28px rgba(0,0,0,.22);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--gray-200)}.btn--ghost:hover{background:var(--gray-050);border-color:var(--navy)}
.btn--light{background:#fff;color:var(--navy);border-color:#fff}.btn--light:hover{background:var(--gray-050)}
.btn--sm{padding:.45rem .95rem;font-size:.82rem}.btn--block{width:100%;padding:.95rem}
@keyframes brandFlow{from{background-position:0% 50%}to{background-position:-200% 50%}}
.link-arrow{font-weight:500;color:var(--teal-deep);white-space:nowrap}.link-arrow::after{content:" →"}
/* ---------- Formularios ---------- */
.form{display:grid;gap:1.1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.4rem;font-weight:500;font-size:.88rem;color:var(--navy);border:0;padding:0;margin:0;min-width:0}
.field legend{padding:0;margin-bottom:.4rem}
.field small{font-weight:300;color:var(--gray-500)}
.field input,.field select{width:100%;font-weight:300;padding:.85rem 1rem;border:1.5px solid var(--gray-100);border-radius:var(--r-s);background:var(--gray-050);color:var(--navy);transition:border-color .2s,background .2s,box-shadow .2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(3,187,178,.14)}
.field input::placeholder{color:var(--gray-300)}
.field__pw{position:relative;display:block}.field__pw input{padding-right:3rem}
.field__eye{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:0;background:none;cursor:pointer;border-radius:50%;color:var(--gray-500)}
.field__eye::before{content:"";display:block;width:18px;height:18px;margin:auto;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.field__eye.is-on{color:var(--teal-deep)}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:300;color:var(--azul-slate);font-size:.92rem;cursor:pointer}.check input{margin-top:.25rem;accent-color:var(--teal-deep)}
.meter{display:block;height:5px;border-radius:3px;background:var(--gray-100);overflow:hidden;margin-top:.3rem}.meter i{display:block;height:100%;width:0;background:var(--gray-300);transition:background .3s}
.meter[data-level="1"] i{width:25%;background:#E55353}.meter[data-level="2"] i{width:50%;background:var(--gold)}.meter[data-level="3"] i{width:75%;background:var(--teal)}.meter[data-level="4"] i{width:100%;background:var(--teal-deep)}
.alert{padding:.85rem 1.1rem;border-radius:var(--r-s);font-size:.92rem;font-weight:400;margin-bottom:1.1rem}
.alert--err{background:#FFF1F1;color:#8A2B2B;border:1px solid #F5B5B5}.alert--ok{background:#E6FAF8;color:var(--teal-deep);border:1px solid #9FE8E3}.alert--info{background:#FFF7DD;color:#6B5200;border:1px solid #F5DD8A}
/* ---------- Inicio de sesión ---------- */
.auth{min-height:100svh;background:#fff}
.auth__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:100svh}
.auth__brand{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(2rem,4vw,3.5rem);color:#fff;background:linear-gradient(150deg,#0F3D40 0%,#10484B 45%,#141233 100%)}
.auth__orbs span{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;animation:orb 14s ease-in-out infinite alternate}
.auth__orbs span:nth-child(1){width:52vw;height:52vw;right:-16vw;top:-22vw;background:radial-gradient(circle,rgba(0,228,217,.32),rgba(0,228,217,0) 68%)}
.auth__orbs span:nth-child(2){width:34vw;height:34vw;left:-12vw;bottom:-14vw;background:radial-gradient(circle,rgba(3,187,178,.26),rgba(3,187,178,0) 70%);animation-delay:-5s}
.auth__orbs span:nth-child(3){width:20vw;height:20vw;left:40%;top:45%;background:radial-gradient(circle,rgba(255,192,2,.12),rgba(255,192,2,0) 70%);animation-delay:-9s}
@keyframes orb{from{transform:translate(0,0)}to{transform:translate(3vw,2vw)}}
.auth__logo{position:relative;width:190px;height:auto}
.auth__copy{position:relative;max-width:34rem}
.auth__kicker{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-lt);font-weight:500;margin:0 0 1rem}
.auth__copy h1{color:#fff;font-size:clamp(2rem,3.6vw,3.4rem);font-weight:700}
.auth__copy h1 span{color:var(--teal-lt)}
.auth__lead{color:rgba(255,255,255,.78);font-size:1.05rem;max-width:30rem;margin:1.2rem 0 0}
.auth__foot{position:relative;display:flex;align-items:center;gap:.7rem;font-size:.85rem;color:rgba(255,255,255,.6)}
.auth__panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(2rem,4vw,3.5rem) clamp(1.25rem,4vw,3rem);background:radial-gradient(60% 50% at 100% 0%,rgba(3,187,178,.10),transparent 70%),#fff}
.auth__card{width:min(26rem,100%)}
.auth__logo-sm{display:none;width:150px;height:auto;margin-bottom:1.5rem}
.auth__card h2{font-size:2rem;margin-bottom:.4rem}
.auth__sub{color:var(--gray-500);margin:0 0 1.6rem}
.auth__help{margin-top:1.5rem;font-size:.88rem;color:var(--gray-500)}
.auth__legal{margin-top:auto;padding-top:2rem;font-size:.78rem;color:var(--gray-500);text-align:center}
/* ---------- Estructura de la aplicación ---------- */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100svh}
.side{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding:1.6rem 1.2rem;color:#fff;background:linear-gradient(170deg,#10484B 0%,#141233 100%);z-index:60}
.side__brand img{width:140px;height:auto;display:block}
.side__kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-lt);margin:.6rem 0 1.8rem;font-weight:500}
.side__nav{display:grid;gap:.25rem}
.side__nav a,.side__soon{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;border-radius:12px;color:rgba(255,255,255,.82);font-weight:400;font-size:.95rem;transition:background .2s,color .2s}
.side__nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.side__nav a[aria-current=page]{background:rgba(0,228,217,.14);color:#fff;font-weight:500;box-shadow:inset 3px 0 0 var(--teal-lt)}
.side__soon{color:rgba(255,255,255,.4);cursor:default}.side__soon img{opacity:.5}
.side__soon em{margin-left:auto;font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;background:rgba(255,255,255,.08)}
.side__user{margin-top:auto;display:flex;align-items:center;gap:.7rem;padding:.9rem;border-radius:14px;background:rgba(255,255,255,.06)}
.side__user strong{display:block;font-weight:500;font-size:.92rem;line-height:1.2}.side__user small{color:rgba(255,255,255,.55);font-size:.78rem}
.side__logout{margin-top:.6rem}.side__logout button{width:100%;background:none;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);padding:.55rem;border-radius:10px;cursor:pointer;font-size:.85rem}.side__logout button:hover{background:rgba(255,255,255,.08);color:#fff}
.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--teal-deep),var(--navy));color:#fff;font-family:var(--f-head);font-weight:700;flex:none}
.avatar--sm{width:34px;height:34px;font-size:.9rem}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:1rem;padding:1.2rem clamp(1.25rem,3vw,2.5rem);background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--gray-100);position:sticky;top:0;z-index:40}
.top__title h1{font-size:clamp(1.35rem,2vw,1.75rem)}
.top__actions{margin-left:auto;display:flex;align-items:center;gap:1rem}
.top__me{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--navy);font-weight:400}.top__me:hover{color:var(--teal-deep)}
.top__burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.top__burger span{display:block;width:22px;height:1.5px;background:var(--navy);border-radius:2px}
.content{padding:clamp(1.25rem,3vw,2.5rem);display:grid;gap:1.5rem;align-content:start}
.card{background:#fff;border-radius:var(--r-m);padding:clamp(1.25rem,2.5vw,1.9rem);box-shadow:var(--shadow)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.card__head h2{font-size:1.2rem}
.card--narrow{max-width:34rem}
.card--hero{background:linear-gradient(150deg,#0F3D40,#10484B 55%,#141233);color:rgba(255,255,255,.8);display:flex;flex-direction:column;gap:.8rem;align-items:flex-start;justify-content:center}
.card--hero h2{color:#fff;font-size:1.5rem}.card--hero p{margin:0}
.card--key{display:flex;gap:1rem;align-items:flex-start;border:1px solid #9FE8E3;background:#F3FCFB}
.card--key h2{font-size:1.05rem;font-weight:600}.card--key p{margin:.3rem 0 .8rem;font-size:.92rem;color:var(--gray-500)}
.key{display:inline-flex;align-items:center;gap:.8rem;background:#fff;border:1.5px dashed var(--teal);border-radius:12px;padding:.5rem .6rem .5rem 1rem}
.key code{font-family:ui-monospace,Menlo,monospace;font-size:1.15rem;font-weight:600;color:var(--navy);letter-spacing:.06em}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.kpi{background:#fff;border-radius:var(--r-m);padding:1.4rem 1.5rem;box-shadow:var(--shadow);display:grid;gap:.2rem}
.kpi img{width:26px;height:26px;margin-bottom:.4rem}.kpi strong{font-family:var(--f-head);font-size:2.2rem;color:var(--navy);line-height:1}.kpi span{font-size:.85rem;color:var(--gray-500)}
.grid-2{display:grid;grid-template-columns:1.3fr .9fr;gap:1.5rem}
.list{list-style:none;margin:0;padding:0;display:grid}
.list li{display:flex;align-items:center;gap:.8rem;padding:.75rem 0;border-top:1px solid var(--gray-100)}.list li:first-child{border-top:0}
.list strong{display:block;font-weight:500;color:var(--navy);font-size:.95rem}.list small{color:var(--gray-500)}.list .pill{margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;border-radius:999px;font-size:.76rem;font-weight:500}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill--on{background:#E6FAF8;color:var(--teal-deep)}.pill--off{background:var(--gray-050);color:var(--gray-500)}
.role{display:inline-block;padding:.2rem .65rem;border-radius:8px;font-size:.78rem;font-weight:500;background:var(--gray-050);color:var(--azul-slate)}
.role--superadmin{background:#141233;color:#fff}.role--administrador{background:#DFF0F2;color:var(--teal-deep)}.role--cliente{background:#FFF3CF;color:#6B5200}.role--empleado_cliente{background:#F6E6EE;color:#6D2E46}
.search{display:flex;align-items:center;gap:.6rem;flex:1;max-width:30rem;background:var(--gray-050);border:1.5px solid var(--gray-100);border-radius:999px;padding:.45rem 1rem}
.search input{flex:1;border:0;background:none;font-weight:300;min-width:0}.search input:focus{outline:none}.search:focus-within{border-color:var(--teal);background:#fff}
.table-wrap{overflow-x:auto;margin:0 -.5rem}
.table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:860px}
.table th{text-align:left;font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);padding:.7rem .75rem;border-bottom:1px solid var(--gray-100)}
.table td{padding:.8rem .75rem;border-bottom:1px solid var(--gray-050);vertical-align:middle}
.table tr:hover td{background:#FAFCFC}
.table .empty{text-align:center;color:var(--gray-500);padding:2.5rem}
.who{display:flex;align-items:center;gap:.7rem}.who strong{display:block;font-weight:500;color:var(--navy)}.who small{color:var(--gray-500)}
.inline{display:inline}.inline+.inline{margin-left:.35rem}
/* ---------- Modal y avisos ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem}.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(16,72,75,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fade .25s var(--ease) both}
.modal__card{position:relative;width:min(40rem,100%);max-height:calc(100vh - 2rem);overflow:auto;background:#fff;border-radius:var(--r-l);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:0 30px 80px rgba(16,72,75,.35);animation:rise .4s var(--ease) both}
.modal__card h2{font-size:1.5rem;margin-bottom:1.2rem}
.modal__close{position:absolute;top:.9rem;right:1rem;width:40px;height:40px;border-radius:50%;border:0;background:var(--gray-050);color:var(--navy);font-size:1.5rem;cursor:pointer}
.modal__actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:.5rem}
.toast{position:fixed;right:1.5rem;bottom:1.5rem;z-index:300;max-width:24rem;padding:.9rem 1.2rem;border-radius:14px;background:var(--navy);color:#fff;font-size:.92rem;box-shadow:0 20px 50px rgba(20,18,51,.35);animation:rise .4s var(--ease) both}
.toast--err{background:#5A1F1F}.toast.is-hide{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.side__backdrop{display:none;position:fixed;inset:0;background:rgba(16,72,75,.45);z-index:55}
/* ---------- Responsive ---------- */
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}
@media (max-width:900px){
.auth__grid{grid-template-columns:1fr}.auth__brand{display:none}.auth__logo-sm{display:block}.auth__panel{justify-content:flex-start;padding-top:3rem}
.app{grid-template-columns:1fr}
.side{position:fixed;left:0;top:0;width:280px;transform:translateX(-100%);transition:transform .3s var(--ease)}
.side.is-open{transform:none}.side.is-open~.side__backdrop{display:block}
.top__burger{display:flex}
.form__row{grid-template-columns:1fr}
}
@media (max-width:560px){.kpis{grid-template-columns:1fr}.top__me span{display:none}.card--key{flex-direction:column}.toast{left:1rem;right:1rem;max-width:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Correcciones de formulario */
[hidden]{display:none!important}
.field--pw .check{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start}
.field--pw{gap:.6rem}
/* Sin desbordes horizontales en pantallas pequeñas */
.content>*,.card,.grid-2>*{min-width:0}
@media (max-width:560px){.top{flex-wrap:wrap;gap:.6rem .8rem}.top__actions{width:100%;justify-content:space-between}.content{padding:1rem}.card{padding:1.1rem;border-radius:16px}.table{min-width:720px}}
/* ==========================================================
Módulo 360
========================================================== */
.kpi{text-decoration:none;color:inherit;transition:transform .2s var(--ease),box-shadow .2s}.kpi:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(16,72,75,.14)}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;color:var(--gray-500);margin:0 0 .15rem}.crumbs a{color:var(--gray-500)}.crumbs a:hover{color:var(--teal-deep)}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:.9rem 0;border-top:1px solid var(--gray-100)}.row:first-child{border-top:0}
.row__main{display:block;color:inherit;min-width:0}.row__main strong{display:block;font-weight:500;color:var(--navy)}.row__main small{color:var(--gray-500)}.row__main:hover strong{color:var(--teal-deep)}
.row__meta{display:grid;grid-template-columns:120px auto;gap:.2rem .7rem;align-items:center;text-align:right}.row__meta small{grid-column:1/-1;color:var(--gray-500);font-size:.78rem}
.num{font-family:var(--f-head);font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.avance{height:6px;border-radius:3px;background:var(--gray-100);overflow:hidden}.avance i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-deep));border-radius:3px}
.empty{text-align:center;padding:2.5rem 1rem;max-width:34rem;margin:0 auto;display:grid;gap:.6rem;justify-items:center}.empty h3{font-size:1.25rem}.empty p{color:var(--gray-500);margin:0 0 .6rem}
.two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.stack{display:grid;gap:1.5rem}
.card h2{font-size:1.2rem}.card h3{font-size:1rem;margin-bottom:.4rem}
.card--muted{background:var(--gray-050);box-shadow:none}
.state{display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .7rem;border-radius:999px;font-size:.78rem;font-weight:500}
.state--borrador{background:var(--gray-050);color:var(--gray-500)}.state--activo{background:#E6FAF8;color:var(--teal-deep)}.state--cerrado{background:#141233;color:#fff}
.state--sin_enviar{background:var(--gray-050);color:var(--gray-500)}.state--enviada{background:#FFF7DD;color:#6B5200}.state--en_progreso{background:#DFF0F2;color:var(--teal-deep)}.state--completada{background:#E6FAF8;color:var(--teal-deep)}
.rel{display:inline-block;padding:.18rem .6rem;border-radius:8px;font-size:.76rem;font-weight:500;background:var(--gray-050);color:var(--azul-slate)}
.rel--autoevaluacion{background:#141233;color:#fff}.rel--jefe{background:#DFF0F2;color:var(--teal-deep)}.rel--colega{background:#FFF3CF;color:#6B5200}.rel--colaborador{background:#F6E6EE;color:#6D2E46}.rel--cliente{background:#E8EAF6;color:#232A52}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.5rem}
.step{display:flex;gap:.7rem;align-items:center;padding:.8rem 1rem;border-radius:14px;background:var(--gray-050);font-size:.88rem;color:var(--gray-500)}
.step b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--navy);font-family:var(--f-head);flex:none;border:1.5px solid var(--gray-200)}
.step.is-done{color:var(--teal-deep)}.step.is-done b{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.step.is-now{background:#E6FAF8;color:var(--navy);font-weight:500}.step.is-now b{border-color:var(--teal);color:var(--teal-deep)}
.form--inline{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}.form--inline .btn{align-self:end}
.field textarea{width:100%;font:inherit;font-weight:300;padding:.85rem 1rem;border:1.5px solid var(--gray-100);border-radius:var(--r-s);background:var(--gray-050);color:var(--navy);resize:vertical;min-height:7rem;line-height:1.55}
.field textarea:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(3,187,178,.14)}
.hint{font-size:.84rem;color:var(--gray-500)}
/* Selección de competencias */
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}
.pick label{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;padding:1rem 1.1rem;border-radius:14px;border:1.5px solid var(--gray-100);background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.pick label:hover{border-color:var(--teal)}.pick label:has(input:checked){border-color:var(--teal-deep);background:#F3FCFB}
.pick input[type=checkbox]{margin-top:.25rem;accent-color:var(--teal-deep);width:18px;height:18px}
.pick strong{font-weight:500;color:var(--navy);font-size:.98rem}.pick p{grid-column:2;margin:0;font-size:.84rem;color:var(--gray-500);line-height:1.45}
.pick .esperado{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;font-size:.82rem;color:var(--gray-500);margin-top:.3rem}
.pick .esperado input{width:4.2rem;padding:.35rem .5rem;border:1.5px solid var(--gray-100);border-radius:8px;font:inherit;text-align:center}
.pick .esperado span.origen{margin-left:auto;font-size:.72rem;letter-spacing:.02em;color:var(--teal-deep);white-space:nowrap}
.pick-count{font-size:.9rem;color:var(--gray-500)}.pick-count b{color:var(--navy)}
/* Lista de competencias */
.comps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.comp{display:grid;gap:.5rem;background:#fff;border-radius:var(--r-m);padding:1.3rem 1.4rem;box-shadow:var(--shadow);color:inherit;transition:transform .2s var(--ease),box-shadow .2s}
.comp:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(16,72,75,.14)}
.comp h3{font-size:1.05rem;margin:0}.comp p{margin:0;font-size:.9rem;color:var(--gray-500);line-height:1.5}
.comp__foot{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--gray-500);margin-top:.3rem}
.comp__foot em{font-style:normal;color:var(--teal-deep);font-weight:500}
/* Árbol de evaluadores */
.tree{display:grid;gap:.6rem}
.leaf{display:grid;grid-template-columns:auto 1fr auto auto;gap:.9rem;align-items:center;padding:.8rem 1rem;border-radius:14px;border:1px solid var(--gray-100);background:#fff}
.leaf strong{display:block;font-weight:500;color:var(--navy)}.leaf small{color:var(--gray-500)}.leaf .acts{display:flex;gap:.4rem;align-items:center}
.leaf--done{background:#F3FCFB;border-color:#9FE8E3}
.dev-link{font-size:.75rem;color:var(--teal-deep);word-break:break-all}
/* Tabla de evaluados */
.table .avance{width:110px;display:inline-block;vertical-align:middle;margin-right:.5rem}
.counts{display:inline-flex;gap:.5rem;font-size:.78rem;color:var(--gray-500)}.counts b{color:var(--navy);font-weight:500}
/* Reporte */
.report{max-width:1080px}
.report__head{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;justify-content:space-between}
.report__who h2{font-size:1.6rem}.report__who p{margin:.2rem 0 0;color:var(--gray-500)}
.legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:var(--gray-500)}.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:.4rem;vertical-align:-2px}
.radar{width:100%;max-width:620px;height:auto;display:block;margin:0 auto}
.radar__ring{fill:none;stroke:var(--gray-100)}.radar__axis{stroke:var(--gray-100)}.radar__label{font-size:12px;fill:var(--gray-500);font-family:var(--f-body)}
.radar__esperado{fill:rgba(255,192,2,.10);stroke:#D9A300;stroke-width:1.5;stroke-dasharray:5 4}
.radar__otros{fill:rgba(3,187,178,.22);stroke:var(--teal-deep);stroke-width:2.5}
.radar__auto{fill:rgba(20,18,51,.06);stroke:var(--navy);stroke-width:2}
.radar__dot--otros{fill:var(--teal-deep)}.radar__dot--auto{fill:var(--navy)}
.bars{display:grid;gap:1rem}
.bar{display:grid;grid-template-columns:200px 1fr 60px;gap:.9rem;align-items:center}
.bar strong{font-weight:500;color:var(--navy);font-size:.95rem}
.bar .track{position:relative;height:12px;border-radius:6px;background:var(--gray-050);overflow:visible}
.bar .track i{position:absolute;left:0;top:0;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal),var(--teal-deep))}
.bar .track em{position:absolute;top:-5px;width:2px;height:22px;background:#D9A300;border-radius:1px}
.bar .track u{position:absolute;top:1px;width:10px;height:10px;border-radius:50%;background:var(--navy);transform:translateX(-5px);border:2px solid #fff}
.bar .num{text-align:right}
.matrix{width:100%;border-collapse:collapse;font-size:.9rem}
.matrix th,.matrix td{padding:.65rem .6rem;border-bottom:1px solid var(--gray-050);text-align:center;font-variant-numeric:tabular-nums}
.matrix th{font-weight:500;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500)}
.matrix td:first-child,.matrix th:first-child{text-align:left;color:var(--navy);font-weight:500}
.matrix .lo{color:#B4453F}.matrix .hi{color:var(--teal-deep);font-weight:600}.matrix .na{color:var(--gray-300)}
.insights{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.insight h3{display:flex;align-items:center;gap:.5rem}
.insight ol{margin:0;padding-left:1.2rem;display:grid;gap:.6rem}.insight li strong{display:block;font-weight:500;color:var(--navy)}.insight li small{color:var(--gray-500)}
.conductas{margin:0;padding:0;list-style:none;display:grid;gap:.45rem;font-size:.88rem}
.conductas li{display:grid;grid-template-columns:1fr 70px;gap:.6rem;align-items:center;color:var(--azul-slate)}.conductas b{font-weight:500;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.callout{padding:1rem 1.2rem;border-radius:14px;background:#FFF7DD;color:#6B5200;font-size:.9rem}
@media print{.side,.top,.side__backdrop,.toast,.no-print{display:none!important}.app{display:block}.content{padding:0}.card{box-shadow:none;border:1px solid var(--gray-100);break-inside:avoid}body{background:#fff}}
/* ---------- Responder la evaluación (pantalla pública) ---------- */
.ev{min-height:100svh;background:linear-gradient(180deg,#F4FBFA 0%,#fff 40%);display:flex;flex-direction:column}
.ev__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,4vw,2rem)}
.ev__top img{width:130px;height:auto}.ev__top small{color:var(--gray-500);font-size:.82rem}
.ev__wrap{width:min(42rem,100%);margin:0 auto;padding:clamp(1rem,3vw,2rem) clamp(1rem,4vw,2rem) 3rem;flex:1;display:flex;flex-direction:column}
.ev__card{background:#fff;border-radius:var(--r-l);padding:clamp(1.4rem,4vw,2.4rem);box-shadow:var(--shadow)}
.ev h1{font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:.6rem}
.ev__card p{color:var(--gray-500);margin:.4rem 0}
.ev__facts{display:grid;gap:.6rem;margin:1.2rem 0;padding:0;list-style:none}
.ev__facts li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:.95rem;color:var(--azul-slate)}
.ev__facts img{width:22px;height:22px;margin-top:.1rem}
.ev__progress{display:grid;gap:.4rem;margin-bottom:1.4rem}
.ev__progress .avance{height:8px}.ev__progress small{display:flex;justify-content:space-between;color:var(--gray-500);font-size:.8rem}
.ev__comp{font-size:.82rem;font-weight:500;color:var(--teal-deep);margin:0 0 .4rem}
.ev__q{font-family:var(--f-head);font-size:clamp(1.25rem,3.4vw,1.6rem);font-weight:600;line-height:1.3;color:var(--navy);margin:0 0 1.4rem}
.ev__intro{padding:1rem 1.1rem;border-radius:14px;background:#F3FCFB;border:1px solid #9FE8E3;font-size:.9rem;color:var(--teal-deep);margin-bottom:1.2rem}
.scale{display:grid;grid-template-columns:repeat(10,1fr);gap:.4rem}
.scale label{position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:44px;border-radius:12px;border:1.5px solid var(--gray-100);background:var(--gray-050);font-family:var(--f-head);font-weight:700;color:var(--navy);cursor:pointer;transition:transform .15s var(--ease),background .2s,border-color .2s,color .2s}
.scale input{position:absolute;inset:0;opacity:0;cursor:pointer}
.scale label:hover{border-color:var(--teal)}.scale label:active{transform:scale(.95)}
.scale label:has(input:checked){background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.scale label:has(input:focus-visible){outline:3px solid var(--teal);outline-offset:2px}
.scale__ends{display:flex;justify-content:space-between;font-size:.8rem;color:var(--gray-500);margin-top:.5rem}
.ev__actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.6rem}
.ev__legal{text-align:center;font-size:.78rem;color:var(--gray-500);padding:1rem}
.ev__ok{width:72px;height:72px;border-radius:50%;background:#E6FAF8;display:grid;place-items:center;margin-bottom:1rem}
@media (max-width:560px){.scale{grid-template-columns:repeat(5,1fr)}.ev__actions{flex-direction:column-reverse;align-items:stretch}.ev__actions .btn{width:100%}.ev__top img{width:110px}}
@media (max-width:1024px){.two,.insights{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.bar{grid-template-columns:1fr 60px}.bar strong{grid-column:1/-1}.leaf{grid-template-columns:1fr auto}.leaf .rel{grid-column:1}.leaf .acts{grid-column:1/-1;justify-content:flex-end}.steps{grid-template-columns:1fr}.row{grid-template-columns:1fr}.row__meta{text-align:left}}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap}.tabs a{padding:.45rem .9rem;border-radius:999px;font-size:.88rem;color:var(--gray-500);transition:background .2s,color .2s}.tabs a:hover{background:var(--gray-050);color:var(--navy)}.tabs a[aria-current=page]{background:var(--navy);color:#fff;font-weight:500}
.top__title h1 .state{vertical-align:middle;margin-left:.4rem}
/* Encabezado de página en pantallas pequeñas: acciones en fila propia, sin desbordes */
@media (max-width:820px){.top{flex-wrap:wrap;gap:.5rem .8rem}.top__burger{order:0}.top__title{order:1;flex:1;min-width:0}.top__actions{order:2;width:100%;margin-left:0;flex-wrap:wrap;gap:.5rem}.top__actions .btn{padding:.6rem 1rem;font-size:.85rem}.top__actions form{display:contents}.top__me{margin-left:auto}.crumbs{display:none}}