/* Overlord Web v0 · tokens tomados de docs/lanzamiento-empresas/presentacion/index.html (doc 245 §4.3) */
@font-face{font-family:"Cabinet Grotesk";src:url(fonts/CabinetGrotesk-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Switzer";src:url(fonts/Switzer-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Switzer";src:url(fonts/Switzer-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url(fonts/Switzer-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  --fondo:#E8E6E1;--tinta:#14181C;--campo:#F25C1F;--iris:#00A3E0;--suave:#434547;--linea:#c9c6bf;
  --f-tit:"Cabinet Grotesk",system-ui,sans-serif;--f-txt:"Switzer",system-ui,sans-serif;--f-mono:"Geist Mono",ui-monospace,monospace;
  --pad:clamp(16px,3.4vw,48px);--corte:clamp(18px,2.4vw,34px);--entra:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f-txt);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.losa{clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.losa-s{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
:focus-visible{outline:3px solid var(--iris);outline-offset:3px}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.marca svg{width:26px;height:26px;color:var(--campo)}
.folio{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin:0}
.btn{font:600 1rem var(--f-txt);border:0;padding:14px 22px;cursor:pointer;transition:transform .3s var(--entra),background .2s}
.btn:active{transform:translateY(1px)}
.btn--accion{background:var(--campo);color:var(--tinta)}
.btn--accion:hover{background:#ff6e33}
.btn--linea{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-mini{font:500 .85rem var(--f-txt);background:none;border:1.5px solid currentColor;color:inherit;padding:5px 12px;cursor:pointer}

/* ---------- Entrar ---------- */
.entrar{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--tinta);color:var(--fondo)}
.entrar__ojo{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:var(--pad);gap:40px;overflow:hidden}
.ojo--grande{width:min(46vh,30vw);height:auto}
.entrar__lema{font:800 clamp(2.4rem,4.6vw,4.6rem)/.95 var(--f-tit);margin:0;letter-spacing:-.01em}
.entrar__form{background:var(--fondo);color:var(--tinta);padding:var(--pad);display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:620px;width:100%;justify-self:end}
.entrar__form h1{font:800 clamp(2.2rem,3.8vw,3.4rem)/1 var(--f-tit);margin:22px 0 0}
.sub{margin:0;color:var(--suave);max-width:44ch;font-size:1.05rem}
form label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:.95rem}
#form-correo{display:flex;flex-direction:column;gap:14px;margin-top:10px}
input{font:400 1rem var(--f-txt);padding:13px 14px;border:1.5px solid var(--tinta);background:#f4f2ee;color:var(--tinta);border-radius:0}
input:focus{outline:3px solid var(--iris);outline-offset:0}
.error{min-height:1.4em;margin:0;color:#a8320b;font-weight:500}
.nota{margin:0;font-size:.95rem;color:var(--suave)}
.prueba{border:1.5px dashed var(--suave);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.prueba p{margin:0;font-size:.92rem}

/* ---------- Panel ---------- */
.marco{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);background:var(--tinta);color:var(--fondo);--ojo-trazo:#14181C;position:sticky;top:0;z-index:5}
.marco__estado{display:flex;align-items:center;gap:10px;font-size:.95rem}
.punto{width:10px;height:10px;background:var(--suave);display:inline-block;transition:background .4s}
.punto.vivo{background:var(--campo)}
.marco__cuenta{display:flex;align-items:center;gap:14px;font-size:.9rem}
.etq-prueba{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border:1.5px dashed var(--fondo);opacity:.25}
.etq-prueba.activa{opacity:1;border-color:var(--campo);color:var(--campo)}

/* Tablero (ajuste 2 de Diego, 2026-11-09): conversación | centro libre | tareas, y proyectos en fila abajo.
   El centro queda libre para lo que Diego ponga después: solo el fondo y la losa de la marca. */
.panel{height:100vh;display:flex;flex-direction:column}
.tablero{flex:1;min-height:0;display:grid;grid-template-columns:minmax(330px,400px) minmax(0,1fr) minmax(300px,380px);
  grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"conv centro tareas" "accesos accesos accesos";
  gap:20px;padding:20px var(--pad) 0}
.centro{grid-area:centro;position:relative;background:
  linear-gradient(225deg,transparent 0 32px,var(--linea) 32px 33.5px,transparent 33.5px) top right/48px 48px no-repeat;
  border:1.5px solid var(--linea);border-top-right-radius:0;
  clip-path:polygon(0 0,calc(100% - 46px) 0,100% 46px,100% 100%,0 100%)}
h2{font:800 1.5rem/1.1 var(--f-tit);margin:0}

/* Conversación: el ojo es el protagonista */
.conv{grid-area:conv;position:relative;background:var(--tinta);color:var(--fondo);padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;min-height:0;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.conv__ojo{display:flex;align-items:center;gap:14px}
.ojo--conv{width:64px;height:64px;flex:none}
.ojo .iris{transform-origin:50px 50px;transition:fill .4s,transform .6s var(--entra)}
body.ojo-pensando .ojo .iris{animation:pensar 1.4s var(--entra) infinite}
body.ojo-sin .ojo .iris{fill:#6b6e70}
@keyframes pensar{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
.conv__estado{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin:0;color:#b9b6b0}
.conv__titular{font:800 1.2rem/1.12 var(--f-tit);margin:3px 0 0}
.conv__hilo{flex:1;min-height:80px;display:flex;flex-direction:column;gap:12px;overflow:auto;padding-right:4px}
.msg{max-width:94%;padding:10px 14px;font-size:.96rem;white-space:pre-wrap;overflow-wrap:anywhere;animation:entra .5s var(--entra)}
.msg--tu{align-self:flex-end;background:#2a2f34}
.msg--ov{align-self:flex-start;border-left:3px solid var(--iris);padding-left:12px}
.msg--aviso{align-self:flex-start;border-left:3px solid var(--campo);padding-left:12px;color:#d8d5cf}
.msg .quien{display:block;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#a9a6a0;margin-bottom:3px}
.msg .bandeja{margin-top:8px;white-space:normal}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sugerencias{display:flex;flex-wrap:wrap;gap:8px}
.sugerencias button{font:400 .88rem var(--f-txt);text-align:left;background:transparent;color:var(--fondo);border:1.5px solid #555a5e;padding:7px 11px;cursor:pointer}
.sugerencias button:hover{border-color:var(--iris)}
.conv__caja{display:flex;flex-direction:column;gap:8px}
textarea{font:400 1rem var(--f-txt);background:#f4f2ee;color:var(--tinta);border:0;padding:12px;resize:none;border-radius:0;width:100%}
.conv__acciones{display:flex;align-items:center;gap:8px}
.conv__acciones .btn{margin-left:auto;padding:11px 20px}
.conv__acciones .btn:disabled{opacity:.5;cursor:wait}
.btn-adj{display:inline-flex;align-items:center;gap:6px;font:500 .86rem var(--f-txt);color:var(--fondo);border:1.5px solid #555a5e;padding:7px 10px;cursor:pointer}
.btn-adj:hover,.btn-adj:focus-within{border-color:var(--iris)}
.btn-adj svg{width:18px;height:18px}
.btn-adj--camara{display:none}
.conv__pista{font:400 .78rem var(--f-mono);color:#8f8c86}
@media (pointer:coarse){.btn-adj--camara{display:inline-flex}.conv__pista{display:none}}
.aviso-adj{margin:0;font-size:.86rem;color:#ffb08f}
.aviso-adj:empty{display:none}
.soltar{position:absolute;inset:8px;border:2px dashed var(--iris);background:rgba(20,24,28,.94);display:none;place-items:center;text-align:center;padding:20px;font:800 1.3rem/1.15 var(--f-tit);pointer-events:none}
.conv.arrastrando .soltar{display:grid}

/* Adjuntos: losa chica con la vista previa y su estado */
.bandeja{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.conv__caja .bandeja{max-height:172px;overflow:auto;padding-right:2px;scrollbar-width:thin}
.conv.con-adjuntos .sugerencias{display:none}
.adj[data-estado="error"]{width:100%}
.adj{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 9px;align-items:center;width:calc(50% - 4px);min-width:0;background:#262b30;padding:6px 26px 6px 6px;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.msg .adj{background:#1b1f23;padding-right:8px}
.msg--tu:has(.bandeja){max-width:100%}
.adj__prev{width:44px;height:44px;grid-row:1/3;display:grid;place-items:center;background:var(--campo);color:var(--tinta);font:600 .72rem var(--f-mono);overflow:hidden;text-align:center;line-height:1.05}
.adj__prev img{width:100%;height:100%;object-fit:cover;display:block}
.adj__prev.enlace{background:var(--iris)}
.adj__nom{font-size:.84rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adj__est{font:400 .75rem var(--f-mono);color:#b9b6b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adj__est::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;background:#6b6e70;vertical-align:1px}
.adj[data-estado="subiendo"] .adj__est::before{background:var(--campo);animation:latir 1s infinite}
.adj[data-estado="recibido"] .adj__est::before,.adj[data-estado="listo"] .adj__est::before{background:#f4f2ee}
.adj[data-estado="entregado"] .adj__est::before{background:var(--iris);animation:latir 1s infinite}
.adj[data-estado="leido"] .adj__est::before{background:var(--iris)}
.adj[data-estado="leido"] .adj__est{color:#e2dfd9}
.adj[data-estado="error"] .adj__est{color:#ffb08f;white-space:normal}
.adj[data-estado="error"] .adj__est::before{background:#ff6e33}
.adj__barra{position:absolute;left:0;bottom:0;height:2px;background:var(--campo);transition:width .2s}
.adj__quitar{position:absolute;top:2px;right:2px;width:22px;height:22px;border:0;background:none;color:#b9b6b0;font:500 1rem/1 var(--f-txt);cursor:pointer}
.adj__quitar:hover{color:var(--fondo)}
@keyframes latir{50%{opacity:.35}}

/* Tareas: columna derecha, una línea por tarea; el detalle se despliega en su lugar */
.tareas{grid-area:tareas;display:flex;flex-direction:column;gap:10px;min-height:0}
.cifras{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.cifras li{display:flex;align-items:baseline;gap:6px;font-size:.82rem;color:var(--suave)}
.cifras b{font:500 1.35rem/1 var(--f-mono);color:var(--tinta)}
.filtro{margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px;font:400 .8rem var(--f-mono);color:var(--suave)}
.lista{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--tinta);overflow:auto;min-height:0;flex:1}
.lista > li{border-bottom:1px solid var(--linea)}
.t-fila{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 6px;cursor:pointer;transition:background .2s}
.t-fila:hover,.abierta > .t-fila{background:#dedbd5}
.t-fila:focus-visible{outline:3px solid var(--iris);outline-offset:-3px}
.t-punto{width:10px;height:10px;background:var(--linea)}
.t-punto.running{background:var(--campo)}
.t-punto.queued{background:transparent;box-shadow:inset 0 0 0 1.5px var(--tinta)}
.t-punto.completed{background:var(--tinta)}
.t-punto.failed{background:#a8320b}
.t-titulo{font-weight:500;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-est{font:400 .75rem var(--f-mono);color:var(--suave);white-space:nowrap}
.t-detalle{padding:2px 10px 14px 26px;background:#f4f2ee;box-shadow:inset 3px 0 0 var(--tinta)}
.t-detalle .folio{padding-top:10px}
.pasos{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:p}
.pasos li{display:grid;grid-template-columns:22px 1fr;gap:1px 9px;counter-increment:p}
.pasos li::before{content:counter(p);grid-row:1/3;font:500 .78rem var(--f-mono);width:20px;height:20px;display:grid;place-items:center;background:var(--tinta);color:var(--fondo)}
.pasos b{font-size:.76rem;font-family:var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.pasos span{font-size:.88rem;color:var(--suave);overflow-wrap:anywhere}
/* Agrupada por proyecto (2026-11-10): cabeza del grupo, vigentes arriba y terminadas de la última hora abajo.
   Lo nuevo entra con fade in (c-entra) y lo que se va sale con fade out (.c-sale, centro.css). */
.lista > li.t-grupo{border-bottom:0;padding-bottom:6px}
.t-grupo__cab{margin:0;padding:12px 6px 6px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  border-bottom:1.5px solid var(--tinta)}
.t-grupo__cab b{font:800 .98rem var(--f-tit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-grupo__cab small{font:400 .75rem var(--f-mono);color:var(--suave);white-space:nowrap}
.t-grupo__lista{list-style:none;margin:0;padding:0}
.t-grupo__lista > li{border-bottom:1px solid var(--linea)}
.t-item,.t-grupo,.archivo__item{animation:c-entra .35s var(--entra) both}
.t-sep{padding:8px 6px 4px;font:400 .75rem var(--f-mono);color:var(--suave);border-bottom:0!important}
.t-sep ~ .t-item .t-titulo{color:#4a4e52}
/* Archivo: pestaña plegable al pie de la columna, con buscador */
.archivo{flex:none;background:#f4f2ee;box-shadow:inset 0 3px 0 var(--tinta);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.archivo[open]{box-shadow:inset 0 3px 0 var(--campo);max-height:46vh;overflow:auto;scrollbar-width:thin}
.archivo > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:11px 12px 10px;position:sticky;top:0;background:inherit}
.archivo > summary::-webkit-details-marker{display:none}
.archivo > summary::before{content:"";width:8px;height:8px;align-self:center;border:solid var(--tinta);border-width:0 2px 2px 0;
  transform:rotate(-45deg);transition:transform .2s}
.archivo[open] > summary::before{transform:rotate(45deg)}
.archivo__tit{font:800 .98rem var(--f-tit)}
.archivo > summary small{font:400 .75rem var(--f-mono);color:var(--suave)}
.archivo > summary:focus-visible{outline:3px solid var(--iris);outline-offset:-3px}
.archivo__cuerpo{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.archivo__cuerpo input{font:400 .9rem var(--f-txt);color:var(--tinta);background:var(--fondo);border:1.5px solid var(--tinta);padding:8px 10px;border-radius:0}
.archivo__nota{margin:0;font:400 .75rem var(--f-mono);color:var(--suave)}
.archivo__lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.archivo__item{border-bottom:1px solid var(--linea)}
.archivo__item > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 4px}
.archivo__item > summary::-webkit-details-marker{display:none}
.archivo__item > summary:hover{background:#e6e3dd}
.archivo__item > .folio{padding:0 4px 8px 24px;text-transform:none;letter-spacing:0}
.vacio{padding:18px 6px;color:var(--suave)}

/* Proyectos: fila de accesos directos abajo */
.accesos{grid-area:accesos;display:flex;align-items:center;gap:16px;padding:12px 0 14px;border-top:1.5px solid var(--tinta);min-width:0}
.accesos__tit{font:800 1.05rem var(--f-tit);white-space:nowrap}
.accesos__tit small{font:400 .75rem var(--f-mono);color:var(--suave);margin-left:4px}
.accesos ul{list-style:none;margin:0;padding:0 0 2px;display:flex;gap:8px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:thin}
.acc{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border:1.5px solid var(--linea);cursor:pointer;white-space:nowrap;font-size:.88rem;font-weight:500}
.acc:hover,.acc[aria-pressed="true"]{border-color:var(--tinta)}
.acc[aria-pressed="true"]{background:#dedbd5}
.acc:focus-visible{outline:3px solid var(--iris)}
.acc__ico{width:26px;height:26px;display:grid;place-items:center;background:var(--tinta);color:var(--fondo);font:600 .78rem var(--f-mono);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.acc.vivo .acc__ico{background:var(--campo);color:var(--tinta)}
.accesos__equipo{font:400 .78rem var(--f-mono);color:var(--suave);white-space:nowrap}
.accesos__equipo i{font-style:normal;border:1.5px dashed var(--suave);padding:1px 6px}

@media (max-width:1100px){
  .tablero{grid-template-columns:minmax(320px,1fr) minmax(300px,1fr);grid-template-areas:"conv tareas" "accesos accesos"}
  .centro{display:none}
}
@media (max-width:760px){
  .marco{flex-wrap:wrap;position:static}.marco__estado{order:3;width:100%}
  .entrar{grid-template-columns:1fr}.entrar__ojo{padding:28px var(--pad) 20px;flex-direction:row;align-items:center;gap:18px}
  .ojo--grande{width:84px}.entrar__lema{font-size:1.9rem}.entrar__form{justify-self:stretch;max-width:none}
  .panel{height:auto}.tablero{display:flex;flex-direction:column;padding-top:14px}
  .conv{min-height:540px}.conv__hilo{max-height:340px}
  .lista{overflow:visible}
  .accesos{flex-wrap:wrap}.accesos ul{flex-basis:100%;order:2}.accesos__equipo{order:3}
  .adj{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Columna de Tareas (ajuste de Diego, 2026-11-10): título = descripción corta de 3 a 7 palabras; abierta se lee
   descripción → estado → fases → encargo completo plegado. Letra más grande y contraste alto, sobre todo en celular. */
.t-titulo{font-size:.97rem;color:var(--tinta);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.t-est{font-size:.8rem}
.t-desc{margin:12px 0 2px;font:700 1.06rem/1.3 var(--f-txt);color:var(--tinta)}
.t-detalle .t-desc + .folio{padding-top:2px}
.pasos span{font-size:.92rem;color:#2c2f32;line-height:1.4}
.t-encargo{margin-top:12px}
.t-encargo summary{cursor:pointer;font:600 .86rem var(--f-txt);color:var(--tinta);padding:6px 0}
.t-encargo summary:focus-visible{outline:3px solid var(--iris);outline-offset:2px}
.t-encargo p{margin:4px 0 0;font:400 .88rem/1.45 var(--f-txt);color:#2c2f32;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}
@media (max-width:640px){.t-titulo{font-size:1rem}.t-est{font-size:.84rem}.t-desc{font-size:1.1rem}.pasos span,.t-encargo p{font-size:.95rem}.folio{font-size:.82rem}}