:root{
  --duaga:#2E75B6; --duaga-d:#223260;
  --tal:#0E9AA7; --tal-d:#0A6E77;
  --cm:#8B6FE0; --cm-d:#5B45A8;
  --dcm:#3E8E7E;
  --all:#64748B;
  --gate:#F59E0B;
  --crit:#E11D48;
  --key:#0EA5E9;
  --ok:#059669;
  --bg:#EEF1F6; --card:#FFFFFF; --ink:#1E2633; --muted:#6B7787;
  --line:#DCE2EC; --done:#94A3B8;
  --shadow:0 1px 3px rgba(20,30,50,.08),0 6px 24px rgba(20,30,50,.06);
  --cols:28;

  /* Los mismos colores de arriba en tripleta RGB. No hay ningún tono nuevo:
     esto solo permite usarlos con transparencia (vidrio, sombras, anillos de
     foco) sin romper la relación cromática entre las firmas. */
  --duaga-rgb:46,117,182;
  --duaga-d-rgb:34,50,96;
  --tal-rgb:14,154,167;
  --cm-rgb:139,111,224;
  --gate-rgb:245,158,11;
  --key-rgb:14,165,233;
  --crit-rgb:225,29,72;
  --ink-rgb:30,38,51;
  --bg-rgb:238,241,246;

  /* Resortes (WWDC 2018 · amortiguación + respuesta) expresados como linear().
     Sin librerías: son la curva real del muelle muestreada.
     smooth/snap: críticamente amortiguados, no rebotan → interfaz en general.
     bounce/sheet: amortiguación .8, rebote leve → solo para superficies que
     "llegan" (modal, panel, toast), nunca para un simple hover. */
  --sp-smooth: linear(0, 0.0501, 0.1599, 0.2891, 0.4162, 0.531, 0.6293, 0.7108, 0.7768, 0.8291, 0.8702, 0.9019, 0.9263, 0.9449, 0.959, 0.9695, 0.9775, 0.9834, 0.9878, 0.991, 0.9934, 0.9952, 0.9965, 0.9974, 0.9981, 0.9986, 1);
  --sp-smooth-t:589ms;
  --sp-snap: linear(0, 0.0503, 0.1603, 0.2897, 0.417, 0.5319, 0.6302, 0.7117, 0.7776, 0.8298, 0.8708, 0.9025, 0.9268, 0.9453, 0.9592, 0.9698, 0.9776, 0.9835, 0.9879, 0.9911, 0.9935, 0.9952, 0.9965, 0.9975, 0.9982, 0.9987, 1);
  --sp-snap-t:413ms;
  --sp-bounce: linear(0, 0.0449, 0.1505, 0.2832, 0.4211, 0.5506, 0.6644, 0.7596, 0.8359, 0.8946, 0.9381, 0.969, 0.9898, 1.003, 1.0106, 1.0142, 1.0152, 1.0145, 1.0129, 1.0109, 1.0088, 1.0068, 1.0051, 1.0036, 1.0025, 1.0016, 1);
  --sp-bounce-t:474ms;
  --sp-sheet: linear(0, 0.0449, 0.1503, 0.2829, 0.4207, 0.5501, 0.664, 0.7592, 0.8355, 0.8943, 0.9378, 0.9688, 0.9897, 1.0029, 1.0105, 1.0142, 1.0152, 1.0145, 1.0129, 1.0109, 1.0088, 1.0068, 1.0051, 1.0037, 1.0025, 1.0016, 1);
  --sp-sheet-t:406ms;
  /* respuesta inmediata al pulsar: por debajo del umbral de percepción */
  --press:90ms cubic-bezier(.2,0,.2,1);

  /* La superficie más grande lee como más gruesa: más desenfoque y sombra más
     profunda que un chip pequeño. */
  --shadow-lift:0 1px 2px rgba(20,30,50,.07),0 10px 30px rgba(20,30,50,.09);
  --shadow-float:0 2px 6px rgba(10,20,40,.10),0 24px 70px rgba(10,20,40,.22);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.65);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  /* La fuente del sistema ya trae tamaño óptico, tablas de kerning y ajuste de
     legibilidad; Arial queda solo como último recurso. En rem para respetar el
     tamaño de texto que el usuario haya configurado en su navegador. */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:.875rem;line-height:1.5;letter-spacing:0;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--duaga)}
.wrap{max-width:1220px;margin:0 auto;padding:22px 20px 60px}
.spacer{flex:1}
[hidden]{display:none!important}

/* Foco visible en todo lo enfocable: solo con teclado, nunca al hacer clic. */
:where(a,button,input,select,textarea,[tabindex],.tgl,.whoami):focus-visible{
  outline:2px solid var(--duaga);outline-offset:2px}
/* sin retardo de 300 ms al tocar en móvil (§ respuesta) */
button,.tgl,.mile,.dcard,.whoami,input[type=checkbox]{touch-action:manipulation}

/* ---------------------------------------------------------------- PUERTA --- */
#gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#223260 0%,#2E75B6 62%,#0E9AA7 130%);padding:20px}
/* Vidrio de verdad: la caja flota sobre el degradado y lo deja translucir.
   El borde superior claro es la luz pegando en el canto del material. */
.gatebox{background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.45);border-top-color:rgba(255,255,255,.85);
  border-radius:20px;box-shadow:var(--shadow-float),var(--glass-edge);
  padding:28px 26px;width:100%;max-width:400px;
  animation:sheet-in var(--sp-bounce-t) var(--sp-bounce) both}
.gatekicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.gatebox h1{margin:6px 0 20px;font-size:22px;line-height:1.15;letter-spacing:-.015em}
.gatebox label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:12px}
/* campo sólido sobre el vidrio: nunca translúcido sobre translúcido */
.gatebox input{width:100%;margin-top:5px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:10px;font-size:14px;font-family:inherit;background:#fff;
  transition:border-color var(--sp-snap-t) var(--sp-snap),box-shadow var(--sp-snap-t) var(--sp-snap)}
.gatebox input:focus{outline:none;border-color:var(--duaga);box-shadow:0 0 0 3px rgba(var(--duaga-rgb),.18)}
.gateerr{background:#FCE1E7;color:#9F1239;border-radius:9px;padding:8px 11px;font-size:12.5px;margin-bottom:12px;
  animation:pop-in var(--sp-snap-t) var(--sp-snap) both}
/* mientras se verifica la sesión no se muestra el formulario: evita el parpadeo
   de pedir clave a quien ya está dentro, y evita la pantalla en blanco */
.gatewait{display:none;font-size:13px;color:var(--muted);padding:10px 0 4px}
#gate.checking .gatewait{display:block}
#gate.checking label,#gate.checking .btn,#gate.checking .gateerr{display:none!important}

/* ---------------------------------------------------------------- HEADER --- */
header.hero{background:linear-gradient(135deg,#223260 0%,#2E75B6 62%,#0E9AA7 130%);
  color:#fff;border-radius:20px;padding:26px 28px;box-shadow:var(--shadow-lift);position:relative;overflow:hidden}
header.hero:before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);}
.herotop{display:flex;gap:14px;align-items:flex-start;position:relative}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.85;font-weight:700}
/* texto grande = interletraje negativo y interlínea corta; el cuerpo se queda en 0 */
header.hero h1{margin:6px 0 4px;font-size:clamp(21px,2.4vw,27px);line-height:1.12;letter-spacing:-.021em}
header.hero p.sub{margin:0;opacity:.92;font-size:14px;line-height:1.45;letter-spacing:-.002em}
.firmchips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative}
.firmchip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
  border:1px solid rgba(255,255,255,.25);border-top-color:rgba(255,255,255,.4);
  color:#fff;border-radius:30px;padding:5px 12px;font-size:12.5px;font-weight:700;letter-spacing:.002em}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.countbar{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap;position:relative}
/* chip pequeño: desenfoque suave, sombra corta. Compárese con .card / .modal. */
.cd{background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,.22);border-top-color:rgba(255,255,255,.38);border-radius:14px;
  padding:10px 16px;min-width:150px}
.cd .n{font-size:24px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cd .l{font-size:11.5px;opacity:.9;margin-top:4px;line-height:1.3}
.cd.crit{background:rgba(var(--crit-rgb),.22);border-color:rgba(255,255,255,.35)}

/* ------------------------------------------------------------------ SYNC --- */
.syncbar{display:flex;align-items:center;gap:9px;margin:14px 2px 0;font-size:12px;color:var(--muted);
  flex-wrap:wrap}
.syncdot{width:9px;height:9px;border-radius:50%;background:var(--done);flex:none;
  transition:background var(--sp-snap-t) var(--sp-snap)}
.syncdot.ok{background:var(--ok)} .syncdot.wait{background:var(--gate)} .syncdot.err{background:var(--crit)}
/* mientras hay algo por guardar el punto respira: estado en curso, no alarma */
.syncdot.wait{animation:breathe 1.8s ease-in-out infinite}
/* Nombre en verde y botón de salir en rojo, ambos en mayúsculas. El texto en
   caja alta pierde legibilidad si va junto: de ahí el interletraje positivo,
   al revés que en los titulares. Los dos tonos son los que ya usa el punto de
   sincronización (--ok y --crit): no entra ningún color nuevo al sistema. */
.whoami{font-weight:800;color:var(--ok);text-transform:uppercase;letter-spacing:.07em;
  cursor:pointer;border-bottom:1px dashed rgba(5,150,105,.45);
  border-radius:3px;transition:color var(--sp-snap-t) var(--sp-snap)}
.whoami:hover{color:#047857;border-bottom-color:rgba(4,120,87,.7)}
.btn.salir{padding:4px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  border-radius:7px;flex:none}
.whoami:hover{color:var(--duaga);border-bottom-color:var(--duaga)}

/* --------------------------------------------------------------- TOOLBAR --- */
/* Capa flotante translúcida: el contenido pasa por debajo en vez de que la
   barra se coma una franja fija de la pantalla. */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 10px;
  position:sticky;top:8px;z-index:20;padding:8px 10px;border-radius:16px;
  background:rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 2px rgba(20,30,50,.05),0 8px 28px rgba(20,30,50,.07),var(--glass-edge)}
.toolbar .grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tgl{cursor:pointer;user-select:none;border:1.5px solid var(--line);background:var(--card);
  border-radius:30px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--ink);
  display:inline-flex;align-items:center;gap:7px;
  transition:opacity var(--sp-snap-t) var(--sp-snap),filter var(--sp-snap-t) var(--sp-snap),
             background var(--sp-snap-t) var(--sp-snap),color var(--sp-snap-t) var(--sp-snap),
             border-color var(--sp-snap-t) var(--sp-snap),transform var(--press)}
.tgl .dot{width:11px;height:11px}
.tgl.off{opacity:.4;filter:grayscale(.6)}
.tgl.plain{font-weight:600;color:var(--muted)}
.tgl.plain.active{color:#fff;border-color:var(--duaga-d);background:var(--duaga-d)}
.tgl:active{transform:scale(.96)}
.btn{cursor:pointer;border:none;background:var(--duaga-d);color:#fff;border-radius:10px;
  padding:8px 14px;font-weight:700;font-size:12.5px;font-family:inherit;letter-spacing:.002em;
  transition:transform var(--press),box-shadow var(--sp-snap-t) var(--sp-snap),
             background var(--sp-snap-t) var(--sp-snap),opacity var(--sp-snap-t) var(--sp-snap);
  box-shadow:0 1px 2px rgba(var(--duaga-d-rgb),.22)}
.btn:hover{box-shadow:0 2px 8px rgba(var(--duaga-d-rgb),.26)}
/* la respuesta vive en el pulsado, y es inmediata */
.btn:active{transform:scale(.96)}
.btn.ghost{background:#fff;color:var(--duaga-d);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--duaga);box-shadow:0 1px 4px rgba(var(--duaga-rgb),.14)}
.btn.danger{background:var(--crit);box-shadow:0 1px 2px rgba(var(--crit-rgb),.25)}
.btn.wide{width:100%;padding:11px}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.minibtn{cursor:pointer;border:1.5px dashed var(--line);background:transparent;color:var(--duaga);
  border-radius:8px;padding:3px 9px;font-size:11.5px;font-weight:700;font-family:inherit;margin-left:8px;
  transition:transform var(--press),border-color var(--sp-snap-t) var(--sp-snap),background var(--sp-snap-t) var(--sp-snap)}
.minibtn:hover{border-color:var(--duaga);background:rgba(var(--duaga-rgb),.07)}
.minibtn:active{transform:scale(.95)}
.iconbtn{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px;
  width:26px;height:26px;font-size:12px;line-height:1;flex:none;font-family:inherit;
  transition:transform var(--press),color var(--sp-snap-t) var(--sp-snap),border-color var(--sp-snap-t) var(--sp-snap)}
.iconbtn:hover{color:var(--duaga-d);border-color:var(--duaga)}
.iconbtn:active{transform:scale(.92)}
.iconbtn.light{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.iconbtn.light:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.55);color:#fff}
.aftergantt{margin-top:10px}

/* -------------------------------------------------------------- PROGRESO --- */
.progwrap{background:var(--card);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);margin:10px 0 18px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.progbar{flex:1;min-width:220px;height:14px;background:#E6EBF2;border-radius:20px;overflow:hidden}
.progfill{height:100%;background:linear-gradient(90deg,#2E75B6,#0E9AA7);width:0;border-radius:20px;
  transition:width var(--sp-smooth-t) var(--sp-smooth)}
.progtxt{font-weight:800;font-size:15px;white-space:nowrap;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.progsub{font-size:12px;color:var(--muted)}
.progsub span{font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- HITOS --- */
/* Las clases de tipo llevan prefijo k- a propósito: 'gate' choca con la pantalla
   de acceso (#gate) y la tarjeta heredaba su display:flex, que era lo que
   descuadraba el texto del hito del 5 de agosto. */
.rail{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;
  margin-bottom:18px;position:relative;overflow:hidden}
/* El vidrio necesita algo que dejar ver. Este campo de luz usa los tonos de las
   tres firmas y va dentro de la tarjeta sólida: no es otra capa translúcida
   debajo del vidrio, que es lo que arruinaría la legibilidad. */
.rail::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(540px 190px at 6% 130%,rgba(var(--duaga-rgb),.16),transparent 72%),
    radial-gradient(480px 170px at 46% -40%,rgba(var(--tal-rgb),.13),transparent 72%),
    radial-gradient(540px 200px at 96% 135%,rgba(var(--cm-rgb),.15),transparent 72%)}
.rail > *{position:relative}
.rail h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  display:flex;align-items:center}
.rail .track{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
/* Vidrio teñido con el color del tipo de hito: el material lleva el significado,
   no solo el filete de la izquierda. Desenfoque medio, como los chips del
   encabezado — una superficie pequeña no debe leerse tan gruesa como un modal.
   La columna deja la etiqueta anclada al pie para que todas se alineen. */
.mile{--mk-rgb:var(--key-rgb);
  flex:1;min-width:158px;border-radius:10px;padding:10px 12px;position:relative;
  display:flex;flex-direction:column;scroll-snap-align:start;
  background:linear-gradient(155deg,rgba(var(--mk-rgb),.07),rgba(255,255,255,.32) 70%),rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.85);
  border-left:4px solid var(--key);
  box-shadow:var(--glass-edge);
  transition:transform var(--sp-snap-t) var(--sp-snap),box-shadow var(--sp-snap-t) var(--sp-snap)}
.mile:hover{transform:translateY(-2px);
  box-shadow:0 8px 22px -10px rgba(var(--mk-rgb),.4),var(--glass-edge)}
.mile.k-gate{--mk-rgb:var(--gate-rgb);border-left-color:var(--gate)}
.mile.k-crit{--mk-rgb:var(--crit-rgb);border-left-color:var(--crit)}
.mile .d{font-size:18px;font-weight:800;letter-spacing:-.018em;font-variant-numeric:tabular-nums}
.mile .lbl{font-size:12px;margin:3px 0 8px;color:var(--ink);line-height:1.35}
.mile .tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 7px;border-radius:20px;margin-top:auto;align-self:flex-start}
.mile.k-gate .tag{background:#FEF0D3;color:#8A5A00}
.mile.k-crit .tag{background:#FCE1E7;color:#9F1239}
.mile.k-key .tag{background:#DCF0FB;color:#075985}
.mile .edit{position:absolute;top:6px;right:6px}

.sectiontitle{font-size:16px;font-weight:800;margin:26px 4px 10px;display:flex;align-items:center;gap:9px;
  flex-wrap:wrap;letter-spacing:-.014em}
.sectiontitle small{font-weight:600;color:var(--muted);font-size:12.5px;letter-spacing:0}

/* ----------------------------------------------------------------- GANTT --- */
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.gscroll{overflow-x:auto}
.gcontent{position:relative;min-width:calc(250px + var(--cols) * 30px)}
.grow{display:grid;grid-template-columns:250px repeat(var(--cols),1fr);align-items:center;
  border-bottom:1px solid var(--line);min-height:40px}
/* Regla translúcida: las barras pasan por debajo en vez de chocar con una
   franja opaca. Mismo color de siempre, solo con alfa y desenfoque. */
.grow.ruler{position:sticky;top:0;z-index:6;background:rgba(244,247,251,.82);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  min-height:auto;border-bottom-color:rgba(var(--ink-rgb),.07)}
.rcell{grid-row:1;text-align:center;font-size:10.5px;color:var(--muted);padding:7px 0 6px;
  border-left:1px solid #EDF1F6;font-variant-numeric:tabular-nums}
.rcell .wd{display:block;font-size:9px;opacity:.7}
.rcell.we{background:#EAEEF4;color:#9AA6B4}
.rcell.mst{color:#fff;font-weight:800;border-radius:7px 7px 0 0}
.rlabel{grid-row:1;font-weight:800;font-size:11px;color:var(--muted);padding:0 10px;
  text-transform:uppercase;letter-spacing:.07em}
.modhdr{grid-column:1/-1;background:linear-gradient(90deg,#F0F4F9,#F7FAFD);
  padding:9px 14px;font-weight:800;font-size:13px;display:flex;align-items:center;gap:9px;color:var(--duaga-d);
  letter-spacing:-.008em}
.modhdr .mname{cursor:pointer;display:inline-flex;align-items:center;gap:9px;flex:1;min-width:0}
.modhdr .mnum{width:22px;height:22px;border-radius:7px;background:var(--duaga-d);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.modhdr .caret{transition:transform var(--sp-snap-t) var(--sp-snap);font-size:11px;color:var(--muted)}
.modhdr.collapsed .caret{transform:rotate(-90deg)}
.modacts{display:none;gap:4px}
body.editing .modacts{display:flex}

.tlabel{grid-row:1;padding:6px 8px 6px 12px;display:flex;align-items:flex-start;gap:8px}
.tlabel input[type=checkbox]{margin-top:2px;width:15px;height:15px;accent-color:var(--duaga);cursor:pointer;flex:none;
  transition:transform var(--press)}
.tlabel input[type=checkbox]:active{transform:scale(.88)}
.tlabel .tt{font-size:12.5px;line-height:1.3}
.tlabel .ob{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;border-radius:5px;
  padding:1px 6px;margin-top:3px;letter-spacing:.04em}
.tlabel .txt{min-width:0}
.rowacts{display:none;gap:3px;margin-left:auto;padding-left:6px}
body.editing .rowacts{display:flex}
.rowacts .iconbtn{width:23px;height:23px;font-size:11px}
.bar{grid-row:1;height:22px;border-radius:8px;margin:2px 3px;display:flex;align-items:center;
  padding:0 8px;color:#fff;font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;z-index:3;cursor:default;
  transition:transform var(--press),filter var(--sp-snap-t) var(--sp-snap),opacity var(--sp-snap-t) var(--sp-snap)}
body.editing .bar{cursor:pointer}
body.editing .bar:hover{filter:brightness(1.06)}
body.editing .bar:active{transform:scale(.985)}
.bar.mstone{background:transparent!important;box-shadow:none;justify-content:center;padding:0;overflow:visible}
.diamond{width:16px;height:16px;transform:rotate(45deg);border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.3);position:relative;z-index:4}
.gcell{grid-row:1;border-left:1px solid #F1F4F8;height:100%}
.gcell.we{background:#F6F8FB}
.gcell.mline{border-left:2px dashed rgba(var(--crit-rgb),.35)}
.gcell.today{border-left:2px solid var(--crit);background:rgba(var(--crit-rgb),.05)}

.trow.done .bar{filter:grayscale(.75);opacity:.55}
.trow.done .tt{text-decoration:line-through;color:var(--done)}
.trow.dim{opacity:.2}
.trow.hide{display:none}
.trow{transition:opacity var(--sp-smooth-t) var(--sp-smooth),background var(--sp-snap-t) var(--sp-snap)}
.emptymod{grid-column:1/-1;padding:10px 14px;font-size:12px;color:var(--muted)}

/* Efecto de borde de scroll: en lugar de un corte seco, el contenido se
   difumina justo donde queda más por ver, y solo entonces. La máscara va sobre
   la caja del contenedor (no se desplaza con el contenido); app.js ajusta el
   ancho de cada lado según la posición del scroll. */
@property --fade-l{syntax:'<length>';inherits:false;initial-value:0px}
@property --fade-r{syntax:'<length>';inherits:false;initial-value:0px}
.scrollfade{--fade-l:0px;--fade-r:0px;
  transition:--fade-l var(--sp-smooth-t) var(--sp-smooth),--fade-r var(--sp-smooth-t) var(--sp-smooth);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%)}
.scrollfade.has-start{--fade-l:40px}
.scrollfade.has-end{--fade-r:40px}

/* ---------------------------------------------------------- ENTREGABLES --- */
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.dcard{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:13px 14px;
  border-left:5px solid var(--line);display:flex;gap:10px;align-items:flex-start;
  transition:transform var(--sp-snap-t) var(--sp-snap),box-shadow var(--sp-snap-t) var(--sp-snap),
             opacity var(--sp-smooth-t) var(--sp-smooth)}
.dcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.dcard input{margin-top:2px;width:16px;height:16px;accent-color:var(--duaga);cursor:pointer;flex:none;
  transition:transform var(--press)}
.dcard input:active{transform:scale(.88)}
.dcard .dt{font-weight:700;font-size:13px;line-height:1.35;letter-spacing:-.006em}
.dcard .meta{font-size:11.5px;color:var(--muted);margin-top:4px}
.dcard.done{opacity:.6}
.dcard.done .dt{text-decoration:line-through}
.ob-s{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;border-radius:5px;padding:1px 6px;letter-spacing:.04em}

/* ---------------------------------------------------------------- NOTAS --- */
.notes{background:#FFF8EC;border:1px solid #F6E4BD;border-radius:14px;padding:14px 18px;margin-top:22px;font-size:13px}
.notes h4{margin:0 0 8px;color:#8A5A00;font-size:13px;display:flex;align-items:center;letter-spacing:-.005em}
.notes ul{margin:0;padding-left:18px} .notes li{margin:5px 0;line-height:1.5}
footer{margin-top:26px;text-align:center;color:var(--muted);font-size:12px}

/* --------------------------------------------------------------- MODALES --- */
/* Atenuar para enfocar: el fondo se oscurece y se desenfoca, la tarea flota
   encima. El velo y la superficie entran juntos y salen por el mismo camino. */
.overlay{position:fixed;inset:0;z-index:40;background:rgba(20,30,50,.45);
  -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);
  display:flex;align-items:center;justify-content:center;padding:18px;
  animation:scrim-in 220ms ease-out both}
.overlay.closing{animation:scrim-out 190ms ease-in both}
.modal{background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);border-radius:20px;box-shadow:var(--shadow-float),var(--glass-edge);
  width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;
  animation:sheet-in var(--sp-bounce-t) var(--sp-bounce) both}
.overlay.closing .modal{animation:sheet-out 190ms cubic-bezier(.4,0,1,1) both}
/* El panel entra desde la derecha y se va por la derecha: mismo camino de ida
   y de vuelta. */
.drawer{background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);border-radius:20px;box-shadow:var(--shadow-float),var(--glass-edge);
  width:100%;max-width:640px;max-height:92vh;display:flex;flex-direction:column;margin-left:auto;
  animation:drawer-in var(--sp-sheet-t) var(--sp-sheet) both}
.overlay.closing .drawer{animation:drawer-out 200ms cubic-bezier(.4,0,1,1) both}
.modalhead{display:flex;align-items:center;gap:10px;padding:15px 18px;
  border-bottom:1px solid rgba(var(--ink-rgb),.08);font-weight:800;font-size:15px;letter-spacing:-.012em}
.modalhead span{flex:1}
.modalbody,.drawerbody{padding:16px 18px;overflow-y:auto;overscroll-behavior:contain}
.modalfoot{padding:13px 18px;border-top:1px solid rgba(var(--ink-rgb),.08);display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.field{margin-bottom:13px}
.field > label{display:block;font-size:11.5px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.field input[type=text],.field input[type=date],.field input[type=number],.field select,.field textarea{
  width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;font-size:13.5px;
  font-family:inherit;background:#fff;color:var(--ink);
  transition:border-color var(--sp-snap-t) var(--sp-snap),box-shadow var(--sp-snap-t) var(--sp-snap)}
.field textarea{min-height:150px;line-height:1.5;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--duaga);
  box-shadow:0 0 0 3px rgba(var(--duaga-rgb),.18)}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.4}
.field.row{display:flex;gap:10px}
.field.row > div{flex:1}
.checkline{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;margin-bottom:12px}
.checkline input{width:16px;height:16px;accent-color:var(--duaga)}
.field input[type=color]{width:52px;height:34px;padding:2px;border:1.5px solid var(--line);border-radius:9px;background:#fff}

/* --------------------------------------------------------------- PANELES --- */
.litem{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:9px;font-size:12.5px;
  transition:border-color var(--sp-snap-t) var(--sp-snap),box-shadow var(--sp-snap-t) var(--sp-snap)}
.litem:hover{border-color:rgba(var(--duaga-rgb),.35);box-shadow:0 2px 10px rgba(20,30,50,.05)}
.litem .lhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.litem .lname{font-weight:700;flex:1;min-width:0}
.litem .lmeta{color:var(--muted);font-size:11.5px;margin-top:4px}
.litem .chg{background:#F7F9FC;border-radius:8px;padding:6px 9px;margin-top:6px;font-size:11.5px;line-height:1.45}
.litem .chg b{color:var(--duaga-d)}
.pill{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 7px;border-radius:20px;background:#EEF1F6;color:var(--muted);flex:none}
.pill.insert{background:#DCFCE7;color:#166534}
.pill.update{background:#DBEAFE;color:#1E40AF}
.pill.soft_delete{background:#FEE2E2;color:#991B1B}
.pill.restore{background:#FEF3C7;color:#92400E}
.empty{color:var(--muted);font-size:12.5px;text-align:center;padding:24px 10px}
.panelnote{background:#F7F9FC;border-radius:10px;padding:10px 12px;font-size:12px;color:var(--muted);
  margin-bottom:14px;line-height:1.45}

/* El aviso sube desde abajo y se va por abajo, por el mismo camino. */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;
  background:rgba(var(--duaga-d-rgb),.86);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:700;
  box-shadow:var(--shadow-float);max-width:90vw;
  animation:toast-in var(--sp-sheet-t) var(--sp-sheet) both}
.toast.closing{animation:toast-out 180ms cubic-bezier(.4,0,1,1) both}
.toast.err{background:rgba(var(--crit-rgb),.9)}

body.editing .grow.trow:hover{background:#FAFCFE}
.editonly{display:none}
body.editing .editonly{display:inline-flex}
h4 .editonly,h3 .editonly{margin-left:auto}
/* la app aparece materializándose, no de golpe */
#app:not([hidden]){animation:app-in var(--sp-smooth-t) var(--sp-smooth) both}

/* ----------------------------------------------------------- ANIMACIONES --- */
/* Materializar, no solo aparecer: el desenfoque y la escala se mueven juntos,
   así la superficie lee como material que llega y no como opacidad. */
@keyframes sheet-in{
  from{opacity:0;transform:scale(.94) translateY(10px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes sheet-out{
  from{opacity:1;transform:none;filter:blur(0)}
  to{opacity:0;transform:scale(.96) translateY(6px);filter:blur(4px)}}
@keyframes drawer-in{
  from{opacity:0;transform:translateX(36px) scale(.985)}
  to{opacity:1;transform:none}}
@keyframes drawer-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateX(40px)}}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}
@keyframes scrim-out{from{opacity:1}to{opacity:0}}
@keyframes toast-in{
  from{opacity:0;transform:translate(-50%,22px) scale(.96)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes toast-out{
  from{opacity:1;transform:translate(-50%,0) scale(1)}
  to{opacity:0;transform:translate(-50%,16px) scale(.98)}}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes app-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}

@media (max-width:640px){
  .wrap{padding:14px 12px 40px}
  header.hero{padding:20px 18px}
  .grow{grid-template-columns:180px repeat(var(--cols),1fr)}
  .gcontent{min-width:calc(180px + var(--cols) * 28px)}
  .drawer,.modal{max-height:94vh}
  .toolbar{top:6px}
}

/* ------------------------------------------------------- ACCESIBILIDAD --- */
/* Movimiento reducido no es "sin respuesta": es la misma información con una
   transición corta de opacidad, sin desplazamientos ni rebotes. */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:120ms!important;scroll-behavior:auto!important}
  .modal,.drawer,.gatebox,.toast,#app:not([hidden]){animation:none!important;transform:none!important;filter:none!important}
  .overlay,.overlay.closing{animation:scrim-in 120ms linear both}
  .btn:active,.tgl:active,.iconbtn:active,.minibtn:active,.bar:active,.dcard input:active,
  .tlabel input[type=checkbox]:active{transform:none}
  .mile:hover,.dcard:hover{transform:none}
  .syncdot.wait{animation:none}
}
/* Transparencia reducida: los materiales se vuelven sólidos, sin desenfoque. */
@media (prefers-reduced-transparency: reduce){
  .toolbar,.gatebox,.modal,.drawer,.grow.ruler,.firmchip,.cd,.iconbtn.light,.toast,.mile{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .rail::before{display:none}
  .mile{background:#F7F9FC;border-color:var(--line);border-top-color:var(--line)}
  .toolbar,.gatebox,.modal,.drawer{background:#fff}
  .grow.ruler{background:#F4F7FB}
  .overlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,30,50,.6)}
  .toast{background:var(--duaga-d)} .toast.err{background:var(--crit)}
  .firmchip,.cd{background:rgba(255,255,255,.2)}
}
/* Contraste alto: fondos casi sólidos y bordes definidos. */
@media (prefers-contrast: more){
  .toolbar,.modal,.drawer,.gatebox{background:#fff;border:1px solid var(--ink)}
  .grow.ruler{background:#F4F7FB}
  .tgl,.btn.ghost,.iconbtn,.field input,.field select,.field textarea{border-color:var(--ink)}
  .rail::before{display:none}
  .mile{background:#fff;border-color:var(--ink);border-top-color:var(--ink)}
  .mile .lbl,.progsub,.dcard .meta,.litem .lmeta{color:#4A5563}
}

@media print{
  body{background:#fff}
  .toolbar,.btn,.syncbar,.minibtn,.iconbtn,.rowacts,.modacts,.overlay,.toast{display:none!important}
  .card,.rail,.progwrap,header.hero{box-shadow:none;border:1px solid #ddd}
  .gcontent{min-width:0} .grow{grid-template-columns:220px repeat(var(--cols),1fr)}
  .rail::before{display:none}
  .mile{background:#fff;border:1px solid #D4DBE5;border-left-width:4px;box-shadow:none}
  header.hero{background:#223260!important}
  .scrollfade{-webkit-mask-image:none!important;mask-image:none!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation:none!important}
}