/* ════════════════════════════════════════════════════
   PHSICO STUDIOS — roadmap.css
   Roadmap de proyecto (/projects/<slug>). Se carga desde index.html.
   Tipografía y colores salen de style.css; acá solo está la
   maqueta y las variaciones propias del hito.
   Medidas: Figma "Project/Desktop" y "Project/Mobile".
════════════════════════════════════════════════════ */

/* En modo proyecto no hay chat ni footer: solo el Roadmap sobre el fondo de puntos */
/* Fondo blanco también detrás de #page: si el visor cambia de alto (barras del navegador en mobile) nunca asoma el negro del body */
html.proj, html.proj body { background: var(--white); }
html.proj #loading,
html.proj #footer { display: none !important; }

#roadmap { display: none; }
html.proj #roadmap {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
html.proj #roadmap::-webkit-scrollbar { display: none; }
html.proj #roadmap.ready { opacity: 1; }

.rm-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 600px;
  margin: 0 auto;
  padding: 50px 0 0;
  color: var(--middle-2);
}

/* ─── Encabezado ─── */
.rm-header {
  position: relative;
  padding: 69px 25px 30px 19px;   /* 30px bajo la descripción */
  background: var(--white);
}
/* marquita al pie, centrada sobre la línea vertical */
.rm-header::after {
  content: '';
  position: absolute;
  left: 7px;
  bottom: 0;
  width: 46px;
  height: 1px;
  background: var(--middle-2);
}
.rm-title {
  position: absolute;
  left: 19px;
  top: 17px;
  color: var(--black);
  white-space: nowrap;
}
.rm-intro {
  position: relative;
  color: var(--middle-2);
  margin: 0;
}
.rm-god {
  position: absolute;
  top: 29px;
  right: 25px;
  display: flex;
  gap: 10px;
}

/* Botones del encabezado (God): label + label-btn de style.css */
.rm-btn {
  border: none;
  font-family: "panel-mono", monospace;
  color: var(--middle-0);
  /* Row Reveal: entran deslizando desde la derecha + fade (0.25s ease) */
  opacity: 0;
  transform: translateX(20px);
  transition: transform 0.325s ease, opacity 0.325s ease,
              font-weight 0.2s ease-out, color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.rm-god.in .rm-btn { opacity: 1; transform: translateX(0); }
.rm-god.in .rm-btn + .rm-btn { transition-delay: 0.078s, 0.078s, 0s, 0s, 0s, 0s; }
.rm-send { background: var(--white); box-shadow: inset 0 0 0 0.5px var(--middle-1); }   /* la línea va por dentro: el botón no crece */
.rm-new  { background: var(--special-1); }
/* SEND mail: igual que Reiniciar chat */
.rm-send:hover { background: var(--special-1); color: var(--middle-0); box-shadow: inset 0 0 0 0.5px transparent; }
/* +HITO: cambia el color de la letra para leer mejor */
.rm-new:hover  { color: var(--middle-2); }

/* ─── Línea de tiempo ─── */
.rm-list {
  position: relative;
  list-style: none;
  padding: 45px 0 98px;
}
.rm-list::before {            /* línea vertical */
  content: '';
  position: absolute;
  left: 29.25px;
  top: 0;
  height: var(--rm-line, 0px);   /* llega hasta el último hito (lo calcula el JS) */
  width: 1.5px;
  background: var(--middle-2);
}
.rm-item {
  position: relative;
  margin: 0 0 25px 80px;
  width: 520px;
  height: auto;
  opacity: 1;
  transition:
    height var(--rm-collapse, 200ms) cubic-bezier(0.23, 1, 0.32, 1),
    margin-bottom var(--rm-collapse, 200ms) cubic-bezier(0.23, 1, 0.32, 1),
    opacity var(--rm-collapse, 200ms) cubic-bezier(0.23, 1, 0.32, 1);
}
.rm-item:last-child { margin-bottom: 0; }
.rm-item[data-phase='collapsing'] {
  height: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0;
  overflow: hidden;
}

/* punto + conector (círculo sobre la línea, trazo hasta la tarjeta) */
.rm-pt {
  position: absolute;
  left: -58px;
  top: 50%;
  width: 58px;
  height: 16px;
  margin-top: -8px;
  pointer-events: none;
}
.rm-pt::before {              /* conector */
  content: '';
  position: absolute;
  left: 14px;
  right: 0;
  top: 7.75px;
  height: 0;
  border-top: 0.5px solid var(--middle-2);
}
.rm-pt svg {                  /* círculo (+ tilde si está LISTO): mismo trazo que el botón + */
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  overflow: visible;
  color: var(--middle-2);
}
.rm-pt circle { r: 7.5px; fill: var(--white); stroke: currentColor; stroke-width: 1; }
.rm-pt .ck { fill: none; stroke: currentColor; stroke-width: 1; shape-rendering: geometricPrecision; stroke-linecap: butt; stroke-linejoin: miter; }

/* marcador de mes (y año): sobre la línea, entre dos hitos */
.rm-mark {
  position: absolute;
  left: 7px;
  width: 46px;
  pointer-events: none;
}
.rm-mark span {
  display: block;
  height: 20px;
  box-sizing: border-box;
  padding-top: 0.3em;          /* Panel Mono queda alto en su línea: se baja ~3px (10px) / ~2.7px (9px) */
  line-height: calc(17px - 0.3em);   /* 20 - 2 bordes de 1.5 */
  text-align: center;
  background: var(--white);
  border-top: 1.5px solid var(--middle-2);
  border-bottom: 1.5px solid var(--middle-2);
  color: var(--middle-2);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* ─── Contenedor con swipe (God) ─── */
.rm-sw {
  position: relative;
  overflow: hidden;
}
.rm-rail {
  position: absolute;
  inset: 0;
  background: var(--middle-1);
}
.rm-sw:not(.rm-god-sw) .rm-rail { display: none; }
.rm-block {
  position: absolute;
  top: 0;
  left: calc(100% - 80px);
  width: 100%;
  height: 100%;
  background: var(--special-2);
  border-left: 0.5px solid var(--middle-2);   /* divisor Edit|Del: va en el borde izquierdo del rojo, no en el botón */
  box-sizing: border-box;
}
.rm-act {
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--middle-1);
  color: var(--middle-2);
  font: inherit;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Edit ocupa todo lo que deja libre Del (así el hueco que se abre al arrastrar es del color de Edit,
   no un gris suelto); sus textos van alineados en los 80px de la derecha */
.rm-act-edit { left: 0; right: 80px; width: auto; }
.rm-act-del  { left: 0; background: transparent; }
/* ícono a la altura del botón + y texto a la altura del estado (las pone el JS: --rm-ic / --rm-lb) */
.rm-act .ic {
  position: absolute;
  left: 40px;
  top: var(--rm-ic, 19px);
  display: block;
  line-height: 0;
  transform: translateX(-50%);
}
.rm-act-edit .ic { left: auto; right: 40px; transform: translateX(50%); }
.rm-act .gp { position: absolute; inset: 0; display: block; }
.rm-act .ic svg { stroke-width: 1; transition: stroke-width 0.2s ease-out; }
.rm-act .lb {
  position: absolute;
  left: 0;
  width: 80px;
  top: var(--rm-lb, 70px);
  display: block;
  text-align: center;
  text-indent: 2px;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: font-weight 0.2s ease-out;
}
.rm-act-edit .lb { left: auto; right: 0; }
.rm-act:hover .lb { font-weight: 500; }
.rm-act:hover .ic svg { stroke-width: 1.5; }
.rm-act::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .rm-act::after { transition: opacity 150ms ease; }
  .rm-act:hover::after { opacity: 0.12; }
}
/* contorno del contenedor: no se mueve con el hito, así la línea izquierda nunca desaparece */
.rm-god-sw::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0.5px solid var(--middle-2);
  pointer-events: none;
}
.rm-surface {
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.rm-sw.rm-god-sw .rm-surface.can-swipe { cursor: grab; }
.rm-sw[data-dragging] .rm-surface,
.rm-sw[data-dragging] .rm-surface * { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.rm-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

/* ─── Tarjeta del hito ─── */
.rm-card {
  position: relative;
  padding: 15px 25px 12px 30px;
  background: var(--white);
  border: 0.5px solid var(--middle-2);
  transition: padding-top 0.32s ease-out;
}
.rm-card.is-dark {
  background: var(--middle-2);
  border-color: var(--middle-2);
  color: var(--white);
}
.rm-card.is-open { padding-top: 16px; }

.rm-name {
  max-width: 360px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 20px;
  color: var(--middle-2);
  overflow-wrap: anywhere;
}
.is-dark .rm-name { color: var(--white); }

/* botón + / abrir (se anima de "+" a "^") */
.rm-tg {
  position: absolute;
  right: 25px;
  top: 19px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--middle-2);
  cursor: pointer;
  line-height: 0;
  transition: top 0.32s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.rm-tg::before { content: ''; position: absolute; inset: -8px; }  /* área de toque */
.is-dark .rm-tg { color: var(--white); }
.is-open .rm-tg { top: 15px; }
.rm-tg svg { display: block; overflow: visible; }
.rm-tg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-miterlimit: 10;
  transition: stroke-width 0.2s ease-out;   /* igual que la flecha del chat */
}
.rm-tg:hover path { stroke-width: 2; }
.rm-tg:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.rm-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 19px;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--middle-3);
  transition: margin-top 0.32s ease-out;
}
.rm-state { font-weight: 500; letter-spacing: 4px; white-space: nowrap; }

/* parte desplegable */
.rm-more { height: 0; overflow: hidden; visibility: hidden; }
.is-open .rm-more { visibility: visible; }
.rm-more-in { padding-top: 13px; padding-bottom: 15px; }
.rm-rule {
  transform-origin: left center;
  --rm-rule: var(--middle-1);
  height: 1px;
  border: 0;
  background: var(--rm-rule);
}
.is-dark .rm-rule { --rm-rule: var(--middle-0); }
/* punteada 2 on / 2 off, como el trazo del Figma */
.rm-rule.dash { background: repeating-linear-gradient(90deg, var(--rm-rule) 0 2px, transparent 2px 4px); }
.rm-tags .tg-i { display: inline-block; white-space: pre; }
.rm-tags {
  margin-top: 8px;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--middle-2);
}
.is-dark .rm-tags { color: var(--middle-1); }

/* texto largo (descripción / tarea) — variación propia del hito: 12/18 desktop, 11/14 mobile */
.rm-txt {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1.5px;
  color: var(--middle-2);
  overflow-wrap: anywhere;
}
.is-dark .rm-txt { color: var(--middle-1); }
.rm-txt p { margin: 0 0 10px; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.rm-txt p:last-child { margin-bottom: 0; }
.rm-txt .li { display: block; }
.rm-txt b { font-weight: 500; }
.rm-desc { margin-top: 33px; }
.rm-task-label {
  margin-top: 10px;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--middle-3);
}
.rm-task { margin-top: 32px; }
.rm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

/* botones de enlace: MEET [!] · ARCHIVOS [*] · MAPA [•] · CALENDARIO [+]
   en reposo los corchetes están cerrados []; en hover se abren y aparece el carácter */
.rm-lk {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 6px;
  background: var(--special-1);
  color: var(--middle-0);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: pre;
  cursor: pointer;
  transition: color 0.2s ease-out;
}
.rm-lk .br { letter-spacing: 1px; }
.rm-lk .ch {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  vertical-align: top;
  transition: max-width 0.25s ease-out, opacity 0.2s ease-out;
}
.rm-lk:hover, .rm-lk:focus-visible { color: var(--middle-2); outline: none; }
.rm-lk:hover .ch, .rm-lk:focus-visible .ch { max-width: 1.2em; opacity: 1; }
@media (hover: none) {
  .rm-lk .ch { max-width: 1.2em; opacity: 1; }
}

/* Deshacer (provisorio, sin diseño todavía) */
.rm-undo {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 0 12px;
  background: var(--middle-2);
  color: var(--white);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.rm-undo.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.rm-undo button {
  border: 0;
  background: var(--special-1);
  color: var(--middle-2);
  padding: 8px 12px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   MOBILE — Project/Mobile (≤768px)
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .rm-wrap {
    width: calc(100% - 18px);
    max-width: 600px;
    padding-top: 49px;
  }
  .rm-title { left: 20px; top: 20px; }
  .rm-god   { top: 25px; right: 16px; }

  .rm-header { padding: 73px 14px 0 20px; height: 160px; }   /* +20px bajo el nombre del proyecto */
  .rm-list { padding: 40px 0 27px; }
  .rm-list::before { left: 7.25px; }
  .rm-header::after { left: 0; width: 30px; height: 1.5px; }
  .rm-pt::before { top: 7px; height: 1.5px; border-top: 0; background: var(--middle-2); }
  .rm-pt circle { r: 7.25px; stroke-width: 1.5; }
  .rm-pt .ck { stroke-width: 1.5; }

  .rm-item { margin: 0 0 22px 39px; width: auto; }
  .rm-pt { left: -39px; width: 39px; }

  .rm-mark { left: 0; width: 30px; }
  .rm-mark span { font-size: 9px; font-weight: 400; letter-spacing: 2px; }

  .rm-card { padding: 10px 16px 11px 15px; }
  .rm-card.is-open { padding-top: 11px; }
  .rm-name { max-width: 260px; font-size: 14px; line-height: 18px; letter-spacing: 0.8px; }
  .rm-tg { right: 16px; top: 14px; }
  .is-open .rm-tg { top: 14px; }
  .rm-meta { margin-top: 19px; font-size: 9px; }
  .is-open .rm-meta { margin-top: 23px; }
  .rm-state { font-weight: 400; letter-spacing: 2px; margin-right: 0; }

  .rm-more-in { padding-top: 13px; padding-bottom: 9px; }
  .rm-tags { font-size: 9px; }
  .rm-txt, .rm-txt p { font-size: 11px; line-height: 14px; }
  .rm-desc { margin-top: 24px; }
  .rm-task-label { margin-top: 8px; font-size: 9px; }
  .rm-task { margin-top: 24px; }
  .rm-links { margin-top: 10px; }
  .rm-lk { font-size: 9px; }
  .rm-lk .br { letter-spacing: 2px; }

}

/* ─── Ajustes de integración ─── */
.rm-more { transition: height 0.4s ease-out, visibility 0s linear 0.4s; }
.is-open .rm-more { transition-delay: 0s, 0s; }
.rm-intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rm-rule.dash { margin-top: 10px; }
.rm-rule.end  { margin-top: 10px; }
.rm-txt .li-grp { margin: 0 0 10px; }
.rm-txt .li-grp:last-child { margin-bottom: 0; }
.rm-mark .yr { margin-top: -1.5px; }
.rm-mark.hoy span { background: var(--special-1); }
.rm-title { margin: 0; }

/* entrada en cascada de los hitos (se quita al aparecer en pantalla) */
.rm-pend { opacity: 0; transform: translateY(36px); }

/* hover del hito (solo desktop con mouse, cerrado): el contenedor crece 15px hacia la derecha, el lado izquierdo queda fijo y el contenido se acomoda */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .rm-sw { transition: margin-right 0.3s ease-out; }
  .rm-item:hover .rm-sw:not(:has(.is-open)) { margin-right: -15px; }
}

/* hitos que ya pasaron o están LISTOS: se leen como finalizados (letra en el gris nuevo; LISTO además tachado) */
.rm-card.is-done .rm-name,
.rm-card.is-done .rm-tags,
.rm-card.is-done .rm-txt,
.rm-card.is-done .rm-tg { color: var(--middle-3); }
.rm-card.is-done .rm-meta { color: var(--middle-3); }
.rm-card.is-done.is-dark .rm-name,
.rm-card.is-done.is-dark .rm-tags,
.rm-card.is-done.is-dark .rm-txt,
.rm-card.is-done.is-dark .rm-meta,
.rm-card.is-done.is-dark .rm-tg { color: var(--middle-3); }
.rm-card.is-done .rm-name { font-weight: 400; }   /* finalizado: de Medium a Regular */
.rm-card.is-listo .rm-name { text-decoration: line-through; }

.rm-card { cursor: pointer; }
.rm-card a { cursor: pointer; }
.rm-sw[data-dragging] .rm-card { cursor: grabbing; }


/* ════════════════════════════════════════════════════
   FORMULARIO +HITO / EDIT  (Figma: Project/Roadmap/EditHito)
   Hoja que entra desde abajo y empuja la página; medidas del frame 1440×900 / 390×1150.
════════════════════════════════════════════════════ */
.rm-sheet { position: fixed; inset: 0; z-index: 500; overflow: hidden; pointer-events: none; }   /* fuera de #page: queda por encima del menú */
@supports (height: 100dvh) { .rm-sheet { bottom: auto; height: 100dvh; } }
.rm-sheet .fm-pane { pointer-events: auto; }
.fm-pane {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  max-height: calc(100% - 150px); background: var(--middle-1);
  transform: translateY(100%); will-change: transform;
}
.rm-sheet.open .fm-pane { transform: none; }
.fm-scroll {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fm-scroll::-webkit-scrollbar { display: none; }

.fm { position: relative; box-sizing: border-box; width: 740px; max-width: calc(100% - 30px); margin: 0 auto; padding-bottom: 60px; color: var(--middle-2); font-family: "panel-mono", monospace; }
.fm *, .fm *::before, .fm *::after { box-sizing: border-box; }
:where(.fm) button, :where(.fm) input, :where(.fm) textarea {
  font: inherit; letter-spacing: inherit; color: inherit; border: 0; background: none; margin: 0; padding: 0;
  border-radius: 0; -webkit-appearance: none; appearance: none; outline: none;
}
.fm ::selection { background: var(--special-1); color: var(--middle-2); }
.fm ::placeholder { color: var(--middle-0); opacity: 1; }
:where(.fm) button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fm button:focus-visible { outline: 1px solid var(--middle-2); outline-offset: 2px; }
.fm .fm-st:focus-visible, .fm .fm-dot:focus-visible { outline: 0; }

/* encabezado */
.fm-head { position: relative; height: 102px; padding: 40px 0 0 5px; border-bottom: 1px solid var(--middle-2); }
.fm-h1 { margin: 0; color: var(--black); font-size: 34px; line-height: 40px; font-weight: 500; letter-spacing: -2px; }
.fm-x { position: absolute; right: -2px; top: 44px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--middle-2); }
.fm-x svg { display: block; overflow: visible; }
.fm-x path { stroke-width: 1; transition: stroke-width 0.2s ease-out; }
.fm-x:hover path, .fm-x:focus-visible path { stroke-width: 2; }

/* etiquetas y texto */
.fm-l { display: block; flex: none; box-sizing: border-box; padding-right: 6px; white-space: nowrap; color: var(--middle-0); }
.fm-l b { font-weight: 500; }
.fm-t, .fm-st { font-size: 15px; line-height: 22px; letter-spacing: 1.5px; font-weight: 400; }
.fm-t { color: var(--middle-2); }
.fm-f { position: relative; transition: background-color 0.2s ease-out; }

/* secciones de texto (título / descripción / important) */
.fm-sec { padding: 8px 10px 8px 5px; }
.fm-sec .fm-l { margin: 0 0 15px; }
.fm-ta { display: block; width: 100%; min-height: 22px; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.fm-sec[data-k="title"] .fm-ta { color: var(--black); }
.fm-sec[data-k="description"] { padding: 7px 10px 7px 5px; border-top: 0; border-bottom: 0.5px solid var(--middle-2); }
.fm-sec[data-k="task"] { padding: 8px 10px 7px 5px; }

/* grilla de campos */
.fm-grid { display: grid; grid-template-columns: 137px 83px 130px 50px 80px 130px 130px; grid-auto-rows: minmax(30px, auto); }
.fm-c { display: flex; align-items: flex-start; min-width: 0; min-height: 30px; padding: 3px 0 4px; border-top: 0.5px solid var(--middle-2); }
.fm-c .fm-l { margin-top: 4px; }
.fm-in { flex: 1; min-width: 0; width: 100%; height: 22px; }
.c-in, .c-out, .c-sp, .c-se, .c-sa, .c-sli, .c-fill, .c-tag, .c-chips { border-left: 0.5px solid var(--middle-2); }
.c-in, .c-out, .c-sp, .c-se, .c-sa, .c-sli, .c-chips { padding-left: 14px; }
.c-fill { display: none; }
.c-col, .c-tag, .c-chips { border-bottom: 1px solid var(--middle-2); }
.c-tag { padding-left: 14px; }
.c-date { grid-area: 1 / 1 / 2 / 3; }  .c-in { grid-area: 1 / 3 / 2 / 5; }  .c-out { grid-area: 1 / 5 / 2 / 8; }
.c-sl { grid-area: 2 / 1 / 3 / 3; }
.fm-states { grid-area: 2 / 3 / 3 / 8; display: flex; min-width: 0; }   /* cada opción mide su texto + 15 px hasta la línea; Listo ocupa el resto */
.fm-states .fm-st { flex: 0 0 auto; padding-right: 15px; }
.fm-states .c-sli { flex: 1 1 auto; }
.c-col { grid-area: 3 / 1; }  .c-tag { grid-area: 3 / 2 / 4 / 5; }  .c-chips { grid-area: 3 / 5 / 4 / 8; padding-top: 6px; padding-bottom: 5px; }
.c-date, .c-sl, .c-col { padding-left: 5px; }
.c-out, .c-sli, .c-chips { padding-right: 10px; }
.c-date .fm-l { min-width: 55px; }  .c-in .fm-l { min-width: 84px; }  .c-out .fm-l { min-width: 93px; }
.c-col .fm-l { min-width: 65px; }   .c-tag .fm-l { min-width: 56px; }

/* estado */
.fm-st { display: block; text-align: left; color: var(--middle-0); }
.fm-st.on { color: var(--middle-2); text-decoration: line-through; text-decoration-thickness: 1px; }

/* color */
.fm-cir { display: flex; align-items: center; height: 22px; }
.fm-dot { width: 16px; height: 16px; border-radius: 50%; padding: 0; background: var(--white); }
.fm-dot.d { background: var(--middle-2); }
.fm-dot.on { box-shadow: inset 0 0 0 2px var(--special-1); }
.fm-cs { display: block; width: 0.5px; height: 14px; margin: 0 9.75px; background: var(--middle-2); }

/* tags */
.fm-chips { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.fm-chip {
  position: relative; display: inline-flex; align-items: center; height: 18px; padding: 0 4px;
  border: 1px solid var(--middle-0); color: var(--middle-0);
  font-size: 10px; line-height: 12px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out;
}
.fm-chip .t { transition: opacity 0.15s ease-out; }
.fm-chip .x { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; color: var(--white); opacity: 0; transition: opacity 0.15s ease-out; }
.fm-chip.armed { background: var(--middle-2); border-color: var(--middle-2); }
.fm-chip.armed .t { opacity: 0; }
.fm-chip.armed .x { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .fm-chip:hover { background: var(--middle-2); border-color: var(--middle-2); }
  .fm-chip:hover .t { opacity: 0; }
  .fm-chip:hover .x { opacity: 1; }
}

/* URLs */
.fm-u:first-child { border-top: 1px solid var(--middle-2); }
.fm-u { display: flex; align-items: flex-start; min-height: 30px; padding: 4px 10px 3px 5px; border-bottom: 0.5px solid var(--middle-2); }
.fm-u:last-child { border-bottom: 1px solid var(--middle-2); }
.fm-u .fm-l { min-width: 86px; margin-top: 4px; }

/* SAVE */
.fm-saverow { display: flex; justify-content: flex-end; margin-top: 10px; }   /* pegado al borde derecho: el botón crece hacia la izquierda */
.fm-save {
  display: inline-block; box-sizing: border-box; height: 20px; padding: 4px 6px; background: var(--special-1); color: var(--middle-0);
  white-space: pre; text-align: left; vertical-align: top; transition: color 0.2s ease-out;
}
.fm-save .br { letter-spacing: 1px; }
.fm-save .ch { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; vertical-align: top; transition: max-width 0.25s ease-out, opacity 0.2s ease-out; }
.fm-save:hover, .fm-save:focus-visible { color: var(--middle-2); outline: none; }
.fm-save:hover .ch, .fm-save:focus-visible .ch { max-width: 1.2em; opacity: 1; }
@media (hover: none) { .fm-save .ch { max-width: 1.2em; opacity: 1; } }
.fm-save.probe .ch { max-width: 1.2em; opacity: 1; transition: none; }
.fm-save.busy { pointer-events: none; }

/* foco: contorno amarillo de 2px que se dibuja */
.fm-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.fm-ring rect { fill: none; stroke: var(--special-1); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* error: el campo entero en rojo con tipografía blanca */
.fm-f.err { background: var(--special-2); }
.fm-f.err .fm-l, .fm-f.err .fm-t, .fm-f.err .fm-st, .fm-f.err .fm-in, .fm-f.err .fm-ta { color: var(--white); }
.fm-f.err ::placeholder { color: var(--white); }

/* tooltip BOLD */
.fm-tip {
  position: absolute; z-index: 5; height: 20px; padding: 4px 6px; background: var(--middle-2); color: var(--white);
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity 0.15s ease-out, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.fm-tip.on { opacity: 1; pointer-events: auto; transform: none; }

@media (max-width: 768px) {
  .fm-pane { max-height: min(80%, calc(100% - 150px)); }
  .fm { width: auto; max-width: none; margin: 0 20px; padding-bottom: 60px; }
  .fm-t, .fm-st { font-size: 14px; line-height: 21px; letter-spacing: 0.8px; }
  .fm-x { top: 0; right: -2px; }
  .fm-c .fm-l, .fm-u .fm-l { margin-top: 3px; }
  .fm-in { height: 21px; }
  .fm-ta { min-height: 21px; }
  .fm-grid { grid-template-columns: 175px 1fr; }
  .c-in, .c-sp, .c-sa, .c-tag { border-left: 0; }
  .c-sp, .c-sa, .c-tag, .c-in { padding-left: 5px; }  .c-chips { border-left: 0; padding-left: 5px; }
  .c-col, .c-tag { border-bottom: 0; }
  .c-out, .c-se, .c-sli { padding-left: 10px; }
  .c-in { grid-area: 2 / 1; }
  .c-date { grid-area: 1 / 1 / 2 / 3; }  .c-in { grid-area: 2 / 1; }  .c-out { grid-area: 2 / 2; }
  .fm-head { height: 92px; padding-top: 30px; }
  .fm-states { display: contents; }
  .fm-states .fm-st { padding-right: 0; }
  .c-sl { grid-area: 3 / 1 / 4 / 3; }  .c-sp { grid-area: 4 / 1; }  .c-se { grid-area: 4 / 2; }  .c-sa { grid-area: 5 / 1; }  .c-sli { grid-area: 5 / 2; }
  .c-col { grid-area: 6 / 1 / 7 / 3; }  .c-tag { grid-area: 7 / 1 / 8 / 3; }  .c-chips { grid-area: 8 / 1 / 9 / 3; position: relative; }
  .c-chips .fm-chips { max-width: 165px; }
  .c-date .fm-l { min-width: 47px; }  .c-in .fm-l { min-width: 70px; }  .c-out .fm-l { min-width: 76px; }
  .fm-cs { margin: 0 19.75px; }
  .fm-urls, .fm-saverow { margin-left: 8px; margin-right: -8px; }
  .c-chips .fm-chips { max-width: 155px; }
  .fm-u .fm-l { min-width: 81px; }
}

/* mobile: con el form abierto el menú no se ve ni se puede tocar; para volver al menú se sale del form */
@media (max-width: 768px) {
  #header, #menu-bar { transition: opacity .3s ease, visibility 0s linear 0s; }
  html.fm-open #header, html.fm-open #menu-bar { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
}