@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(https://dcojymaomoycohlrbibq.supabase.co/storage/v1/object/public/panel/v6/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(https://dcojymaomoycohlrbibq.supabase.co/storage/v1/object/public/panel/v6/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(https://dcojymaomoycohlrbibq.supabase.co/storage/v1/object/public/panel/v6/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(https://dcojymaomoycohlrbibq.supabase.co/storage/v1/object/public/panel/v6/fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(https://dcojymaomoycohlrbibq.supabase.co/storage/v1/object/public/panel/v6/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(https://dcojymaomoycohlrbibq.supabase.co/storage/v1/object/public/panel/v6/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  --fondo:#EDECE8; --papel:#FFFFFF; --papel-2:#F6F5F2; --tinta:#18181B; --suave:#5C5C64; --tenue:#8A8A92; --linea:#DAD8D2; --linea-2:#E8E6E1;
  --negro:#0E0E0F; --negro-2:#1C1C1F; --rojo:#FF1744; --rojo-osc:#C8102E; --rojo-tinte:#FFE8EC;
  /* stages: label always shown next to the dot */
  --st-nueva:#FF1744; --st-contactada:#E08A00; --st-entrevista:#2A6FDB; --st-contratada:#14855A; --st-descartada:#9A9AA2;
  --ok:#14855A; --ok-tinte:#E3F4EC; --aviso:#B86E00; --aviso-tinte:#FFF1D6;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif; --sans:Barlow,"Helvetica Neue",Arial,sans-serif;
  --r:14px; --top:60px; --dock-w:300px; --dock-h:132px;
  --sombra:0 1px 0 rgba(24,24,27,.04),0 8px 24px -12px rgba(24,24,27,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--tinta);font:15px/1.4 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
img{display:block}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.arranque{min-height:100vh;display:grid;place-items:center}
.arranque img{animation:latir 1.2s ease-in-out infinite}
@keyframes latir{50%{opacity:.35}}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--linea);background:var(--papel);font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,transform .1s}
.btn:hover{border-color:#c3c0b8;background:var(--papel-2)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn.rojo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn.rojo:hover{background:var(--rojo-osc);border-color:var(--rojo-osc)}
.btn.negro{background:var(--negro);border-color:var(--negro);color:#fff}
.btn.negro:hover{background:#2a2a2e}
.btn.chico{height:32px;padding:0 12px;font-size:13px}
.btn.icono{width:38px;padding:0;justify-content:center}
.btn.chico.icono{width:32px}
.btn.plano{border-color:transparent;background:transparent}
.btn.plano:hover{background:rgba(24,24,27,.06)}
.btn[disabled]{opacity:.5;pointer-events:none}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>span{font-size:13px;font-weight:600;color:var(--suave)}
.inp,select.inp,textarea.inp{width:100%;height:40px;border:1px solid var(--linea);border-radius:10px;background:var(--papel);padding:0 12px;font-size:15px}
textarea.inp{height:auto;min-height:90px;padding:10px 12px;resize:vertical;line-height:1.45}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235C5C64' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.inp:focus{outline:none;border-color:var(--tinta)}
select.inp.sel-chico,.sel-chico{width:auto;max-width:100%;height:32px;border-radius:999px;font-size:13px;font-weight:600;padding:0 28px 0 12px;background-position:right 10px center}
.fila{display:flex;gap:10px;align-items:center}
.rejilla2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.rejilla2{grid-template-columns:1fr}}
.vacio{color:var(--suave);font-size:14px;padding:6px 0}
.vacio b{color:var(--tinta)}
.pista{font-size:13px;color:var(--suave)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--negro)}
.login-card{width:100%;max-width:400px;background:var(--papel);border-radius:22px;padding:30px 28px 28px}
.login-card img{height:30px;width:auto;margin-bottom:26px}
.login-card h1{font:700 30px/1 var(--cond);text-transform:uppercase;letter-spacing:.01em;margin:0 0 8px}
.login-card p{margin:0 0 20px;color:var(--suave)}
.login-card form{display:flex;flex-direction:column;gap:12px}
.login-card .btn{height:46px;justify-content:center;font-size:15px}
.login-card .codigo{height:58px;font:700 30px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.35em;text-align:center}
.login-card .error{color:var(--rojo-osc);font-size:14px;font-weight:600}
.login-card .error:empty{display:none}
.login-card .link{background:none;border:0;padding:0;color:var(--suave);text-decoration:underline;font-size:14px;align-self:flex-start}
.login-card form>.link{margin-top:4px;align-self:center}
.con-ver{position:relative}
.con-ver .inp{padding-right:92px}
.ver-clave{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:32px;padding:0 12px;border:0;border-radius:8px;background:var(--fondo);font-size:13px;font-weight:700;color:var(--suave)}
.ver-clave:hover{color:var(--tinta)}
.login-card .inp{height:46px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;height:var(--top);background:var(--negro);color:#fff;display:flex;align-items:center;gap:14px;padding:0 14px 0 18px}
.top .logo{height:24px;width:auto;flex:none}
.tabs{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;align-self:stretch;align-items:stretch}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;display:flex;cursor:pointer;align-items:center;gap:6px;padding:0 13px;border:0;background:none;color:#A9A9B0;font-weight:600;font-size:15px;white-space:nowrap}
.tab:hover{color:#fff}
.tab.on{color:#fff}
.tab .x,.tab .lapiz{display:none;width:20px;height:20px;border-radius:6px;align-items:center;justify-content:center;color:#A9A9B0}
.tab .x:hover,.tab .lapiz:hover{background:rgba(255,255,255,.12);color:#fff}
.tab svg{width:14px;height:14px}
.editando .tab .x,.editando .tab .lapiz{display:inline-flex}
.tab.nuevo{color:#A9A9B0;display:none}
.editando .tab.nuevo{display:flex}
.top-der{display:flex;align-items:center;gap:8px;flex:none}
.buscar{position:relative}
.buscar input{width:240px;height:38px;border-radius:999px;border:1px solid #2E2E33;background:var(--negro-2);color:#fff;padding:0 14px 0 36px;font-size:14px}
.buscar input::placeholder{color:#8A8A92}
.buscar input:focus{outline:none;border-color:#55555c}
.buscar>svg{position:absolute;left:12px;top:11px;width:16px;height:16px;color:#8A8A92;pointer-events:none}
.resultados{position:absolute;right:0;top:44px;width:340px;max-height:60vh;overflow:auto;background:var(--papel);color:var(--tinta);border-radius:14px;box-shadow:0 16px 40px -10px rgba(0,0,0,.4);padding:6px;z-index:60}
.resultados button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;background:none;text-align:left;padding:9px 10px;border-radius:10px}
.resultados button:hover,.resultados button.on{background:var(--papel-2)}
.resultados small{color:var(--suave)}
.top .btn{background:transparent;border-color:#3A3A40;color:#fff}
.top .btn:hover{background:#26262A}
.top .btn.rojo{background:var(--rojo);border-color:var(--rojo)}
.avatar{width:36px;height:36px;border-radius:50%;border:0;background:#2A2A2F;color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.menu{position:absolute;right:12px;top:calc(var(--top) - 4px);background:var(--papel);color:var(--tinta);border-radius:14px;box-shadow:0 16px 40px -10px rgba(0,0,0,.4);padding:6px;min-width:230px;z-index:70}
.menu .quien{padding:10px 12px 8px;border-bottom:1px solid var(--linea-2);margin-bottom:4px}
.menu .quien small{display:block;color:var(--suave)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:10px 12px;border-radius:10px;text-align:left;font-weight:500}
.menu button:hover{background:var(--papel-2)}
.menu svg{width:17px;height:17px;color:var(--suave)}
@media (max-width:860px){.buscar input{width:170px}}
@media (max-width:640px){
  :root{--top:100px}
  .top{flex-wrap:wrap;height:auto;gap:0 8px;padding:0 12px}
  .top .logo{height:20px;margin:18px 0}
  .top-der{margin-left:auto}
  .tabs{order:3;flex:1 0 100%;height:44px;margin:0 -12px;padding:0 4px;border-top:1px solid #222226}
  .tab{font-size:14.5px}
  .buscar input{width:38px;padding:0;color:transparent;cursor:pointer}
  .buscar input:not(:focus)::placeholder{color:transparent}
  .buscar input:focus{width:calc(100vw - 24px);position:fixed;left:12px;top:11px;padding:0 14px 0 36px;color:#fff;z-index:61}
  .buscar>svg{left:11px}
  .buscar input:focus+svg{position:fixed;left:24px;top:22px;z-index:62}
  .resultados{position:fixed;left:12px;right:12px;top:56px;width:auto}
  .btn-personalizar span{display:none}
  .btn-personalizar{width:38px;padding:0;justify-content:center}
}

/* ---------- edit bar + module library ---------- */
.editbar{display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;background:#FFF6D9;border-bottom:1px solid #EBDDAA;font-size:14px}
.editando .editbar{display:flex}
.editbar p{margin:0;flex:1;min-width:220px}
.biblio{display:none;position:fixed;z-index:30;background:var(--papel);border-color:var(--linea)}
.editando .biblio{display:flex}
.biblio h2{font:700 18px/1 var(--cond);text-transform:uppercase;letter-spacing:.02em;margin:0}
.biblio .cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.biblio .items{display:flex;gap:8px}
.lib-item{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.lib-item .grid-stack-item-content{position:static;display:flex;gap:11px;align-items:center;border:1px solid var(--linea);background:var(--papel);border-radius:12px;padding:10px 12px;transition:border-color .15s,box-shadow .15s}
.lib-item:hover .grid-stack-item-content{border-color:var(--tinta);box-shadow:var(--sombra)}
.lib-item .ico{width:36px;height:36px;border-radius:10px;background:var(--fondo);display:grid;place-items:center;flex:none}
.lib-item .ico svg{width:19px;height:19px}
.lib-item b{display:block;font-size:14px;line-height:1.2}
.lib-item small{display:block;color:var(--suave);font-size:12.5px;line-height:1.3;margin-top:2px}
.lib-item.puesto b::after{content:" · ya está en el tablero";font-weight:500;font-size:12px;color:var(--tenue)}
/* helper being dragged */
body>.lib-item{width:260px;z-index:100}
body>.lib-item .grid-stack-item-content{box-shadow:0 18px 40px -12px rgba(0,0,0,.35);border-color:var(--tinta)}
.biblio.izq{left:0;top:var(--top);bottom:0;width:var(--dock-w);flex-direction:column;gap:12px;padding:16px 14px;border-right:1px solid var(--linea);overflow-y:auto}
.biblio.izq .items{flex-direction:column}
.biblio.abajo{left:0;right:0;bottom:0;height:var(--dock-h);flex-direction:column;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);box-shadow:0 -10px 30px -18px rgba(0,0,0,.25)}
.biblio.abajo .items{overflow-x:auto;padding-bottom:6px}
.biblio.abajo .lib-item{flex:0 0 220px}
.biblio.abajo .lib-item small{display:none}
.editando.dock-izq .lienzo,.editando.dock-izq .editbar{margin-left:var(--dock-w)}
.editando.dock-abajo .lienzo{padding-bottom:calc(var(--dock-h) + 24px)}

/* ---------- canvas + modules ---------- */
.lienzo{padding:14px 10px 40px;transition:margin .2s}
.grid-stack{min-height:300px}
.grid-stack>.grid-stack-item>.grid-stack-item-content{overflow:hidden}
.mod{container-type:inline-size;height:100%;display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.mod-head{display:flex;align-items:center;gap:8px;min-height:50px;padding:12px 12px 8px 18px;flex:none}
.mod-head h3{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.005em;flex:1;min-width:0;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@container (max-width:380px){.mod-head .meta{display:none}}
.mod.sin-cabeza .mod-head{display:none}
.mod.sin-cabeza .mod-body{padding:14px 18px}
.mod{position:relative}
.editando .mod.sin-cabeza .mod-head{display:flex;position:absolute;top:6px;right:6px;z-index:3;min-height:0;padding:3px 4px 3px 8px;border:1px solid var(--linea);border-radius:10px;background:var(--papel);box-shadow:var(--sombra)}
.editando .mod.sin-cabeza .mod-head h3{display:none}
.editando .mod.sin-cabeza .mod-head .agarre{margin-left:0}
.mod-head .meta{font-size:13px;color:var(--suave);white-space:nowrap}
.mod-head .acciones{display:flex;gap:4px;align-items:center}
.mod-head .ed{display:none}
.editando .mod-head .ed{display:inline-flex}
.editando .mod-head{cursor:grab;background:var(--papel-2);border-bottom:1px solid var(--linea-2);padding-bottom:10px}
.editando .mod-head:active{cursor:grabbing}
.editando .mod{border-style:dashed;border-color:#B9B6AE}
.mod-head .agarre{display:none;color:var(--tenue);margin-left:-6px}
.editando .mod-head .agarre{display:block}
.mod-head .agarre svg{width:16px;height:16px}
.mod-body{flex:1;min-height:0;overflow:auto;padding:4px 18px 18px;position:relative;container-type:inline-size}
/* content continues below the visible area: fade the bottom edge instead of slicing a row in half */
.desborda:not(.al-final){-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent)}
.mod-body.sinpad{padding:0}
.grid-stack-placeholder>.placeholder-content{background:rgba(255,23,68,.08)!important;border:2px dashed var(--rojo);border-radius:var(--r)}
.grid-stack-item.ui-draggable-dragging .mod{box-shadow:0 24px 50px -16px rgba(0,0,0,.35)}
.grid-stack-item>.ui-resizable-se{width:22px;height:22px;right:4px;bottom:4px;background-image:none;transform:none}
.grid-stack-item>.ui-resizable-se::after{content:"";position:absolute;right:5px;bottom:5px;width:10px;height:10px;border-right:2.5px solid var(--tenue);border-bottom:2.5px solid var(--tenue);border-radius:0 0 3px 0}
.lienzo-vacio{border:2px dashed #C9C6BE;border-radius:18px;padding:48px 20px;text-align:center;color:var(--suave);margin:4px}
.lienzo-vacio b{display:block;color:var(--tinta);font-size:18px;margin-bottom:6px}
@media (max-width:760px){
  .lienzo{padding:10px 6px 40px}
  .editando.dock-izq .lienzo{margin-left:0}
  .editando .lienzo{padding-bottom:calc(var(--dock-h) + 24px)}
}

/* ---------- shared bits inside modules ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:var(--fondo);font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--tinta)}
.chip.borde{background:transparent;border:1px solid var(--linea)}
.etapa{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.etapa::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,#999);flex:none}
.punto{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.origen{font-size:12px;font-weight:600;color:var(--suave);white-space:nowrap}
.estrellas{display:inline-flex;gap:1px;color:#E0A100}
.estrellas svg{width:13px;height:13px}
.tag-roja{color:var(--rojo-osc);font-weight:700}
.num{font-family:var(--cond);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;height:100%;align-content:center;align-items:start}
.stat{padding:0 18px;border-left:1px solid var(--linea-2);min-width:0}
.stat:first-child{padding-left:2px}
.stat:first-child{border-left:0}
.stat .num{font-size:44px;line-height:1;display:block}
.stat .lbl{font-size:13.5px;font-weight:600;color:var(--suave);display:block;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .dif{font-size:12.5px;color:var(--suave)}
.stat.alerta .num{color:var(--rojo)}
@container (max-width:700px){
  .stats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;align-items:flex-start;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
  .stats.al-final{-webkit-mask-image:none;mask-image:none}
  .stats::-webkit-scrollbar{display:none}
  .stat{flex:0 0 auto;min-width:46%;scroll-snap-align:start;padding:2px 16px}
  .stat .lbl{overflow:visible}
  .stat .num{font-size:34px}
  .stat .dif{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* pipeline */
.kanban{display:flex;gap:10px;height:100%;padding:4px 12px 12px;overflow-x:auto}
.kcol{flex:1 0 220px;max-width:340px;display:flex;flex-direction:column;background:var(--papel-2);border-radius:12px;min-height:0;transition:background .15s,box-shadow .15s}
.kcol.sobre{background:var(--rojo-tinte);box-shadow:inset 0 0 0 2px var(--rojo)}
.kcol.mini{flex:0 0 150px}
.kcol>header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;font-size:13.5px}
.kcol>header .n{font-family:var(--cond);font-weight:700;font-size:18px;color:var(--suave)}
.kcards{flex:1;overflow-y:auto;padding:0 8px 8px;display:flex;flex-direction:column;gap:7px;min-height:60px}
.kcard{background:var(--papel);border:1px solid var(--linea);border-radius:11px;padding:10px 11px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;transition:border-color .12s,box-shadow .12s}
.kcard:hover{border-color:#b5b2aa;box-shadow:var(--sombra)}
.kcard b{display:block;font-size:14.5px;line-height:1.25}
.kcard .sub{font-size:12.5px;color:var(--suave);margin-top:3px;line-height:1.35}
.kcard .pie{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}
.kcard.arrastrando{opacity:.35}
.fantasma{position:fixed;z-index:200;pointer-events:none;width:230px;transform:rotate(2deg);box-shadow:0 22px 44px -14px rgba(0,0,0,.4)!important;border-color:var(--tinta)!important}
.kmas{border:0;background:none;color:var(--suave);font-size:13px;font-weight:600;padding:6px;text-decoration:underline}

/* candidate table */
.lista-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 16px 10px;position:sticky;top:0;background:var(--papel);z-index:2}
.lista-tools .q{position:relative;flex:1 1 200px;min-width:160px}
.lista-tools .q input{height:36px;border-radius:999px;padding-left:34px;font-size:14px}
.lista-tools .q svg{position:absolute;left:12px;top:10px;width:16px;height:16px;color:var(--tenue)}
.lista-tools .cuenta{font-size:13px;color:var(--suave);width:100%;margin-top:-2px}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{position:sticky;top:0;text-align:left;font-size:12px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;background:var(--papel);border-bottom:1px solid var(--linea)}
.tabla td{padding:10px;border-bottom:1px solid var(--linea-2);vertical-align:top}
.tabla tr.fila-c{cursor:pointer}
.tabla tr.fila-c:hover td{background:var(--papel-2)}
.tabla td:first-child,.tabla th:first-child{padding-left:16px}
.tabla .nom b{display:block}
.tabla .nom small{color:var(--suave);font-size:12px}
.tabla .disp{font-size:13px;color:var(--suave);max-width:230px}
.ancho-chico .col-ancha{display:none}

/* lists inside modules */
.items-lista{list-style:none;margin:0;padding:0}
.items-lista>li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--linea-2)}
.items-lista>li:first-child{padding-top:4px}
.items-lista>li:last-child{border-bottom:0}
.items-lista .cuerpo{flex:1;min-width:0}
.items-lista .cuerpo>b,.items-lista .cuerpo>.linkb{display:block;font-size:15px;line-height:1.25}
.items-lista .cuerpo .sub{font-size:13px;line-height:1.35;color:var(--suave);margin-top:4px}
.items-lista .cuerpo .meta-fila{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
.linkb{border:0;background:none;padding:0;font-weight:700;text-align:left;cursor:pointer}
.linkb:hover{text-decoration:underline}
.dia-sep{font:700 12.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--suave);padding:18px 0 8px}
.dia-sep:first-child{padding-top:4px}
.hora{font-family:var(--cond);font-weight:700;font-size:19px;line-height:19px;min-width:68px;white-space:nowrap}
.espera{display:inline-flex;align-items:center;height:24px;padding:0 10px;font-size:12.5px;font-weight:700;line-height:1;border-radius:999px;background:var(--fondo);white-space:nowrap}
.espera.mucho{background:var(--rojo-tinte);color:var(--rojo-osc)}
.mini-acc{display:flex;gap:6px;flex:none}

/* opening */
.cuenta-atras{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.cuenta-atras .num{font-size:54px;line-height:.9;color:var(--rojo)}
.cuenta-atras .txt{font-weight:600}
.cuenta-atras .txt small{display:block;color:var(--suave);font-weight:500}
.barra{height:8px;border-radius:999px;background:var(--fondo);overflow:hidden;margin:4px 0 4px}
.barra i{display:block;height:100%;background:var(--tinta);border-radius:999px}
.tarea{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--linea-2)}
.tarea .chk{width:22px;height:22px;border-radius:7px;border:2px solid #B9B6AE;background:var(--papel);flex:none;display:grid;place-items:center;padding:0;margin-top:1px}
.tarea .chk svg{width:14px;height:14px;color:#fff;display:none}
.tarea.lista .chk{background:var(--ok);border-color:var(--ok)}
.tarea.lista .chk svg{display:block}
.tarea.encurso .chk{border-color:var(--aviso);background:var(--aviso-tinte)}
.tarea .t{flex:1;min-width:0;cursor:pointer}
.tarea .t b{font-weight:600;font-size:14.5px}
.tarea.lista .t b{color:var(--suave);background:linear-gradient(currentColor,currentColor) 0 58%/100% 1.5px no-repeat}
.tarea .t .sub{font-size:12.5px;color:var(--suave);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.tarea .vence{color:var(--rojo-osc);font-weight:700}
.add-tarea{display:flex;gap:8px;margin-top:10px}
.add-tarea input{height:38px}

/* charts */
.viz{position:relative;width:100%}
.viz svg{display:block;width:100%;overflow:visible}
.viz text{font-family:var(--sans);font-size:11.5px;fill:var(--suave)}
.tip{position:fixed;z-index:300;pointer-events:none;background:var(--negro);color:#fff;font-size:13px;line-height:1.35;padding:8px 10px;border-radius:9px;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);max-width:240px}
.tip b{font-weight:700}
.hbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:10px;align-items:center;padding:5px 0;font-size:14px}
.hbar .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .pista-b{height:14px;border-radius:0 4px 4px 0;background:var(--rojo);min-width:2px}
.hbar .v{font-variant-numeric:tabular-nums;font-weight:700;min-width:28px;text-align:right}
.tfuentes{width:100%;border-collapse:collapse;font-size:14px}
.tfuentes th{font-size:12px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.04em;text-align:right;padding:6px 6px 8px;border-bottom:1px solid var(--linea)}
.tfuentes th:first-child{text-align:left;padding-left:0}
.tfuentes td{padding:9px 6px;border-bottom:1px solid var(--linea-2);text-align:right;font-variant-numeric:tabular-nums}
.tfuentes td:first-child{text-align:left;padding-left:0;font-weight:600}
.tfuentes .barrita{display:block;height:5px;border-radius:0 3px 3px 0;background:var(--rojo);margin-top:5px;min-width:2px}
.tfuentes tr.total td{font-weight:700;border-bottom:0}
.cob{display:flex;flex-direction:column;height:100%;min-height:0}
.calor{display:grid;gap:3px;font-size:13px;flex:1;min-height:0;grid-template-rows:auto repeat(3,minmax(40px,1fr))}
.calor .c{min-height:40px;border-radius:7px;display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;position:relative}
.calor .c small{display:block;font-size:10.5px;font-weight:600;line-height:1;margin-top:1px}
.calor .h{font-size:12px;font-weight:700;color:var(--suave);text-align:center;align-self:end;padding-bottom:2px}
.calor .r{font-size:13px;font-weight:600;align-self:center}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--suave);margin-top:10px;align-items:center}
.leyenda .esc{display:inline-flex;gap:2px}
.leyenda .esc i{width:16px;height:10px;border-radius:2px;display:block}
.seg{display:inline-flex;background:var(--fondo);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:999px;height:28px;padding:0 11px;font-size:13px;font-weight:600;color:var(--suave)}
.seg button.on{background:var(--papel);color:var(--tinta);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* activity */
.act{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea-2);font-size:14px;line-height:1.4}
.act:first-child{padding-top:4px}
.act:last-child{border-bottom:0}
.act .cuando{color:var(--tenue);font-size:12.5px;line-height:1.4;white-space:nowrap;margin-left:auto;padding:4px 0 0 8px}
.act .ic{width:28px;height:28px;border-radius:50%;background:var(--fondo);display:grid;place-items:center;flex:none}
.act .ic svg{width:15px;height:15px}
.act p{margin:0;min-width:0;padding-top:3px}

/* note */
.nota-txt{width:100%;height:100%;border:0;resize:none;background:#FFF9DB;padding:14px 16px;font:16px/1.5 var(--sans);border-radius:0 0 var(--r) var(--r)}
.nota-txt:focus{outline:none}

/* ---------- drawer (candidate) ---------- */
.velo{position:fixed;inset:0;background:rgba(14,14,15,.42);z-index:80;opacity:0;transition:opacity .2s}
.velo.abierto{opacity:1}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--papel);z-index:81;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 50px -20px rgba(0,0,0,.35)}
.cajon.abierto{transform:none}
.cajon-head{padding:16px 18px 14px 22px;border-bottom:1px solid var(--linea-2);flex:none}
.cajon-head .fila-top{display:flex;align-items:flex-start;gap:10px}
.cajon-head h2{margin:0;font:700 30px/1.02 var(--cond);text-transform:uppercase;letter-spacing:.005em;flex:1;min-width:0;overflow-wrap:anywhere}
.cajon-head .quien-sub{color:var(--suave);font-size:14px;margin-top:6px}
.etapas{display:flex;gap:4px;margin-top:14px;flex-wrap:wrap}
.etapas button{flex:1 1 0;min-width:86px;height:36px;border-radius:9px;border:1px solid var(--linea);background:var(--papel);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--suave)}
.etapas button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.etapas button.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.acc-rapidas{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.cajon-body{flex:1;overflow-y:auto;padding:6px 22px 30px}
.sec{padding:16px 0 4px}
.sec h4{margin:0 0 10px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.datos .d small{display:block;font-size:12.5px;color:var(--suave);font-weight:600}
.datos .d div{font-size:15px;font-weight:500;overflow-wrap:anywhere}
.datos .d.ancho{grid-column:1/-1}
.carta{white-space:pre-wrap;background:var(--papel-2);border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.55;margin:0}
.hist{list-style:none;margin:0;padding:0}
.hist li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--linea-2);font-size:14px}
.hist li .cuando{color:var(--tenue);font-size:12.5px;white-space:nowrap;margin-left:auto}
.hist li.nota-h{background:#FFF9DB;border-radius:10px;padding:10px 12px;border:0;margin:6px 0}
.hist li.nota-h p{margin:2px 0 0;white-space:pre-wrap}
.componer{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.componer textarea{min-height:70px}
.entrev{border:1px solid var(--linea);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.entrev .fila{justify-content:space-between;flex-wrap:wrap}
.cajon-pie{display:flex;gap:8px;padding:12px 22px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--linea-2);flex:none;flex-wrap:wrap}
.estrellas-ed{display:inline-flex;gap:2px}
.estrellas-ed button{border:0;background:none;padding:2px;color:#D9D6CE}
.estrellas-ed button.on{color:#E0A100}
.estrellas-ed svg{width:20px;height:20px}

/* ---------- modal ---------- */
.modal-velo{position:fixed;inset:0;background:rgba(14,14,15,.5);z-index:90;display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal{width:100%;max-width:560px;background:var(--papel);border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
.modal.ancho{max-width:880px}
.modal>header{display:flex;align-items:center;gap:10px;padding:18px 18px 10px 22px}
.modal>header h2{margin:0;font:700 24px/1.05 var(--cond);text-transform:uppercase;flex:1}
.modal .cuerpo{padding:6px 22px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.modal>footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 22px 18px;border-top:1px solid var(--linea-2);flex-wrap:wrap}
.modal>footer .izq{margin-right:auto}
.zona-archivo{border:2px dashed #C9C6BE;border-radius:14px;padding:30px 16px;text-align:center;color:var(--suave);cursor:pointer}
.zona-archivo.sobre{border-color:var(--rojo);background:var(--rojo-tinte)}
.zona-archivo b{color:var(--tinta);display:block;font-size:16px;margin-bottom:4px}
.mapa{width:100%;border-collapse:collapse;font-size:14px}
.mapa td{padding:6px 0;border-bottom:1px solid var(--linea-2)}
.mapa td:first-child{font-weight:600;width:40%}
.prev{width:100%;border-collapse:collapse;font-size:12.5px;display:block;overflow-x:auto}
.prev th,.prev td{padding:6px 8px;border:1px solid var(--linea-2);white-space:nowrap;text-align:left;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.prev th{background:var(--papel-2)}
.resumen-imp{display:flex;gap:18px;flex-wrap:wrap}
.resumen-imp div .num{font-size:34px;display:block;line-height:1}
.resumen-imp div small{color:var(--suave);font-weight:600}
.necesidad{display:grid;grid-template-columns:90px repeat(7,1fr);gap:6px;align-items:center;font-size:13px}
.necesidad input{height:36px;text-align:center;padding:0 4px}
.necesidad .h{text-align:center;font-weight:700;color:var(--suave)}
.usuarios li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--linea-2)}
.usuarios li div{flex:1;min-width:0}
.usuarios small{color:var(--suave);display:block}

/* ---------- toasts ---------- */
#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--negro);color:#fff;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:500;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);pointer-events:auto;display:flex;gap:12px;align-items:center;animation:toastIn .45s cubic-bezier(.2,.9,.25,1.15) both}
.toast.error{background:var(--rojo-osc)}
.toast button{border:0;background:none;color:#fff;font-weight:700;text-decoration:underline;padding:0}
@keyframes subir{from{transform:translateY(8px);opacity:0}}
.editando #toasts{bottom:calc(var(--dock-h) + 16px)}
/* ---------------- motion ---------------- */
:root{--sale:cubic-bezier(.2,.8,.2,1);--rebote:cubic-bezier(.3,1.5,.5,1)}
@keyframes subirSuave{from{opacity:0;transform:translateY(12px)}}
@keyframes modIn{from{opacity:0;transform:translateY(22px) scale(.97)}}
@keyframes crecerY{from{transform:scaleY(0)}}
@keyframes crecerX{from{transform:scaleX(0)}}
@keyframes celdaIn{from{opacity:0;transform:scale(.6)}}
@keyframes aterriza{0%{transform:translateY(-14px) scale(.95) rotate(-1.5deg);box-shadow:0 22px 34px -14px rgba(0,0,0,.35);border-color:var(--rojo)}55%{transform:translateY(2px) scale(1.015) rotate(.4deg)}100%{transform:none;box-shadow:none}}
@keyframes llego{0%,100%{background-color:rgba(255,23,68,0)}35%{background-color:rgba(255,23,68,.10)}}
@keyframes llegoK{0%,100%{box-shadow:0 0 0 0 rgba(255,23,68,0);border-color:var(--linea)}35%{box-shadow:0 0 0 4px rgba(255,23,68,.16);border-color:var(--rojo)}}
@keyframes onda{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.2);opacity:0}}
@keyframes latido{30%{transform:scale(1.7)}60%{transform:scale(.9)}}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes popChk{0%{transform:scale(.6)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes tachar{from{background-size:0 1.5px}}
@keyframes tarjetaIn{from{opacity:0;transform:translateY(26px) scale(.97)}}
@keyframes tarjetaOut{to{opacity:0;transform:translateY(-14px) scale(.96)}}
@keyframes sacude{15%,55%{transform:translateX(-9px)}35%,75%{transform:translateX(8px)}90%{transform:translateX(-3px)}}
@keyframes deslizarIzq{from{transform:translateX(-100%)}}
@keyframes deslizarArr{from{transform:translateY(100%)}}
@keyframes bajar{from{transform:translateY(-100%)}}
@keyframes fundir{from{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.96)}}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.94)}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}
@keyframes brillo{from{background-position:-200% 0}to{background-position:200% 0}}

/* sign-in: card rises, pieces follow, wrong password shakes it, success lifts it away */
.login-card{animation:tarjetaIn .6s var(--sale) backwards}
.login-card>*{animation:subirSuave .5s var(--sale) backwards}
.login-card>:nth-child(1){animation-delay:.12s}.login-card>:nth-child(2){animation-delay:.18s}.login-card>:nth-child(3){animation-delay:.24s}.login-card>:nth-child(4){animation-delay:.3s}
.login-card.sacude{animation:sacude .45s ease-in-out}
.login-card.sale{animation:tarjetaOut .28s ease-in forwards}
.login-card .btn:disabled{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);background-size:200% 100%;animation:brillo 1.1s linear infinite}

/* app shell arrives */
.top{animation:bajar .45s var(--sale)}
.tab-ind{position:absolute;left:0;bottom:0;width:100px;height:3px;border-radius:2px 2px 0 0;background:var(--rojo);pointer-events:none;transform-origin:0 0;transform:scaleX(0);transition:transform .45s var(--sale)}
.tab{transition:color .2s}
.tab:hover:not(.on){color:#D8D8DD}

/* "En vivo": a slow ripple, and a beat every time fresh data lands */
.envivo{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#A9A9B0;white-space:nowrap;padding:0 6px 0 2px;cursor:default}
.envivo i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--rojo);flex:none}
.envivo i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--rojo);animation:onda 2.6s ease-out infinite}
.envivo.pulso i{animation:latido .6s ease-in-out}
.envivo.pulso{color:#fff;transition:color .2s}
@media (max-width:860px){.envivo{display:none}}

/* modules come in one by one, then their contents follow */
.grid-stack-item.aparece>.grid-stack-item-content{animation:modIn .65s var(--sale) backwards;animation-delay:calc(var(--o,0) * 70ms)}
.primera :is(.items-lista>li,.kcard,.act,.tarea,.tabla tbody tr,.hbar,.stat,.tfuentes tbody tr,.dia-sep,.cuenta-atras,.kcol){animation:subirSuave .55s var(--sale) backwards;animation-delay:calc(var(--i,0) * 45ms + 140ms)}
.primera .kcol{animation-delay:calc(var(--i,0) * 70ms + 100ms)}
.primera .kcard{animation-delay:calc(var(--i,0) * 40ms + 260ms)}
.primera .barra-dia{transform-box:fill-box;transform-origin:50% 100%;animation:crecerY .75s var(--sale) backwards;animation-delay:calc(var(--i,0) * 22ms + 160ms)}
.primera .hbar .pista-b{transform-origin:left center;animation:crecerX .8s var(--sale) backwards;animation-delay:calc(var(--i,0) * 60ms + 220ms)}
.primera .calor .c{animation:celdaIn .5s var(--rebote) backwards;animation-delay:calc(var(--i,0) * 16ms + 120ms)}
.primera .barra i{transform-origin:left center;animation:crecerX 1s var(--sale) .25s backwards}
.stat .num,.kcol>header .n,.cuenta-atras .num{font-variant-numeric:tabular-nums}

/* a new application lands: the row glows red twice */
.items-lista>li.llego{margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:10px}
.llego{animation:llego 2.2s ease-in-out 2}
.kcard.llego{animation:llegoK 2.2s ease-in-out 2}
.primera :is(.items-lista>li,.tabla tbody tr).llego{animation:subirSuave .55s var(--sale) backwards,llego 2.2s ease-in-out .7s 2}
.primera .kcard.llego{animation:subirSuave .55s var(--sale) backwards,llegoK 2.2s ease-in-out .7s 2}
/* a card moved to another stage drops into its new column */
.kcard.aterriza{animation:aterriza .7s var(--sale);position:relative;z-index:2}
.kcard{transition:border-color .15s,box-shadow .15s,transform .18s var(--sale)}
.kcard:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(0,0,0,.3)}
.kcard:active{transform:translateY(0) scale(.985)}

/* alert numbers carry a live red ring */
.stat.alerta .lbl::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rojo);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 0 rgba(255,23,68,.5);animation:anillo 2s ease-out infinite}
@keyframes anillo{0%{box-shadow:0 0 0 0 rgba(255,23,68,.55)}80%,100%{box-shadow:0 0 0 7px rgba(255,23,68,0)}}

/* checklist: the box pops, the check draws itself, the line strikes through */
.tarea .chk{transition:background-color .2s,border-color .2s}
.tarea.anim .chk{animation:popChk .45s var(--rebote)}
.tarea.anim.lista .chk svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:trazo .32s ease-out .12s forwards}
.tarea.anim.lista .t b{animation:tachar .45s var(--sale) .15s backwards}

/* drawer: header and sections settle in after it slides */
.cajon.recien .cajon-head>*,.cajon.recien .sec{animation:subirSuave .5s var(--sale) backwards;animation-delay:calc(var(--i,0) * 55ms + 120ms)}

/* edit mode: library slides in, its modules follow, the bar drops */
.editando .biblio.izq{animation:deslizarIzq .4s var(--sale)}
.editando .biblio.abajo{animation:deslizarArr .4s var(--sale)}
.editando .biblio .lib-item{animation:subirSuave .45s var(--sale) backwards;animation-delay:calc(var(--i,0) * 35ms + 120ms)}
.editando .editbar{animation:subirSuave .4s var(--sale) backwards}
.lib-item .ico{transition:transform .25s var(--rebote),background-color .2s}
.lib-item:hover .ico{transform:rotate(-8deg) scale(1.08);background:var(--rojo-tinte)}
.editando .mod{transition:border-color .2s}

/* overlays */
.modal-velo{animation:fundir .2s ease-out}
.modal{animation:modalIn .38s var(--sale)}
.menu{transform-origin:top right;animation:menuIn .2s var(--sale)}
.resultados:not([hidden]){animation:menuIn .18s var(--sale)}
.toast.sale{animation:toastOut .26s ease-in forwards}
.toast.llega{background:var(--papel);color:var(--tinta);border-left:4px solid var(--rojo)}
.toast.llega button{color:var(--rojo-osc)}

/* buttons answer the press */
.btn{transition:background-color .15s,border-color .15s,color .15s,transform .12s}
.btn:active:not(:disabled){transform:scale(.97)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.top,.editbar,.biblio{display:none!important}}