/* ==========================================================
   Lienzo — hoja de estilos
   ========================================================== */

:root{
  --azul:#4262ff;
  --azul-osc:#2f4ae0;
  --azul-claro:#eef1ff;
  --tinta:#0f1222;
  --tinta-2:#3d4260;
  --gris:#6b7192;
  --gris-2:#9aa0bd;
  --linea:#e6e8f2;
  --linea-2:#f0f1f7;
  --fondo:#f6f7fb;
  --panel:#ffffff;
  --lienzo:#ffffff;
  --punto:#d9dcea;
  --peligro:#e03e52;
  --ok:#12a67a;
  --amarillo:#ffd23f;
  --sombra-1:0 1px 2px rgba(15,18,34,.06), 0 2px 8px rgba(15,18,34,.06);
  --sombra-2:0 4px 12px rgba(15,18,34,.08), 0 12px 32px rgba(15,18,34,.10);
  --sombra-3:0 18px 60px rgba(15,18,34,.18);
  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:26px;
  --tipo:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --topbar:56px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--tipo);color:var(--tinta);background:var(--fondo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:var(--azul);text-decoration:none}
::selection{background:#c9d3ff}
.oculto{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --------- controles base --------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;border-radius:10px;font-weight:600;font-size:14px;
  background:var(--azul);color:#fff;transition:.16s ease;white-space:nowrap;
}
.btn:hover{background:var(--azul-osc)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.fantasma{background:transparent;color:var(--tinta-2);box-shadow:inset 0 0 0 1px var(--linea)}
.btn.fantasma:hover{background:var(--linea-2);color:var(--tinta)}
.btn.suave{background:var(--azul-claro);color:var(--azul)}
.btn.suave:hover{background:#e0e6ff}
.btn.peligro{background:var(--peligro)}
.btn.peligro:hover{background:#c22f42}
.btn.chico{height:32px;padding:0 12px;font-size:13px;border-radius:9px}
.btn.bloque{width:100%}

.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label{font-size:12.5px;font-weight:600;color:var(--gris)}
.campo input,.campo select,.campo textarea{
  height:42px;padding:0 13px;border-radius:10px;background:#fff;
  border:1px solid var(--linea);outline:none;transition:.15s;width:100%;font-size:14.5px;
}
.campo textarea{height:auto;min-height:84px;padding:11px 13px;resize:vertical;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(66,98,255,.14)}
.fila{display:flex;gap:12px}
.fila>*{flex:1;min-width:0}

.icono{
  width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;
  justify-content:center;color:var(--gris);transition:.14s;flex:none;
}
.icono:hover{background:var(--linea-2);color:var(--tinta)}
.icono svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================
   Pantalla de carga
   ========================================================== */
#carga{position:fixed;inset:0;display:grid;place-items:center;background:var(--fondo);z-index:9000}
.marca-carga{display:flex;flex-direction:column;align-items:center;gap:18px}
.giro{width:34px;height:34px;border-radius:50%;border:3px solid var(--linea);border-top-color:var(--azul);animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ==========================================================
   Acceso
   ========================================================== */
#acceso{position:fixed;inset:0;display:grid;grid-template-columns:1fr;place-items:center;background:var(--fondo);z-index:800;overflow:auto;padding:24px}
#acceso::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(66,98,255,.16), transparent 60%),
    radial-gradient(760px 460px at 100% 110%, rgba(255,210,63,.20), transparent 62%);
}
.tarjeta-acceso{position:relative;z-index:1;width:100%;max-width:400px;background:#fff;border-radius:var(--r-xl);padding:34px 32px 28px;box-shadow:var(--sombra-3)}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;font-size:19px}
.logo-marca{width:32px;height:32px;border-radius:9px;background:var(--azul);display:grid;place-items:center;flex:none;box-shadow:0 4px 12px rgba(66,98,255,.35)}
.logo-marca span{width:12px;height:12px;border-radius:3px;background:var(--amarillo);display:block;transform:rotate(12deg)}
.tarjeta-acceso h1{font-size:25px;margin:22px 0 6px;letter-spacing:-.025em}
.tarjeta-acceso p.sub{margin:0 0 24px;color:var(--gris);font-size:14.5px;line-height:1.55}
.aviso{padding:11px 13px;border-radius:10px;font-size:13.5px;line-height:1.45;margin-bottom:14px}
.aviso.malo{background:#fdecee;color:#a92133}
.aviso.bien{background:#e7f7f1;color:#0b7c5a}
.aviso.info{background:var(--azul-claro);color:var(--azul-osc)}
.pie-acceso{margin-top:18px;text-align:center;font-size:12.5px;color:var(--gris-2)}

/* ==========================================================
   Proyectos (inicio)
   ========================================================== */
#proyectos{min-height:100%;display:flex;flex-direction:column}
.cabecera{
  height:64px;flex:none;display:flex;align-items:center;gap:14px;padding:0 22px;
  background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:50;
}
.buscador{position:relative;flex:1;max-width:380px}
.buscador input{height:38px;padding:0 14px 0 38px;border-radius:10px;border:1px solid var(--linea);background:var(--fondo);width:100%;outline:none;font-size:14px}
.buscador input:focus{background:#fff;border-color:var(--azul);box-shadow:0 0 0 3px rgba(66,98,255,.12)}
.buscador svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--gris-2);fill:none;stroke-width:2}
.crece{flex:1}
.avatar{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:12.5px;flex:none;letter-spacing:.02em;user-select:none;
}
.avatar.chico{width:24px;height:24px;font-size:10.5px}
.avatar.grande{width:44px;height:44px;font-size:16px}

.contenido{max-width:1240px;width:100%;margin:0 auto;padding:34px 22px 70px}
.titulo-seccion{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.titulo-seccion h2{font-size:24px;margin:0;letter-spacing:-.02em}
.pastilla{font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--linea-2);color:var(--gris)}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.tarjeta-proy{
  background:#fff;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sombra-1);
  cursor:pointer;transition:.18s cubic-bezier(.2,.7,.3,1);position:relative;border:1px solid transparent;
}
.tarjeta-proy:hover{transform:translateY(-3px);box-shadow:var(--sombra-2)}
.portada{height:112px;position:relative;display:grid;place-items:center;overflow:hidden}
.portada::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.55) 1.4px, transparent 1.4px);
  background-size:16px 16px;opacity:.5;
}
.portada .emoji{font-size:34px;position:relative;z-index:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.15))}
.cuerpo-proy{padding:13px 15px 15px}
.cuerpo-proy h3{margin:0 0 4px;font-size:15px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuerpo-proy .meta{font-size:12.5px;color:var(--gris-2);display:flex;align-items:center;gap:6px}
.menu-tarjeta{
  position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,.92);color:var(--tinta-2);display:grid;place-items:center;
  opacity:0;transition:.15s;backdrop-filter:blur(6px);z-index:2;
}
.tarjeta-proy:hover .menu-tarjeta{opacity:1}
.menu-tarjeta:hover{background:#fff}
.tarjeta-nueva{
  border:2px dashed var(--linea);background:transparent;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:186px;color:var(--gris);font-weight:600;font-size:14px;
}
.tarjeta-nueva:hover{border-color:var(--azul);color:var(--azul);background:#fff}
.vacio{text-align:center;padding:70px 20px;color:var(--gris)}
.vacio h3{margin:0 0 8px;color:var(--tinta);font-size:19px}

/* ==========================================================
   Tablero
   ========================================================== */
#tablero{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--lienzo)}
.barra-sup{
  height:var(--topbar);flex:none;display:flex;align-items:center;gap:10px;padding:0 12px 0 10px;
  background:#fff;border-bottom:1px solid var(--linea);z-index:60;position:relative;
}
.nombre-proy{
  font-weight:700;font-size:15px;padding:6px 10px;border-radius:8px;max-width:280px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid transparent;outline:none;
}
.nombre-proy:hover{background:var(--linea-2)}
.nombre-proy:focus{background:#fff;border-color:var(--azul);box-shadow:0 0 0 3px rgba(66,98,255,.12)}
.tabs{display:flex;gap:2px;background:var(--fondo);padding:3px;border-radius:11px}
.tab{height:32px;padding:0 15px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--gris);display:flex;align-items:center;gap:7px;transition:.15s}
.tab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab:hover{color:var(--tinta)}
.tab.on{background:#fff;color:var(--tinta);box-shadow:var(--sombra-1)}
.presencia{display:flex;align-items:center}
.presencia .avatar{margin-left:-7px;box-shadow:0 0 0 2px #fff}
.presencia .avatar:first-child{margin-left:0}
.punto-estado{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.punto-estado.guardando{background:var(--amarillo)}
.punto-estado.error{background:var(--peligro)}
.estado-txt{font-size:12px;color:var(--gris-2);display:flex;align-items:center;gap:6px;padding:0 4px}

/* --------- área principal --------- */
.area{position:relative;flex:1;overflow:hidden}

/* --------- lienzo --------- */
#viewport{
  position:absolute;inset:0;overflow:hidden;background:var(--lienzo);
  cursor:default;touch-action:none;user-select:none;
}
#viewport.pan{cursor:grab}
#viewport.pan.activo{cursor:grabbing}
#viewport.dibujar{cursor:crosshair}
#viewport.colocar{cursor:copy}
#rejilla{position:absolute;inset:0;pointer-events:none}
#mundo{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
#svg{position:absolute;left:-100000px;top:-100000px;width:200000px;height:200000px;overflow:visible;pointer-events:none}
#svg .golpe{stroke:transparent;stroke-width:18;fill:none;pointer-events:stroke;cursor:pointer}
#elementos{position:absolute;left:0;top:0}

.el{position:absolute;transform-origin:50% 50%;box-sizing:border-box}
.el.bloqueado{pointer-events:none}
.el .txt{
  outline:none;width:100%;height:100%;overflow:hidden;word-break:break-word;
  white-space:pre-wrap;line-height:1.3;
}
.el .txt[contenteditable="true"]{cursor:text;user-select:text;overflow:auto}

/* nota adhesiva */
.el.nota{
  border-radius:3px;padding:14px;display:flex;box-shadow:0 1px 1px rgba(15,18,34,.10),0 6px 14px rgba(15,18,34,.10);
  transition:box-shadow .15s;
}
.el.nota:hover{box-shadow:0 2px 3px rgba(15,18,34,.12),0 10px 24px rgba(15,18,34,.14)}
.el.nota .txt{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:500}

/* texto suelto */
.el.texto{padding:2px 4px}
.el.texto .txt{display:flex;align-items:flex-start}

/* formas */
.el.forma{display:block}
.el.forma svg.fig{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.el.forma .txt{position:absolute;inset:10px;display:flex;align-items:center;justify-content:center;text-align:center}

/* celda de cuadrícula: el hueco que queda cuando se quita una pieza */
.el.forma.celda svg.fig path{stroke-dasharray:9 7}
.el.forma.celda .txt{font-weight:300;user-select:none}
.el.forma.celda:hover svg.fig path{stroke:var(--azul)}
.el.forma.celda:hover .txt{color:var(--azul) !important}

/* marco */
.el.marco{border:2px solid #c8cce0;border-radius:10px;background:rgba(255,255,255,.55)}
.el.marco.zona > .titulo-marco{display:none}
.el.marco .titulo-marco{
  position:absolute;left:0;top:0;transform:translateY(-100%);padding:2px 8px 5px;
  font-size:calc(14px*clamp(1,var(--iz,1),4.5));font-weight:700;color:var(--gris);white-space:nowrap;outline:none;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;
}

/* imagen */
.el.imagen{overflow:hidden;border-radius:6px;background:#f2f3f8}
.el.imagen img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}

/* vídeo */
.el.video{overflow:hidden;border-radius:8px;background:#0f1222;box-shadow:0 1px 2px rgba(15,18,34,.10),0 8px 22px rgba(15,18,34,.14)}
.el.video video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:#000}
.el.video .vplay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;
  width:calc(54px*min(var(--iz,1),3));height:calc(54px*min(var(--iz,1),3));border-radius:50%;
  background:rgba(15,18,34,.55);backdrop-filter:blur(4px);color:#fff;display:grid;place-items:center;
  transition:.15s;box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.el.video .vplay:hover{background:rgba(66,98,255,.9);transform:translate(-50%,-50%) scale(1.06)}
.el.video .vplay svg{width:calc(26px*min(var(--iz,1),3));height:calc(26px*min(var(--iz,1),3))}
.el.video.reproduciendo .vplay{opacity:0;pointer-events:none}
.el.video .vcontrol{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  gap:calc(7px*min(var(--iz,1),3));padding:calc(14px*min(var(--iz,1),3)) calc(9px*min(var(--iz,1),3)) calc(7px*min(var(--iz,1),3));
  background:linear-gradient(transparent,rgba(4,6,14,.78));opacity:0;transition:opacity .15s;pointer-events:auto;
}
.el.video:hover .vcontrol,.el.video.reproduciendo .vcontrol{opacity:1}
.el.video .vbtn{
  width:calc(22px*min(var(--iz,1),3));height:calc(22px*min(var(--iz,1),3));color:#fff;display:grid;place-items:center;
  border-radius:calc(5px*min(var(--iz,1),3));flex:none;transition:.12s;
}
.el.video .vbtn:hover{background:rgba(255,255,255,.2)}
.el.video .vbtn svg{width:calc(17px*min(var(--iz,1),3));height:calc(17px*min(var(--iz,1),3))}
.el.video .vbarra{
  flex:1;height:calc(4px*min(var(--iz,1),3));min-width:calc(30px*min(var(--iz,1),3));border-radius:99px;
  background:rgba(255,255,255,.32);cursor:pointer;
}
.el.video .vbarra i{display:block;height:100%;width:0;background:#fff;border-radius:99px}
.el.video .vt{
  color:#fff;font-size:calc(11px*min(var(--iz,1),3));font-variant-numeric:tabular-nums;
  white-space:nowrap;opacity:.9;font-weight:600;
}

/* sello de estado sobre fotos y vídeos */
.el > .sello{
  position:absolute;left:calc(6px*min(var(--iz,1),2.6));top:calc(6px*min(var(--iz,1),2.6));
  max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:calc(10.5px*min(var(--iz,1),2.6));font-weight:700;letter-spacing:.01em;color:#fff;
  padding:calc(3px*min(var(--iz,1),2.6)) calc(8px*min(var(--iz,1),2.6));border-radius:99px;
  box-shadow:0 1px 4px rgba(15,18,34,.28);pointer-events:none;z-index:2;
}
/* botón de enlace */
.el > .enlace-btn{
  position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;
  background:#fff;color:var(--azul);display:grid;place-items:center;pointer-events:auto;z-index:3;
  box-shadow:0 1px 3px rgba(15,18,34,.18),0 4px 12px rgba(15,18,34,.14);transition:.14s;cursor:pointer;
}
.el > .enlace-btn:hover{background:var(--azul);color:#fff;transform:scale(1.08)}
.el > .enlace-btn svg{width:17px;height:17px}

/* tarea en el lienzo */
.el.tarea{
  background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(15,18,34,.09),0 8px 20px rgba(15,18,34,.10);
  padding:12px 13px;display:flex;flex-direction:column;gap:7px;overflow:hidden;border-top:4px solid var(--azul);
}
.el.tarea .t-tit{font-weight:650;font-size:14px;line-height:1.32;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.el.tarea .t-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto}

/* comentario */
.el.comentario{width:34px;height:34px}
.pin-com{
  width:34px;height:34px;border-radius:50% 50% 50% 4px;background:var(--amarillo);
  box-shadow:0 3px 10px rgba(15,18,34,.22);display:grid;place-items:center;font-size:14px;
  transform:rotate(0deg);transition:.15s;
}
.el.comentario:hover .pin-com{transform:scale(1.1)}
.el.comentario.resuelto .pin-com{background:#cfd3e4}

/* etiquetas */
.etq{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.02em;white-space:nowrap}

/* ==========================================================
   Selección y manijas
   ========================================================== */
#capa-ui{position:absolute;inset:0;pointer-events:none;z-index:40}
.marco-sel{position:absolute;border:1.5px solid var(--azul);border-radius:2px;pointer-events:none}
.marco-sel.multi{border-style:solid}
.marquee{position:absolute;border:1px solid var(--azul);background:rgba(66,98,255,.10);pointer-events:none;border-radius:2px}
.manija{
  position:absolute;width:10px;height:10px;background:#fff;border:1.5px solid var(--azul);
  border-radius:2px;pointer-events:auto;z-index:2;
}
.manija.rot{width:16px;height:16px;border-radius:50%;background:#fff;display:grid;place-items:center;cursor:grab}
.manija.rot svg{width:10px;height:10px;stroke:var(--azul);fill:none;stroke-width:2}
.ancla{
  position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--azul);
  pointer-events:auto;cursor:crosshair;opacity:0;transition:opacity .12s;z-index:3;
}
.ancla:hover{opacity:1 !important;transform:scale(1.25)}
.anclas-visibles .ancla{opacity:.85}
.guia{position:absolute;background:#ff3ba7;pointer-events:none;z-index:5}
.guia.v{width:1px}
.guia.h{height:1px}
.medida{
  position:absolute;background:var(--azul);color:#fff;font-size:11px;font-weight:600;
  padding:2px 6px;border-radius:5px;pointer-events:none;white-space:nowrap;transform:translate(-50%,0);
}

/* cursores de otras personas */
.cursor-otro{position:absolute;pointer-events:none;z-index:50;transition:transform .12s linear}
.cursor-otro svg{width:20px;height:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.cursor-otro .nom{
  margin-left:14px;margin-top:-4px;display:inline-block;padding:2px 8px;border-radius:20px;
  color:#fff;font-size:11.5px;font-weight:650;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.sel-otro{position:absolute;border:1.5px solid;border-radius:3px;pointer-events:none;z-index:39;opacity:.85}

/* ==========================================================
   Barra de herramientas
   ========================================================== */
.herramientas{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:55;
  background:#fff;border-radius:16px;box-shadow:var(--sombra-2);padding:7px;
  display:flex;flex-direction:column;gap:3px;
}
.herr{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--tinta-2);
  position:relative;transition:.14s;
}
.herr svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.herr:hover{background:var(--linea-2)}
.herr.on{background:var(--azul);color:#fff}
.herr.on:hover{background:var(--azul-osc)}
.herr .flechita{position:absolute;right:3px;bottom:3px;width:0;height:0;border:3px solid transparent;border-right-color:currentColor;border-bottom-color:currentColor;opacity:.5}
.separador{height:1px;background:var(--linea);margin:4px 6px}
.globo{
  position:absolute;left:56px;top:50%;transform:translateY(-50%);background:var(--tinta);color:#fff;
  font-size:12px;font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;
  pointer-events:none;transition:.14s;z-index:70;
}
.globo kbd{background:rgba(255,255,255,.2);border-radius:4px;padding:1px 5px;margin-left:5px;font-family:var(--tipo);font-size:11px}
.herr:hover .globo{opacity:1;left:52px}

/* submenú de herramienta */
.submenu{
  position:absolute;left:60px;background:#fff;border-radius:14px;box-shadow:var(--sombra-2);
  padding:8px;z-index:80;display:none;
}
.submenu.abierto{display:block}
.rejilla-formas{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;width:180px}
.op-forma{width:41px;height:41px;border-radius:9px;display:grid;place-items:center;transition:.13s}
.op-forma:hover{background:var(--linea-2)}
.op-forma.on{background:var(--azul-claro)}
.op-forma svg{width:22px;height:22px;stroke:var(--tinta-2);fill:none;stroke-width:1.6}
.op-forma.on svg{stroke:var(--azul)}

/* paletas de color */
.paleta{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.chip{
  width:26px;height:26px;border-radius:7px;position:relative;transition:.13s;
  box-shadow:inset 0 0 0 1px rgba(15,18,34,.10);
}
.chip:hover{transform:scale(1.12)}
.chip.on::after{
  content:"";position:absolute;inset:-3px;border-radius:9px;border:2px solid var(--azul);
}
.chip.trans{background:repeating-conic-gradient(#e9ebf3 0 25%, #fff 0 50%) 50%/10px 10px}

/* ==========================================================
   Panel de propiedades flotante
   ========================================================== */
.props{
  position:absolute;z-index:58;background:#fff;border-radius:14px;box-shadow:var(--sombra-2);
  padding:6px;display:flex;align-items:center;gap:2px;
}
.props .bx{
  height:34px;min-width:34px;padding:0 8px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;gap:6px;color:var(--tinta-2);font-size:13px;font-weight:600;transition:.13s;
}
.props .bx:hover{background:var(--linea-2)}
.props .bx.on{background:var(--azul-claro);color:var(--azul)}
.props .bx svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.props .sep{width:1px;height:22px;background:var(--linea);margin:0 4px}
.muestra{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(15,18,34,.12)}
.pop{
  position:absolute;top:46px;left:0;background:#fff;border-radius:13px;box-shadow:var(--sombra-2);
  padding:12px;z-index:90;min-width:200px;
}
.pop h5{margin:0 0 9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris-2)}
.pop h5:not(:first-child){margin-top:14px}
.rango{display:flex;align-items:center;gap:10px}
.rango input[type=range]{flex:1;accent-color:var(--azul)}
.rango b{font-size:12.5px;color:var(--gris);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}

/* ==========================================================
   Zoom + minimapa
   ========================================================== */
.zoom-barra{
  position:absolute;left:16px;bottom:16px;z-index:55;background:#fff;border-radius:12px;
  box-shadow:var(--sombra-2);padding:5px;display:flex;align-items:center;gap:2px;
}
.zoom-barra .bx{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--tinta-2);transition:.13s}
.zoom-barra .bx:hover{background:var(--linea-2)}
.zoom-barra .bx svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.zoom-val{font-size:12.5px;font-weight:650;color:var(--tinta-2);min-width:50px;text-align:center;padding:0 4px;height:32px;display:grid;place-items:center;border-radius:8px}
.zoom-val:hover{background:var(--linea-2)}

#minimapa{
  position:absolute;right:16px;bottom:16px;z-index:55;width:190px;height:130px;background:#fff;
  border-radius:12px;box-shadow:var(--sombra-2);overflow:hidden;cursor:pointer;
}
#minimapa canvas{width:100%;height:100%;display:block}
#minimapa .vista{position:absolute;border:2px solid var(--azul);border-radius:3px;background:rgba(66,98,255,.10);pointer-events:none}
.mini-toggle{position:absolute;right:16px;bottom:16px;z-index:55}

/* ==========================================================
   Kanban
   ========================================================== */
#tareas{position:absolute;inset:0;background:var(--fondo);display:flex;flex-direction:column;overflow:hidden}
.barra-tareas{
  flex:none;height:54px;display:flex;align-items:center;gap:10px;padding:0 20px;
  background:#fff;border-bottom:1px solid var(--linea);
}
.filtro{
  height:32px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--gris);
  display:flex;align-items:center;gap:7px;box-shadow:inset 0 0 0 1px var(--linea);transition:.14s;
}
.filtro:hover{background:var(--linea-2);color:var(--tinta)}
.filtro.on{background:var(--azul-claro);color:var(--azul);box-shadow:inset 0 0 0 1px rgba(66,98,255,.35)}

.columnas{flex:1;display:flex;gap:16px;padding:20px;overflow-x:auto;overflow-y:hidden;align-items:flex-start}
.col{
  width:296px;flex:none;background:#eef0f6;border-radius:14px;display:flex;flex-direction:column;
  max-height:100%;transition:background .15s;
}
.col.destino{background:#e2e7fb;box-shadow:inset 0 0 0 2px var(--azul)}
.col-cab{display:flex;align-items:center;gap:8px;padding:12px 13px 9px;flex:none}
.col-punto{width:9px;height:9px;border-radius:50%;flex:none}
.col-tit{font-weight:700;font-size:13.5px;outline:none;border-radius:5px;padding:1px 3px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-tit:focus{background:#fff;box-shadow:0 0 0 2px var(--azul)}
.col-num{font-size:11.5px;font-weight:700;color:var(--gris-2);background:rgba(15,18,34,.06);border-radius:20px;padding:2px 7px}
.col-lista{flex:1;overflow-y:auto;padding:0 10px 10px;display:flex;flex-direction:column;gap:9px;min-height:44px}
.col-pie{padding:0 10px 11px;flex:none}
.btn-add-tarea{
  width:100%;height:34px;border-radius:9px;color:var(--gris);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:7px;transition:.14s;
}
.btn-add-tarea:hover{background:rgba(15,18,34,.05);color:var(--tinta)}

.tarjeta-t{
  background:#fff;border-radius:10px;padding:11px 12px;box-shadow:var(--sombra-1);cursor:pointer;
  display:flex;flex-direction:column;gap:8px;border-left:3px solid transparent;transition:.14s;
}
.tarjeta-t:hover{box-shadow:var(--sombra-2);transform:translateY(-1px)}
.tarjeta-t.arrastrando{opacity:.4}
.tarjeta-t .tt{font-size:13.8px;font-weight:600;line-height:1.35}
.tarjeta-t .tm{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--gris)}
.fecha-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;background:var(--linea-2);font-weight:650;font-size:11px}
.fecha-chip.vencida{background:#fdecee;color:#c22f42}
.fecha-chip.hoy{background:#fff4d6;color:#96690b}
.progreso{height:4px;border-radius:4px;background:var(--linea);overflow:hidden}
.progreso i{display:block;height:100%;background:var(--ok);border-radius:4px;transition:width .25s}
.col-nueva{
  width:236px;flex:none;height:46px;border-radius:12px;border:2px dashed var(--linea);color:var(--gris);
  font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;
}
.col-nueva:hover{border-color:var(--azul);color:var(--azul);background:#fff}

/* ==========================================================
   Ficha de contenido
   ========================================================== */
.ficha{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;padding-bottom:6px}
.ficha-vista{border-radius:14px;overflow:hidden;background:#0f1222;align-self:start;position:sticky;top:0}
.ficha-vista img,.ficha-vista video{display:block;width:100%;max-height:62vh;object-fit:contain;background:#0f1222}
.ficha-redes{display:flex;flex-wrap:wrap;gap:7px}
@media (max-width:700px){.ficha{grid-template-columns:1fr}.ficha-vista{position:static;max-width:240px}}

/* ==========================================================
   Calendario
   ========================================================== */
#calendario{position:absolute;inset:0;background:var(--fondo);display:flex;flex-direction:column;overflow:hidden}
.cal-mes{font-size:16px;font-weight:700;letter-spacing:-.01em;min-width:170px;text-align:center}
.cal-cuerpo{flex:1;display:flex;gap:16px;padding:16px 20px 20px;min-height:0}
.cal-rejilla{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:var(--sombra-1);overflow:hidden}
.cal-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:none;border-bottom:1px solid var(--linea)}
.cal-semana span{padding:9px 10px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gris-2)}
.cal-dias{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(104px,1fr);overflow-y:auto}
.cal-dia{border-right:1px solid var(--linea-2);border-bottom:1px solid var(--linea-2);padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0;transition:background .12s}
.cal-dia:nth-child(7n){border-right:0}
.cal-dia.fuera{background:#fafbfd}
.cal-dia.fuera .cal-num{color:var(--gris-2);opacity:.6}
.cal-dia.destino,.cal-cola.destino{background:#e9edff;box-shadow:inset 0 0 0 2px var(--azul)}
.cal-num{font-size:12px;font-weight:700;color:var(--gris);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;flex:none}
.cal-dia.hoy .cal-num{background:var(--azul);color:#fff}
.cal-chip{
  display:flex;align-items:center;gap:6px;padding:3px 7px 3px 3px;border-radius:8px;background:var(--fondo);
  font-size:11.5px;font-weight:600;color:var(--tinta-2);cursor:pointer;min-width:0;transition:.12s;
}
.cal-chip:hover{background:var(--azul-claro);color:var(--tinta)}
.cal-chip.arrastrando{opacity:.4}
.cal-chip img{width:24px;height:30px;object-fit:cover;border-radius:5px;flex:none;background:var(--linea)}
.cal-chip.tarea{padding-left:7px;height:26px}
.cal-chip.grande{padding:5px 9px 5px 5px;background:#fff;box-shadow:var(--sombra-1);font-size:12.5px}
.cal-chip.grande img{width:38px;height:48px;border-radius:7px}
.cal-punto{width:8px;height:8px;border-radius:50%;flex:none}
.cal-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cal-txt b{font-variant-numeric:tabular-nums;color:var(--gris)}
.cal-lado{width:270px;flex:none;display:flex;flex-direction:column;min-height:0}
.cal-lado h4{margin:4px 0 4px;font-size:13.5px;display:flex;align-items:center;gap:8px}
.cal-lado p{margin:0 0 10px;font-size:12.5px;color:var(--gris-2);line-height:1.45}
.cal-cola{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;border-radius:12px;padding:4px}
.cal-vacio{font-size:12.5px;color:var(--gris-2);line-height:1.5;padding:18px 10px;text-align:center}
@media (max-width:900px){.cal-lado{display:none}.cal-cuerpo{padding:10px}}

/* ==========================================================
   Modales / paneles laterales
   ========================================================== */
.velo{position:fixed;inset:0;background:rgba(15,18,34,.42);backdrop-filter:blur(3px);z-index:500;display:grid;place-items:center;padding:24px;animation:aparece .16s ease}
@keyframes aparece{from{opacity:0}}
.modal{
  background:#fff;border-radius:var(--r-xl);box-shadow:var(--sombra-3);width:100%;max-width:480px;
  max-height:88vh;display:flex;flex-direction:column;animation:sube .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes sube{from{opacity:0;transform:translateY(14px) scale(.985)}}
.modal.ancho{max-width:760px}
.modal-cab{display:flex;align-items:center;gap:12px;padding:20px 22px 14px;flex:none}
.modal-cab h3{margin:0;font-size:19px;letter-spacing:-.02em;flex:1}
.modal-cuerpo{padding:0 22px;overflow:auto;flex:1}
.modal-pie{display:flex;gap:10px;justify-content:flex-end;padding:18px 22px 20px;flex:none}

.panel-lat{
  position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;z-index:520;
  box-shadow:var(--sombra-3);display:flex;flex-direction:column;animation:entra .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes entra{from{transform:translateX(24px);opacity:0}}
.panel-cab{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--linea);flex:none}
.panel-cab h3{margin:0;font-size:16px;flex:1}
.panel-cuerpo{flex:1;overflow:auto;padding:18px}

/* menú contextual */
.menu-ctx{
  position:fixed;background:#fff;border-radius:12px;box-shadow:var(--sombra-2);padding:6px;
  z-index:600;min-width:212px;animation:aparece .1s;
}
.mi{
  display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;
  font-size:13.5px;font-weight:550;color:var(--tinta-2);width:100%;transition:.1s;
}
.mi:hover{background:var(--linea-2);color:var(--tinta)}
.mi.rojo{color:var(--peligro)}
.mi.rojo:hover{background:#fdecee}
.mi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mi .atajo{margin-left:auto;font-size:11.5px;color:var(--gris-2);font-weight:600}
.mi-sep{height:1px;background:var(--linea);margin:5px 8px}

/* listas (usuarios, plantillas) */
.lista-fila{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--linea-2)}
.lista-fila:last-child{border-bottom:0}
.lista-fila .n{font-weight:650;font-size:14px}
.lista-fila .u{font-size:12.5px;color:var(--gris-2)}
.rejilla-plantillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.plantilla{
  border:1px solid var(--linea);border-radius:13px;padding:14px;text-align:left;transition:.15s;background:#fff;
}
.plantilla:hover{border-color:var(--azul);box-shadow:var(--sombra-1);transform:translateY(-2px)}
.plantilla.on{border-color:var(--azul);background:var(--azul-claro)}
.plantilla .pe{font-size:24px;display:block;margin-bottom:8px}
.plantilla .pn{font-weight:650;font-size:13.5px;margin-bottom:3px}
.plantilla .pd{font-size:11.5px;color:var(--gris-2);line-height:1.4}

/* checklist */
.chk{display:flex;align-items:center;gap:9px;padding:5px 0}
.chk input{width:17px;height:17px;accent-color:var(--ok);flex:none;cursor:pointer}
.chk span{flex:1;font-size:13.5px;outline:none;border-radius:5px;padding:2px 4px}
.chk span:focus{background:var(--linea-2)}
.chk.hecho span{text-decoration:line-through;color:var(--gris-2)}

/* avisos flotantes */
#avisos{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:900;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:var(--tinta);color:#fff;padding:11px 17px;border-radius:11px;font-size:13.5px;font-weight:550;
  box-shadow:var(--sombra-2);animation:toastIn .2s cubic-bezier(.2,.7,.3,1);display:flex;align-items:center;gap:10px;
  pointer-events:auto;max-width:min(520px,92vw);
}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}}
.toast.malo{background:var(--peligro)}
.toast.bien{background:var(--ok)}
.toast button{color:#fff;font-weight:700;text-decoration:underline;font-size:13px}

/* atajos */
.atajos{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.atajo-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0}
.atajo-fila span{color:var(--tinta-2)}
kbd{
  background:var(--fondo);border:1px solid var(--linea);border-bottom-width:2px;border-radius:6px;
  padding:2px 7px;font-family:var(--tipo);font-size:11.5px;font-weight:650;color:var(--gris);
}

/* responsive */
@media (max-width:820px){
  .herramientas{
    left:50%;top:auto;bottom:14px;transform:translateX(-50%);flex-direction:row;border-radius:14px;
    max-width:calc(100vw - 24px);overflow-x:auto;
  }
  .separador{width:1px;height:auto;margin:6px 4px}
  .globo{display:none}
  .submenu{left:50%;bottom:64px;top:auto;transform:translateX(-50%)}
  .zoom-barra{bottom:auto;top:12px;left:12px}
  #minimapa{display:none}
  .nombre-proy{max-width:130px}
  .contenido{padding:22px 14px 60px}
}