/* Overlord Web · centro del tablero (2026-11-10). centro.js; docs/257 §«Centro del tablero».
   Departamentos (o proyectos) como losas con esquina cortada; dentro, colaboradores; dentro, trabajos con su tira
   de fases. El cuadro de estado es el mismo de la columna de tareas: lleno = hecha, naranja = en curso, hueco = por hacer. */
.centro{overflow:auto;scrollbar-width:thin;padding:18px 18px 22px;display:flex;flex-direction:column;gap:14px;min-height:0}
.c-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding-right:34px}
.c-sub{margin:3px 0 0;font:400 .78rem var(--f-mono);color:var(--suave)}
.c-leyenda{list-style:none;margin:0;padding:0;display:flex;gap:12px;font:400 .76rem var(--f-mono);color:var(--suave)}
.c-leyenda li{display:flex;align-items:center;gap:5px}

/* Cuadro de estado (fase o trabajo) */
.c-q{display:grid;place-items:center;width:20px;height:20px;flex:none;font:500 .76rem/1 var(--f-mono)}
.c-q--hecha{background:var(--tinta);color:var(--fondo)}
.c-q--curso{background:var(--campo);color:var(--tinta)}
.c-q--falta{background:transparent;color:var(--suave);box-shadow:inset 0 0 0 1.5px var(--suave)}
.c-q--mini{width:10px;height:10px;font-size:0}

/* Baldosas (2026-11-10, ajuste de Diego): departamentos, colaboradores y trabajos son losas casi cuadradas en
   cuadrícula, con sello arriba (ícono o iniciales) y esquina cortada. Abierta, la baldosa ocupa toda la fila y
   despliega su propia cuadrícula. */
.c-grupos,.c-personas,.c-trabajos{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-items:start}
.c-grupos{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
.c-personas{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));padding:2px 12px 12px}
.c-trabajos{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:2px 10px 10px}
.c-bal{--c:16px;position:relative;min-width:0;background:#f4f2ee;box-shadow:inset 0 3px 0 var(--tinta);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);animation:c-entra .35s var(--entra) both}
.c-bal::after{content:"";position:absolute;top:0;right:0;width:var(--c);height:var(--c);background:var(--campo);
  clip-path:polygon(0 0,100% 100%,0 100%)}
.c-bal.abierta{grid-column:1/-1;box-shadow:inset 0 3px 0 var(--campo)}
.c-bal__cab{all:unset;box-sizing:border-box;width:100%;cursor:pointer;transition:background .2s;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 14px 12px;min-height:148px}
.c-bal__cab:hover{background:#e6e3dd}
.c-bal__cab:focus-visible{outline:3px solid var(--iris);outline-offset:-3px}
.c-bal.abierta>.c-bal__cab{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.c-bal__txt{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%;flex:1}
.c-bal__tit{font:800 1.02rem/1.15 var(--f-tit);overflow-wrap:anywhere}
.c-bal__meta{font:400 .76rem/1.35 var(--f-mono);color:var(--suave)}
.c-bal__pie{display:flex;flex-direction:column;gap:5px}
.c-bal__pie small{font:400 .76rem var(--f-mono);color:var(--suave);white-space:nowrap}
.c-sello{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--tinta);color:var(--fondo);
  font:600 .86rem var(--f-mono);letter-spacing:.02em;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.c-sello svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-depto>.c-bal__cab .c-sello svg{color:var(--campo)}
.c-depto.abierta{background:#ece9e4}

.c-persona{--c:12px;background:var(--fondo);box-shadow:inset 0 0 0 1.5px var(--linea)}
.c-persona.abierta{box-shadow:inset 0 0 0 1.5px var(--tinta),inset 0 3px 0 var(--campo)}
.c-persona .c-bal__tit{font:600 .95rem/1.2 var(--f-txt)}
.c-sello--ini{border-radius:0}
.c-persona--yo .c-sello{background:var(--campo);color:var(--tinta)}
.c-puntos{display:flex;gap:3px;flex-wrap:wrap;max-width:140px}

.c-trabajo{--c:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--linea),inset 0 3px 0 var(--linea)}
.c-trabajo--curso{box-shadow:inset 0 0 0 1px var(--linea),inset 0 3px 0 var(--campo)}
.c-trabajo--hecha{box-shadow:inset 0 0 0 1px var(--linea),inset 0 3px 0 var(--tinta)}
.c-trabajo .c-sello{width:34px;height:34px;background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta)}
.c-trabajo--curso .c-sello{background:var(--campo);box-shadow:none}
.c-trabajo--hecha .c-sello{background:var(--tinta);color:var(--fondo);box-shadow:none}
.c-trabajo .c-sello svg{width:18px;height:18px}
.c-trabajo .c-bal__tit{font:500 .9rem/1.3 var(--f-txt)}
.c-trabajo.abierta{grid-column:1/-1}
.c-fases,.c-tira{list-style:none;margin:0;padding:0}
.c-tira{display:flex;gap:3px;flex-wrap:wrap}
.c-fases{display:flex;flex-direction:column;gap:7px;padding:4px 12px 12px 13px;border-top:1px dashed var(--linea);margin:0 0 0 0}
.c-fase{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:start;padding-top:6px}
.c-fase__txt{display:flex;flex-direction:column;min-width:0}
.c-fase__txt b{font:500 .76rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.c-fase__txt span{font-size:.85rem;color:var(--suave);overflow-wrap:anywhere}
.c-fases--frase .c-fase__txt b{font:500 .88rem/1.35 var(--f-txt);letter-spacing:0;text-transform:none}
.c-fases--frase .c-fase__txt span{font:400 .76rem var(--f-mono);margin-top:2px}
.c-fase__est{font:400 .76rem var(--f-mono);color:var(--suave);white-space:nowrap;padding-top:2px}
.c-fase--curso .c-fase__est{color:var(--tinta);font-weight:600}
.c-fase--falta .c-fase__txt b{color:var(--suave)}
.c-vacio{margin:0;padding:6px 10px 12px;font-size:.86rem;color:var(--suave)}
@keyframes c-entra{from{opacity:0;transform:translateY(-4px)}}
/* Sale con fade out (centro.js «coser»): lo que se archiva o se termina no desaparece de golpe. */
.c-sale{animation:c-sale .32s ease forwards;pointer-events:none}
@keyframes c-sale{to{opacity:0;transform:scale(.97)}}

/* Mismo tamaño para todas las baldosas cerradas de un nivel (ajuste de Diego, 2026-11-10): sin importar si
   la tarea está hecha, en curso o por hacer, ni su columna. Alto fijo; título a 3 renglones y datos a 2, recortados
   con «…»; la tira o los puntos siempre al pie. */
.c-bal:not(.abierta)>.c-bal__cab{height:var(--alto);min-height:0;overflow:hidden}
.c-depto{--alto:186px}
#e-centro .c-depto{--alto:226px}   /* empresa: organizacion.js suma 2 renglones de resumen a cada departamento */
.c-persona{--alto:190px}
.c-trabajo{--alto:194px}
.c-bal:not(.abierta) .c-bal__tit{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.c-trabajo:not(.abierta) .c-bal__tit{-webkit-line-clamp:3}
.c-bal:not(.abierta) .c-bal__meta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.c-bal:not(.abierta)>.c-bal__cab>:last-child:not(.c-bal__txt){margin-top:auto}
.c-bal:not(.abierta)>.c-bal__cab>.c-bal__txt{flex:0 1 auto}

/* Acomodo: por debajo de 1100 px el centro ya no se oculta; baja a una fila propia, a todo el ancho. */
@media (max-width:1100px){
  .panel{height:auto}
  .tablero{grid-template-rows:minmax(560px,78vh) auto auto;grid-template-areas:"conv tareas" "centro centro" "accesos accesos"}
  .tablero.empresa{grid-template-areas:"izq der" "centro centro" "focos focos"}
  .centro{display:flex;overflow:visible}
}
@media (max-width:760px){
  .centro{padding:14px 12px 16px}
  .c-cab{padding-right:30px}
  .c-grupos,.c-personas,.c-trabajos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .c-personas{padding:2px 8px 10px}
  .c-trabajos{padding:2px 6px 8px}
  .c-bal__cab{padding:12px 11px 10px;min-height:136px}
  .c-bal.abierta>.c-bal__cab{grid-template-columns:auto minmax(0,1fr)}
  .c-bal.abierta>.c-bal__cab>:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.c-bal,.c-sale{animation:none}}
.c-vacio--todo{grid-column:1/-1;list-style:none;padding:22px 18px;background:#f4f2ee;font-size:.95rem;color:var(--tinta);
  box-shadow:inset 0 3px 0 var(--campo);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.c-vacio--todo b{font:800 1.05rem var(--f-tit)}

/* Vista de Diego · su organización real, Overlord Corp (2026-11-10): creador siempre a la mano arriba del centro,
   departamentos vacíos con estado amable y la tira de lo que sube. Mismo lenguaje de losas con esquina cortada. */
.centro:has(> .o-creador){padding-bottom:0}
.c-creador{position:sticky;bottom:0;margin:auto -18px 0;padding:6px 18px;flex:none;background:var(--fondo);
  border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:6px;z-index:2}
.c-creador__linea{display:flex;align-items:center;gap:8px;min-height:28px}
.c-creador__vacio{margin:0 auto 0 0;font:400 .78rem var(--f-mono);color:var(--suave);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-creador__tab{flex:none;white-space:nowrap}
.c-creador__aviso{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-creador__tab{all:unset;cursor:pointer;flex:none;white-space:nowrap;padding:3px 9px;font:600 .8rem var(--f-txt);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea)}
.c-creador__tab:hover,.c-creador__tab[aria-expanded="true"]{box-shadow:inset 0 0 0 1.5px var(--tinta)}
.c-creador__tab:focus-visible{outline:3px solid var(--iris);outline-offset:2px}
.c-creador__form{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.c-creador__form[hidden]{display:none}
.c-campo{display:flex;flex:1 1 140px;min-width:0}
.c-campo input,.c-campo select{font:400 .9rem var(--f-txt);color:var(--tinta);background:#fff;border:0;
  box-shadow:inset 0 0 0 1px var(--linea);padding:5px 8px;min-height:32px;box-sizing:border-box;width:100%}
.c-campo input:focus,.c-campo select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--tinta)}
.c-campo select:disabled{color:var(--suave)}
.c-check{display:flex;align-items:center;gap:5px;font:500 .8rem var(--f-txt);color:var(--tinta)}
.c-creador__ok{min-height:32px}
.c-creador__form button:disabled{opacity:.45;cursor:not-allowed}
.c-creador__aviso{margin:0;font:400 .76rem var(--f-mono);color:var(--tinta)}
.c-creador__aviso:empty{display:none}
.c-creador__aviso--mal{color:#b3261e}
.c-depto--vacio>.c-bal__cab{background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(20,24,28,.035) 10px 20px)}
.c-vacio--depto{padding:4px 14px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.c-vacio--depto p{margin:0;font:400 .9rem/1.4 var(--f-txt);color:var(--tinta)}
.c-suben{grid-column:1/-1;list-style:none;background:#fff;box-shadow:inset 0 0 0 1px var(--linea);padding:10px 14px}
.c-suben__tit{margin:0 0 6px;font:700 .9rem var(--f-txt)}
.c-suben__tit small{font:400 .74rem var(--f-mono);color:var(--suave)}
.c-suben ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font:400 .86rem/1.35 var(--f-txt)}
.c-suben b{margin-right:6px}
@media (max-width:640px){.c-campo{flex-basis:100%}.c-campo input,.c-campo select{font-size:1rem}}

/* ---------- correo de la persona, a la derecha de su nombre (2026-11-10) ----------
   Abierta, la cabecera es sello+nombre (botón) | ranura de correo | pie. La ranura vacía es una línea punteada en
   mono que «pide» llenarse; llena, el correo en mono con su estado debajo. */
.c-bal.abierta>.c-bal__cab--lado{grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:10px 22px;align-items:start}
.c-bal__cab--lado>.c-bal__pie{grid-column:1/-1;justify-self:end}
.c-bal__tog{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer}
.c-bal__tog:focus-visible{outline:3px solid var(--iris);outline-offset:3px}
.c-lado{justify-self:start;min-width:0;cursor:default}
.c-lado__col{display:flex;flex-direction:column;gap:4px;min-width:0}
.c-lado__mas{all:unset;cursor:pointer;font:500 .82rem var(--f-mono);color:var(--suave);padding:6px 2px 4px;
  border-bottom:1.5px dashed var(--linea);min-width:150px;transition:color .15s,border-color .15s}
.c-lado__mas:hover,.c-lado__mas:focus-visible{color:var(--tinta);border-bottom-color:var(--campo)}
.c-lado__correo{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:1px;min-width:0;padding:2px 0;
  border-left:3px solid var(--campo);padding-left:9px}
.c-lado__correo b{font:500 .84rem/1.2 var(--f-mono);overflow-wrap:anywhere}
.c-lado__correo small{font:400 .72rem var(--f-txt);color:var(--suave)}
.c-lado__correo--mal{border-left-color:#b3261e}
.c-lado__correo:hover b,.c-lado__correo:focus-visible b{text-decoration:underline;text-underline-offset:3px}
.c-lado__edit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.c-lado__in{font:500 .86rem var(--f-mono);color:var(--tinta);background:#fff;border:0;border-bottom:2px solid var(--campo);
  padding:6px 8px;flex:1 1 170px;min-width:0;max-width:280px;outline:none;border-radius:0}
.c-lado__in:focus{box-shadow:0 0 0 3px rgba(0,163,224,.25)}
.c-lado__ok{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)}
.c-lado__aviso{font:400 .74rem/1.3 var(--f-txt);color:var(--suave);max-width:340px;overflow-wrap:anywhere}
.c-lado__aviso--mal{color:#b3261e}
@media (max-width:640px){
  .c-bal.abierta>.c-bal__cab--lado{grid-template-columns:minmax(0,1fr)}
  .c-lado__in{font-size:1rem}
}
/* Persona invitada: su departamento y sus chats; lo del Overlord de Diego (tareas, proyectos) no se pinta. */
.modo-miembro .tareas,.modo-miembro .accesos,.modo-miembro #form-chat,.modo-miembro .soltar{display:none}