/* ============================================================
   PÁGINA PÚBLICA DE FUNCIONES — iGalenus Cortex (oftalmología)
   Depende de landing.css (nav, botones, footer, .lp-reveal).
   Paleta NEUTRA (Piedra): tinta, grises fríos y un solo acento
   discreto. Los "mocks" reproducen las pantallas reales del
   sistema (topbar, eventos, cards de nota, POS, tablas eyebrow).
   CSS propio porque es una página pública sin Bootstrap/Keen.
   ============================================================ */

:root {
  --ft-bg:       #F2F3F7;   /* L0 */
  --ft-surface:  #FAFBFD;   /* L1 */
  --ft-l2:       #EBEDF2;   /* L2 */
  --ft-recess:   #E2E5EC;
  --ft-line:     #DCDFE7;
  --ft-ink:      #15171D;
  --ft-ink-soft: #5C6170;
  --ft-ink-mute: #8A94A6;
  --ft-input:    #E4E6EA;
  --ft-caoba:    #8C4A38;   /* ordinal de sección en la nota real */
  --ft-ok:       #1F8A5B;
  --ft-warn:     #B5731A;
  --ft-danger:   #C8442F;
  --ft-accent:   #066DF0;   /* solo detalles: línea activa, franja */
  --ft-head: 'new-hero', 'Inter', -apple-system, sans-serif;
  --ft-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --ft-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ft-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ft-body { overflow-x: hidden; background: var(--ft-bg); color: var(--ft-ink); }
.ft-body .lp-nav__center { font-weight: 500; color: var(--ft-ink-soft); }
.ft-body code { font-family: var(--ft-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.ft-body h1, .ft-body h2 { font-family: var(--ft-head); color: var(--ft-ink); }

/* Botón oscuro (sustituye al primary azul de la landing) */
.ft-btn-dark { background: var(--ft-ink) !important; color: #fff !important; border-color: var(--ft-ink) !important; }
.ft-btn-dark:hover { background: #2A2D36 !important; transform: translateY(-1px); }

/* ---------- Barra de progreso ---------- */
.ft-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; }
.ft-brand { display: block; margin-bottom: 26px; }
.ft-brand img { height: 34px; width: auto; display: block; }
.ft-progress span { display: block; height: 100%; width: 0; background: var(--ft-ink); transition: width 0.1s linear; }

/* ---------- Hero ---------- */
.ft-hero { padding: 120px 0 56px; text-align: center; }
.ft-hero__inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ft-release { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid var(--ft-line); background: var(--ft-surface); font-family: var(--ft-mono); font-size: 12.5px; color: var(--ft-ink-soft); }
.ft-release b { color: var(--ft-ink); font-weight: 600; }
.ft-release__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ft-ink); }
.ft-hero__title { font-size: clamp(42px, 8.5vw, 88px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 600; margin: 0; }
.ft-soft { color: var(--ft-ink-mute); }
.ft-word { display: inline-block; opacity: 0; transform: translateY(22px); }
.ft-hero__title.is-in .ft-word { animation: ftWord 0.8s var(--ft-ease) forwards; }
.ft-hero__title.is-in .ft-word:nth-child(2) { animation-delay: 0.07s; }
.ft-hero__title.is-in .ft-word:nth-child(3) { animation-delay: 0.14s; }
.ft-hero__title.is-in .ft-word:nth-child(5) { animation-delay: 0.26s; }
.ft-hero__title.is-in .ft-word:nth-child(6) { animation-delay: 0.33s; }
.ft-hero__title.is-in .ft-word:nth-child(7) { animation-delay: 0.40s; }
@keyframes ftWord { to { opacity: 1; transform: none; } }
.ft-hero__lead { font-size: clamp(17px, 2vw, 21px); color: var(--ft-ink-soft); max-width: 62ch; margin: 0; line-height: 1.5; }

/* ---------- Índice ---------- */
.ft-index { padding: 8px 0 40px; }
.ft-index__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; counter-reset: idx; }
.ft-index__list li { counter-increment: idx; }
.ft-index__list a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; border: 1px solid var(--ft-line); background: var(--ft-surface); color: var(--ft-ink-soft); font-size: 13px; font-weight: 500; text-decoration: none; transition: 0.2s var(--ft-ease); }
.ft-index__list a::before { content: counter(idx, decimal-leading-zero); font-family: var(--ft-mono); font-size: 10.5px; color: var(--ft-ink-mute); }
.ft-index__list a:hover, .ft-index__list a.is-active { border-color: var(--ft-ink); color: var(--ft-ink); background: #fff; }

/* ---------- Secciones ---------- */
.ft-feature { padding: 96px 0; scroll-margin-top: 80px; }
.ft-feature--tint { background: var(--ft-surface); border-top: 1px solid var(--ft-line); border-bottom: 1px solid var(--ft-line); }
.ft-feature--tint + .ft-feature--tint { border-top: 0; }
.ft-num { display: block; font-family: var(--ft-mono); font-size: 12.5px; color: var(--ft-ink-mute); letter-spacing: 0.04em; margin-bottom: 18px; }
.ft-feature h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.028em; font-weight: 600; margin: 0 0 20px; }
.ft-lead { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--ft-ink-soft); line-height: 1.6; margin: 0; }
.ft-head { max-width: 820px; margin-bottom: 44px; }
.ft-feature__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 960px) {
  .ft-feature__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
  .ft-feature__grid--flip > .ft-feature__text { order: 2; }
  .ft-feature__grid--flip > .ft-feature__visual { order: 1; }
}
.ft-feature__text .ft-lead { margin-bottom: 26px; }
.ft-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ft-list li { padding: 14px 0; border-top: 1px solid var(--ft-line); font-size: 15.5px; line-height: 1.55; color: var(--ft-ink-soft); }
.ft-list li:last-child { border-bottom: 1px solid var(--ft-line); }
.ft-list li b { color: var(--ft-ink); font-weight: 600; }

/* Hechos en rejilla bajo un mock ancho */
.ft-facts { display: grid; grid-template-columns: 1fr; gap: 0 48px; margin-top: 48px; }
@media (min-width: 700px) { .ft-facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .ft-facts { grid-template-columns: 1fr 1fr 1fr; } }
.ft-facts > div { padding: 22px 0; border-top: 1px solid var(--ft-line); }
.ft-facts b { display: block; font-size: 16.5px; font-weight: 600; margin-bottom: 6px; }
.ft-facts p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ft-ink-soft); }

/* ---------- Mock: shell de app ---------- */
.ft-shot { position: relative; }
.ft-shot--split { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) { .ft-shot--split { grid-template-columns: 1.4fr 1fr; } }
.ft-app { background: var(--ft-bg); border: 1px solid var(--ft-line); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px -60px rgba(1, 3, 38, 0.35); font-size: 13px; text-align: left; }
.ft-app--card { background: var(--ft-surface); padding: 18px; position: relative; }
.ft-app__body { padding: 16px; }
.ft-eyebrow { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.125em; color: var(--ft-ink-soft); }

/* Topbar real: home redondo · chip+título · acciones */
.ft-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ft-surface); border-bottom: 1px solid var(--ft-line); flex-wrap: wrap; }
.ft-topbar__home { width: 30px; height: 30px; border-radius: 50%; background: var(--ft-l2); position: relative; flex-shrink: 0; }
.ft-topbar__home::after { content: ''; position: absolute; left: 9px; top: 8px; width: 12px; height: 12px; border: 2px solid var(--ft-ink-soft); border-top: 0; border-radius: 0 0 2px 2px; }
.ft-topbar__chip { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.ft-topbar__chip i { width: 24px; height: 24px; border-radius: 50%; background: var(--ft-l2); }
.ft-topbar__chip code { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--ft-l2); color: var(--ft-ink-soft); }
.ft-topbar__sep { width: 1px; height: 22px; background: var(--ft-line); margin: 0 4px; }
.ft-topbar__crumb { padding: 5px 10px; border-radius: 8px; background: var(--ft-l2); color: var(--ft-ink-soft); font-size: 12px; font-weight: 500; }
.ft-topbar__ident { display: flex; flex-direction: column; line-height: 1.2; }
.ft-topbar__ident small { font-size: 11px; color: var(--ft-ink-soft); }
.ft-topbar__ident b { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ft-topbar__ident b code { font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: var(--ft-l2); color: var(--ft-ink-soft); }
.ft-topbar__save { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ft-ink-soft); }
.ft-topbar__tut { margin-left: auto; font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ft-line); color: var(--ft-ink-soft); }
.ft-btn { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--ft-surface); border: 1px solid var(--ft-line); color: var(--ft-ink); white-space: nowrap; }
.ft-btn--dark { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); }
.ft-btn--xs { padding: 4px 9px; font-size: 11px; }
.ft-search { flex: 1; min-width: 140px; padding: 6px 12px; border-radius: 999px; background: rgba(21, 23, 29, 0.06); font-size: 12px; color: var(--ft-ink-mute); }
.ft-search--full { display: block; border-radius: 8px; margin-bottom: 12px; }
.ft-dilat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ft-mono); font-size: 11.5px; color: var(--ft-ink); }
.ft-dilat i { width: 7px; height: 7px; border-radius: 50%; background: var(--ft-warn); animation: ftPulse 1.6s infinite; }
@keyframes ftPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Pill-switcher real: pista hundida L2, chip elevado L1 */
.ft-pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ft-l2); box-shadow: inset 0 0 0 1px var(--ft-line); }
.ft-pills span { padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ft-ink-soft); white-space: nowrap; }
.ft-pills span.is-on { background: var(--ft-surface); color: var(--ft-ink); font-weight: 600; box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.1); }
.ft-pills--sm span { padding: 4px 10px; font-size: 11.5px; }
.ft-pills--inline { display: inline-flex; }
.ft-pills--scroll { display: flex; overflow: hidden; margin-bottom: 14px; }
.ft-select { padding: 7px 10px; border-radius: 8px; background: var(--ft-input); border: 1px solid var(--ft-line); font-size: 12px; position: relative; }
.ft-select::after { content: ''; position: absolute; right: 10px; top: 11px; width: 6px; height: 6px; border-right: 1.5px solid var(--ft-ink-soft); border-bottom: 1.5px solid var(--ft-ink-soft); transform: rotate(45deg); }
.ft-select--xs { padding: 4px 26px 4px 9px; font-size: 11px; }
.ft-select--xs::after { top: 8px; }
.ft-linetabs { display: flex; gap: 20px; border-bottom: 1px solid var(--ft-line); margin: 18px 0 16px; font-size: 13.5px; font-weight: 600; color: var(--ft-ink-soft); overflow: hidden; }
.ft-linetabs span { padding: 8px 0 10px; white-space: nowrap; position: relative; }
.ft-linetabs span.is-on { color: var(--ft-ink); }
.ft-linetabs span.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ft-accent); }
.ft-linetabs--sm { font-size: 12px; gap: 16px; margin: 0 0 14px; }

/* Tablas listado: thead eyebrow, filas 1px */
.ft-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ft-table th { text-align: left; padding: 10px 8px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.125em; color: var(--ft-ink-soft); border-bottom: 1px solid var(--ft-line); background: var(--ft-surface); }
.ft-table td { padding: 11px 8px; border-bottom: 1px solid var(--ft-line); vertical-align: middle; }
.ft-table tr:last-child td { border-bottom: 0; }
.ft-table td b { font-weight: 700; color: #2B2E38; display: block; }
.ft-table td small { display: block; font-size: 11px; color: var(--ft-ink-soft); }
.ft-table code { font-size: 11.5px; }
.ft-table .c { text-align: center; } .ft-table .r { text-align: right; }
.ft-table--tight th, .ft-table--tight td { padding: 6px 8px; }
/* En teléfono las tablas anchas (17 de ellas pasan de 6 columnas) quedaban
   CORTADAS: viven dentro de .ft-app, que tiene overflow:hidden por el radio,
   así que las columnas de la derecha desaparecían sin forma de llegar a ellas.
   Con display:block la tabla se vuelve su propio contenedor de scroll y el
   navegador conserva la alineación de columnas con una caja de tabla anónima. */
@media (max-width: 720px) {
  .ft-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ft-table th, .ft-table td { white-space: nowrap; }
  .ft-table td small { white-space: normal; }
  /* La del equipo ya vive en su propio contenedor con scroll: dejarla como
     tabla evita anidar dos scrollers uno dentro del otro. */
  .ft-anscroll .ft-table { display: table; overflow: visible; }
}
.ft-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--ft-l2); color: #2B2E38; }
.ft-tag code { font-size: 10.5px; }
.ft-tag--soft { background: var(--ft-l2); color: var(--ft-ink); }
.ft-tag--ok { background: rgba(31, 138, 91, 0.12); color: var(--ft-ok); }
.ft-tag--warn { background: rgba(181, 115, 26, 0.14); color: var(--ft-warn); }
.ft-tag--danger { background: rgba(200, 68, 47, 0.12); color: var(--ft-danger); }
.ft-bar { width: 80px; height: 5px; border-radius: 3px; background: var(--ft-l2); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.ft-bar i { display: block; height: 100%; width: 0; background: var(--ft-ink); }
.is-in .ft-bar i { animation: ftBar 1s var(--ft-ease) 0.3s forwards; }
.ft-bar i.is-low { background: var(--ft-warn); }
@keyframes ftBar { to { width: var(--p); } }
.ft-person { display: flex; align-items: center; gap: 10px; }
.ft-person i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.ft-person b { display: block; } .ft-person small { display: block; }
.ft-toast { position: absolute; right: -10px; bottom: -16px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; background: var(--ft-ink); color: #fff; border-radius: 10px; font-size: 12px; font-weight: 500; opacity: 0; transform: translateY(8px); box-shadow: 0 14px 30px -14px rgba(1, 3, 38, 0.5); }
.is-in .ft-toast { animation: ftIn 0.6s var(--ft-ease) 1s forwards; }
.ft-toast i { font-style: normal; font-family: var(--ft-mono); font-size: 11px; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.16); }
@keyframes ftIn { to { opacity: 1; transform: none; } }

/* ---------- 01 Calendario ---------- */
.ft-cal-layout { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; }
@media (min-width: 760px) { .ft-cal-layout { grid-template-columns: 200px 1fr; } }
.ft-cal-side { display: none; flex-direction: column; gap: 8px; padding: 14px; border-right: 1px solid var(--ft-line); background: var(--ft-surface); }
@media (min-width: 760px) { .ft-cal-side { display: flex; } }
.ft-cal-side label { font-size: 11px; font-weight: 600; color: var(--ft-ink-soft); margin-top: 6px; }
.ft-mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-family: var(--ft-mono); font-size: 9.5px; text-align: center; color: var(--ft-ink-soft); }
.ft-mini-cal span { font-weight: 600; padding: 2px 0; }
.ft-mini-cal i { font-style: normal; padding: 3px 0; border-radius: 4px; }
.ft-mini-cal i.is-today { background: var(--ft-ink); color: #fff; }
.ft-cal-main { padding: 12px 14px 14px; background: var(--ft-surface); }
.ft-cal-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 10px; }
.ft-cal-toolbar b { font-size: 13.5px; font-weight: 600; text-align: center; }
.ft-cal-toolbar .ft-select { justify-self: end; }
.ft-cal-cols-head { display: grid; grid-template-columns: 40px repeat(3, 1fr); gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--ft-ink-soft); padding-bottom: 6px; border-bottom: 1px solid var(--ft-line); margin-bottom: 4px; }
.ft-cal-cols-head span:not(:first-child) { text-align: center; }
.ft-cal { display: grid; grid-template-columns: 40px 1fr; gap: 0 6px; height: 260px; }
.ft-cal__hours { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--ft-mono); font-size: 9.5px; color: var(--ft-ink-mute); }
.ft-cal__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; position: relative; background: repeating-linear-gradient(to bottom, var(--ft-line) 0 1px, transparent 1px 25%); }
.ft-cal__col { position: relative; }
/* Evento real: fondo sólido del estado, radio 6px, barra de pago 3px, nombre + servicio en versalitas, iniciales */
.ft-ev { position: absolute; left: 0; right: 0; top: calc(var(--t) * 25%); height: calc(var(--h) * 25% - 4px); background: var(--bg, #8A94A6); color: var(--ink, #15171D); border-radius: 6px; padding: 4px 6px 4px 9px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); opacity: 0; transform: scale(0.96); }
.is-in .ft-ev { animation: ftPop 0.5s var(--ft-ease) forwards; }
.is-in .ft-cal__col:nth-child(2) .ft-ev { animation-delay: 0.15s; }
.is-in .ft-cal__col:nth-child(3) .ft-ev { animation-delay: 0.3s; }
@keyframes ftPop { to { opacity: 1; transform: none; } }
.ft-ev b { font-size: 11px; font-weight: 600; line-height: 1.2; }
.ft-ev span { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.ft-ev em { position: absolute; right: 5px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); color: var(--ft-ink); font-style: normal; font-size: 8px; font-weight: 700; display: grid; place-items: center; }
.ft-ev__pay { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ft-ok); }
.ft-ev__pay--partial { background: #F6C000; }
.ft-ev--block { background: repeating-linear-gradient(135deg, var(--ft-l2) 0 6px, var(--ft-surface) 6px 12px); border: 1px dashed var(--ft-ink-mute); color: var(--ft-ink-soft); box-shadow: none; }
.is-in .ft-ev--drag { animation: ftPop 0.5s var(--ft-ease) forwards, ftDrag 6s ease-in-out 1.6s infinite; }
@keyframes ftDrag { 0%, 15%, 100% { top: calc(var(--t) * 25%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } 35%, 75% { top: calc((var(--t) - 1.25) * 25%); box-shadow: 0 12px 24px -10px rgba(21, 23, 29, 0.45); } }
.ft-cal__now { position: absolute; left: -6px; right: 0; top: 43%; height: 2px; background: var(--ft-danger); }
.ft-cal__now::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ft-danger); }

/* ---------- 02 Perfil del paciente ---------- */
.ft-crumb { font-size: 12px; color: var(--ft-ink-soft); margin-bottom: 16px; }
.ft-crumb i { font-style: normal; margin: 0 6px; color: var(--ft-ink-mute); }
.ft-phero { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ft-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ft-l2); border: 1px solid var(--ft-line); display: grid; place-items: center; font-weight: 700; font-size: 16px; color: var(--ft-ink-soft); flex-shrink: 0; }
.ft-phero__main { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.ft-phero__main > b { font-family: var(--ft-head); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.ft-verify { width: 16px; height: 16px; border-radius: 50%; background: var(--ft-accent); color: #fff; font-size: 9px; font-style: normal; display: grid; place-items: center; }
.ft-badges { display: flex; gap: 6px; }
.ft-badges span { padding: 3px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 600; background: var(--ft-l2); color: var(--ft-ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.ft-badges span.is-ok { background: rgba(31, 138, 91, 0.12); color: var(--ft-ok); }
.ft-badges span.is-ok i { width: 6px; height: 6px; border-radius: 50%; background: var(--ft-ok); }
.ft-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--ft-ink); }
.ft-meta em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ft-ink-soft); }
.ft-meta code { font-size: 12px; }
.ft-phero__actions { display: flex; gap: 8px; }
.ft-psections { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .ft-psections { grid-template-columns: 180px 1fr; } }
.ft-psections__nav { display: flex; flex-direction: column; gap: 2px; }
.ft-psections__nav small { font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.125em; color: var(--ft-ink-soft); margin-bottom: 6px; }
.ft-psections__nav div { padding: 8px 10px; border-radius: 8px; }
.ft-psections__nav div.is-on { background: var(--ft-l2); }
.ft-psections__nav b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-psections__nav span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-psections__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.ft-field { display: flex; flex-direction: column; gap: 4px; }
.ft-field label { font-size: 11px; font-weight: 600; color: var(--ft-ink-soft); }
.ft-field > span { padding: 7px 10px; border-radius: 8px; background: var(--ft-input); border: 1px solid var(--ft-line); font-size: 12.5px; }

/* ---------- 03 Nota clínica (motor gcc) ---------- */
.ft-gcc { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; }
@media (min-width: 860px) { .ft-gcc { grid-template-columns: 3fr 2fr; } }
.ft-gcc__stage { padding: 14px 16px 16px; }
.ft-gcc__modes { display: inline-flex; gap: 16px; font-size: 12.5px; font-weight: 600; color: var(--ft-ink-soft); margin-bottom: 14px; border-bottom: 1px solid var(--ft-line); width: 100%; }
.ft-gcc__modes span { padding: 4px 0 8px; position: relative; }
.ft-gcc__modes span.is-on { color: var(--ft-ink); }
.ft-gcc__modes span.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ft-ink); }
/* Card de sección real: L1, borde Line, radio .85rem; head sangrado en L2, ordinal en chip caoba, título Inter 700 */
.ft-gcc-card { background: var(--ft-surface); border: 1px solid var(--ft-line); border-radius: 0.85rem; padding: 0 16px 14px; margin-bottom: 12px; overflow: hidden; }
.ft-gcc-card__head { display: flex; align-items: center; gap: 10px; margin: 0 -16px 12px; padding: 10px 16px; background: var(--ft-l2); border-bottom: 1px solid var(--ft-line); }
.ft-gcc-card__head i { font-style: normal; font-family: var(--ft-mono); font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: var(--ft-caoba); color: #FBF3F0; }
.ft-gcc-card__head b { font-size: 13.5px; font-weight: 700; }
.ft-gcc-card__head small { font-size: 12px; color: var(--ft-ink-soft); font-weight: 500; }
.ft-gcc-card__head--plain { background: transparent; border-bottom: 1px solid var(--ft-line); }
.ft-gcc-card__head--plain small { margin-left: auto; }
.ft-gcc-card--flat { box-shadow: none; }
.ft-gcc-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ft-ink); }
.ft-eyehead { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; font-size: 11px; font-weight: 600; color: var(--ft-ink-soft); padding-bottom: 6px; border-bottom: 1px solid var(--ft-line); margin-bottom: 6px; }
.ft-eyerow { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; align-items: center; padding: 4px 0; font-size: 12px; }
.ft-eyerow span { color: var(--ft-ink-soft); }
.ft-eyerow code { padding: 6px 10px; border-radius: 8px; background: var(--ft-input); border: 1px solid var(--ft-line); font-size: 13px; }
.ft-opts-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ft-opts-2 > div { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.ft-opt { display: inline-block; padding: 5px 10px; border-radius: 0.85rem; background: var(--ft-surface); border: 1px solid var(--ft-line); font-size: 11.5px; font-weight: 500; color: var(--ft-ink); }
.ft-opt.is-on { background: color-mix(in srgb, var(--ft-caoba) 16%, var(--ft-surface)); border-color: color-mix(in srgb, var(--ft-caoba) 55%, transparent); color: color-mix(in srgb, var(--ft-caoba) 85%, black); font-weight: 600; }
.ft-opt--own { border-style: dashed; }
.ft-opt--add { border-style: dashed; color: var(--ft-ink-mute); }
.ft-dx { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-gcc__note { background: var(--ft-l2); border-left: 1px solid var(--ft-line); padding: 14px 16px; font-size: 12.5px; line-height: 1.55; }
.ft-gcc__note small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ft-ink-soft); margin-bottom: 12px; }
.ft-gcc__note p { margin: 0 0 8px; }
.ft-prev { background: var(--ft-surface); border: 1px solid var(--ft-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-prev b { font-size: 11.5px; color: var(--ft-ink); margin-bottom: 4px; }

/* ---------- 04 Dictado ---------- */
.ft-rec { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 12px; }
.ft-rec > i { width: 10px; height: 10px; border-radius: 50%; background: var(--ft-danger); animation: ftPulse 1.2s infinite; }
.ft-rec b { font-weight: 600; }
.ft-rec code { font-size: 12px; color: var(--ft-ink-soft); }
.ft-wave { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 28px; }
.ft-wave i { width: 3px; height: 8px; border-radius: 2px; background: var(--ft-ink); animation: ftWave 1.1s ease-in-out infinite; }
.ft-wave i:nth-child(2n) { animation-delay: 0.15s; } .ft-wave i:nth-child(3n) { animation-delay: 0.3s; } .ft-wave i:nth-child(5n) { animation-delay: 0.45s; }
@keyframes ftWave { 0%, 100% { height: 6px; } 50% { height: 24px; } }
.ft-transcript { font-size: 13px; line-height: 1.55; color: var(--ft-ink-soft); padding: 12px 14px; border-radius: 10px; background: var(--ft-l2); margin: 0 0 14px; font-style: italic; }
.ft-prop { display: grid; grid-template-columns: 82px 1fr auto 22px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ft-line); font-size: 12.5px; opacity: 0; transform: translateX(10px); }
.is-in .ft-prop { animation: ftIn 0.5s var(--ft-ease) calc(0.5s + var(--d) * 0.25s) forwards; }
.ft-prop span { color: var(--ft-ink-soft); }
.ft-prop b { font-weight: 600; }
.ft-prop em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ft-l2); color: var(--ft-ink-soft); }
.ft-prop em.is-int { background: rgba(181, 115, 26, 0.14); color: var(--ft-warn); }
.ft-prop i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ft-line); display: grid; place-items: center; font-style: normal; font-size: 10px; color: var(--ft-ok); }
.ft-prop__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---------- 05 Calidad ---------- */
.ft-nom__head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.ft-nom__head i { font-style: normal; font-size: 20px; color: var(--ft-ink); }
.ft-nom__head b { display: block; font-size: 15px; font-weight: 600; }
.ft-nom__head span { font-size: 12px; color: var(--ft-ink-soft); }
.ft-nom .ft-eyebrow { margin: 8px 0; }
.ft-nom__item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ft-line); font-size: 13px; }
.ft-nom__item i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; }
.ft-nom__item.is-ok i { background: rgba(31, 138, 91, 0.12); color: var(--ft-ok); }
.ft-nom__item.is-miss i { background: rgba(181, 115, 26, 0.16); color: var(--ft-warn); }
.ft-nom__item.is-miss span { font-weight: 600; }
.ft-nom__item a { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ft-ink); text-decoration: underline; text-underline-offset: 3px; }
.ft-score { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--ft-l2); }
.ft-score__num { display: flex; align-items: baseline; gap: 2px; }
.ft-score__num b { font-family: var(--ft-head); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.ft-score__num span { font-family: var(--ft-mono); font-size: 13px; color: var(--ft-ink-soft); }
.ft-score > div:last-child b { display: block; font-size: 13px; font-weight: 600; }
.ft-score > div:last-child span { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-nom__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 11.5px; color: var(--ft-ink-soft); }

/* ---------- 06 Receta (papel) ---------- */
.ft-paper { background: #fff; border: 1px solid var(--ft-line); border-radius: 4px; padding: 22px 24px; position: relative; box-shadow: 0 30px 60px -50px rgba(1, 3, 38, 0.4); font-size: 12.5px; text-align: left; }
.ft-paper__letterhead { padding-bottom: 10px; border-bottom: 2px solid var(--ft-ink); margin-bottom: 14px; display: flex; flex-direction: column; opacity: 0.55; }
.ft-paper__letterhead b { font-family: var(--ft-head); font-size: 16px; }
.ft-paper__letterhead span { font-size: 10.5px; }
.ft-paper__safe { border: 1px dashed rgba(6, 109, 240, 0.5); border-radius: 4px; padding: 12px; }
.ft-paper__pt { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 11.5px; color: var(--ft-ink-soft); margin-bottom: 10px; }
.ft-paper__pt b { color: var(--ft-ink); font-weight: 600; }
.ft-paper__pt code { margin-left: auto; font-size: 11px; }
.ft-paper__med { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--ft-line); }
.ft-paper__med b { font-weight: 600; }
.ft-paper__med span { font-size: 11.5px; color: var(--ft-ink-soft); line-height: 1.45; }
.ft-paper__ind { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ft-line); font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-paper__foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; }
.ft-qr { display: inline-block; width: 40px; height: 40px; background: repeating-conic-gradient(var(--ft-ink) 0 25%, transparent 0 50%) 0 0 / 8px 8px; outline: 1px solid var(--ft-line); outline-offset: 3px; }
.ft-paper__sign { width: 120px; height: 30px; border-bottom: 1px solid var(--ft-ink); position: relative; }
.ft-paper__sign::before { content: ''; position: absolute; left: 10px; bottom: 4px; width: 90px; height: 22px; border-radius: 50% 40% 60% 30%; border-top: 2px solid var(--ft-ink); transform: rotate(-6deg); }
.ft-paper__label { position: absolute; right: 30px; top: 96px; font-family: var(--ft-mono); font-size: 9.5px; color: var(--ft-accent); background: #fff; padding: 0 4px; }

/* ---------- 07 Sala de lectura ---------- */
.ft-rr { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 14px; }
@media (min-width: 820px) { .ft-rr { grid-template-columns: 2fr 1fr; } }
.ft-rr__viewer { position: relative; border-radius: 10px; overflow: hidden; min-height: 240px; background: #0B0F1A; }
.ft-rr__viewer svg { width: 100%; height: 100%; min-height: 240px; display: block; }
.ft-oct { fill: none; stroke-width: 2; stroke-dasharray: 800; stroke-dashoffset: 800; }
.ft-oct--a { stroke: #E8B04A; } .ft-oct--b { stroke: #D9633A; } .ft-oct--c { stroke: #7FA7D9; }
.is-in .ft-oct { animation: ftDraw 2s var(--ft-ease) 0.3s forwards; }
.is-in .ft-oct--b { animation-delay: 0.6s; } .is-in .ft-oct--c { animation-delay: 0.9s; }
@keyframes ftDraw { to { stroke-dashoffset: 0; } }
.ft-rr__tag { position: absolute; left: 12px; top: 12px; font-family: var(--ft-mono); font-size: 10.5px; color: #fff; background: rgba(255, 255, 255, 0.14); padding: 3px 8px; border-radius: 999px; }
.ft-rr__scan { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.6); animation: ftScanX 4s ease-in-out infinite; }
@keyframes ftScanX { 0%, 100% { left: 3%; } 50% { left: 97%; } }
.ft-rr__note { display: flex; flex-direction: column; gap: 10px; }
.ft-rr__note .ft-btn { align-self: flex-start; }
.ft-ai-note { font-size: 11px; font-weight: 600; color: var(--ft-warn); background: rgba(181, 115, 26, 0.12); padding: 4px 10px; border-radius: 6px; align-self: flex-start; }
.ft-rr__save { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ft-line); }

/* ---------- 08 Documento firmado ---------- */
.ft-paper--doc { padding: 26px 28px; }
.ft-doc__title { display: block; font-size: 13px; font-weight: 700; margin-bottom: 12px; line-height: 1.4; }
.ft-doc__p { font-size: 12px; line-height: 1.6; color: var(--ft-ink); margin: 0 0 10px; }
.ft-doc__p mark { background: var(--ft-l2); border-bottom: 1px dashed var(--ft-ink-mute); padding: 0 3px; color: var(--ft-ink); font-weight: 600; }
.ft-doc__line { display: block; height: 7px; border-radius: 4px; background: var(--ft-l2); margin-bottom: 8px; }
.ft-doc__line.short { width: 55%; }
.ft-doc__pad { margin-top: 14px; border: 1px solid var(--ft-line); border-radius: 8px; background: var(--ft-surface); padding: 6px 10px; }
.ft-doc__pad svg { width: 100%; height: 70px; display: block; }
.ft-sig { fill: none; stroke: var(--ft-ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 500; stroke-dashoffset: 500; }
.is-in .ft-sig { animation: ftDraw 1.8s ease-out 0.5s forwards; }
.ft-doc__pad small { display: block; text-align: right; font-size: 10px; color: var(--ft-ink-soft); }
.ft-doc__check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.ft-doc__check i { width: 16px; height: 16px; border-radius: 4px; background: var(--ft-ink); color: #fff; font-style: normal; font-size: 10px; display: grid; place-items: center; }

/* ---------- 09 POS ---------- */
.ft-pos { background: var(--ft-surface); }
.ft-pos__head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ft-line); }
.ft-pos__head b { font-family: var(--ft-head); font-size: 16px; font-weight: 600; }
.ft-pos__head em { margin-left: auto; font-style: normal; color: var(--ft-ink-soft); }
.ft-pchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--ft-l2); font-size: 12px; font-weight: 600; }
.ft-pchip i { width: 22px; height: 22px; border-radius: 50%; background: var(--ft-recess); font-style: normal; font-size: 9px; font-weight: 700; display: grid; place-items: center; color: var(--ft-ink-soft); }
.ft-pos__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ft-pos__body { grid-template-columns: minmax(200px, 1fr) minmax(0, 2.2fr); } }
.ft-pos__left { background: var(--ft-l2); padding: 14px; border-right: 1px solid var(--ft-line); display: flex; flex-direction: column; gap: 8px; }
.ft-pos__eyebrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.ft-pos__eyebrow code { font-size: 13px; }
.ft-debt { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 9px 10px; border-radius: 8px; background: var(--ft-surface); border: 1px solid var(--ft-line); font-size: 12px; align-items: center; }
.ft-debt > div { grid-column: 1; }
.ft-debt b { display: block; font-weight: 600; } .ft-debt span:not(.ft-tag) { font-size: 11px; color: var(--ft-ink-soft); }
.ft-debt .ft-tag { grid-column: 1; justify-self: start; font-size: 10px; }
.ft-debt code { grid-column: 2; grid-row: 1 / span 2; font-size: 13px; }
.ft-pos__right { padding: 14px 16px; }
.ft-cart__head, .ft-cart__row { display: grid; grid-template-columns: 1fr 70px 80px 80px; gap: 8px; align-items: center; }
.ft-cart__head { padding-bottom: 6px; border-bottom: 1px solid var(--ft-line); }
.ft-cart__row { padding: 9px 0; border-bottom: 1px solid var(--ft-line); font-size: 12.5px; }
.ft-cart__row i { font-style: normal; font-family: var(--ft-mono); font-size: 10.5px; text-align: center; padding: 3px 0; border: 1px solid var(--ft-line); border-radius: 6px; }
.ft-cart__row code { text-align: right; font-size: 12px; }
.ft-cart__row.is-disc { color: var(--ft-ok); }
.ft-cart__row .ft-tag { font-size: 9.5px; margin-left: 6px; vertical-align: middle; }
.ft-totals { margin: 12px 0 0 auto; max-width: 280px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.ft-totals > div { display: flex; justify-content: space-between; }
.ft-totals > div span { color: var(--ft-ink-soft); }
.ft-totals .is-total { border-top: 1px solid var(--ft-line); padding-top: 8px; margin-top: 4px; font-size: 14px; }
.ft-totals .is-total code { font-size: 22px; font-weight: 600; }
.ft-totals small { font-size: 10.5px; color: var(--ft-ink-soft); text-align: right; }
.ft-pos__foot { display: flex; align-items: flex-end; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--ft-line); background: var(--ft-bg); flex-wrap: wrap; }
.ft-payf { display: flex; flex-direction: column; gap: 4px; }
.ft-payf code { padding: 6px 10px; border-radius: 8px; background: var(--ft-input); border: 1px solid var(--ft-line); font-size: 12.5px; min-width: 96px; text-align: right; }
.ft-payf__hint { font-size: 12px; font-weight: 600; color: var(--ft-ok); margin: 0 auto 8px 0; }

/* ---------- 10 Óptica ---------- */
.ft-order { border: 1px solid var(--ft-line); border-radius: 10px; padding: 14px; background: var(--ft-surface); }
.ft-order__head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 14px; }
.ft-steps { display: flex; justify-content: space-between; margin-bottom: 14px; position: relative; }
.ft-steps::before { content: ''; position: absolute; left: 8%; right: 8%; top: 8px; height: 1px; background: var(--ft-line); }
.ft-steps div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; color: var(--ft-ink-soft); width: 20%; text-align: center; }
.ft-steps i { width: 16px; height: 16px; border-radius: 50%; background: var(--ft-surface); border: 2px solid var(--ft-line); }
.ft-steps .is-done i { background: var(--ft-ink); border-color: var(--ft-ink); }
.ft-steps .is-now i { border-color: var(--ft-ink); box-shadow: 0 0 0 4px var(--ft-l2); }
.ft-steps .is-now { color: var(--ft-ink); font-weight: 600; }
.ft-order__lines { margin-top: 10px; display: flex; flex-direction: column; }
.ft-order__lines > div { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ft-line); font-size: 12px; align-items: center; }
.ft-order__lines span { color: var(--ft-ink-soft); } .ft-order__lines b { font-weight: 600; }
.ft-order__lines code.is-warn { color: var(--ft-warn); }

/* ---------- 13 Estadísticas ---------- */
.ft-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 640px) { .ft-kpis { grid-template-columns: repeat(4, 1fr); } }
.ft-kpis div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 10px; background: var(--ft-surface); border: 1px solid var(--ft-line); }
.ft-kpis small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); }
.ft-kpis b { font-family: var(--ft-head); font-size: 26px; font-weight: 600; line-height: 1.1; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.ft-kpis em { font-style: normal; font-size: 11px; font-weight: 600; }
.ft-kpis em.is-up { color: var(--ft-ok); } .ft-kpis em.is-down { color: var(--ft-danger); }
.ft-charts { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .ft-charts { grid-template-columns: 2fr 1fr; } }
.ft-chart { padding: 12px 14px; border-radius: 10px; background: var(--ft-surface); border: 1px solid var(--ft-line); }
.ft-chart .ft-eyebrow { margin-bottom: 12px; }
.ft-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; border-bottom: 1px solid var(--ft-line); }
.ft-bars i { flex: 1; height: 0; border-radius: 3px 3px 0 0; background: var(--ft-ink); opacity: 0.85; }
.is-in .ft-bars i { animation: ftGrow 0.9s var(--ft-ease) calc(0.05s * var(--i, 1)) forwards; }
@keyframes ftGrow { to { height: var(--v); } }
.ft-heat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 110px; }
.ft-heat i { border-radius: 4px; background: var(--ft-ink); opacity: 0; }
.is-in .ft-heat i { animation: ftHeat 0.8s var(--ft-ease) 0.4s forwards; }
@keyframes ftHeat { to { opacity: calc(var(--a) * 0.9 + 0.05); } }

/* ---------- 14 + 15 ---------- */
.ft-pair { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 800px) { .ft-pair { grid-template-columns: 1fr 1fr; } }
.ft-pair__card { padding: 8px 0; scroll-margin-top: 90px; }
.ft-pair__card h2 { font-size: clamp(26px, 3vw, 34px); }
.ft-survey { margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: var(--ft-l2); font-size: 13px; display: flex; flex-direction: column; gap: 10px; }
.ft-stars { display: flex; gap: 6px; }
.ft-stars i { width: 22px; height: 22px; background: var(--ft-ink); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0; transform: scale(0.6); }
.is-in .ft-stars i { animation: ftPop 0.4s var(--ft-ease) forwards; }
.is-in .ft-stars i:nth-child(2) { animation-delay: 0.1s; } .is-in .ft-stars i:nth-child(3) { animation-delay: 0.2s; } .is-in .ft-stars i:nth-child(4) { animation-delay: 0.3s; } .is-in .ft-stars i:nth-child(5) { animation-delay: 0.4s; opacity: 0.25 !important; }
.ft-slots { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.ft-slots span { font-family: var(--ft-mono); font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--ft-l2); color: var(--ft-ink); }
.ft-slots span.is-on { background: var(--ft-ink); color: #fff; font-weight: 600; }

/* ---------- Cierre ---------- */
.ft-close { padding: 120px 0; text-align: center; border-top: 1px solid var(--ft-line); }
.ft-close__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ft-close .ft-num { margin: 0; }
.ft-close h2 { font-size: clamp(36px, 6.5vw, 72px); letter-spacing: -0.03em; line-height: 1; margin: 0; font-weight: 600; }
.ft-close p { font-size: 17px; color: var(--ft-ink-soft); max-width: 56ch; margin: 0; line-height: 1.55; }
.ft-close small { font-size: 12.5px; color: var(--ft-ink-mute); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ft-word, .ft-toast, .ft-ev, .ft-prop, .ft-stars i, .ft-heat i { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ft-oct, .ft-sig { stroke-dashoffset: 0 !important; }
  .ft-bar i { width: var(--p) !important; } .ft-bars i { height: var(--v) !important; }
  .ft-wave i, .ft-rec > i, .ft-rr__scan, .ft-dilat i { animation: none !important; }
}

/* ============================================================
   SUBMENÚ DE SECCIÓN (.ft-sub) — pestañas con indicador que se
   desliza y paneles que entran con fundido + 6px de subida.
   ============================================================ */
.ft-sub { margin-top: 8px; }
.ft-sub__nav { position: relative; display: flex; gap: 28px; border-bottom: 1px solid var(--ft-line); margin-bottom: 44px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.ft-sub__nav::-webkit-scrollbar { display: none; }
.ft-sub__tab { appearance: none; background: none; border: 0; padding: 0 0 16px; margin: 0; cursor: pointer; font-family: var(--ft-body); font-size: clamp(15px, 1.4vw, 17px); font-weight: 500; color: var(--ft-ink-mute); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; transition: color 0.25s var(--ft-ease); }
.ft-sub__tab i { font-style: normal; font-family: var(--ft-mono); font-size: 11px; color: var(--ft-ink-mute); transition: color 0.25s; }
.ft-sub__tab:hover { color: var(--ft-ink-soft); }
.ft-sub__tab.is-on { color: var(--ft-ink); font-weight: 600; }
.ft-sub__tab.is-on i { color: var(--ft-ink); }
.ft-sub__tab:focus-visible { outline: 2px solid var(--ft-ink); outline-offset: 4px; border-radius: 4px; }
.ft-sub__ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ft-ink); transition: transform 0.45s var(--ft-ease), width 0.45s var(--ft-ease); }
.ft-sub__panel { display: none; }
.ft-sub__panel.is-on { display: block; animation: ftPanel 0.5s var(--ft-ease); }
@keyframes ftPanel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ft-h3 { font-family: var(--ft-head); font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 16px; color: var(--ft-ink); }

/* ---------- Ficha de la cita (popover real: carril + tarjeta) ---------- */
.ft-pop { position: relative; display: flex; background: var(--ft-surface); border: 1px solid var(--ft-line); border-radius: 1.1rem; overflow: visible; box-shadow: 0 30px 60px -45px rgba(1, 3, 38, 0.4); max-width: 460px; margin: 0 auto; font-size: 13px; text-align: left; }
.ft-pop__rail { width: 3.75rem; flex-shrink: 0; background: var(--ft-l2); border-right: 1px solid var(--ft-line); border-radius: 1.1rem 0 0 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0; }
.ft-pop__rail span { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--c); opacity: 0.55; transition: 0.3s var(--ft-ease); }
.ft-pop__rail span.is-active { opacity: 1; transform: scale(1.25); box-shadow: 0 0 0 4px var(--ft-surface), 0 0 0 5px var(--c); }
.ft-pop__rail span::after { content: attr(data-st); position: absolute; left: 24px; top: 50%; transform: translateY(-50%); background: var(--ft-ink); color: #fff; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 2; }
.ft-pop__rail span.is-active::after { opacity: 1; }
.ft-pop__card { flex: 1; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ft-pop__status { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--ft-l2); font-size: 11.5px; font-weight: 600; margin-bottom: 4px; }
.ft-pop__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); transition: background 0.3s; }
.ft-pop__service { font-size: 15px; font-weight: 700; }
.ft-pop__time { font-size: 12px; color: var(--ft-ink-soft); font-weight: 500; }
.ft-pop__time code { font-size: 12px; }
.ft-pop__space { font-size: 12px; font-weight: 500; color: var(--ft-ink-soft); }
.ft-pop__row { display: flex; gap: 6px; font-size: 12px; margin-top: 4px; }
.ft-pop__row small { color: var(--ft-ink-soft); font-weight: 600; font-size: 12px; }
.ft-pop__row b { font-weight: 600; }
.ft-pop__assign { position: relative; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ft-line); display: flex; flex-direction: column; gap: 8px; }
.ft-pop__who { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ft-line); background: var(--ft-surface); transition: border-color 0.3s; }
.ft-pop__who.is-open { border-color: var(--ft-ink); }
.ft-pop__who > div { display: flex; flex-direction: column; min-width: 0; }
.ft-pop__who b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-pop__who span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-pop__who em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ft-pop__av { width: 30px; height: 30px; border-radius: 50%; background: var(--c, var(--ft-l2)); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 700; flex-shrink: 0; transition: background 0.3s; }
.ft-pop__av.is-none, .ft-pop__av:not([style]) { background: var(--ft-l2); color: var(--ft-ink-soft); }
.ft-pop__menu { position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 3; background: #fff; border: 1px solid var(--ft-line); border-radius: 10px; padding: 6px; box-shadow: 0 18px 40px -20px rgba(1, 3, 38, 0.45); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: 0.25s var(--ft-ease); }
.ft-pop__menu.is-open { opacity: 1; transform: none; }
.ft-pop__menu div { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 12px; font-weight: 500; transition: background 0.2s; }
.ft-pop__menu div.is-hover { background: var(--ft-l2); }
.ft-pop__menu i { width: 24px; height: 24px; border-radius: 50%; background: var(--c, var(--ft-l2)); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; }
.ft-pop__menu div[data-pick="none"] i { color: var(--ft-ink-soft); }
.ft-pop__menu small { margin-left: auto; color: var(--ft-ink-soft); }
.ft-pop__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.ft-pop__tiles span { padding: 9px 0; text-align: center; border-radius: 9px; border: 1px solid var(--ft-line); background: var(--ft-surface); font-size: 11.5px; font-weight: 600; }
.ft-pop__patient { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ft-line); font-size: 12.5px; }
.ft-pop__patient b { font-weight: 600; }
.ft-pop__first { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 0.35rem; color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; }
.ft-pop__patient code { width: 100%; font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-pop__open { justify-content: center; margin-top: 8px; }
/* Cursor de la demo */
.ft-cursor { position: absolute; z-index: 6; width: 14px; height: 14px; left: 0; top: 0; pointer-events: none; opacity: 0; transition: left 0.7s var(--ft-ease), top 0.7s var(--ft-ease), opacity 0.3s; }
.ft-cursor::before { content: ""; position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 14px solid var(--ft-ink); transform: rotate(-30deg); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.ft-cursor.is-click::after { content: ""; position: absolute; left: -8px; top: -8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ft-ink); animation: ftClick 0.5s ease-out forwards; }
@keyframes ftClick { from { transform: scale(0.4); opacity: 0.8; } to { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ft-cursor { display: none; } .ft-sub__panel.is-on { animation: none; } }

/* ---------- 02 Pacientes · subsecciones ---------- */
.ft-psec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ft-psec-head b { display: block; font-size: 14px; font-weight: 600; }
.ft-psec-head span:not(.ft-btn) { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-phero--compact { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ft-line); }
.ft-badges span.is-minor { background: rgba(181, 115, 26, 0.14); color: var(--ft-warn); }
.ft-badges span.is-minor i { font-style: normal; font-size: 11px; }

/* Captura INE */
.ft-inecap { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .ft-inecap { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.ft-ine-card { position: relative; aspect-ratio: 1.586; border-radius: 10px; background: linear-gradient(135deg, #E8EBF1, #F5F6F9 55%, #E3E6ED); border: 1px solid var(--ft-line); padding: 10px 12px; display: grid; grid-template-columns: 34% 1fr; gap: 10px; overflow: hidden; }
.ft-ine-card__photo { border-radius: 6px; background: var(--ft-recess); position: relative; margin-top: 18px; }
.ft-ine-card__photo::before { content: ''; position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--ft-ink-mute); transform: translateX(-50%); opacity: 0.5; }
.ft-ine-card__photo::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 70%; height: 38%; border-radius: 40% 40% 0 0; background: var(--ft-ink-mute); transform: translateX(-50%); opacity: 0.5; }
.ft-ine-card__lines { display: flex; flex-direction: column; gap: 1px; font-size: 8.5px; line-height: 1.25; color: var(--ft-ink); letter-spacing: 0.02em; }
.ft-ine-card__lines b { font-size: 7.5px; letter-spacing: 0.08em; color: var(--ft-ink-soft); margin-bottom: 6px; }
.ft-ine-card__lines small { font-size: 6.5px; color: var(--ft-ink-soft); margin-top: 5px; letter-spacing: 0.08em; }
.ft-ine-card__lines code { font-size: 8.5px; }
.ft-ine-card__scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--ft-ink); box-shadow: 0 0 12px rgba(21, 23, 29, 0.6); animation: ftScanY 2.6s ease-in-out infinite; }
@keyframes ftScanY { 0%, 100% { top: 4%; } 50% { top: 94%; } }
.ft-ine-out__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ft-ine-out__head b { font-size: 13px; font-weight: 600; }
.ft-ine-row { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ft-line); font-size: 12.5px; opacity: 0; transform: translateX(8px); }
.is-in .ft-ine-row, .ft-sub__panel.is-on .ft-ine-row { animation: ftIn 0.45s var(--ft-ease) calc(0.6s + var(--d) * 0.18s) forwards; }
.ft-ine-row span { color: var(--ft-ink-soft); }
.ft-ine-row b { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ft-ine-row b small { font-weight: 500; font-size: 10.5px; color: var(--ft-ink-mute); }
.ft-ine-row .ft-tag { font-size: 10px; }
.ft-ine-out__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ft-line); }

/* Coberturas */
.ft-cov { border: 1px solid var(--ft-line); border-radius: 10px; padding: 12px 14px; background: var(--ft-surface); margin-bottom: 10px; }
.ft-cov.is-primary { border-color: var(--ft-ink); }
.ft-cov__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ft-cov__top b { font-size: 13.5px; font-weight: 600; margin-right: auto; }
.ft-cov__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 12px; }
.ft-cov__grid div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ft-cov__grid small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); }
.ft-cov__grid code { font-size: 11.5px; }

/* Tutores */
.ft-guardian { display: flex; gap: 12px; border: 1px solid var(--ft-line); border-radius: 10px; padding: 12px 14px; background: var(--ft-surface); margin-bottom: 10px; }
.ft-guardian.is-primary { border-color: var(--ft-ink); }
.ft-guardian__body { flex: 1; min-width: 0; }
.ft-guardian__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ft-guardian__top b { font-size: 13.5px; font-weight: 600; }
.ft-check { color: var(--ft-ok); font-weight: 600; }
.ft-guardian__warn { border-top: 0; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(181, 115, 26, 0.1); font-size: 12px; }


/* ============================================================
   SCROLL POR SECCIONES — cada sección ocupa el viewport y el
   scroll se detiene en ella. Las alturas mayores al viewport
   siguen siendo scrolleables dentro de la misma sección.
   ============================================================ */
html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
.ft-hero, .ft-feature, .ft-close { scroll-snap-align: start; scroll-snap-stop: normal; }
.ft-hero { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 48px 0 40px; box-sizing: border-box; }
.ft-index { scroll-snap-align: none; }
.ft-feature { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 72px; box-sizing: border-box; }
.ft-close { min-height: 100svh; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
@media (max-width: 767px) { html { scroll-snap-type: none; } .ft-feature, .ft-hero, .ft-close { min-height: 0; } }
/* Scrub ligado al scroll: JS escribe transform/opacity; will-change para que vaya por GPU */
.ft-head, .ft-close__inner, .ft-pair__card, .ft-feature__text, .ft-facts, .ft-sub__nav, .ft-feature__visual, .ft-shot { will-change: transform, opacity; }
.ft-feature__visual, .ft-shot { transform-origin: 50% 60%; }

/* ---------- Captura por INE: escenario animado ---------- */
.ft-inestage { position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }
@media (min-width: 640px) { .ft-inestage { grid-template-columns: 210px 1fr; gap: 30px; } }
.ft-phone { position: relative; width: 210px; max-width: 100%; margin: 0 auto; background: var(--ft-ink); border-radius: 28px; padding: 12px 10px 10px; box-shadow: 0 30px 60px -40px rgba(1, 3, 38, 0.6), inset 0 0 0 2px #2A2D36; }
.ft-phone__top { display: flex; flex-direction: column; align-items: center; color: #fff; padding: 8px 0 10px; line-height: 1.2; }
.ft-phone__top span { font-size: 10px; opacity: 0.6; }
.ft-phone__top b { font-size: 13px; font-weight: 600; }
.ft-phone__view { position: relative; height: 250px; border-radius: 16px; background: radial-gradient(120% 90% at 50% 30%, #3A3F4D, #1B1E27 70%); overflow: hidden; display: grid; place-items: center; }
.ft-phone__view .ft-ine-card { width: 82%; transform: rotate(-4deg) translateY(6px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7); }
.ft-phone__corner { position: absolute; width: 22px; height: 22px; border: 2.5px solid rgba(255, 255, 255, 0.85); opacity: 0.55; transition: opacity 0.3s, border-color 0.3s; }
.ft-phone__corner.tl { left: 14px; top: 44px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.ft-phone__corner.tr { right: 14px; top: 44px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.ft-phone__corner.bl { left: 14px; bottom: 44px; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.ft-phone__corner.br { right: 14px; bottom: 44px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.ft-phone.is-locked .ft-phone__corner { opacity: 1; border-color: #7CE0A8; }
.ft-phone__hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 10.5px; color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.ft-phone__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ft-phone__bar { display: flex; justify-content: center; padding: 12px 0 6px; }
.ft-phone__shutter { width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--ft-ink), 0 0 0 5px rgba(255, 255, 255, 0.7); transition: transform 0.15s; }
.ft-phone__shutter.is-press { transform: scale(0.86); }
.ft-ine-card { position: relative; aspect-ratio: 1.586; border-radius: 10px; background: linear-gradient(135deg, #E8EBF1, #F5F6F9 55%, #E3E6ED); border: 1px solid var(--ft-line); padding: 10px 12px; display: grid; grid-template-columns: 34% 1fr; gap: 10px; overflow: hidden; }
.ft-ine-card__photo { border-radius: 6px; background: var(--ft-recess); position: relative; margin-top: 18px; }
.ft-ine-card__photo::before { content: ""; position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--ft-ink-mute); transform: translateX(-50%); opacity: 0.5; }
.ft-ine-card__photo::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 38%; border-radius: 40% 40% 0 0; background: var(--ft-ink-mute); transform: translateX(-50%); opacity: 0.5; }
.ft-ine-card__lines { display: flex; flex-direction: column; gap: 1px; font-size: 7.5px; line-height: 1.25; color: var(--ft-ink); letter-spacing: 0.02em; }
.ft-ine-card__lines b { font-size: 6.5px; letter-spacing: 0.08em; color: var(--ft-ink-soft); margin-bottom: 5px; }
.ft-ine-card__lines small { font-size: 5.5px; color: var(--ft-ink-soft); margin-top: 4px; letter-spacing: 0.08em; }
.ft-ine-card__lines code { font-size: 7.5px; }
.ft-ine-card__scan { position: absolute; left: 0; right: 0; top: 4%; height: 2px; background: #7CE0A8; box-shadow: 0 0 12px rgba(124, 224, 168, 0.9); opacity: 0; }
.ft-ine-form { background: var(--ft-surface); border: 1px solid var(--ft-line); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; min-width: 0; }
.ft-ine-form__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--ft-line); }
.ft-ine-form__head b { font-size: 13.5px; font-weight: 600; }
.ft-ine-form .ft-field { grid-column: 1 / -1; }
.ft-ine-form .ft-field--half { grid-column: auto; }
.ft-ine-form .ft-field > span { min-height: 30px; font-size: 12px; overflow: hidden; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; transition: border-color 0.25s, background 0.25s; }
.ft-ine-form .ft-field > span.is-typing { border-color: var(--ft-ink); background: #fff; }
.ft-ine-form .ft-field > span i { font-style: normal; font-size: 10px; color: var(--ft-ink-mute); opacity: 0; }
.ft-ine-form .ft-field > span i.ft-tag { font-size: 10px; }
.ft-ine-form__foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; opacity: 0; }
.ft-ine-link { display: none; }
@media (min-width: 640px) { .ft-ine-link { display: block; position: absolute; left: 200px; top: 0; height: 100%; width: 40px; pointer-events: none; } }
.ft-ine-link path { fill: none; stroke: var(--ft-ink-mute); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0; }

.ft-sub__panel[data-sub-panel="pac-ine"] .ft-feature__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
@media (max-width: 959px) { .ft-sub__panel[data-sub-panel="pac-ine"] .ft-feature__grid { grid-template-columns: 1fr; } }

.ft-ine-form .ft-field label i { font-style: normal; font-weight: 500; color: var(--ft-ink-mute); opacity: 0; }


/* ============================================================
   RIEL + ESCENARIO (.ft-rs) — para secciones con muchos ítems.
   Izquierda: lista fija con marcador que se desliza. Derecha: un
   solo escenario con el mock del ítem activo y su texto.
   ============================================================ */
.ft-rs { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 960px) { .ft-rs { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; } }
.ft-rail { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 18px; }
@media (min-width: 960px) { .ft-rail { position: sticky; top: 32px; } }
.ft-rail::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--ft-line); }
.ft-rail__ink { position: absolute; left: -1px; top: 0; width: 3px; height: 0; border-radius: 2px; background: var(--ft-ink); transition: transform 0.5s var(--ft-ease), height 0.5s var(--ft-ease); }
.ft-rail__item { appearance: none; background: none; border: 0; text-align: left; cursor: pointer; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 11px 12px 11px 6px; border-radius: 10px; font-family: var(--ft-body); color: var(--ft-ink-mute); transition: background 0.25s, color 0.25s; }
.ft-rail__item i { grid-row: 1 / span 2; font-style: normal; font-family: var(--ft-mono); font-size: 11px; padding-top: 3px; color: var(--ft-ink-mute); transition: color 0.25s; }
.ft-rail__item b { font-size: 15px; font-weight: 500; line-height: 1.25; color: inherit; transition: color 0.25s; }
.ft-rail__item span { font-size: 12px; line-height: 1.3; color: var(--ft-ink-mute); margin-top: 2px; }
.ft-rail__item:hover { color: var(--ft-ink-soft); background: rgba(21, 23, 29, 0.03); }
.ft-rail__item.is-on { color: var(--ft-ink); }
.ft-rail__item.is-on b { font-weight: 600; }
.ft-rail__item.is-on i { color: var(--ft-ink); }
.ft-rail__item:focus-visible { outline: 2px solid var(--ft-ink); outline-offset: 2px; }
/* Móvil: el riel se vuelve una fila de chips desplazable */
@media (max-width: 959px) {
  .ft-rail { flex-direction: row; gap: 8px; padding-left: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .ft-rail::-webkit-scrollbar { display: none; }
  .ft-rail::before, .ft-rail__ink { display: none; }
  .ft-rail__item { grid-template-columns: auto; grid-template-rows: auto; padding: 8px 14px; border: 1px solid var(--ft-line); border-radius: 999px; background: var(--ft-surface); white-space: nowrap; }
  .ft-rail__item i, .ft-rail__item span { display: none; }
  .ft-rail__item b { font-size: 13px; }
  .ft-rail__item.is-on { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); }
  /* La fila de pastillas no cabe en un teléfono y su barra de scroll está
     oculta: se difumina el borde por el que queda más. Lo marca el JS. */
  .ft-rail.has-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
  .ft-rail.has-more-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); }
  .ft-rail.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
}
.ft-stage { position: relative; min-width: 0; }
.ft-stage__panel { display: none; }
.ft-stage__panel.is-on { display: block; }
.ft-stage__mock { position: relative; }
.ft-stage__text { max-width: 720px; margin-top: 30px; }
.ft-stage__text .ft-h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 12px; }
.ft-stage__text p { font-size: 15.5px; line-height: 1.6; color: var(--ft-ink-soft); margin: 0 0 12px; }
.ft-stage__text p b { color: var(--ft-ink); font-weight: 600; }
.ft-stage__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--ft-l2); font-size: 12.5px; color: var(--ft-ink); }
.ft-stage__note i { font-style: normal; color: var(--ft-ink-mute); }
.ft-gcc-card--stage { box-shadow: 0 30px 60px -48px rgba(1, 3, 38, 0.4); margin-bottom: 0; }
.ft-ml { margin-left: auto; }
.ft-mt { margin-top: 12px; }

/* 01 Diagnóstico */
.ft-dxb { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .ft-dxb { grid-template-columns: 1fr 1fr; } }
.ft-dxb__eye { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ft-line); margin-bottom: 8px; }
.ft-dxb__eye em { font-style: normal; font-family: var(--ft-mono); font-size: 11px; color: var(--ft-ink); font-weight: 600; }
.ft-dxb__eye span { font-size: 12px; color: var(--ft-ink-soft); }
.ft-dxblock { border: 1px solid var(--ft-line); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; background: #fff; }
.ft-dxblock__top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ft-dxblock__top b { font-weight: 600; flex: 1; }
.ft-dxblock__top code { font-size: 11px; color: var(--ft-ink-soft); }
.ft-dxblock__top i { font-style: normal; color: var(--ft-ink-mute); font-size: 12px; }
.ft-dxblock__scale { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ft-dxblock__scale small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); margin-right: 4px; }
.ft-dxblock__scale label { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--ft-ink-soft); }
.ft-dxblock__scale label span { min-width: 26px; text-align: center; padding: 3px 6px; border-radius: 6px; background: var(--ft-input); border: 1px solid var(--ft-line); font-family: var(--ft-mono); font-size: 11.5px; color: var(--ft-ink); }
.ft-dxblock__scale label.wide { padding: 3px 9px; border-radius: 6px; background: var(--ft-input); border: 1px solid var(--ft-line); color: var(--ft-ink); font-family: var(--ft-body); font-size: 11.5px; }
.ft-dxsearch { padding: 7px 10px; border-radius: 8px; background: var(--ft-input); border: 1px solid var(--ft-line); font-size: 12px; color: var(--ft-ink-mute); }
.ft-dxsearch--open { color: var(--ft-ink); border-color: var(--ft-ink); background: #fff; display: flex; align-items: center; }
.ft-caret { display: inline-block; width: 1px; height: 14px; background: var(--ft-ink); margin-left: 1px; animation: ftCaret 1s steps(1) infinite; }
@keyframes ftCaret { 50% { opacity: 0; } }
.ft-dxfreq { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ft-dxfreq small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); font-weight: 600; }
.ft-dxfreq span { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 6px; background: var(--ft-l2); }
.ft-dxfreq code { font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-dxb__band { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ft-line); font-size: 12px; }
.ft-dxb__band em { font-style: normal; font-weight: 600; color: var(--ft-ink); }
.ft-dxb__band span { color: var(--ft-ink-mute); }

/* 02 Medicamentos */
.ft-medchips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ft-medchips small { font-size: 10.5px; font-weight: 600; color: var(--ft-ink-soft); margin-right: 4px; }
.ft-medchips span { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--ft-input); }
.ft-medrow { border: 1px solid var(--ft-line); border-radius: 8px; padding: 9px 10px; margin: 8px 0; background: #fff; }
.ft-medrow__top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; }
.ft-medrow__top b { font-weight: 600; }
.ft-medrow__top small { color: var(--ft-ink-soft); font-size: 11.5px; flex: 1; }
.ft-medrow__top em { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--ft-input); border: 1px solid var(--ft-line); }
.ft-medrow__top i { font-style: normal; color: #E0A21A; }
.ft-medrow__pos { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; font-size: 12px; color: var(--ft-ink-soft); }
.ft-medrow__pos code { padding: 3px 7px; border-radius: 6px; background: var(--ft-input); border: 1px solid var(--ft-line); font-size: 11.5px; color: var(--ft-ink); }
.ft-medrow__pos span { padding: 3px 7px; border-radius: 6px; border: 1px solid var(--ft-line); font-size: 11.5px; }
.ft-medrow__pos b { font-weight: 600; color: var(--ft-ink); }
.ft-medrow__acts { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }

/* 03 Insumos */
.ft-invhint { font-size: 11.5px; color: var(--ft-ink-soft); margin: 0 0 8px; }
.ft-invrow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--ft-line); border-radius: 8px; background: #fff; margin-bottom: 6px; font-size: 12.5px; }
.ft-invrow b { font-weight: 600; } .ft-invrow span { color: var(--ft-ink-soft); font-size: 12px; } .ft-invrow em { font-style: normal; font-size: 11.5px; color: var(--ft-ink-mute); } .ft-invrow i { font-style: normal; font-size: 11px; color: var(--ft-ink-soft); text-decoration: underline; }
.ft-invsub { display: flex; justify-content: space-between; padding: 8px 10px 10px; font-size: 12.5px; font-weight: 600; }
.ft-invsugg { margin-top: 4px; border: 1px solid var(--ft-line); border-radius: 8px; background: #fff; box-shadow: 0 14px 30px -18px rgba(1, 3, 38, 0.35); overflow: hidden; }
.ft-invsugg div { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12px; }
.ft-invsugg div:first-child { background: var(--ft-l2); }
.ft-invsugg b { font-weight: 600; } .ft-invsugg small { color: var(--ft-ink-soft); flex: 1; } .ft-invsugg small em { font-style: normal; color: var(--ft-warn); } .ft-invsugg code { font-size: 11px; color: var(--ft-ink-mute); }

/* 04 Retina */
.ft-retbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ft-retacts { display: flex; align-items: center; gap: 6px; }
.ft-btn.is-soon { color: var(--ft-ink-mute); border-style: dashed; }
.ft-btn.is-soon em { font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: var(--ft-l2); }
.ft-retdemo { position: relative; }
.ft-ret { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 640px) { .ft-ret { grid-template-columns: minmax(0, 260px) 1fr; } }
.ft-retchart { min-width: 0; }
.ft-retsvg { width: 100%; max-width: 260px; display: block; margin: 0 auto; }

/* Cromo de la carta: la MISMA que dibuja el componente — anillos, meridianos y
   referencias de papila y mácula. Sin retina pintada debajo: el médico solo
   dibuja los hallazgos, igual que en el papel. */
.ft-ret__chrome { fill: none; stroke: #A6ABB8; stroke-width: 1; }
.ft-ret__mer line { stroke-opacity: 0.4; }
.ft-ret__mac { stroke-width: 0.8; stroke-opacity: 0.7; }
.ft-ret__fovea { fill: #6B7280; fill-opacity: 0.6; }
.ft-ret__hours text { font-family: var(--ft-mono); font-size: 9px; font-weight: 700; fill: #6B7280; text-anchor: middle; }
.ft-ret__side { font-size: 8px; font-weight: 700; fill: #6B7280; opacity: 0.75; text-anchor: middle; }
.ft-ret__eye { font-size: 18px; font-weight: 800; letter-spacing: 1px; fill: var(--ft-caoba); }
/* Zona declarada "explorada sin alteraciones": velo verde muy tenue. */
.ft-ret__normal { fill: #1E9E5A; fill-opacity: 0.08; stroke: none; }

/* Las marcas las enciende la demo (JS) una por una, como se van dibujando.
   Sin JS o con movimiento reducido, `.is-in` se aplica de entrada y la carta
   se ve completa. */
.ft-ret__mark { opacity: 0; }
.ft-ret__mark.is-in { animation: ftRetPop 0.42s var(--ft-ease) both; transform-box: fill-box; transform-origin: center; }
/* El desgarro conserva el rotate() con que se colocó: animar `transform` lo
   borraría, así que ese solo aparece. */
#ftRetTear.is-in { animation: ftFade 0.32s var(--ft-ease) both; }
@keyframes ftRetPop { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } }
@keyframes ftFade { from { opacity: 0; } to { opacity: 1; } }
/* Sector fantasma mientras se arrastra sobre el reloj. */
.ft-ret__ghost { opacity: 0; transition: opacity 0.15s; }
.ft-ret__ghost.is-in { opacity: 1; }

.ft-retzones { display: flex; justify-content: center; gap: 12px; margin-top: 6px; font-size: 9.5px; color: var(--ft-ink-mute); }
.ft-retzones span::before { content: '· '; }
.ft-retzones span:first-child::before { content: ''; }

.ft-retside { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ft-rettool { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 7px 10px; border-radius: 8px; background: var(--ft-l2); min-height: 34px; }
.ft-rettool small { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ft-ink-soft); }
.ft-rettool b { font-size: 12px; font-weight: 600; }
.ft-rettool em { font-style: normal; font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-retgroup, .ft-retnorm { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ft-retgroup small, .ft-retnorm small { width: 100%; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); }
.ft-retgroup span { font-size: 11px; padding: 3px 8px 3px 6px; border-radius: 999px; border: 1px solid var(--ft-line); display: inline-flex; align-items: center; gap: 6px; background: var(--ft-surface); transition: border-color 0.18s, box-shadow 0.18s; }
.ft-retgroup span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
/* Los de forma "sector" se marcan arrastrando: su muestra es un arco, no un punto. */
.ft-retgroup span.is-arc::before { width: 10px; height: 6px; border-radius: 6px 6px 0 0; background: none; border: 1.5px solid var(--c); border-bottom: 0; }
.ft-retgroup span.is-on { border-color: var(--c); font-weight: 600; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 18%, transparent); }
.ft-retnorm span { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--ft-line); color: var(--ft-ink-soft); transition: border-color 0.18s, color 0.18s; }
.ft-retnorm span.is-on { border-style: solid; border-color: #1E9E5A; color: #1E9E5A; font-weight: 600; }
.ft-retlist { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ft-line); font-size: 11.5px; }
.ft-retlist span { display: flex; align-items: center; gap: 7px; opacity: 0; transform: translateY(4px); }
.ft-retlist span.is-in { animation: ftRetRow 0.34s var(--ft-ease) both; }
@keyframes ftRetRow { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ft-retlist i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; }

/* 05 Segmento anterior + gonio */
.ft-antgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 680px) { .ft-antgrid { grid-template-columns: 220px 1fr; } }
.ft-antsvg { width: 100%; max-width: 200px; display: block; margin: 0 auto 10px; }
.ft-ant__conj { fill: #FBEAEA; stroke: var(--ft-line); } .ft-ant__limbus { fill: #F4F6FA; stroke: var(--ft-ink-mute); } .ft-ant__zone { fill: none; stroke: var(--ft-line); stroke-dasharray: 3 3; } .ft-ant__pupil { fill: #2B2E38; }
.ft-ant__pter { fill: rgba(138, 148, 166, 0.55); stroke: #8A94A6; } .ft-ant__stain { fill: rgba(30, 158, 90, 0.55); stroke: #1E9E5A; } .ft-ant__kp circle { fill: #3B3F4A; }
.ft-antlegend { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.ft-antlegend span { display: inline-flex; align-items: center; gap: 6px; } .ft-antlegend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.ft-antpills { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ft-line); font-size: 12px; }
.ft-antpills span { color: var(--ft-ink-soft); } .ft-antpills b { font-weight: 600; }
.ft-gonio { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; margin-top: 8px; }
.ft-gonio svg { width: 110px; height: 110px; } .ft-gonio text { font-family: var(--ft-mono); font-size: 9px; fill: #15171D; font-weight: 600; text-anchor: middle; }
.ft-goniolist { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ft-ink-soft); }
.ft-goniolist b { display: inline-block; width: 68px; color: var(--ft-ink); font-weight: 600; }

/* 06 Gaze */
.ft-gazebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-gazebar em { font-style: normal; margin-left: auto; }
.ft-gaze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ft-gaze__cell { border: 1px solid var(--ft-line); border-radius: 8px; padding: 6px; background: #fff; display: flex; flex-direction: column; gap: 5px; opacity: 0; }
.ft-stage__panel.is-on .ft-gaze__cell { animation: ftPop 0.4s var(--ft-ease) calc(var(--i) * 0.07s) both; }
.ft-gaze__cell.is-ppm { border-color: var(--ft-ink); }
.ft-gaze__cell small { font-size: 10px; font-weight: 600; color: var(--ft-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-gaze__cell code { font-size: 11px; }
.ft-gaze__photo { position: relative; aspect-ratio: 2.4; border-radius: 5px; background: linear-gradient(180deg, #E9DED4, #D9C7B8); overflow: hidden; }
.ft-gaze__photo::before, .ft-gaze__photo::after { content: ''; position: absolute; top: 34%; width: 26%; height: 36%; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.ft-gaze__photo::before { left: 14%; } .ft-gaze__photo::after { right: 14%; }
.ft-gaze__photo i { display: none; }
.ft-gaze__photo { --iris: radial-gradient(circle, #15171D 0 22%, #4A5A3A 23% 60%, transparent 61%); }
.ft-gaze__photo::before { background: #fff radial-gradient(circle at calc(50% + var(--ex)) calc(50% + var(--ey)), #15171D 0 20%, #4F6B3C 21% 55%, transparent 56%); }
.ft-gaze__photo::after { background: #fff radial-gradient(circle at calc(50% + var(--ex) + 2px) calc(50% + var(--ey)), #15171D 0 20%, #4F6B3C 21% 55%, transparent 56%); }
.ft-gazeleg { font-size: 10.5px; color: var(--ft-ink-mute); margin: 10px 0 0; }
.ft-qrcard { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--ft-line); border-radius: 12px; background: var(--ft-surface); }
.ft-qrcard .ft-qr { width: 56px; height: 56px; flex-shrink: 0; }
.ft-qrcard b { display: block; font-size: 13px; font-weight: 600; } .ft-qrcard span { display: block; font-size: 12px; color: var(--ft-ink-soft); line-height: 1.45; } .ft-qrcard small { font-family: var(--ft-mono); font-size: 10.5px; color: var(--ft-ink-mute); }

/* 07 IOL */
.ft-iol { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
@media (min-width: 640px) { .ft-iol { grid-template-columns: 1fr 28px 1fr; } }
.ft-iol__eye { border: 1px solid var(--ft-line); border-radius: 8px; padding: 10px; background: #fff; }
.ft-iol__eye.is-dim { opacity: 0.8; }
.ft-iol__row, .ft-iol__backup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ft-iol__row label, .ft-iol__backup label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--ft-ink-soft); }
.ft-iol__row label span, .ft-iol__row label code, .ft-iol__backup label code { padding: 5px 8px; border-radius: 6px; background: var(--ft-input); border: 1px solid var(--ft-line); font-size: 12px; color: var(--ft-ink); font-weight: 500; }
.ft-iol__row label code em, .ft-iol__backup label code em { font-style: normal; color: var(--ft-ink-mute); font-size: 10px; }
.ft-iol__backup { padding-top: 8px; border-top: 1px dashed var(--ft-line); }
.ft-iol__swap { align-self: center; justify-self: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ft-line); display: grid; place-items: center; font-size: 13px; color: var(--ft-ink-soft); background: var(--ft-surface); }
.ft-iol__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--ft-ink-soft); flex-wrap: wrap; }

/* 08 IVT */
.ft-ivt { display: flex; flex-direction: column; gap: 12px; }
.ft-ivt__sec .ft-eyebrow { margin-bottom: 6px; }
.ft-ivt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ft-ivt__grid label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--ft-ink-soft); }
.ft-ivt__grid code { padding: 5px 8px; border-radius: 6px; background: var(--ft-input); border: 1px solid var(--ft-line); font-size: 12px; color: var(--ft-ink); }
.ft-ivt__grid code em { font-style: normal; color: var(--ft-ink-mute); font-size: 10px; }
.ft-chips i.ft-opt { font-size: 11px; }

/* 09 Estudio */
.ft-studysel { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ft-studysel .ft-select { flex: 1; }
.ft-studyopts { border: 1px solid var(--ft-line); border-radius: 8px; background: #fff; padding: 6px; display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; font-size: 11.5px; box-shadow: 0 14px 30px -18px rgba(1, 3, 38, 0.35); }
.ft-studyopts small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); font-weight: 600; padding: 4px 8px 2px; }
.ft-studyopts span { padding: 5px 8px; border-radius: 6px; } .ft-studyopts span.is-on { background: var(--ft-l2); font-weight: 600; }
.ft-studyview { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.ft-studyview svg { width: 100%; height: 130px; display: block; }
.ft-studyint { margin-top: 8px; } .ft-studyint p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; }
.ft-stage__panel.is-on .ft-oct { animation: ftDraw 1.6s var(--ft-ease) 0.2s forwards; }
.ft-stage__panel.is-on .ft-oct--b { animation-delay: 0.5s; }


/* ---------- Nota · demos (dx rotatorio, medicamentos, captura de miradas, Pentacam) ---------- */
.ft-dxb--demo { align-items: start; }
.ft-dxb__band--tight { margin-top: 10px; }
.ft-dxblock--demo { min-height: 92px; }
.ft-dxblock__scale label.wide { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-dxlist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ft-dxlist div { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 8px; border: 1px solid transparent; transition: 0.3s var(--ft-ease); }
.ft-dxlist b { font-size: 12.5px; font-weight: 600; color: var(--ft-ink-soft); }
.ft-dxlist span { font-size: 11px; color: var(--ft-ink-mute); }
.ft-dxlist div.is-on { background: #fff; border-color: var(--ft-line); box-shadow: 0 8px 20px -14px rgba(1, 3, 38, 0.35); }
.ft-dxlist div.is-on b { color: var(--ft-ink); }

.ft-medrow--demo { position: relative; }
.ft-medrow__acts span { transition: color 0.2s; }
.ft-medrow__acts span.is-on { color: var(--ft-ink); font-weight: 600; }
.ft-medtaper, .ft-medbuy { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ft-line); }
.ft-medtaper.is-on, .ft-medbuy.is-on { display: block; animation: ftPanel 0.4s var(--ft-ease); }
.ft-medtaper small, .ft-medbuy small { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); margin-bottom: 6px; }
.ft-medtaper .ft-medrow__pos { margin-top: 5px; }
.ft-medtaper .ft-medrow__pos i { font-style: normal; font-size: 10.5px; color: var(--ft-ink-mute); margin-left: auto; text-decoration: underline; }
.ft-medtaper em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ft-medbuy { display: none; }
.ft-medbuy.is-on { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ft-medbuy.is-on small { width: 100%; }
.ft-medbuy span:not(.ft-caret) { font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--ft-ink); flex: 1; min-height: 30px; }
.ft-medrow__top i.is-fav { color: #E0A21A; text-shadow: 0 0 0 #E0A21A; }
.ft-medchips__new { display: none; background: var(--ft-ink) !important; color: #fff; }
.ft-medchips__new.is-on { display: inline-block; animation: ftPop 0.4s var(--ft-ease); }
.ft-toast--in { position: absolute; right: 14px; bottom: 58px; }
#ftMedToast.is-on { animation: ftIn 0.5s var(--ft-ease) forwards; }

/* Captura de miradas: computadora + teléfono */
.ft-gzstage { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
@media (min-width: 720px) { .ft-gzstage { grid-template-columns: minmax(0, 1fr) 34px 230px; } }
.ft-gzpc__card { margin-bottom: 0; }
.ft-gzmodal { border: 1px solid var(--ft-line); border-radius: 10px; background: #fff; padding: 12px 14px; }
.ft-gzmodal > b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.ft-gzmodal__body { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; }
.ft-qr--lg { width: 84px; height: 84px; }
.ft-gzmodal ol { margin: 0; padding-left: 16px; font-size: 11.5px; line-height: 1.45; color: var(--ft-ink-soft); }
.ft-gzmodal li { margin-bottom: 4px; }
.ft-gzarrive { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ft-line); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.ft-gzarrive small { grid-column: 1 / -1; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); }
.ft-gzmini { display: grid; grid-template-columns: repeat(3, 22px); gap: 3px; }
.ft-gzmini span { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--ft-line); display: grid; place-items: center; font-size: 11px; color: var(--ft-ink-mute); background: var(--ft-surface); transition: 0.3s; }
.ft-gzmini span.is-ppm { border-color: var(--ft-ink-mute); }
.ft-gzmini span.is-done { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); }
.ft-gzarrive em { font-style: normal; font-family: var(--ft-mono); font-size: 10.5px; color: var(--ft-ink-mute); }
.ft-gzlink { display: none; }
@media (min-width: 720px) { .ft-gzlink { display: flex; flex-direction: column; align-items: center; gap: 6px; } }
.ft-gzlink i { width: 5px; height: 5px; border-radius: 50%; background: var(--ft-ink-mute); opacity: 0.3; animation: ftDots 1.6s ease-in-out infinite; }
.ft-gzlink i:nth-child(2) { animation-delay: 0.25s; } .ft-gzlink i:nth-child(3) { animation-delay: 0.5s; }
@keyframes ftDots { 50% { opacity: 1; } }
.ft-gzphone { width: 230px; max-width: 100%; margin: 0 auto; background: var(--ft-ink); border-radius: 26px; padding: 10px 8px; box-shadow: 0 30px 60px -40px rgba(1, 3, 38, 0.6), inset 0 0 0 2px #2A2D36; }
/* Réplica de la página real de captura (gaze-capture.css): fondo #0E1015, guía #16181F, caoba #8C4A38 */
.gz { background: #0E1015; border-radius: 18px; padding: 8px; color: #C9CEDB; font-size: 10.5px; display: flex; flex-direction: column; gap: 7px; }
.gz__head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.gz__head span:first-child { font-weight: 600; color: #fff; }
.gz__count { font-family: var(--ft-mono); background: #232631; color: #C9CEDB; padding: 2px 7px; border-radius: 999px; font-size: 10px; }
.gz__guide { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; background: #16181F; border: 1px solid #232631; border-radius: 0.7rem; padding: 7px 9px; }
.gz__step { font-family: var(--ft-mono); font-size: 9.5px; color: #8A94A6; }
.gz__arrow { width: 24px; height: 24px; border-radius: 6px; background: #8C4A38; color: #fff; display: grid; place-items: center; font-size: 14px; line-height: 1; }
.gz__asks { display: flex; flex-direction: column; min-width: 0; }
.gz__asks b { font-size: 10.5px; color: #fff; line-height: 1.25; }
.gz__asks i { font-style: normal; font-size: 9.5px; color: #8A94A6; }
.gz__stage { position: relative; aspect-ratio: 4 / 3; border-radius: 0.8rem; overflow: hidden; background: radial-gradient(90% 80% at 50% 45%, #2A2F3B, #0B0E15 75%); }
.gz__face { position: absolute; inset: 0; }
.gz__eye { position: absolute; top: 40%; width: 20%; height: 18%; border-radius: 50%; background: #F1EDE7; overflow: hidden; }
.gz__eye--od { left: 24%; } .gz__eye--oi { right: 24%; }
.gz__eye i { position: absolute; left: 50%; top: 50%; width: 58%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #15171D 0 34%, #4F6B3C 35% 100%); transform: translate(calc(-50% + var(--ex, 0px)), calc(-50% + var(--ey, 0px))); transition: transform 0.6s var(--ft-ease); }
.gz__ret { position: absolute; inset: 0; width: 100%; height: 100%; }
.gz__ret-eye, .gz__ret-mid { stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.8; stroke-dasharray: 3 3; }
.gz__ret-c { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1; }
.gz__ret-l { fill: rgba(255, 255, 255, 0.8); font-size: 8px; font-family: var(--ft-mono); text-anchor: middle; }
.gz__ret-k { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.4; }
.gz__dir { position: absolute; inset: 0; display: flex; padding: 8px; pointer-events: none; }
.gz__dirbox { display: flex; flex-direction: column; align-items: center; gap: 3px; animation: ftDirPulse 1.4s ease-in-out infinite; }
@keyframes ftDirPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.gz__dirglyph { width: 26px; height: 26px; border-radius: 7px; background: rgba(140, 74, 56, 0.92); color: #fff; display: grid; place-items: center; font-size: 15px; }
.gz__dirside { font-size: 8.5px; color: #fff; background: rgba(0, 0, 0, 0.6); padding: 2px 6px; border-radius: 0.3rem; white-space: nowrap; }
.gz__msg { position: absolute; left: 8px; right: 8px; bottom: 8px; text-align: center; font-size: 9.5px; color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 6px; padding: 3px 6px; opacity: 0; transition: opacity 0.2s; }
.gz__msg.is-on { opacity: 1; }
.gz__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.gz__actions { display: grid; grid-template-columns: 30px 1fr 30px; gap: 6px; align-items: center; }
.gz__nav { height: 30px; border-radius: 8px; background: #16181F; border: 1px solid #232631; display: grid; place-items: center; color: #C9CEDB; }
.gz__shoot { height: 36px; border-radius: 10px; background: #fff; color: #15171D; font-weight: 700; font-size: 11.5px; display: grid; place-items: center; transition: transform 0.12s, background 0.2s; }
.gz__shoot.is-press { transform: scale(0.95); }
.gz__shoot.is-busy { background: #C9CEDB; }
.gz__map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gz__map span { height: 22px; border-radius: 5px; background: #16181F; border: 1px solid #232631; display: grid; place-items: center; font-size: 11px; color: #8A94A6; transition: 0.3s; }
.gz__map span.is-current { border-color: #8C4A38; color: #fff; }
.gz__map span.is-done { background: #232631; color: #7CE0A8; }
.gz__foot { margin: 0; text-align: center; font-size: 9px; color: #8A94A6; padding: 0 4px 2px; }

/* Pentacam */
/* Recorta el pie del reporte (datos del fabricante) y aísla el mapa */
.ft-pentacam { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--ft-line); background: #fff; margin-bottom: 10px; aspect-ratio: 1126 / 560; }
.ft-pentacam img { display: block; width: 100%; height: auto; }
.ft-pentacam .ft-rr__tag { background: rgba(21, 23, 29, 0.82); }
.ft-pentacam__scan { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(21, 23, 29, 0.85); box-shadow: 0 0 14px rgba(21, 23, 29, 0.6); opacity: 0; left: 0; }
.ft-studyai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
#ftStudyBadge { opacity: 0; }
#ftStudyConc { opacity: 0; }
#ftStudyText { min-height: 62px; }


/* ---------- 04 Dictado y bitácora ---------- */
.ft-dic { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 900px) { .ft-dic { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; } }
.ft-diccard { position: relative; margin-bottom: 0; padding-top: 14px; }
.ft-diccard__head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ft-line); margin-bottom: 12px; }
.ft-diccard__head b { display: block; font-size: 14px; font-weight: 700; }
.ft-diccard__head span { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-dicbit { margin-left: auto; flex-shrink: 0; align-self: center; font-style: normal; font-size: 11px; color: var(--ft-ink-soft); white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: var(--ft-l2); }
.ft-dicbit b { font-family: var(--ft-mono); color: var(--ft-ink); }

/* Grabador */
.ft-dicrec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 38px; }
.ft-dicstart { gap: 7px; }
.ft-mic { position: relative; width: 9px; height: 13px; border-radius: 5px; background: currentColor; display: inline-block; }
.ft-mic::after { content: ''; position: absolute; left: -3px; bottom: -4px; width: 15px; height: 8px; border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 8px 8px; }
.ft-dicpill { display: none; align-items: center; gap: 9px; padding: 5px 6px 5px 8px; border-radius: 999px; border: 1px solid var(--ft-line); background: #fff; }
.ft-dicpill.is-on { display: inline-flex; animation: ftPop 0.35s var(--ft-ease); }
.ft-dicpill__ic { width: 24px; height: 24px; border-radius: 50%; background: var(--ft-l2); display: grid; place-items: center; font-size: 9px; color: var(--ft-ink-soft); }
.ft-dicdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ft-danger); animation: ftPulse 1.2s infinite; }
.ft-dicpill.is-paused .ft-dicdot { animation: none; opacity: 0.35; }
.ft-dicpill__time { font-family: var(--ft-mono); font-size: 12px; font-weight: 600; min-width: 30px; }
.ft-dicwave { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.ft-dicwave i { width: 2px; height: 4px; border-radius: 1px; background: var(--ft-ink-mute); animation: ftWave 1.1s ease-in-out infinite; }
.ft-dicwave i:nth-child(2n) { animation-delay: 0.12s; } .ft-dicwave i:nth-child(3n) { animation-delay: 0.26s; } .ft-dicwave i:nth-child(5n) { animation-delay: 0.4s; }
.ft-dicpill.is-paused .ft-dicwave i { animation-play-state: paused; }
.ft-dicpill__done { padding: 4px 10px; border-radius: 999px; background: var(--ft-ink); color: #fff; font-size: 11px; font-weight: 600; }
.ft-dicstate { font-size: 11.5px; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ft-dicstate.is-live { color: var(--ft-ink); font-weight: 600; text-decoration: none; }

/* Bitácora */
.ft-diclist { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ft-dicitem { border: 1px solid var(--ft-line); border-radius: 9px; background: #fff; padding: 8px 10px; }
.ft-dicitem.is-new { animation: ftDicIn 0.5s var(--ft-ease); }
@keyframes ftDicIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ft-dicitem.is-off { opacity: 0.55; }
.ft-dicitem__row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-dicitem__row em { font-style: normal; font-family: var(--ft-mono); font-size: 10px; width: 16px; color: var(--ft-ink-mute); }
.ft-dicitem__row b { font-size: 12.5px; font-weight: 600; color: var(--ft-ink); }
.ft-dicitem__row .ft-tag { font-size: 9.5px; }
.ft-dicitem__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; font-size: 11px; color: var(--ft-ink-soft); }
.ft-dicitem__acts i { font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.ft-dicitem__acts i.is-ai { color: var(--ft-ink); font-weight: 600; }
.ft-dicitem__acts i.is-busy { opacity: 0.6; }
.ft-dictrans { display: none; margin-top: 8px; padding: 8px 10px; border-radius: 7px; background: var(--ft-l2); font-size: 11.5px; line-height: 1.5; font-style: italic; color: var(--ft-ink-soft); }
.ft-dictrans.is-on { display: block; animation: ftPanel 0.4s var(--ft-ease); }
.ft-dicwork { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11px; color: var(--ft-ink-soft); }
.ft-dicwork i { width: 7px; height: 7px; border-radius: 50%; background: var(--ft-ink-mute); animation: ftPulse 1s infinite; }

/* Turno del asistente */
.ft-dicai { display: none; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ft-line); }
.ft-dicai.is-on { display: flex; animation: ftPanel 0.5s var(--ft-ease); }
.ft-dicai__av { width: 26px; height: 26px; border-radius: 50%; background: var(--ft-caoba); flex-shrink: 0; position: relative; }
.ft-dicai__av::before { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; color: #FBF3F0; font-size: 13px; }
.ft-dicai__body { flex: 1; min-width: 0; }
.ft-dicai__who { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ft-dicai__who b { font-size: 12.5px; font-weight: 600; }
.ft-dicai__who span { font-size: 11px; color: var(--ft-ink-mute); }
.ft-dicai__dots { display: none; gap: 4px; margin-top: 7px; }
.ft-dicai__dots.is-on { display: flex; }
.ft-dicai__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ft-ink-mute); animation: ftDots 1.2s ease-in-out infinite; }
.ft-dicai__dots i:nth-child(2) { animation-delay: 0.18s; } .ft-dicai__dots i:nth-child(3) { animation-delay: 0.36s; }
.ft-dicai__text { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ft-ink); min-height: 18px; }
.ft-dicpills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ft-dicpills span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--ft-line); background: var(--ft-surface); font-size: 11px; opacity: 0; transform: translateY(6px); }
.ft-dicpills span.is-in { animation: ftIn 0.45s var(--ft-ease) forwards; }
.ft-dicpills small { color: var(--ft-ink-soft); }
.ft-dicpills b { font-weight: 600; }
.ft-dicpills em { font-style: normal; color: var(--ft-ink-mute); }

/* La nota que recibe los datos */
.ft-dic__right .ft-eyebrow { margin-bottom: 8px; }
.ft-dicnote { display: flex; flex-direction: column; gap: 8px; }
.ft-dicsec { border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); padding: 0 12px 10px; overflow: hidden; transition: border-color 0.4s, box-shadow 0.4s; }
.ft-dicsec.is-lit { border-color: color-mix(in srgb, var(--ft-caoba) 45%, var(--ft-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-caoba) 9%, transparent); }
.ft-dicsec__head { display: flex; align-items: center; gap: 8px; margin: 0 -12px 8px; padding: 8px 12px; background: var(--ft-l2); border-bottom: 1px solid var(--ft-line); }
.ft-dicsec__head i { font-style: normal; font-family: var(--ft-mono); font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--ft-caoba); color: #FBF3F0; }
.ft-dicsec__head b { font-size: 12.5px; font-weight: 700; }
.ft-iabadge { margin-left: auto; flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ft-caoba) 14%, var(--ft-surface)); color: color-mix(in srgb, var(--ft-caoba) 88%, black); opacity: 0; transform: scale(0.8); }
.ft-iabadge.is-in { animation: ftBadge 0.5s var(--ft-ease) forwards; }
@keyframes ftBadge { to { opacity: 1; transform: none; } }
.ft-dicsec p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ft-ink); }
.ft-dicsec__rows { display: flex; flex-direction: column; gap: 5px; }
.ft-dicsec__rows span { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.ft-dicsec__rows small { min-width: 100px; color: var(--ft-ink-soft); font-size: 11px; }
.ft-dicsec__rows b { font-weight: 600; }
/* "Tinta fresca": lo que pone la IA entra en caoba y se asienta */
.ft-fresh { opacity: 0; }
.ft-fresh.is-in { animation: ftFreshIn 0.5s var(--ft-ease) forwards, ftFreshSettle 3.2s ease 1.4s forwards; }
@keyframes ftFreshIn { from { opacity: 0; color: var(--ft-caoba); } to { opacity: 1; color: var(--ft-caoba); } }
@keyframes ftFreshSettle { from { color: var(--ft-caoba); } to { color: var(--ft-ink); } }

@media (prefers-reduced-motion: reduce) {
  .ft-fresh, .ft-iabadge, .ft-dicpills span { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ft-dicwave i, .ft-dicdot, .ft-dicai__dots i, .ft-dicwork i { animation: none !important; }
}


/* ============================================================
   ESTRUCTURA v2 — cabecera (logo + versión) · fila de secciones
   con subrayado animado · explorador (rail + escenario).
   Sustituye al recorrido por scroll: nada se anima al hacer
   scroll; todo ocurre al elegir sección o subsección.
   ============================================================ */
html { scroll-snap-type: none; }
.ft-hero, .ft-feature, .ft-close { scroll-snap-align: none; scroll-snap-stop: normal; }
.ft-feature { min-height: 0; }

/* Cabecera */
.ft-top { padding: 30px 0 20px; }
.ft-top__inner { display: flex; flex-direction: column; gap: 16px; }
.ft-top .ft-brand { margin: 0; }
.ft-top .ft-brand img { height: 28px; }
.ft-top__grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: end; }
@media (min-width: 880px) { .ft-top__grid { grid-template-columns: auto minmax(0, 1fr); gap: 52px; } }
.ft-top__title { font-family: var(--ft-head); font-size: clamp(40px, 5.4vw, 66px); line-height: 0.95; letter-spacing: -0.04em; font-weight: 600; margin: 0; color: var(--ft-ink); display: flex; align-items: flex-start; gap: 10px; }
.ft-top__num { font-family: var(--ft-mono); font-size: 0.26em; font-weight: 500; letter-spacing: 0; color: var(--ft-ink-mute); margin-top: 0.55em; }
.ft-top__why { font-size: 15px; line-height: 1.6; color: var(--ft-ink-soft); margin: 0 0 6px; max-width: 62ch; }
.ft-top__why b { color: var(--ft-ink); font-weight: 600; }
.ft-top__why span { color: var(--ft-ink-mute); }

/* Fila de secciones, pegajosa, con subrayado que se desliza */
.ft-secnav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ft-bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--ft-line); }
.ft-secnav__inner { position: relative; display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
/* Degradado en los bordes: avisa que la fila se desplaza */
/* Los degradados de 'hay más' se anclan al borde del CONTENEDOR (.lp-wrap,
   --lp-maxw), no al del viewport: con la fila centrada, un `right: 0` los
   dejaba en el margen vacío y el texto se cortaba en seco, sin ninguna pista
   de que la fila seguía. */
.ft-secnav::after, .ft-secnav::before { content: ''; position: absolute; top: 0; bottom: 1px; width: 64px; pointer-events: none; z-index: 2; transition: opacity 0.25s; }
.ft-secnav::before { left: max(0px, calc((100% - var(--lp-maxw)) / 2)); background: linear-gradient(to right, var(--ft-bg) 34%, transparent); opacity: 0; }
.ft-secnav::after { right: max(0px, calc((100% - var(--lp-maxw)) / 2)); background: linear-gradient(to left, var(--ft-bg) 34%, transparent); opacity: 0; }
.ft-secnav.is-start::before { opacity: 1; }
.ft-secnav.is-scrollable:not(.is-end)::after { opacity: 1; }
/* Flechas: aparecen solo si la fila no cabe. */
.ft-secnav__go { position: absolute; top: 50%; z-index: 3; width: 26px; height: 26px; margin-top: -13px; padding: 0; border: 1px solid var(--ft-line); border-radius: 50%; background: var(--ft-surface); cursor: pointer; display: none; place-items: center; box-shadow: 0 2px 8px -4px rgba(1, 3, 38, 0.35); transition: opacity 0.2s, background 0.2s; }
.ft-secnav.is-scrollable .ft-secnav__go { display: grid; }
.ft-secnav__go::before { content: ''; width: 6px; height: 6px; border-right: 1.6px solid var(--ft-ink-soft); border-bottom: 1.6px solid var(--ft-ink-soft); }
.ft-secnav__go--prev { left: max(2px, calc((100% - var(--lp-maxw)) / 2)); }
.ft-secnav__go--prev::before { transform: rotate(135deg); margin-left: 2px; }
.ft-secnav__go--next { right: max(2px, calc((100% - var(--lp-maxw)) / 2)); }
.ft-secnav__go--next::before { transform: rotate(-45deg); margin-right: 2px; }
.ft-secnav__go:hover { background: var(--ft-l2); }
.ft-secnav__go[disabled] { opacity: 0; pointer-events: none; }
/* En táctil no hacen falta: se desliza con el dedo y las flechas taparian
   pestañas en una pantalla donde cada píxel cuenta. Queda el degradado. */
@media (max-width: 720px) { .ft-secnav.is-scrollable .ft-secnav__go { display: none; } }
.ft-secnav { position: sticky; }
.ft-secnav__inner::-webkit-scrollbar { display: none; }
@media (max-width: 1280px) { .ft-secnav__inner { gap: 16px; } .ft-secnav__tab { font-size: 13.5px; } }
.ft-secnav__tab { appearance: none; background: none; border: 0; cursor: pointer; white-space: nowrap; padding: 15px 0 14px; margin: 0; font-family: var(--ft-body); font-size: 14.5px; font-weight: 500; color: var(--ft-ink-mute); display: inline-flex; align-items: center; gap: 7px; transition: color 0.25s var(--ft-ease); }
.ft-secnav__tab i { font-style: normal; font-family: var(--ft-mono); font-size: 10px; color: var(--ft-ink-mute); opacity: 0.75; transition: color 0.25s, opacity 0.25s; }
.ft-secnav__tab:hover { color: var(--ft-ink-soft); }
.ft-secnav__tab.is-on { color: var(--ft-ink); font-weight: 600; }
.ft-secnav__tab.is-on i { color: var(--ft-ink); opacity: 1; }
.ft-secnav__tab:focus-visible { outline: 2px solid var(--ft-ink); outline-offset: 3px; border-radius: 4px; }
.ft-secnav__ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ft-ink); border-radius: 2px 2px 0 0; transition: transform 0.5s var(--ft-ease), width 0.5s var(--ft-ease); }

/* Explorador */
.ft-explorer { padding: 40px 0 90px; min-height: 60vh; }
.ft-secpanel { display: none; }
.ft-secpanel.is-on { display: block; }
/* Solo para el carril PEGAJOSO de escritorio: libra la barra de secciones.
   Sin la media query, en móvil (donde el carril es `relative`) este `top`
   empujaba las pastillas 78 px hacia abajo, debajo de la tarjeta del mock. */
@media (min-width: 960px) { .ft-explorer .ft-rail { top: 78px; } }
.ft-rs--single .ft-rail { display: none; }
@media (min-width: 960px) { .ft-rs--single { grid-template-columns: minmax(0, 1fr); } }
.ft-stage__text { max-width: 780px; }
.ft-stage__text .ft-facts { margin-top: 34px; }
.ft-stage__text .ft-list { margin-top: 16px; }
.ft-stage__panel .ft-shot, .ft-stage__panel .ft-feature__grid { margin: 0; }

/* Cierre, sin altura de pantalla completa */
.ft-close { padding: 84px 0; min-height: 0; }

@media (max-width: 959px) {
  .ft-top { padding: 22px 0 16px; }
  .ft-explorer { padding: 26px 0 60px; }
}


/* ---------- Textura de fondo: rejilla de puntos + luz superior ---------- */
/* La página no debe poder correrse en horizontal NUNCA. `clip` y no `hidden`:
   `hidden` convierte al cuerpo en contenedor de scroll y rompería el `sticky`
   de la barra de secciones. */
html, body.ft-body { overflow-x: clip; max-width: 100%; }
body.ft-body {
  background-color: var(--ft-bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(21, 23, 29, 0.085) 1.1px, transparent 0);
  background-size: 22px 22px;
  background-attachment: fixed;
}
.ft-top { position: relative; }
.ft-top::before {
  content: ''; position: absolute; left: 50%; top: -300px; width: min(1200px, 120vw); height: 620px;
  transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18) 58%, transparent 80%);
}
.ft-explorer { position: relative; }
/* Lienzo del explorador: superficie L1 translúcida sobre la trama, con 1px Line */
.ft-explorer > .lp-wrap { position: relative; }
.ft-secpanel.is-on { position: relative; }
.ft-secnav { background: color-mix(in srgb, var(--ft-bg) 82%, transparent); }


/* ---------- Agenda · subsecciones nuevas ---------- */

/* Vistas y filtros */
.ft-views { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .ft-views { grid-template-columns: 190px 1fr; } }
.ft-views__side { display: flex; flex-direction: column; gap: 7px; }
.ft-views__side label { font-size: 10.5px; font-weight: 600; color: var(--ft-ink-soft); margin-top: 4px; }
.ft-optgroup { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--ft-line); border-radius: 8px; background: #fff; }
.ft-optgroup small { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ft-ink-mute); padding: 3px 6px 1px; }
.ft-optgroup span { font-size: 11.5px; padding: 4px 7px; border-radius: 5px; }
.ft-optgroup span.is-on { background: var(--ft-ink); color: #fff; font-weight: 600; }
.ft-views__main { display: flex; flex-direction: column; gap: 5px; }
.ft-views__bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--ft-line); margin-bottom: 3px; }
.ft-views__bar b { font-size: 13px; }
.ft-listrow { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--ft-line); border-radius: 9px; background: #fff; font-size: 12px; }
.ft-listrow > div { flex: 1; min-width: 0; }
.ft-listrow b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-listrow span:not(.ft-tag):not(.ft-dot) { font-size: 11px; color: var(--ft-ink-soft); }
.ft-listrow code { font-family: var(--ft-mono); font-size: 12px; font-weight: 600; }
.ft-listrow em { font-style: normal; font-size: 11px; color: var(--ft-ink-soft); }
.ft-listrow.is-next { border-color: var(--ft-ink); box-shadow: 0 6px 18px -12px rgba(1, 3, 38, 0.4); }
.ft-listrow.is-off { opacity: 0.6; }
.ft-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; }

/* Cajón de formulario (crear atención / bloquear) */
.ft-drawer { background: var(--ft-surface); border: 1px solid var(--ft-line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -45px rgba(1, 3, 38, 0.4); max-width: 520px; }
.ft-drawer--sm { max-width: 380px; }
.ft-drawer__head { display: flex; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--ft-line); }
.ft-drawer__head b { font-size: 14px; font-weight: 600; }
.ft-drawer__head i { margin-left: auto; font-style: normal; color: var(--ft-ink-mute); }
.ft-drawer__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ft-drawer__foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--ft-line); background: var(--ft-bg); }
.ft-link { font-size: 12px; color: var(--ft-ink-soft); }
.ft-dsec { border: 1px solid var(--ft-line); border-radius: 10px; background: #fff; padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.ft-dsec__head { display: flex; align-items: center; gap: 8px; }
.ft-dsec__head i { width: 20px; height: 20px; border-radius: 5px; background: var(--ft-l2); flex-shrink: 0; }
.ft-dsec__head b { font-size: 12.5px; font-weight: 600; }
.ft-dsec__head em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ft-drow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ft-drawer .ft-field label.req::after { content: ' *'; color: var(--ft-danger); }
.ft-select--filled { background: #fff; border-color: var(--ft-ink-mute); color: var(--ft-ink); }
.ft-svcline { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; background: var(--ft-l2); font-size: 11.5px; font-weight: 500; }
.ft-svcline i { margin-left: auto; font-style: normal; color: var(--ft-ink-mute); }
.ft-addsvc { align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ft-slots2 { display: flex; flex-wrap: wrap; gap: 5px; }
.ft-slots2 span { font-family: var(--ft-mono); font-size: 11.5px; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--ft-line); background: #fff; }
.ft-slots2 span.is-on { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); font-weight: 600; }
.ft-hint { font-size: 10.5px; color: var(--ft-ink-mute); }
.ft-textarea { min-height: 44px; padding: 7px 10px; border-radius: 8px; background: var(--ft-input); border: 1px solid var(--ft-line); font-size: 12px; line-height: 1.45; }
.ft-switches { display: flex; flex-direction: column; gap: 7px; }
.ft-switches label { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ft-ink); }
.ft-switches i { width: 30px; height: 17px; border-radius: 999px; background: var(--ft-recess); position: relative; flex-shrink: 0; transition: background 0.25s; }
.ft-switches i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform 0.25s; }
.ft-switches i.is-on { background: var(--ft-ink); }
.ft-switches i.is-on::after { transform: translateX(13px); }
.ft-daychips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ft-daychips span { font-family: var(--ft-mono); font-size: 11.5px; width: 30px; text-align: center; padding: 5px 0; border-radius: 7px; border: 1px solid var(--ft-line); background: #fff; }
.ft-daychips span.is-on { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); }
.ft-daychips em { font-style: normal; font-size: 11px; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }

/* Recordatorios */
.ft-remind { position: relative; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .ft-remind { grid-template-columns: 1fr 1fr; } }
/* Visible por defecto; solo se oculta cuando el JS arma la demo */
.ft-remind.is-armed .ft-rstep { opacity: 0; transform: translateY(10px); }
.ft-rstep.is-in { animation: ftIn 0.5s var(--ft-ease) forwards; }
.ft-rstep em { display: block; font-style: normal; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ft-ink-mute); margin-bottom: 6px; }
.ft-bubble { position: relative; background: #fff; border: 1px solid var(--ft-line); border-radius: 12px 12px 12px 4px; padding: 9px 11px 16px; font-size: 12px; line-height: 1.5; color: var(--ft-ink); box-shadow: 0 10px 24px -18px rgba(1, 3, 38, 0.4); }
.ft-bubble b { display: block; font-size: 10.5px; font-weight: 700; color: #128C7E; margin-bottom: 3px; }
.ft-bubble b + b, .ft-bubble > b:not(:first-child) { display: inline; color: inherit; font-size: inherit; }
.ft-bubble--wa { border-left: 3px solid #25D366; }
.ft-bubble__t { position: absolute; right: 10px; bottom: 5px; font-family: var(--ft-mono); font-size: 9px; color: var(--ft-ink-mute); }
.ft-mail { background: #fff; border: 1px solid var(--ft-line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 10px 24px -18px rgba(1, 3, 38, 0.4); }
.ft-mail__from { font-size: 10px; color: var(--ft-ink-mute); }
.ft-mail b { font-size: 12.5px; font-weight: 600; }
.ft-mail__body { font-size: 11.5px; color: var(--ft-ink-soft); line-height: 1.45; }
.ft-mail__btn { align-self: flex-start; margin-top: 3px; padding: 6px 12px; border-radius: 8px; background: var(--ft-ink); color: #fff; font-size: 11.5px; font-weight: 600; transition: transform 0.15s; }
.ft-mail__btn.is-press { transform: scale(0.94); }
.ft-remstate { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; align-self: start; justify-self: start; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ft-line); background: #fff; font-size: 12px; }
.ft-remstate b { font-weight: 600; }

/* Requisitos */
.ft-reqhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ft-reqhead b { display: block; font-size: 13.5px; font-weight: 600; }
.ft-reqhead span:not(.ft-btn) { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-reqhead .ft-btn { margin-left: auto; }
.ft-req { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--ft-line); border-radius: 9px; background: #fff; margin-bottom: 6px; font-size: 12px; }
.ft-req > div { flex: 1; min-width: 0; }
.ft-req b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-req span:not(.ft-tag) { font-size: 11px; color: var(--ft-ink-soft); }
.ft-req i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ft-req i.is-ok { background: rgba(31, 138, 91, 0.12); color: var(--ft-ok); }
.ft-req i.is-warn { background: rgba(181, 115, 26, 0.16); color: var(--ft-warn); }
.ft-reqfoot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ft-line); font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-reqfoot .ft-bar { flex: 1; width: auto; }

/* Horarios y bloqueos */
.ft-blk { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 820px) { .ft-blk { grid-template-columns: 1.25fr 1fr; } }
.ft-blk .ft-app { padding: 12px 14px 14px; }
.ft-blkhead { display: grid; grid-template-columns: 42px repeat(5, 1fr); gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--ft-ink-soft); padding-bottom: 6px; border-bottom: 1px solid var(--ft-line); }
.ft-blkhead span:not(:first-child) { text-align: center; }
.ft-blkbody { display: grid; grid-template-columns: 42px 1fr; gap: 5px; height: 210px; margin-top: 5px; }
.ft-blkhours { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--ft-mono); font-size: 9px; color: var(--ft-ink-mute); }
.ft-blkcols { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.ft-blkcol { position: relative; border-radius: 6px; background: repeating-linear-gradient(to bottom, var(--ft-line) 0 1px, transparent 1px 25%); }
.ft-blkoff { position: absolute; left: 0; right: 0; top: var(--t); height: var(--h); background: repeating-linear-gradient(135deg, rgba(21, 23, 29, 0.06) 0 5px, transparent 5px 10px); border-radius: 5px; }
.ft-blkev { position: absolute; left: 0; right: 0; top: var(--t); height: var(--h); border-radius: 5px; background: #5A9BE0; opacity: 0.9; }
.ft-blkband { position: absolute; left: calc(40% + 2px); right: 0; top: 18%; bottom: 18%; border-radius: 7px; border: 1px dashed var(--ft-ink-mute); background: repeating-linear-gradient(135deg, var(--ft-l2) 0 6px, var(--ft-surface) 6px 12px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 4px; }
.ft-blkband b { font-size: 11.5px; font-weight: 600; }
.ft-blkband span { font-size: 10px; color: var(--ft-ink-soft); }

/* Paquetes */
.ft-pkghead { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ft-line); margin-bottom: 10px; }
.ft-pkghead b { display: block; font-size: 13.5px; font-weight: 600; }
.ft-pkghead span:not(.ft-tag) { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-pkghead .ft-tag { margin-left: auto; font-size: 12px; }
.ft-pkggrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
@media (min-width: 620px) { .ft-pkggrid { grid-template-columns: repeat(3, 1fr); } }
.ft-pkggrid > div { border: 1px solid var(--ft-line); border-radius: 9px; background: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.ft-pkggrid em { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-mute); }
.ft-pkggrid b { font-size: 12.5px; font-weight: 600; }
.ft-pkggrid span { font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-pkggrid .is-done { opacity: 0.6; }
.ft-pkggrid .is-done b::after { content: ' ✓'; color: var(--ft-ok); }
.ft-pkggrid .is-now { border-color: var(--ft-ink); box-shadow: 0 6px 18px -12px rgba(1, 3, 38, 0.4); }
.ft-pkgfoot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ft-line); font-size: 12px; }
.ft-pkgfoot i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ft-line); display: grid; place-items: center; color: var(--ft-ink-soft); }
.ft-pkgfoot b { font-weight: 600; }
.ft-pkgfoot em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }

/* Cadena cita → cobro */
.ft-chain { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; }
@media (min-width: 700px) { .ft-chain { grid-template-columns: 1fr 32px 1fr; } }
.ft-chainbox { background: var(--ft-surface); border: 1px solid var(--ft-line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 20px 44px -40px rgba(1, 3, 38, 0.4); }
.ft-chainbox .ft-eyebrow { margin-bottom: 9px; }
.ft-chainbox .ft-pop__tiles { margin-top: 0; }
.ft-chainbox .ft-pop__tiles .is-hot { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); }
.ft-chainpt { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--ft-line); }
.ft-chainpt b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-chainpt span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-chainarrow { justify-self: center; color: var(--ft-ink-mute); font-size: 18px; }
.ft-chainline { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--ft-line); font-size: 12px; }
.ft-chainline.is-disc { color: var(--ft-ok); }
.ft-chaintotal { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0 10px; font-size: 12.5px; }
.ft-chaintotal code { font-size: 18px; font-weight: 600; }

/* En vivo, historial y reporte */
.ft-live { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 820px) { .ft-live { grid-template-columns: 1.15fr 1fr; } }
.ft-live .ft-app { position: relative; }
.ft-hist { display: flex; gap: 10px; padding: 7px 0 7px 2px; position: relative; }
.ft-hist i { width: 9px; height: 9px; border-radius: 50%; background: var(--ft-line); margin-top: 4px; flex-shrink: 0; position: relative; }
.ft-hist i::after { content: ''; position: absolute; left: 4px; top: 12px; width: 1px; height: 26px; background: var(--ft-line); }
.ft-hist:last-of-type i::after { display: none; }
.ft-hist.is-now i { background: var(--ft-ink); box-shadow: 0 0 0 3px var(--ft-l2); }
.ft-hist b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-hist span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-live .ft-toast { right: 10px; bottom: -14px; }
.ft-live .ft-toast i { font-style: normal; }
.ft-mailrep { background: var(--ft-surface); border: 1px solid var(--ft-line); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; }
.ft-mailrep > b { font-size: 13px; font-weight: 600; }
.ft-mailrep .ft-bars { height: 76px; }
.ft-mailrep p { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--ft-ink-soft); font-style: italic; }
.ft-mailrep p b { color: var(--ft-ink); font-style: normal; }

@media (prefers-reduced-motion: reduce) { .ft-rstep { opacity: 1 !important; transform: none !important; animation: none !important; } }


/* ---------- Pacientes · subsecciones nuevas ---------- */

/* Listado */
.ft-chipsrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ft-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--ft-l2); font-size: 11px; font-weight: 500; }
.ft-fchip i { font-style: normal; color: var(--ft-ink-mute); }
.ft-chipsrow em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ft-acts { display: inline-flex; gap: 8px; justify-content: flex-end; }
.ft-acts i { font-style: normal; font-size: 10.5px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--ft-line); background: var(--ft-surface); color: var(--ft-ink-soft); }
.ft-listfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ft-line); font-size: 11px; color: var(--ft-ink-soft); }
.ft-dupe { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(181, 115, 26, 0.12); color: var(--ft-warn); }
.ft-dupe i { font-style: normal; font-weight: 700; }

/* Datos clínicos */
.ft-clin { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .ft-clin { grid-template-columns: 1fr 1fr; } }
.ft-clinsec--full { grid-column: 1 / -1; }
.ft-clinsec .ft-eyebrow { margin-bottom: 7px; }
.ft-clinsec .ft-row { border-top: 1px solid var(--ft-line); padding: 7px 0; }
.ft-alg { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--ft-line); border-radius: 9px; background: #fff; margin-bottom: 6px; }
.ft-alg b { font-size: 12.5px; font-weight: 600; }
.ft-alg span { font-size: 11px; color: var(--ft-ink-soft); flex: 1; }
.ft-alg em { font-style: normal; }
.ft-alg.is-hi { border-color: rgba(200, 68, 47, 0.45); background: rgba(200, 68, 47, 0.04); }

/* Reportes y documentos */
.ft-rep { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 860px) { .ft-rep { grid-template-columns: 1.1fr 1fr; } }
.ft-repgrid { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 4px; }
@media (min-width: 520px) { .ft-repgrid { grid-template-columns: 1fr 1fr; } }
.ft-repcard { border: 1px solid var(--ft-line); border-radius: 10px; background: #fff; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.ft-repcard.is-on { border-color: var(--ft-ink); box-shadow: 0 8px 22px -16px rgba(1, 3, 38, 0.4); }
.ft-repcard b { font-size: 13px; font-weight: 600; }
.ft-repcard span { font-size: 11px; line-height: 1.45; color: var(--ft-ink-soft); flex: 1; }
.ft-repcard i { font-style: normal; align-self: flex-start; margin-top: 4px; }
.ft-repsoon { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-repsoon span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px; border: 1px dashed var(--ft-line); font-size: 11.5px; color: var(--ft-ink-mute); }
.ft-repsoon em { font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 6px; border-radius: 5px; background: var(--ft-l2); color: var(--ft-ink-soft); }
.ft-rephist { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ft-line); font-size: 12px; }
.ft-rephist > div { flex: 1; min-width: 0; }
.ft-rephist b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-rephist span { font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-rephist i { font-style: normal; font-size: 10.5px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--ft-line); color: var(--ft-ink-soft); }
.ft-rephist i.is-wa { border-color: rgba(37, 211, 102, 0.5); color: #128C7E; }
.ft-paper--rep .ft-paper__title { display: block; font-size: 13px; font-weight: 700; margin: 2px 0 8px; }
.ft-repline { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-top: 1px solid var(--ft-line); opacity: 0; }
.ft-stage__panel.is-on .ft-repline { animation: ftIn 0.5s var(--ft-ease) calc(0.25s + var(--d) * 0.18s) forwards; }
.ft-repline small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ft-ink-soft); }
.ft-repline span { font-size: 11.5px; line-height: 1.5; }

/* Familias */
.ft-famhead { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ft-line); margin-bottom: 10px; }
.ft-famhead b { display: block; font-size: 13.5px; font-weight: 600; }
.ft-famhead span:not(.ft-btn) { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-famhead .ft-btn { margin-left: auto; }
.ft-famrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--ft-line); border-radius: 9px; background: #fff; margin-bottom: 6px; font-size: 12px; flex-wrap: wrap; }
.ft-famrow > div { flex: 1; min-width: 130px; }
.ft-famrow b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-famrow span:not(.ft-tag):not(.ft-link) { font-size: 11px; color: var(--ft-ink-soft); }
.ft-famrow em { font-style: normal; font-size: 10.5px; color: var(--ft-ink-mute); }
.ft-famrow.is-head { border-color: var(--ft-ink); }
.ft-famrow.is-off { opacity: 0.55; }
.ft-famline { width: 1px; height: 12px; background: var(--ft-line); margin: 0 0 6px 20px; }


/* ---------- Filas etiqueta/valor (base recuperada) ---------- */
.ft-rows { display: flex; flex-direction: column; }
.ft-rows .ft-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-top: 1px solid var(--ft-line); font-size: 12.5px; }
.ft-rows .ft-row > span:first-child { color: var(--ft-ink-soft); flex-shrink: 0; }
.ft-rows .ft-row b { font-weight: 600; color: var(--ft-ink); text-align: right; }
.ft-rows .ft-row .ft-danger { color: var(--ft-danger); }
/* Contenedores de layout que solo agrupan */
.ft-dic__left, .ft-dxb__col, .ft-gzpc { min-width: 0; }
.ft-dxb__col { display: flex; flex-direction: column; }


/* ---------- Órdenes / Interconsultas ---------- */
.ft-ordrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--ft-line); border-radius: 9px; background: #fff; margin-bottom: 6px; font-size: 12.5px; }
.ft-ordrow > div { flex: 1; min-width: 0; }
.ft-ordrow b { display: block; font-weight: 600; }
.ft-ordrow span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-ordrow em { font-style: normal; }
.ft-ordrow span em { color: var(--ft-ink); font-weight: 500; }
.ft-ordrow u { text-decoration: underline; text-underline-offset: 3px; color: var(--ft-ink-mute); margin-left: 6px; }
.ft-ordrow code { font-size: 12px; }
.ft-ordrow i { font-style: normal; color: var(--ft-ink-mute); font-size: 12px; }
.ft-ordrow.is-ext { border-style: dashed; }
.ft-ordrow .ft-tag { font-size: 9.5px; }
.ft-ordfoot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ft-line); font-size: 12px; color: var(--ft-ink-soft); }
.ft-ordfoot code { font-size: 15px; font-weight: 600; color: var(--ft-ink); }

/* ---------- Reagendar desde WhatsApp ---------- */
.ft-resch { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 760px) { .ft-resch { grid-template-columns: 1fr 1fr; } }
.ft-reschcol { display: flex; flex-direction: column; gap: 8px; }
.ft-reschcol .ft-eyebrow { margin-bottom: 2px; }
.ft-wabtns { display: flex; gap: 5px; }
.ft-wabtns span { flex: 1; text-align: center; padding: 7px 4px; border-radius: 8px; border: 1px solid var(--ft-line); background: #fff; font-size: 11.5px; font-weight: 600; color: #128C7E; }
.ft-wabtns span.is-hot { background: var(--ft-ink); border-color: var(--ft-ink); color: #fff; }
.ft-bubble--reply u { display: block; margin: 5px 0; text-decoration: underline; text-underline-offset: 3px; color: #1F5FD0; font-size: 11.5px; word-break: break-all; }
.ft-reschpage { background: #fff; border: 1px solid var(--ft-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 14px 34px -26px rgba(1, 3, 38, 0.45); }
.ft-reschnow { padding: 9px 10px; border-radius: 9px; background: var(--ft-l2); display: flex; flex-direction: column; gap: 1px; }
.ft-reschnow small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ft-ink-soft); }
.ft-reschnow b { font-size: 12.5px; font-weight: 600; }
.ft-reschnow span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-reschlbl { font-size: 11px; font-weight: 600; color: var(--ft-ink-soft); margin-top: 3px; }
.ft-reschdays { display: flex; gap: 5px; flex-wrap: wrap; }
.ft-reschdays span { font-size: 11.5px; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--ft-line); background: var(--ft-surface); }
.ft-reschdays span.is-on { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); font-weight: 600; }
.ft-reschbtn { justify-content: center; margin-top: 4px; }
.ft-reschok { display: flex; align-items: flex-start; gap: 9px; margin-top: 4px; padding: 9px 10px; border-radius: 9px; background: rgba(31, 138, 91, 0.08); border: 1px solid rgba(31, 138, 91, 0.25); }
.ft-reschok i { width: 18px; height: 18px; border-radius: 50%; background: var(--ft-ok); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 10px; flex-shrink: 0; }
.ft-reschok b { display: block; font-size: 12px; font-weight: 600; color: var(--ft-ok); }
.ft-reschok span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-reschhist { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--ft-l2); font-size: 12px; }
.ft-reschhist i { width: 9px; height: 9px; border-radius: 50%; background: var(--ft-ink); flex-shrink: 0; }
.ft-reschhist b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-reschhist span { font-size: 11px; color: var(--ft-ink-soft); }

/* ---------- "Hay más componentes" ---------- */
.ft-more { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 700px) { .ft-more { grid-template-columns: 1fr 1fr; } }
.ft-moregroup { display: flex; flex-direction: column; gap: 6px; }
.ft-moregroup .ft-eyebrow { margin-bottom: 2px; }
.ft-morechip { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; border: 1px solid var(--ft-line); border-radius: 9px; background: var(--ft-surface); }
.ft-morechip b { font-size: 12.5px; font-weight: 600; color: var(--ft-ink); }
.ft-morechip i { font-style: normal; font-size: 11px; color: var(--ft-ink-soft); }
.ft-moresoon { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--ft-line); background: var(--ft-l2); }
.ft-moresoon b { font-size: 12.5px; font-weight: 600; }
.ft-moresoon span { font-size: 11.5px; line-height: 1.5; color: var(--ft-ink-soft); }


/* ---------- Dictado · subsecciones nuevas ---------- */
.ft-grab, .ft-bitwrap, .ft-safe { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 780px) { .ft-grab, .ft-bitwrap { grid-template-columns: 1.15fr 1fr; } }
.ft-grabnote { margin: 12px 0 0; font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-grabmirror { display: flex; flex-direction: column; gap: 9px; }
.ft-floatpill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 8px 7px 12px; border-radius: 999px; background: var(--ft-ink); color: #fff; font-size: 12px; box-shadow: 0 16px 34px -22px rgba(1, 3, 38, 0.7); }
.ft-floatpill b { font-weight: 600; }
.ft-floatpill code { font-family: var(--ft-mono); opacity: 0.85; }
.ft-floatpill__b { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 11px; font-weight: 600; }
.ft-floatpill__b.is-hot { background: #fff; color: var(--ft-ink); }
.ft-grabmob { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--ft-line); background: var(--ft-surface); font-size: 12px; }
.ft-grabmob b { font-weight: 600; } .ft-grabmob code { margin-left: auto; font-family: var(--ft-mono); color: var(--ft-ink-soft); }
.ft-grabmob .ft-mic { color: var(--ft-danger); }

.ft-dicolder { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 8px; background: var(--ft-l2); font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-dicolder i { font-style: normal; }
.ft-writecard { border: 1px solid var(--ft-line); border-radius: 12px; background: var(--ft-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ft-textarea--lg { min-height: 96px; }
.ft-writefoot { display: flex; justify-content: flex-end; gap: 8px; }

/* Procedencia */
.ft-proclegend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ft-proclegend small { font-size: 10.5px; color: var(--ft-ink-soft); margin-right: 2px; }
.ft-proctag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; }
.ft-proctag.is-tex { background: rgba(31, 138, 91, 0.13); color: var(--ft-ok); }
.ft-proctag.is-int { background: rgba(31, 95, 208, 0.13); color: #1F5FD0; }
.ft-proctag.is-dud { background: rgba(181, 115, 26, 0.16); color: var(--ft-warn); }
.ft-dicpills span em.ft-proctag { font-style: normal; }

/* Antecedentes propuestos */
.ft-antec { margin-top: 10px; border: 1px dashed var(--ft-line); border-radius: 10px; background: var(--ft-surface); padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; }
.ft-antec__head b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-antec__head span { font-size: 10.5px; line-height: 1.45; color: var(--ft-ink-soft); }
.ft-antec__row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.ft-antec__row i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--ft-line); display: grid; place-items: center; font-style: normal; font-size: 9px; color: transparent; flex-shrink: 0; }
.ft-antec__row i.is-on { background: var(--ft-ink); border-color: var(--ft-ink); color: #fff; }
.ft-antec__row b { font-weight: 600; flex: 1; }
.ft-antec__btn { align-self: flex-start; }

/* Nada se pierde */
@media (min-width: 700px) { .ft-safe { grid-template-columns: 1fr 1fr; } }
.ft-safecard { border: 1px solid var(--ft-line); border-radius: 12px; background: var(--ft-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.ft-safecard.is-amber { border-color: rgba(181, 115, 26, 0.45); background: rgba(181, 115, 26, 0.06); }
.ft-safebody { display: flex; gap: 10px; }
.ft-safebody i { width: 20px; height: 20px; border-radius: 50%; background: rgba(181, 115, 26, 0.2); color: var(--ft-warn); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.ft-safebody b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-safebody span { font-size: 11.5px; line-height: 1.5; color: var(--ft-ink-soft); }
.ft-safefoot { display: flex; justify-content: flex-end; gap: 8px; }
.ft-safequote { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--ft-l2); font-family: var(--ft-head); font-size: 17px; font-weight: 500; color: var(--ft-ink); }
.ft-safequote em { font-family: var(--ft-body); font-style: normal; font-size: 11px; color: var(--ft-ink-mute); }


/* ---------- Calidad y norma · subsecciones ---------- */
.ft-crit { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ft-line); font-size: 12.5px; }
.ft-crit > div { flex: 1; min-width: 0; }
.ft-crit b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-crit span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-crit em { font-style: normal; font-size: 10.5px; margin-left: 8px; color: var(--ft-ink); text-decoration: underline; text-underline-offset: 3px; }
.ft-crit code { font-family: var(--ft-mono); font-size: 12px; font-weight: 600; color: var(--ft-ok); }
.ft-crit.is-part code { color: var(--ft-warn); }
.ft-critfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ft-line); font-size: 11.5px; font-weight: 600; }
.ft-critfoot i { font-style: normal; color: var(--ft-ink-mute); }
.ft-critfoot span { font-weight: 400; color: var(--ft-ink-soft); }

.ft-signed { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(31, 138, 91, 0.07); border: 1px solid rgba(31, 138, 91, 0.25); margin-bottom: 9px; }
.ft-signed i { width: 22px; height: 22px; border-radius: 50%; background: var(--ft-ok); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 11px; flex-shrink: 0; }
.ft-signed > div { flex: 1; min-width: 0; }
.ft-signed b { display: block; font-size: 13px; font-weight: 600; }
.ft-signed span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-lockrow { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 9px; background: var(--ft-l2); font-size: 11.5px; color: var(--ft-ink-soft); margin-bottom: 10px; }
.ft-lockrow i { font-style: normal; }
.ft-addendum { border: 1px dashed var(--ft-line); border-radius: 10px; padding: 10px 12px; background: var(--ft-surface); }
.ft-addendum__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.ft-addendum__head b { font-size: 12.5px; font-weight: 600; }
.ft-addendum__head span { font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-addendum p { margin: 0; font-size: 12px; line-height: 1.5; }

.ft-audit { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 820px) { .ft-audit { grid-template-columns: 1.15fr 1fr; } }
.ft-auditside { display: flex; flex-direction: column; gap: 10px; }
.ft-auditcard { border: 1px solid var(--ft-line); border-radius: 12px; background: var(--ft-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.ft-auditcard > b { font-size: 13.5px; font-weight: 600; }
.ft-auditbars { display: flex; flex-direction: column; gap: 7px; }
.ft-auditbars > div { display: grid; grid-template-columns: 1fr 78px auto; gap: 9px; align-items: center; font-size: 11.5px; }
.ft-auditbars span { color: var(--ft-ink-soft); }
.ft-auditbars code { font-family: var(--ft-mono); font-size: 11px; }
.ft-auditbars .ft-bar { width: 100%; }
.ft-auditcard .ft-btn { align-self: flex-start; }
.ft-auditnote { padding: 11px 13px; border-radius: 10px; background: var(--ft-l2); display: flex; flex-direction: column; gap: 3px; }
.ft-auditnote b { font-size: 12.5px; font-weight: 600; }
.ft-auditnote span { font-size: 11.5px; line-height: 1.5; color: var(--ft-ink-soft); }


/* ---------- Recetas · WhatsApp y configuración con IA ---------- */
.ft-wa2 { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 780px) { .ft-wa2 { grid-template-columns: 1.05fr 1fr; } }
.ft-rxmeds { display: flex; flex-direction: column; }
.ft-rxmeds > div { padding: 8px 0; border-top: 1px solid var(--ft-line); }
.ft-rxmeds b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-rxmeds span { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-rxacts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ft-line); }
.ft-wacol { display: flex; flex-direction: column; gap: 9px; }
.ft-pdfchip { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--ft-line); border-radius: 10px; background: #fff; }
.ft-pdfchip i { width: 30px; height: 34px; border-radius: 4px; background: var(--ft-l2); color: var(--ft-danger); display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.ft-pdfchip > div { flex: 1; min-width: 0; }
.ft-pdfchip b { display: block; font-size: 12px; font-weight: 600; }
.ft-pdfchip span { font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-pdfchip em { font-style: normal; font-size: 11px; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ft-qrver { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; background: var(--ft-l2); }
.ft-qrver .ft-qr { width: 46px; height: 46px; flex-shrink: 0; }
.ft-qrver b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-qrver span { font-size: 11.5px; line-height: 1.5; color: var(--ft-ink-soft); }

.ft-cfg { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 820px) { .ft-cfg { grid-template-columns: 1.1fr 1fr; } }
.ft-cfgleft { display: flex; flex-direction: column; gap: 8px; }
.ft-cfgstep { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); }
.ft-cfgstep i { width: 22px; height: 22px; border-radius: 50%; background: var(--ft-l2); display: grid; place-items: center; font-style: normal; font-family: var(--ft-mono); font-size: 10px; flex-shrink: 0; }
.ft-cfgstep > div { flex: 1; min-width: 0; }
.ft-cfgstep small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ft-ink-soft); }
.ft-cfgstep b { font-size: 12.5px; font-weight: 600; }
.ft-cfgstep em { font-style: normal; font-size: 11px; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ft-cfgstep.is-open { border-color: var(--ft-ink); }
.ft-cfgstep.is-open i { background: var(--ft-ink); color: #fff; }
.ft-cfgai { display: flex; align-items: center; gap: 8px; }
.ft-cfgai em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ft-ink-mute); text-decoration: underline; text-underline-offset: 3px; }
.ft-cfgres { border: 1px dashed var(--ft-line); border-radius: 10px; padding: 10px 12px; background: var(--ft-surface); }
.ft-cfgres > b { display: block; font-size: 12px; font-weight: 600; margin-bottom: 7px; color: var(--ft-ink-soft); }
.ft-cfgrow { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--ft-line); font-size: 11.5px; opacity: 0; }
.ft-stage__panel.is-on .ft-cfgrow { animation: ftIn 0.45s var(--ft-ease) calc(0.5s + var(--d) * 0.22s) forwards; }
.ft-cfgrow i { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.ft-cfgrow i.is-ok { background: rgba(31, 138, 91, 0.13); color: var(--ft-ok); }
.ft-cfgrow i.is-warn { background: rgba(181, 115, 26, 0.16); color: var(--ft-warn); }
.ft-cfgrow span { flex: 1; }
.ft-cfgrow code, .ft-cfgrow em { font-style: normal; font-size: 10.5px; color: var(--ft-ink-mute); }
.ft-cfgtest { display: flex; align-items: center; gap: 10px; }
.ft-cfgtest small { font-size: 10.5px; color: var(--ft-ink-mute); }

.ft-cfgprev { display: flex; flex-direction: column; gap: 8px; }
.ft-sheet { position: relative; aspect-ratio: 216 / 279; background: #fff; border: 1px solid var(--ft-line); border-radius: 4px; padding: 14px 16px; display: flex; flex-direction: column; box-shadow: 0 24px 50px -40px rgba(1, 3, 38, 0.5); overflow: hidden; }
.ft-sheet__lh { position: relative; padding-bottom: 8px; border-bottom: 1px solid var(--ft-line); opacity: 0.45; }
.ft-sheet__lh b { display: block; font-family: var(--ft-head); font-size: 13px; }
.ft-sheet__lh span { display: block; font-size: 9.5px; color: var(--ft-ink-soft); }
.ft-sheet__lh em, .ft-sheet__foot em { position: absolute; right: 0; top: 0; font-style: normal; font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-mute); }
.ft-sheet__safe { position: relative; flex: 1; margin: 10px 0; border: 1.5px dashed rgba(6, 109, 240, 0.6); border-radius: 4px; background: rgba(6, 109, 240, 0.04); padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.ft-sheet__tag { position: absolute; top: -8px; left: 10px; background: #fff; padding: 0 5px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ft-accent); }
.ft-sheet__pt { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; }
.ft-sheet__ln { height: 6px; border-radius: 3px; background: var(--ft-l2); }
.ft-sheet__ln.short { width: 62%; }
.ft-sheet__foot { position: relative; padding-top: 8px; border-top: 1px solid var(--ft-line); font-size: 9.5px; color: var(--ft-ink-soft); opacity: 0.45; }
.ft-sheet__scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--ft-accent); box-shadow: 0 0 12px rgba(6, 109, 240, 0.8); opacity: 0; }
.ft-stage__panel.is-on .ft-sheet__scan { animation: ftSheetScan 1.6s ease-in-out 0.2s; }
@keyframes ftSheetScan { 0% { opacity: 0; top: 2%; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; top: 96%; } }


/* ---------- Estudios · subsecciones ---------- */
.ft-catnav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ft-line); }
.ft-catnav span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ft-line); background: var(--ft-surface); font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-catnav span.is-on { background: var(--ft-ink); border-color: var(--ft-ink); color: #fff; font-weight: 600; }
.ft-catnav em { font-style: normal; font-family: var(--ft-mono); font-size: 10px; opacity: 0.7; }
.ft-eyecols { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .ft-eyecols { grid-template-columns: repeat(3, 1fr); } }
.ft-eyecol { display: flex; flex-direction: column; gap: 8px; }
.ft-eyecol > small { font-size: 11px; font-weight: 700; color: var(--ft-ink-soft); }
.ft-studycard { border: 1px solid var(--ft-line); border-radius: 10px; background: #fff; padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; }
.ft-studycard__top { display: flex; align-items: center; gap: 7px; }
.ft-studycard__top b { font-size: 12px; font-weight: 600; flex: 1; }
.ft-studycard__top .ft-tag { font-size: 9.5px; }
.ft-studycard__meta { font-size: 10px; color: var(--ft-ink-soft); }
.ft-studycard__thumb { height: 54px; border-radius: 6px; background: #0B0F1A; position: relative; overflow: hidden; }
.ft-studycard__thumb.is-topo { background: radial-gradient(circle at 50% 50%, #E24B3B 0 14%, #E8B04A 15% 32%, #7FC46B 33% 52%, #4FA3D9 53% 74%, #2A3B7A 75% 100%); }
.ft-studycard__thumb.is-oct { background: linear-gradient(180deg, #0B0F1A 0 42%, #D9633A 42% 50%, #E8B04A 50% 58%, #0B0F1A 58% 100%); }
.ft-studycard__thumb.is-cv { background: #fff; box-shadow: inset 0 0 0 1px var(--ft-line); }
.ft-studycard__thumb.is-cv::after { content: ''; position: absolute; left: 50%; top: 50%; width: 60%; height: 76%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 50%, #15171D 0 22%, #8A94A6 23% 48%, #DCDFE7 49% 100%); }
.ft-studycard__thumb.is-grid { background: repeating-linear-gradient(0deg, #D9C7B8 0 16px, #C9B4A2 16px 18px), repeating-linear-gradient(90deg, #D9C7B8 0 16px, #C9B4A2 16px 18px); }
.ft-studycard__thumb.is-pdf { background: var(--ft-l2); color: var(--ft-danger); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ft-studycard__foot { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--ft-line); }
.ft-studycard__foot .ft-tag { font-size: 9.5px; }
.ft-studycard__foot em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--ft-ink); text-decoration: underline; text-underline-offset: 3px; }

.ft-upl { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 760px) { .ft-upl { grid-template-columns: 1fr 1fr; } }
.ft-uplleft { display: flex; flex-direction: column; gap: 8px; }
.ft-upldrop { border: 1.5px dashed var(--ft-line); border-radius: 12px; padding: 22px 14px; text-align: center; background: var(--ft-surface); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ft-upldrop i { width: 30px; height: 30px; border-radius: 50%; background: var(--ft-l2); display: grid; place-items: center; font-style: normal; font-size: 14px; color: var(--ft-ink-soft); }
.ft-upldrop b { font-size: 12.5px; font-weight: 600; }
.ft-upldrop span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-uplfile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--ft-line); border-radius: 9px; background: #fff; }
.ft-uplfile i { width: 26px; height: 30px; border-radius: 4px; background: var(--ft-l2); color: var(--ft-ink-soft); display: grid; place-items: center; font-style: normal; font-size: 8.5px; font-weight: 700; flex-shrink: 0; }
.ft-uplfile > div { flex: 1; min-width: 0; }
.ft-uplfile b { display: block; font-size: 11.5px; font-weight: 600; }
.ft-uplfile span { font-size: 10px; color: var(--ft-ink-soft); }
.ft-uplai { border: 1px solid var(--ft-line); border-radius: 12px; background: var(--ft-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ft-uplai > b { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.ft-uplai .ft-ai-note { margin-top: 8px; }
.ft-uplfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.ft-src { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .ft-src { grid-template-columns: 1fr 1fr; } }
.ft-srccard { border: 1px solid var(--ft-line); border-radius: 12px; background: var(--ft-surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.ft-srccard__head { display: flex; align-items: center; gap: 10px; }
.ft-srccard__head > div { flex: 1; min-width: 0; }
.ft-srccard__head b { display: block; font-size: 13.5px; font-weight: 600; }
.ft-srccard__head span:not(.ft-tag) { font-size: 11px; color: var(--ft-ink-soft); }
.ft-srcic { width: 38px; height: 38px; border-radius: 9px; background: var(--ft-ink); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ft-srccard .ft-qr { width: 38px; height: 38px; flex-shrink: 0; }
.ft-srccard p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ft-ink-soft); }
.ft-srcflow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.ft-srcflow span { font-size: 10.5px; padding: 4px 9px; border-radius: 999px; background: var(--ft-l2); }
.ft-srcflow i { font-style: normal; color: var(--ft-ink-mute); }

/* ---------- Cronómetro de dilatación ---------- */
.ft-dil { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 780px) { .ft-dil { grid-template-columns: 1.1fr 1fr; } }
.ft-dilchip { margin-left: auto; }
.ft-dilstart { border: 1px solid var(--ft-line); border-radius: 12px; background: var(--ft-surface); padding: 13px 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ft-dilstart > b { font-size: 13.5px; font-weight: 600; }
.ft-dilstart > span:not(.ft-btn) { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-dilcol { display: flex; flex-direction: column; gap: 9px; }
.ft-dilpill { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 999px; background: var(--ft-ink); color: #fff; box-shadow: 0 16px 34px -22px rgba(1, 3, 38, 0.7); }
.ft-dilpill i { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ft-dilpill > div { flex: 1; min-width: 0; }
.ft-dilpill b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-dilpill span { font-size: 10px; opacity: 0.75; }
.ft-dilpill code { font-family: var(--ft-mono); font-size: 13px; font-weight: 600; }
.ft-dilpill em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); white-space: nowrap; }
.ft-dilpill.is-done { background: var(--ft-ok); }
.ft-dilpill.is-done em { background: #fff; color: var(--ft-ok); }
.ft-dilnotif { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(31, 138, 91, 0.08); border: 1px solid rgba(31, 138, 91, 0.25); }
.ft-dilnotif i { width: 20px; height: 20px; border-radius: 50%; background: var(--ft-ok); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 10px; flex-shrink: 0; }
.ft-dilnotif b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ft-ok); }
.ft-dilnotif span { font-size: 11.5px; color: var(--ft-ink-soft); }

/* ---------- Cobros · subsecciones ---------- */
/* Cabecera del drawer de cobro: eyebrow + título + folio apilados */
.ft-cobhead { align-items: flex-start; gap: 10px; }
.ft-cobhead > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ft-cobhead b { font-family: var(--ft-head); font-size: 15px; font-weight: 600; }
.ft-cobhead > div > span { font-family: var(--ft-mono); font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-cobhead i { margin-left: auto; }

/* Grupos de conceptos: "Servicios de la reserva" / "Adicionales" */
.ft-cobgrp { display: flex; flex-direction: column; gap: 6px; }
.ft-cobcard { border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); overflow: hidden; }
.ft-cobrow { display: flex; align-items: center; gap: 9px; padding: 9px 11px; font-size: 12.5px; border-top: 1px solid var(--ft-line); }
.ft-cobrow:first-child { border-top: 0; }
.ft-cobrow > i { width: 22px; height: 22px; border-radius: 50%; background: var(--ft-l2); flex-shrink: 0; }
.ft-cobrow > span { flex: 1; min-width: 0; }
.ft-cobrow em { font-style: normal; color: var(--ft-ink-mute); font-size: 11px; }
.ft-cobrow code { font-weight: 600; font-size: 12.5px; }
.ft-cobrow > b { font-weight: 400; color: var(--ft-ink-mute); font-size: 13px; }
.ft-cobrow.is-new { background: color-mix(in srgb, var(--ft-ok) 8%, var(--ft-surface)); }

/* Enlace de apoyo dentro del drawer (agregar servicio / agregar nota) */
.ft-cobadd { align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }

/* Buscador abierto con resultados (servicios + insumos) */
.ft-cobsearch { border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-l2); padding: 10px; }
.ft-cobsearch .ft-search { margin-bottom: 8px; background: var(--ft-surface); border: 1px solid var(--ft-line); }
.ft-cobres { display: flex; flex-direction: column; background: var(--ft-surface); border: 1px solid var(--ft-line); border-radius: 8px; overflow: hidden; }
.ft-cobres > div { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-top: 1px solid var(--ft-line); font-size: 12px; }
.ft-cobres > div:first-child { border-top: 0; }
.ft-cobres > div > i { width: 24px; height: 24px; border-radius: 50%; background: var(--ft-l2); flex-shrink: 0; }
.ft-cobres > div > div { flex: 1; min-width: 0; }
.ft-cobres b { display: block; font-weight: 600; font-size: 12.5px; }
.ft-cobres span { font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-cobres code { font-weight: 600; font-size: 12px; }
.ft-cobres em { font-style: normal; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--ft-line); display: grid; place-items: center; font-size: 13px; color: var(--ft-ink-soft); flex-shrink: 0; }

/* Pie del drawer de cobro: línea de total encima del botón */
.ft-cobfoot { flex-direction: column; align-items: stretch; gap: 9px; }
.ft-cobfoot > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ft-cobfoot > div span { font-size: 12px; color: var(--ft-ink-soft); }
.ft-cobfoot > div code { font-family: var(--ft-mono); font-size: 17px; font-weight: 600; }
.ft-cobfoot > div code.is-ok { color: var(--ft-ok); }
.ft-cobfoot .ft-btn { justify-content: center; }

/* Paso 2: método de pago y campo "Paciente paga con" */
.ft-cobmeth { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ft-cobmeth span { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--ft-line); background: var(--ft-surface); font-size: 11.5px; font-weight: 500; text-align: center; }
.ft-cobmeth span.is-on { background: var(--ft-ink); border-color: var(--ft-ink); color: #fff; font-weight: 600; }
.ft-cobpay { display: flex; align-items: stretch; border: 1px solid var(--ft-line); border-radius: 8px; overflow: hidden; background: var(--ft-input); font-size: 12.5px; }
.ft-cobpay em { font-style: normal; padding: 7px 9px; background: var(--ft-l2); color: var(--ft-ink-soft); font-weight: 600; }
.ft-cobpay span { flex: 1; padding: 7px 9px; font-family: var(--ft-mono); text-align: right; }
.ft-cobpay i { font-style: normal; padding: 7px 11px; border-left: 1px solid var(--ft-line); background: var(--ft-surface); font-size: 11.5px; font-weight: 600; }

/* Detalle de pago: cita + desglose en dos paneles */
.ft-cobsplit { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 700px) { .ft-cobsplit { grid-template-columns: 1fr 1fr; } }
.ft-cobpanel { border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); padding: 12px 14px; }
.ft-cobpanel .ft-eyebrow { margin-bottom: 4px; }
.ft-cobpanel .ft-rows .ft-row:first-child { border-top: 0; }
.ft-cobpanel .ft-row b.is-ok { color: var(--ft-ok); }
.ft-cobsaldo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: var(--ft-l2); }
.ft-cobsaldo span { font-size: 12.5px; font-weight: 600; }
.ft-cobsaldo code { font-family: var(--ft-mono); font-size: 20px; font-weight: 600; }
.ft-cobtitle { margin-bottom: 6px; }

/* Fila de dos indicadores (libro de cobros) */
.ft-kpis--2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .ft-kpis--2 { grid-template-columns: repeat(2, minmax(0, 220px)); } }

/* ---------- Óptica · subsecciones ---------- */
/* Bloque etiquetado dentro del componente de la nota (orden de lentes) */
.ft-optsec { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--ft-line); }
.ft-optsec:first-of-type { border-top: 0; }
.ft-optsec .ft-eyebrow.mt-2 { margin-top: 8px; }
.ft-optlabel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ft-optlabel .ft-eyebrow { margin-right: 2px; }
.ft-optlabel em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ft-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ft-chips--flat { display: flex; flex-wrap: wrap; gap: 5px; }
.ft-chips--flat .ft-opt.is-on { background: var(--ft-ink); border-color: var(--ft-ink); color: #fff; font-weight: 600; }
.ft-opt--lock { color: var(--ft-ink-soft); border-style: dashed; }

/* Fila de resultado elegible (mica, armazón, previsualización de importación) */
.ft-optpick { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--ft-line); border-radius: 9px; background: var(--ft-surface); margin-top: 6px; }
.ft-optpick > div:first-child { flex: 1; min-width: 0; }
.ft-optpick b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-optpick span { display: block; font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-optpick em { display: block; font-style: normal; font-size: 10.5px; color: var(--ft-ok); margin-top: 2px; }
.ft-optpick code { font-family: var(--ft-mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ft-optpick__r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ft-optpick.is-on { border-color: var(--ft-ink); box-shadow: 0 6px 18px -14px rgba(1, 3, 38, 0.5); }

/* Pie del componente: total + acciones */
.ft-optfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 11px; border-top: 1px solid var(--ft-line); }
.ft-optfoot__tot { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.ft-optfoot__tot span { font-size: 12px; color: var(--ft-ink-soft); }
.ft-optfoot__tot code { font-family: var(--ft-mono); font-size: 19px; font-weight: 600; }
.ft-optfoot__tot.mt-3 { margin-top: 12px; }

/* Cotizador guiado: tarjetas de sección y rejillas */
.ft-optcard { border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); padding: 12px 13px; margin-bottom: 10px; }
.ft-optcard:last-child { margin-bottom: 0; }
.ft-optcard__head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--ft-line); }
.ft-optcard__head b { font-size: 12.5px; font-weight: 600; }
.ft-optcard__head .ft-tag, .ft-optcard__head .ft-hint, .ft-optcard__head .ft-select { margin-left: auto; }
.ft-optcard .ft-search--full { margin-bottom: 4px; }
.ft-optcard .ft-eyerow code { font-size: 12px; }
.ft-optcols { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
@media (min-width: 760px) { .ft-optcols { grid-template-columns: 1fr 1fr; } }
.ft-optcard .ft-optcols { margin-bottom: 0; }
.ft-drow3 { display: grid; grid-template-columns: 1fr; gap: 9px; }
@media (min-width: 560px) { .ft-drow3 { grid-template-columns: repeat(3, 1fr); } }
.ft-drow.mt-2, .ft-chips--flat.mt-2, .ft-field.mt-2, .ft-reqhead.mt-3 { margin-top: 9px; }
.ft-optcard .ft-rows .ft-row:first-child { border-top: 0; }
.ft-optcard .ft-row b.is-ok { color: var(--ft-ok); }
.ft-optcard .ft-row em { font-style: normal; color: var(--ft-ink-mute); }

/* Barra vista/pista del listado de órdenes */
.ft-optbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* Tablero Kanban de producción */
.ft-kb { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ft-kbcol { flex: 0 0 168px; border: 1px solid var(--ft-line); border-radius: 9px; background: var(--ft-l2); padding: 8px; }
.ft-kbhead { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); padding-bottom: 7px; border-bottom: 1px solid var(--ft-line); margin-bottom: 8px; }
.ft-kbhead i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ft-ink-mute)); flex-shrink: 0; }
.ft-kbhead em { margin-left: auto; font-style: normal; font-family: var(--ft-mono); font-size: 11px; color: var(--ft-ink-mute); }
.ft-kbcard { background: var(--ft-surface); border: 1px solid var(--ft-line); border-radius: 8px; padding: 7px 8px; margin-bottom: 6px; }
.ft-kbcard small { display: block; font-family: var(--ft-mono); font-size: 9.5px; color: var(--ft-ink-mute); }
.ft-kbcard b { display: block; font-size: 11.5px; font-weight: 600; margin: 1px 0; }
.ft-kbcard > span { display: block; font-size: 10px; color: var(--ft-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-kbcard > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; }
.ft-kbcard code { font-family: var(--ft-mono); font-size: 11.5px; font-weight: 600; }
.ft-kbcard i.ft-tag { font-style: normal; font-size: 9px; }
.ft-kbcard.is-drag { border-color: var(--ft-ink); box-shadow: 0 14px 28px -18px rgba(1, 3, 38, 0.55); transform: rotate(-1.2deg); }
.ft-kbcard.is-off { opacity: 0.6; }

/* Abonos: fila del formulario */
.ft-optpay { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ft-line); }
@media (min-width: 640px) { .ft-optpay { grid-template-columns: 1fr 1fr 1.4fr auto; } }
.ft-kpis--3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
@media (min-width: 640px) { .ft-kpis--3 { grid-template-columns: repeat(3, 1fr); } }

/* Importación: hoja del laboratorio y previsualización */
.ft-optxls { border: 1px solid var(--ft-line); border-radius: 9px; overflow: hidden; background: var(--ft-surface); }
.ft-optxls__tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 7px 8px; background: var(--ft-l2); border-bottom: 1px solid var(--ft-line); }
.ft-optxls__tabs span { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px; background: var(--ft-surface); border: 1px solid var(--ft-line); color: var(--ft-ink-soft); }
.ft-optxls__tabs span.is-on { background: var(--ft-ink); border-color: var(--ft-ink); color: #fff; }
.ft-optxls__tabs span.is-off { opacity: 0.45; }
.ft-optxls .ft-table { font-size: 11.5px; }
.ft-optxls__band td { background: var(--ft-l2); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ft-ink-soft); }
.ft-optxls__foot { display: block; padding: 7px 10px; font-size: 10.5px; color: var(--ft-ink-mute); border-top: 1px solid var(--ft-line); }
.ft-optprev { border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); padding: 11px 12px; }
.ft-optprev .ft-optpick:first-of-type { margin-top: 8px; }
.ft-optform { border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-l2); padding: 11px 13px; }
.ft-optform > b { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.ft-optform__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12px; }
.ft-optform__row span { color: var(--ft-ink-soft); }
.ft-optform__row code { font-family: var(--ft-mono); font-size: 12px; }
.ft-optform__row.is-total { border-top: 1px solid var(--ft-line); margin-top: 5px; padding-top: 8px; }
.ft-optform__row.is-total span { color: var(--ft-ink); font-weight: 600; }
.ft-optform__row.is-total code { font-size: 16px; font-weight: 600; }

/* Configuración: ejemplo de la fórmula */
.ft-optex { padding: 9px 11px; border-radius: 9px; background: var(--ft-l2); font-size: 11.5px; color: var(--ft-ink-soft); margin-top: 9px; }
.ft-optex span { font-weight: 600; color: var(--ft-ink); }
.ft-optex code { font-family: var(--ft-mono); font-size: 11.5px; color: var(--ft-ink); }
.ft-optex b { font-family: var(--ft-mono); font-size: 13px; color: var(--ft-ink); }
.ft-wacol > .ft-app--card { margin-bottom: 0; }
/* Separaciones puntuales: esta pagina no carga las utilidades de Bootstrap, asi
   que los mt-2 / mt-3 del marcado necesitan su propia regla. */
.ft-hint.mt-2, .ft-eyebrow.mt-2, .ft-cobmeth.mt-2, .ft-eqsw.mt-2 { margin-top: 9px; }
.ft-optcard .ft-field label.req::after { content: ' *'; color: var(--ft-danger); }

/* ---------- Inventario · subsecciones ---------- */
/* Portada de categorías (mismo aire que el hub de apps) */
.ft-invhead { margin-bottom: 12px; }
.ft-invhead b { display: block; font-family: var(--ft-head); font-size: 19px; font-weight: 600; margin-top: 2px; }
.ft-invcats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 620px) { .ft-invcats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ft-invcats { grid-template-columns: repeat(4, 1fr); } }
.ft-invcat { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 11px; border: 1px solid var(--ft-line); border-radius: 11px; background: var(--ft-surface); }
.ft-invcat i { width: 26px; height: 26px; border-radius: 8px; background: var(--ft-l2); margin-bottom: 6px; font-style: normal; display: grid; place-items: center; font-size: 13px; color: var(--ft-ink-soft); }
.ft-invcat b { font-size: 12px; font-weight: 600; line-height: 1.3; }
.ft-invcat span { font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-invcat.is-all i { background: var(--ft-ink); }
.ft-invcat--new { border-style: dashed; align-items: flex-start; justify-content: center; color: var(--ft-ink-soft); }

/* Lista de presets agrupada */
.ft-invpre { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow: hidden; }
.ft-invpre .ft-eyebrow { margin-top: 4px; }
.ft-invpre__row { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border: 1px solid var(--ft-line); border-radius: 8px; background: var(--ft-surface); }
.ft-invpre__row b { font-size: 12px; font-weight: 600; }
.ft-invpre__row span { font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-invpre__row.is-on { border-color: var(--ft-ink); box-shadow: 0 6px 18px -14px rgba(1, 3, 38, 0.5); }

/* Frasco → dosis */
.ft-doses { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 16px; }
.ft-doses__vial { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ft-doses__vial i { width: 26px; height: 40px; border-radius: 5px 5px 8px 8px; background: var(--ft-ink); display: block; }
/* Los seis puntos van en fila: bloque con hijos inline, no columna flex. */
.ft-doses__set { display: block; text-align: center; }
.ft-doses__set i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ft-ink); margin: 0 3px 7px 0; vertical-align: middle; }
.ft-doses__set span, .ft-doses__vial span { display: block; font-size: 10.5px; font-weight: 600; color: var(--ft-ink-soft); }
.ft-doses__arrow { font-size: 17px; color: var(--ft-ink-mute); }

/* Tipos de movimiento: rejilla de 4 sobre el patrón de metodos de pago */
.ft-cobmeth--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .ft-cobmeth--4 { grid-template-columns: repeat(4, 1fr); } }

/* Nota aclaratoria dentro de un formulario */
.ft-invalt { padding: 10px 12px; border-radius: 9px; background: var(--ft-l2); display: flex; flex-direction: column; gap: 3px; }
.ft-invalt b { font-size: 12px; font-weight: 600; }
.ft-invalt span { font-size: 11px; line-height: 1.5; color: var(--ft-ink-soft); }

/* Celdas del listado con desglose bajo el dato */
.ft-app .ft-table td small { display: block; font-size: 10px; color: var(--ft-ink-soft); margin-top: 2px; }
.ft-table td .ft-tag { margin-left: 4px; }
.ft-topbar > .ft-tag { flex-shrink: 0; }
.ft-btn em.ft-tag { font-style: normal; margin-left: 5px; font-size: 9.5px; }

/* ---------- Equipo y espacios · subsecciones ---------- */
/* Jerarquía Sede → Espacio → Persona */
.ft-eqtree { border: 1px solid var(--ft-line); border-radius: 11px; background: var(--ft-surface); padding: 13px 14px; }
.ft-eqtree__lvl b { display: block; font-size: 13px; font-weight: 600; margin-top: 1px; }
.ft-eqtree__lvl > span { display: block; font-size: 10.5px; color: var(--ft-ink-soft); margin-top: 2px; }
.ft-eqtree__lvl .ft-chips { margin-top: 5px; }
.ft-eqtree__bar { width: 1px; height: 16px; background: var(--ft-line); margin: 7px 0 7px 5px; }

/* Alta de espacio: paso numerado y bloque de identidad */
.ft-eqstep { width: 19px; height: 19px; border-radius: 50%; background: var(--ft-ink); color: #fff; font-family: var(--ft-mono); font-size: 10px; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; }
.ft-optcard__head .ft-eqstep + b { margin-left: 1px; }
.ft-eqid { display: flex; align-items: flex-start; gap: 13px; }
.ft-eqid__ph { width: 46px; height: 46px; border-radius: 50%; background: var(--ft-l2); color: var(--ft-ink-soft); font-weight: 600; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.ft-eqid__f { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.ft-eqmini { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ft-eqmini em { font-style: normal; font-size: 10.5px; color: var(--ft-ink-soft); }

/* Selector "Personal que atiende" desplegado */
.ft-eqpick { border: 1px solid var(--ft-line); border-radius: 9px; overflow: hidden; margin-bottom: 10px; }
.ft-eqpick__toggle { padding: 7px 10px; background: var(--ft-input); border-bottom: 1px solid var(--ft-line); font-size: 12.5px; font-weight: 600; }
.ft-eqpick__menu { background: var(--ft-surface); padding: 5px; }
.ft-eqpick__menu label { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.ft-eqpick__menu label i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--ft-line); background: var(--ft-surface); flex-shrink: 0; }
.ft-eqpick__menu label.is-on { background: var(--ft-l2); font-weight: 600; }
.ft-eqpick__menu label.is-on i { background: var(--ft-ink); border-color: var(--ft-ink); }
.ft-eqpick__sep { height: 1px; background: var(--ft-line); margin: 4px 6px; }

/* Interruptor de tabla (horarios) */
.ft-sw { display: inline-block; width: 26px; height: 15px; border-radius: 999px; background: var(--ft-l2); border: 1px solid var(--ft-line); position: relative; vertical-align: middle; }
.ft-sw::after { content: ''; position: absolute; top: 1px; left: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ft-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ft-sw.is-on { background: var(--ft-ink); border-color: var(--ft-ink); }
.ft-sw.is-on::after { left: auto; right: 1px; }
.ft-sw.is-lock { opacity: 0.55; }
.ft-table tr.is-off td { opacity: 0.5; }

/* Sugerencia de horarios de la cuenta */
.ft-eqsug { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; background: var(--ft-l2); margin-bottom: 10px; }
.ft-eqsug > i { width: 20px; height: 20px; border-radius: 50%; background: var(--ft-surface); border: 1px solid var(--ft-line); flex-shrink: 0; }
.ft-eqsug > div { flex: 1; min-width: 0; }
.ft-eqsug b { display: block; font-size: 12px; font-weight: 600; }
.ft-eqsug span { font-size: 10.5px; color: var(--ft-ink-soft); }

/* Intersección espacio ∩ persona */
.ft-eqinter { border: 1px solid var(--ft-line); border-radius: 11px; background: var(--ft-surface); padding: 13px 14px; }
.ft-eqinter__row { display: grid; grid-template-columns: 92px 1fr; gap: 4px 10px; align-items: center; margin-bottom: 9px; }
.ft-eqinter__row > span { grid-column: 2; font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-eqinter__bar { position: relative; height: 13px; border-radius: 4px; background: var(--ft-l2); overflow: hidden; }
.ft-eqinter__bar i { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--b); background: var(--ft-ink-mute); border-radius: 3px; }
.ft-eqinter__row.is-res .ft-eqinter__bar i { background: var(--ft-ink); }
.ft-eqinter__row.is-res .ft-eyebrow { color: var(--ft-ink); }
.ft-eqinter__scale { display: flex; justify-content: space-between; font-family: var(--ft-mono); font-size: 9px; color: var(--ft-ink-mute); padding-left: 102px; }

/* Perfil: espacios + color en la agenda */
.ft-eqcols { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
@media (min-width: 700px) { .ft-eqcols { grid-template-columns: 1.3fr 1fr; } }
.ft-eqsw { display: flex; flex-wrap: wrap; gap: 7px; }
.ft-eqsw i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw, var(--ft-l2)); border: 1px solid var(--ft-line); font-style: normal; display: grid; place-items: center; font-size: 9px; color: var(--ft-ink-soft); }
.ft-eqsw i.is-on { box-shadow: 0 0 0 2px var(--ft-surface), 0 0 0 3.5px var(--ft-ink); }
.ft-eqprev { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; }
.ft-eqevt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--bg); color: var(--fg); }
.ft-eqevt span { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; }
.ft-eqevt em { font-style: normal; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); color: var(--ft-ink); font-size: 8px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }

/* Modal de usuario: pestañas y matriz de permisos */
.ft-eqmodal { max-width: 620px; }
.ft-eqperm { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
@media (min-width: 560px) { .ft-eqperm { grid-template-columns: 145px 1fr; } }
.ft-eqperm__nav { display: flex; flex-direction: column; gap: 2px; }
.ft-eqperm__nav span { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 7px; font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-eqperm__nav span i { width: 5px; height: 5px; border-radius: 50%; background: var(--ft-ink); margin-left: auto; flex-shrink: 0; }
.ft-eqperm__nav span.is-on { background: var(--ft-l2); color: var(--ft-ink); font-weight: 600; }
.ft-eqperm__pane { border: 1px solid var(--ft-line); border-radius: 9px; background: var(--ft-surface); overflow: hidden; }
.ft-eqperm__row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-top: 1px solid var(--ft-line); }
.ft-eqperm__row:first-child { border-top: 0; }
.ft-eqperm__row > div { flex: 1; min-width: 0; }
.ft-eqperm__row b { display: block; font-size: 12px; font-weight: 600; }
.ft-eqperm__row span { font-size: 10.5px; color: var(--ft-ink-soft); }

/* Sedes: banda del mapa */
.ft-eqmap { position: relative; height: 92px; border-radius: 10px; margin-top: 12px; border: 1px solid var(--ft-line); overflow: hidden;
  background:
    repeating-linear-gradient(to right, var(--ft-line) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, var(--ft-line) 0 1px, transparent 1px 28px),
    var(--ft-l2); }
.ft-eqmap i { position: absolute; left: 38%; top: 34%; width: 13px; height: 13px; border-radius: 50% 50% 50% 0; background: var(--ft-ink); transform: rotate(-45deg); }
.ft-eqmap small { position: absolute; left: 10px; bottom: 8px; font-size: 10px; color: var(--ft-ink-soft); background: var(--ft-surface); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--ft-line); }

/* Marca de agua de disponibilidad sobre la agenda */
.ft-unav { position: absolute; left: 0; right: 0; top: calc(var(--t) * 25%); height: calc(var(--h) * 25%);
  background: repeating-linear-gradient(135deg, rgba(21, 23, 29, 0.075) 0 4px, transparent 4px 9px); border-radius: 4px; }
.ft-eqleg { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-eqleg__pat { width: 26px; height: 12px; border-radius: 3px; border: 1px solid var(--ft-line);
  background: repeating-linear-gradient(135deg, rgba(21, 23, 29, 0.12) 0 4px, transparent 4px 9px); }
.ft-eqwarn { font-style: normal; color: var(--ft-ink-mute); font-size: 10.5px; }

/* ---------- Estadísticas · subsecciones ---------- */
/* Barra de mando */
.ft-anbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.ft-anbar .ft-tag { font-size: 10.5px; }
.ft-ancols { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .ft-ancols { grid-template-columns: 1.25fr 1fr; } }
.ft-anpanel { border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); padding: 12px 13px; }
.ft-anfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--ft-line); }
.ft-answitch { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-anexp { padding: 7px 10px; border: 1px solid var(--ft-line); border-radius: 8px; background: var(--ft-surface); margin-top: 5px; }
.ft-anexp b { display: block; font-size: 12px; font-weight: 600; }
.ft-anexp span { font-size: 10.5px; color: var(--ft-ink-soft); }
.ft-anexp.is-hot { background: var(--ft-l2); border-color: var(--ft-ink-mute); }

/* Fila de cifras en texto bajo los KPI grandes */
.ft-anrow { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 11px 13px; border-radius: 10px; background: var(--ft-l2); margin-bottom: 12px; font-size: 12px; color: var(--ft-ink-soft); }
.ft-anrow b { font-family: var(--ft-mono); font-size: 13px; font-weight: 600; color: var(--ft-ink); margin-left: 4px; }
.ft-anrow b.is-bad { color: var(--ft-danger); }
.ft-anrow em { font-style: normal; font-size: 10.5px; color: var(--ft-ink-mute); margin-left: 4px; }

/* Tabla ancha del equipo: se desplaza en X sin romper la card */
.ft-anscroll { overflow-x: auto; }
.ft-anscroll .ft-table { min-width: 780px; }

/* Semana típica: mapa de 7 columnas */
.ft-heat--wk { grid-template-columns: repeat(7, 1fr); }

/* Pirámide por edad y sexo */
.ft-anpyr { display: flex; flex-direction: column; gap: 5px; }
.ft-anpyr > div { display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; gap: 6px; font-size: 10.5px; }
.ft-anpyr > div > span { grid-column: 2; text-align: center; color: var(--ft-ink-soft); font-family: var(--ft-mono); }
.ft-anpyr i { height: 11px; border-radius: 3px; display: block; }
.ft-anpyr i.l { grid-column: 1; justify-self: end; width: var(--w); background: var(--ft-ink-mute); }
.ft-anpyr i.r { grid-column: 3; width: var(--w); background: var(--ft-ink); }
.ft-anpyr__leg { margin-top: 3px; }
.ft-anpyr__leg em { font-style: normal; font-size: 9.5px; color: var(--ft-ink-mute); }
.ft-anpyr__leg em:first-of-type { grid-column: 1; justify-self: end; }
.ft-anpyr__leg em:last-of-type { grid-column: 3; }

/* Tendencias de 90 días: cuatro minigráficas */
.ft-antrends { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .ft-antrends { grid-template-columns: repeat(4, 1fr); } }
.ft-antrends > div { border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); padding: 11px 12px; }
.ft-antrends b { display: block; font-family: var(--ft-head); font-size: 19px; font-weight: 600; margin-top: 7px; font-variant-numeric: tabular-nums; }
.ft-antrends em { font-style: normal; font-size: 10.5px; font-weight: 600; }
.ft-antrends em.is-up { color: var(--ft-ok); }
.ft-antrends em.is-down { color: var(--ft-danger); }
.ft-spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin-top: 8px; }
.ft-spark i { flex: 1; height: 0; border-radius: 2px 2px 0 0; background: var(--ft-ink-mute); }
.is-in .ft-spark i { animation: ftGrow 0.8s var(--ft-ease) calc(0.04s * var(--i, 1)) forwards; }

/* Ajustes finos reutilizados en esta sección */
.ft-charts.mt-2 { margin-top: 10px; }
.ft-kpis em { color: var(--ft-ink-soft); }
.ft-table code.is-bad { color: var(--ft-danger); }
.ft-eyebrow em.ft-tag { font-style: normal; margin-left: 5px; }


/* ===== Nota · 11 Cerrar la consulta (barra de cierre = piso del contenedor) =====
   Réplica del contenedor real de la nota: topbar, lienzo + columna derecha y la
   barra pegada al pie que abarca las dos columnas. Verde = cierre (#1FA45C, el
   mismo del motor); caoba = iniciar. La demo (features.js, ids ftCls*) recorre
   en consulta → revisión NOM-004 → firma → finalizada. */
.ft-cls { position: relative; display: flex; flex-direction: column; font-size: 12px; }
.ft-cls .ft-topbar__save { margin-left: auto; }
.ft-cls .ft-dilchip { margin-left: 0; }
.ft-cls__body { display: grid; grid-template-columns: 1fr; min-height: 250px; }
@media (min-width: 640px) { .ft-cls__body { grid-template-columns: 1.35fr 1fr; } }
.ft-cls__stage { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ft-cls__sec { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); }
.ft-cls__sec i { font-style: normal; font-family: var(--ft-mono); font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--ft-caoba); color: #FBF3F0; }
.ft-cls__sec b { font-size: 12.5px; font-weight: 600; }
.ft-cls__sec em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ft-ink-mute); white-space: nowrap; }
.ft-cls__sec em.is-ok { color: var(--ft-ok); }
.ft-cls__sec em.is-req { color: var(--ft-warn); }
.ft-cls__review { display: flex; flex-direction: column; gap: 9px; }
.ft-cls__review[hidden], .ft-cls__edit[hidden], .ft-cls__col > [hidden], .ft-cls__prints[hidden] { display: none; }
.ft-cls__rvhead { display: flex; align-items: center; gap: 9px; }
.ft-cls__rvhead i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; background: rgba(6, 109, 240, 0.12); color: #066DF0; flex-shrink: 0; }
.ft-cls__rvhead i.is-done { background: rgba(31, 138, 91, 0.14); color: var(--ft-ok); }
.ft-cls__rvhead b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.ft-cls__rvhead span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-cls__doc { display: grid; grid-template-columns: 110px 1fr; gap: 5px 10px; padding: 10px 12px; border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); }
.ft-cls__doc span { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); padding-top: 2px; }
.ft-cls__doc p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ft-ink); }
.ft-cls__doc code { font-family: var(--ft-mono); font-size: 10.5px; font-weight: 700; color: #066DF0; }
.ft-cls__sign { display: grid; grid-template-columns: 1fr 150px; gap: 12px; padding: 10px 12px; border: 1px solid var(--ft-line); border-radius: 10px; background: var(--ft-surface); }
.ft-cls__att { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; line-height: 1.4; color: var(--ft-ink-soft); }
.ft-cls__att i { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--ft-ink-mute); flex-shrink: 0; margin-top: 2px; display: grid; place-items: center; font-style: normal; font-size: 10px; color: #fff; transition: 0.2s; }
.ft-cls__att i.is-on { background: #066DF0; border-color: #066DF0; }
.ft-cls__att i.is-on::after { content: '✓'; }
.ft-cls__att small { display: block; font-size: 10px; color: var(--ft-ink-mute); }
.ft-cls__att b { display: block; font-size: 12px; font-weight: 600; color: var(--ft-ink); margin-bottom: 4px; }
.ft-cls__pad { position: relative; border: 1px solid var(--ft-line); border-radius: 8px; background: #fff; height: 64px; display: flex; align-items: flex-end; justify-content: center; }
.ft-cls__pad small { font-size: 9.5px; color: var(--ft-ink-mute); padding-bottom: 4px; }
.ft-cls__pad svg { position: absolute; inset: 4px 8px 12px; width: calc(100% - 16px); height: calc(100% - 16px); }
.ft-cls__pad path { fill: none; stroke: var(--ft-ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.ft-cls__pad path.is-on { animation: ftClsInk 1.1s var(--ft-ease) forwards; }
@keyframes ftClsInk { to { stroke-dashoffset: 0; } }
.ft-cls__col { border-top: 1px solid var(--ft-line); padding: 10px 12px; background: var(--ft-surface); min-width: 0; }
@media (min-width: 640px) { .ft-cls__col { border-top: 0; border-left: 1px solid var(--ft-line); } }
.ft-cls__colhead { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.ft-cls__colhead code { font-family: var(--ft-mono); font-size: 10px; color: var(--ft-ink-soft); }
.ft-cls__pbar { flex: 1; height: 3px; border-radius: 2px; background: var(--ft-l2); overflow: hidden; }
.ft-cls__pbar i { display: block; height: 100%; width: 71%; background: #066DF0; }
.ft-cls__ni { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 11.5px; color: var(--ft-ink); }
.ft-cls__ni > i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ft-line); display: grid; place-items: center; font-style: normal; font-size: 8.5px; font-weight: 700; flex-shrink: 0; }
.ft-cls__ni.is-ok > i { background: var(--ft-ok); border-color: var(--ft-ok); color: #fff; }
.ft-cls__ni.is-req > i { background: rgba(181, 115, 26, 0.16); border-color: var(--ft-warn); color: var(--ft-warn); }
.ft-cls__ni:not(.is-ok):not(.is-req) { color: var(--ft-ink-soft); }
.ft-cls__ni em { margin-left: auto; font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-warn); }
.ft-cls__ni em.is-rec { color: var(--ft-ink-mute); }
.ft-cls__ni a { margin-left: auto; font-size: 10.5px; font-weight: 600; color: #066DF0; }
.ft-cls__col .ft-eyebrow { margin: 8px 0 3px; }
.ft-cls__nomhead { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 4px; }
.ft-cls__nomhead i { font-style: normal; font-size: 18px; color: var(--ft-warn); line-height: 1; }
.ft-cls__nomhead b { display: block; font-size: 12.5px; font-weight: 600; }
.ft-cls__nomhead span { font-size: 11px; color: var(--ft-ink-soft); }
.ft-cls__score { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; padding-top: 2px; }
.ft-cls__score b { font-family: var(--ft-mono); font-size: 22px; font-weight: 700; color: var(--ft-ok); line-height: 1; }
.ft-cls__score small { font-size: 10px; color: var(--ft-ink-mute); }
.ft-cls__score span { flex-basis: 100%; font-size: 10.5px; color: var(--ft-ink-soft); }
/* La barra: piso de TODO el contenedor (abarca lienzo y columna). */
.ft-cls__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--ft-line); background: var(--ft-surface); box-shadow: 0 -10px 20px -18px rgba(21, 23, 29, 0.35); position: relative; z-index: 2; flex-wrap: wrap; }
.ft-cls__sess { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.ft-cls__sess i { width: 7px; height: 7px; border-radius: 50%; background: #1FA45C; box-shadow: 0 0 0 3px rgba(31, 164, 92, 0.18); }
.ft-cls__bar[data-mode="nom"] .ft-cls__sess i { background: #066DF0; box-shadow: 0 0 0 3px rgba(6, 109, 240, 0.16); }
.ft-cls__bar[data-mode="review"] .ft-cls__sess i { display: none; }
.ft-cls__bar[data-mode="done"] .ft-cls__sess i { box-shadow: none; }
.ft-cls__sess code { font-family: var(--ft-mono); font-weight: 500; color: var(--ft-ink-soft); }
.ft-cls__sess small { font-weight: 500; color: var(--ft-ink-soft); }
.ft-cls__sep { width: 1px; height: 18px; background: var(--ft-line); }
.ft-cls__prog { font-size: 11px; color: var(--ft-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ft-cls__prog b { color: var(--ft-warn); font-weight: 600; }
.ft-cls__prog code { font-family: var(--ft-mono); color: var(--ft-ink); font-weight: 600; }
.ft-cls__acts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.ft-cls__ghost { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 500; color: var(--ft-ink-soft); white-space: nowrap; }
.ft-cls__ghost[hidden] { display: none; }
.ft-btn--fin { background: #1FA45C; border-color: #1FA45C; color: #fff; font-weight: 700; transition: opacity 0.2s, transform 0.15s; }
.ft-btn--fin.is-off { opacity: 0.5; }
.ft-btn--fin.is-press { transform: scale(0.97); }
.ft-cls__prints { display: inline-flex; gap: 6px; }
/* .ft-btn declara display:inline-flex, que le gana al [hidden] de la hoja del
   navegador: sin esto, ocultar un botón de la barra por atributo no surte efecto. */
.ft-cls__bar [hidden] { display: none !important; }
/* Calidad · 01: el pie del checklist se lee como la barra de cierre real. */
.ft-nom__foot--bar { margin: 14px -18px -18px; padding: 10px 18px; border-top: 1px solid var(--ft-line); background: var(--ft-surface); border-radius: 0 0 16px 16px; color: var(--ft-ink); font-weight: 600; }
.ft-nom__foot--bar > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.ft-nom__foot--bar > span:first-child i { width: 7px; height: 7px; border-radius: 50%; background: #066DF0; box-shadow: 0 0 0 3px rgba(6, 109, 240, 0.16); }
.ft-nom__acts { display: inline-flex; align-items: center; gap: 6px; }
.ft-nom .ft-hint.ft-mt { display: block; margin-bottom: 14px; }

/* ---------- Avisos · subsecciones ---------- */

/* Cabecera de la pantalla de Notificaciones (bloque titulo + interruptor) */
.ft-avhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ft-avhead__t { display: flex; align-items: center; gap: 9px; }
.ft-avhead__sym { width: 26px; height: 26px; border-radius: 50%; background: rgba(6, 109, 240, 0.10); flex: 0 0 auto; }
.ft-avhead__t b { font-family: var(--ft-head); font-size: 16px; font-weight: 600; color: var(--ft-ink); }
.ft-avsw { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--ft-ink-soft); }

/* Interruptor real de "Avisos en este equipo" */
.ft-switch { width: 30px; height: 17px; border-radius: 9px; background: var(--ft-input); position: relative; flex: 0 0 auto; transition: background 0.2s var(--ft-ease); }
.ft-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ft-ease); }
.ft-switch.is-on { background: var(--ft-accent); }
.ft-switch.is-on::after { transform: translateX(13px); }

.ft-avbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* Pantalla de bloqueo del telefono */
.ft-lock {
  border-radius: 20px;
  padding: 20px 14px 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, #2E3644 0%, #171B24 55%, #0E1015 100%);
  border: 1px solid #262B36;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ft-lock__top { text-align: center; color: #EDEFF4; }
.ft-lock__top span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.85; }
.ft-lock__top b { display: block; font-family: var(--ft-head); font-size: 46px; font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ft-lock__notis { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.ft-lock__label { display: block; text-align: center; font-size: 10px; color: #8A93A6; margin-top: 2px; }

/* Una notificacion tal como la pinta el sistema operativo */
.ft-noti {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}
.ft-noti__ico { width: 26px; height: 26px; border-radius: 7px; background: var(--ft-accent); flex: 0 0 auto; margin-top: 1px; }
.ft-noti__b { min-width: 0; flex: 1; }
.ft-noti__title { display: block; font-size: 12.5px; font-weight: 700; color: #F4F6FA; line-height: 1.28; }
.ft-noti__body { display: block; font-size: 12px; color: #D3D8E2; line-height: 1.35; margin-top: 1px; font-variant-numeric: tabular-nums; }
.ft-noti__meta { display: block; font-size: 10.5px; color: #9AA3B4; margin-top: 3px; }
.ft-noti__t { font-style: normal; font-size: 10.5px; color: #9AA3B4; flex: 0 0 auto; }

/* Lo que dice / lo que nunca sale */
.ft-avpriv { display: grid; gap: 12px; }
@media (min-width: 620px) { .ft-avpriv { grid-template-columns: 1fr 1fr; } }
.ft-avpriv__col { min-width: 0; }
.ft-avpriv__yes, .ft-avpriv__no { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.ft-avpriv__yes > div, .ft-avpriv__no > div {
  border: 1px solid var(--ft-line);
  border-radius: 10px;
  background: var(--ft-surface);
  padding: 9px 11px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ft-avpriv__yes b, .ft-avpriv__no b { font-size: 12px; font-weight: 600; color: var(--ft-ink); }
.ft-avpriv__yes span { font-size: 12px; color: var(--ft-ink-soft); font-variant-numeric: tabular-nums; }
.ft-avpriv__yes > div { border-left: 2px solid var(--ft-ok); }
/* Tachado: se lee de un vistazo que ese dato no viaja */
.ft-avpriv__no > div { background: var(--ft-l2); border-left: 2px solid var(--ft-ink-mute); }
.ft-avpriv__no b { color: var(--ft-ink-mute); text-decoration: line-through; text-decoration-thickness: 1px; }

/* =====================================================================
   Receta de lentes · subsecciones (07)
   Mocks del componente `lens-rx`: la calculadora óptica, la sidebar de
   fuentes del mostrador y el documento impreso. Fichas y cifras en tinta
   plena; el gris solo en rótulos, igual que en la interfaz real.
   ===================================================================== */

/* Filas plegadas del componente (Calculadora óptica / Indicaciones) */
.ft-lenfold { display: flex; align-items: center; gap: 8px; margin: 10px -16px 0; padding: 8px 16px; background: var(--ft-l2); border-top: 1px solid var(--ft-line); font-size: 12.5px; }
.ft-lenfold span { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.ft-lenfold em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ft-ink-soft); }
.ft-lenfold em.is-flag { color: var(--ft-caoba); font-weight: 600; }
.ft-lenfold.is-open { margin-bottom: 0; }
.ft-lenfold__ico { width: 13px; height: 13px; border: 1.4px solid var(--ft-ink); border-radius: 3px; position: relative; }
.ft-lenfold__ico::after { content: ''; position: absolute; left: 2px; right: 2px; top: 3.5px; height: 1.4px; background: var(--ft-ink); box-shadow: 0 3.5px 0 var(--ft-ink); }

/* La cadena de pasos */
.ft-calc { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 2px; }
.ft-calc__step { display: flex; flex-direction: column; gap: 7px; }
.ft-calc__head { display: flex; align-items: baseline; gap: 8px; }
.ft-calc__head i { font-style: normal; font-family: var(--ft-mono); font-size: 10.5px; font-weight: 700; min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--ft-l2); }
.ft-calc__head b { font-size: 13.5px; font-weight: 700; }
.ft-calc__head small { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-calc__ctrl { display: flex; align-items: center; gap: 6px; padding-left: 25px; }
.ft-calc__ctrl small { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-calc__mm { padding: 2px 7px; border-radius: 0.7rem; border: 1px solid var(--ft-line); background: var(--ft-surface); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ft-calc__mm.is-on { background: color-mix(in srgb, var(--ft-caoba) 16%, var(--ft-surface)); border-color: color-mix(in srgb, var(--ft-caoba) 55%, transparent); color: color-mix(in srgb, var(--ft-caoba) 85%, black); font-weight: 700; }
.ft-calc__cols { display: grid; grid-template-columns: 1fr; gap: 8px 22px; padding-left: 25px; }
@media (min-width: 620px) { .ft-calc__cols { grid-template-columns: 1fr 1fr; } }
.ft-calc__cell { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ft-calc__cell > b { flex: 0 0 auto; min-width: 22px; padding-top: 4px; font-size: 11px; font-weight: 700; color: var(--ft-ink-soft); }
.ft-calc__cell > code { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-calc__picks { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ft-calc__row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ft-calc__row small { font-size: 11px; color: var(--ft-ink-soft); font-variant-numeric: tabular-nums; }
.ft-calc__row code { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ft-calc__in { padding: 4px 8px; border-radius: 7px; border: 1px solid var(--ft-line); background: var(--ft-surface); font-size: 12px; font-variant-numeric: tabular-nums; }
.ft-calc__in--ph { color: var(--ft-ink-mute); }

/* Ficha de resultado: el resultado ES el botón (rótulo eyebrow + valor) */
.ft-pick { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 9px; border: 1px solid var(--ft-line); background: var(--ft-surface); }
.ft-pick i { font-style: normal; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ft-ink-soft); }
.ft-pick code { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ft-pick em { font-style: normal; font-size: 11px; color: var(--ft-caoba); }
.ft-pick.is-on { background: color-mix(in srgb, var(--ft-caoba) 12%, var(--ft-surface)); border-color: color-mix(in srgb, var(--ft-caoba) 55%, transparent); }

/* Banda "En la receta ahora" */
.ft-calc__band { background: var(--ft-l2); border-radius: 9px; padding: 9px 12px; display: flex; flex-direction: column; gap: 5px; }
.ft-calc__band .ft-calc__cols { padding-left: 0; }

/* Pantalla del mostrador: toolbar + sidebar de fuentes + receta */
.ft-lentb { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ft-line); background: var(--ft-surface); }
@media (min-width: 620px) { .ft-lentb { grid-template-columns: 1.4fr 1fr; } }
.ft-lenstage { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 14px; }
@media (min-width: 760px) { .ft-lenstage { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }
.ft-lensrc { border: 1px solid var(--ft-line); border-radius: 12px; background: var(--ft-surface); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.ft-lensrc__grp { margin-top: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--ft-line); }
.ft-lensrc__card { border: 1px solid var(--ft-line); border-radius: 9px; padding: 8px 10px; margin-top: 6px; }
.ft-lensrc__card.is-on { border-color: color-mix(in srgb, var(--ft-caoba) 45%, transparent); background: color-mix(in srgb, var(--ft-caoba) 6%, var(--ft-surface)); }
.ft-lensrc__when { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ft-lensrc__when b { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-lensrc__when em { font-style: normal; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ft-lensrc__what { font-size: 12px; font-weight: 600; margin-top: 2px; }
.ft-lensrc__what span { font-weight: 500; color: var(--ft-ink-soft); }
.ft-lensrc__eye { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.ft-lensrc__eye i { font-style: normal; flex: 0 0 20px; font-size: 10px; font-weight: 700; color: var(--ft-ink-soft); }
.ft-lensrc__eye code { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-lenrx { border: 1px solid var(--ft-line); border-radius: 12px; padding: 0 16px 14px; }
.ft-lenrx__head { display: flex; align-items: center; gap: 10px; padding: 11px 0 10px; }
.ft-lenrx__head b { font-family: var(--ft-head); font-size: 16px; font-weight: 600; }
.ft-btn--ok { margin-left: auto; background: var(--ft-ok); border-color: var(--ft-ok); color: #fff; }

/* Documento impreso: el título dice qué lente se recetó */
.ft-lendoc__title { font-family: var(--ft-head); font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 6px; }

/* ============================================================
   17 · MODELO 3D — el visor real de la consulta, en bucle
   El lienzo es <three-d-stage>, el MISMO componente que monta
   /tools/eye-3d/: trae su propio shadow DOM, así que aquí solo
   se le da tamaño y se colocan encima los rótulos. Nada de esto
   se toca: `pointer-events: none` deja la escena fuera del
   alcance del cursor a propósito.
   ============================================================ */
.ft-eye3d__canvas {
  position: relative; overflow: hidden; pointer-events: none;
  border: 1px solid var(--ft-line); border-radius: 0.85rem;
  background: var(--ft-surface); box-shadow: 0 30px 60px -48px rgba(1, 3, 38, 0.4);
}
/* El componente se declara `height: 100vh` en su :host; los estilos de la
   página ganan sobre :host, que es justo lo que hace falta aquí. */
.ft-eye3d__stage { display: block; width: 100%; height: 300px; }
@media (min-width: 640px) { .ft-eye3d__stage { height: 380px; } }
@media (min-width: 960px) { .ft-eye3d__stage { height: 440px; } }
three-d-stage:not(:defined) { visibility: hidden; }

/* Ficha del diagnóstico: la misma que se ve en la nota clínica. */
.ft-eye3d__dx {
  position: absolute; left: 14px; top: 14px; width: min(272px, 62%);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.5s var(--ft-ease), transform 0.5s var(--ft-ease);
}
.ft-eye3d__dx.is-in { opacity: 1; transform: none; }
.ft-eye3d__dx .ft-dxblock { margin-bottom: 0; box-shadow: 0 10px 26px -18px rgba(1, 3, 38, 0.45); }

/* Rótulos de los dos ojos. La posición la escribe el JS proyectando cada globo
   sobre el lienzo en cada fotograma: anclarlos por mitades fijas se rompería en
   cuanto la cámara cambiara de encuadre. Aquí solo viaja la opacidad. */
.ft-eye3d__cap {
  position: absolute; left: 0; top: 0; transform: translate(-50%, 0); white-space: nowrap;
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--ft-surface); border: 1px solid var(--ft-line); color: var(--ft-ink);
  opacity: 0; transition: opacity 0.45s var(--ft-ease);
}
.ft-eye3d__cap.is-in { opacity: 1; }
.ft-eye3d__cap--sick { border-color: color-mix(in srgb, var(--ft-caoba) 45%, transparent); color: color-mix(in srgb, var(--ft-caoba) 85%, black); }

/* Estado de carga del modelo. Se retira en cuanto la escena está viva. */
.ft-eye3d__boot {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; color: var(--ft-ink-mute); background: var(--ft-surface);
}
.ft-eye3d__boot i { width: 6px; height: 6px; border-radius: 50%; background: var(--ft-ink-mute); animation: ftEyePulse 1.1s ease-in-out infinite; }
@keyframes ftEyePulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.ft-eye3d.is-off .ft-eye3d__canvas { display: none; }

/* Lo que dice el trayecto de la luz. El texto NO se escribe aquí: sale del
   mismo módulo que dibuja el haz (light-path.js), así que no puede divergir
   de lo que el médico lee en la consulta. */
.ft-eye3d__note {
  margin: 14px 0 0; max-width: 640px; font-size: 13.5px; line-height: 1.55; color: var(--ft-ink-soft);
  opacity: 0; transition: opacity 0.5s var(--ft-ease);
}
.ft-eye3d__note.is-in { opacity: 1; }
.ft-eye3d__note b { color: var(--ft-ink); font-weight: 600; }

/* ---------- 02 Así ve el paciente ---------- */
.ft-eyesim { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .ft-eyesim { grid-template-columns: 1fr 1fr; } }
.ft-eyesim figure { margin: 0; }
.ft-eyesim canvas {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--ft-line); background: var(--ft-l2);
}
.ft-eyesim figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ft-ink-soft); }
.ft-eyesim figcaption b { color: var(--ft-ink); font-weight: 600; }
.ft-eyesim figcaption em { font-style: normal; color: color-mix(in srgb, var(--ft-caoba) 85%, black); font-weight: 600; }

/* ---------- 03 La hoja que se lleva ---------- */
.ft-eyesheet {
  /* Ancho de hoja, no de tarjeta: es un documento que se imprime. */
  max-width: 640px; background: #fff; border: 1px solid var(--ft-line); border-radius: 0.85rem;
  padding: 20px 22px; box-shadow: 0 30px 60px -48px rgba(1, 3, 38, 0.4);
}
.ft-eyesheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ft-eyesheet__head b { display: block; font-family: var(--ft-head); font-size: 17px; font-weight: 600; }
.ft-eyesheet__head span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-eyesheet__head img { height: 16px; width: auto; flex: none; margin-top: 3px; }
/* La imagen del modelo es la CAPTURA REAL del lienzo de arriba: el mismo
   `preserveDrawingBuffer` que usa la ficha de la consulta. Mientras no haya
   captura, el marco se queda en gris y la hoja se lee igual. */
.ft-eyesheet__shot {
  position: relative; margin: 16px 0 14px; aspect-ratio: 2 / 1; border-radius: 6px;
  border: 1px solid var(--ft-line); background: var(--ft-l2); overflow: hidden;
}
.ft-eyesheet__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ft-ease); }
.ft-eyesheet__shot img.is-in { opacity: 1; }
.ft-eyesheet__path { padding-bottom: 13px; border-bottom: 1px solid var(--ft-line); }
.ft-eyesheet__path b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ft-eyesheet__path span { font-size: 11.5px; line-height: 1.5; color: var(--ft-ink-soft); }
.ft-eyesheet ul { margin: 8px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 22px; font-size: 11.5px; line-height: 1.75; }
.ft-eyesheet li { break-inside: avoid; }
.ft-eyesheet li i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }
.ft-eyesheet__sw { background: var(--sw); box-shadow: inset 0 0 0 1px rgba(21, 23, 29, 0.14); }
.ft-eyesheet__qr { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 11px 13px; border: 1px solid var(--ft-line); border-radius: 6px; background: var(--ft-surface); }
.ft-eyesheet__qrmark { flex: none; width: 74px; height: 74px; display: block; }
/* No es un codigo legible: es dato ficticio, como los nombres y los importes
   del resto de los mocks. El QR de verdad lo genera el servidor al imprimir. */
.ft-eyesheet__qr b { display: block; font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.ft-eyesheet__qr span { display: block; font-size: 10.5px; line-height: 1.45; color: var(--ft-ink-soft); }
.ft-eyesheet__fine { margin: 16px 0 0; padding-top: 11px; border-top: 1px solid var(--ft-line); font-size: 10px; line-height: 1.55; color: var(--ft-ink-mute); }
.ft-eyesheet .ft-eyebrow { margin-bottom: 4px; }

/* ============================================================
   COMPARADOR DE ESTUDIOS (seccion Estudios · "Comparar dos tomas")
   Retrato del overlay real: medical_records/css/study-compare.css
   (prefijo .gsc-*). Aqui .ft-cmp-* porque esta pagina no carga ese
   archivo ni Bootstrap.

   SIEMPRE OSCURO, como el original: un campo visual o un corte de
   OCT sobre chrome claro se leen peor, porque el ojo se adapta al
   blanco de alrededor y pierde el rango bajo, que es justo donde
   esta el dato. Mismo criterio que el negatoscopio de rayos X.

   Las dos tomas se APILAN y la de "despues" se recorta con
   clip-path. Una sola variable --wipe manda el recorte y la
   posicion del tirador, para que no puedan desincronizarse.
   ============================================================ */
.ft-cmp {
  --wipe: 50%;
  background: #0E1015; color: #F2F4F7; border-radius: 16px; overflow: hidden;
  font-family: var(--ft-body); font-size: 13px; text-align: left;
  box-shadow: 0 40px 80px -60px rgba(1, 3, 38, 0.55);
}

/* ---------- Cabecera: que serie estoy leyendo ---------- */
.ft-cmp__head,
.ft-cmp__tools {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 7px 12px; border-bottom: 1px solid #232631;
}
.ft-cmp__brand { font-size: 10.5px; font-weight: 600; color: #9AA0AE; white-space: nowrap; }
/* Retrato del <select> de series: en el original es un select y no una tira de
   pastillas, porque un paciente de seguimiento junta quince tomas. */
.ft-cmp__series {
  flex: 1 1 auto; min-width: 0; max-width: 340px;
  background: #16181F; border: 1px solid #232631; border-radius: 6px;
  padding: 4px 22px 4px 8px; font-size: 11px; font-weight: 600; color: #F2F4F7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0AE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 11px 11px;
}
.ft-cmp__who { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #9AA0AE; white-space: nowrap; }
.ft-cmp__who em { font-style: normal; font-family: var(--ft-mono); font-size: 9.5px; background: #16181F; padding: 2px 6px; border-radius: 5px; }

/* ---------- Barra de herramientas ---------- */
.ft-cmp__seg { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 8px; background: #16181F; flex: none; }
.ft-cmp__seg span { padding: 4px 10px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: #9AA0AE; white-space: nowrap; }
.ft-cmp__seg span.is-on { background: #232631; color: #F2F4F7; }
.ft-cmp__vsep { width: 1px; height: 18px; background: #232631; flex: none; }
.ft-cmp__pick { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #9AA0AE; flex: none; }
.ft-cmp__pick b {
  font-family: var(--ft-mono); font-size: 10.5px; font-weight: 500; color: #F2F4F7;
  background: #16181F; border: 1px solid #232631; border-radius: 6px; padding: 3px 18px 3px 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0AE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center; background-size: 10px 10px;
}
/* Caoba aclarada: el #8C4A38 de la nota se apaga sobre #0E1015. */
.ft-cmp__gap { font-family: var(--ft-mono); font-size: 10px; font-weight: 700; color: #C08A6E; flex: none; }
/* Con dos tomas las flechas del par no llevan a ningun sitio: van apagadas,
   igual que en la pantalla real. */
.ft-cmp__nav { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.ft-cmp__nav i { font-style: normal; width: 20px; text-align: center; font-size: 14px; color: #9AA0AE; opacity: 0.3; }
.ft-cmp__nav em { font-style: normal; font-family: var(--ft-mono); font-size: 9.5px; color: #9AA0AE; white-space: nowrap; }
.ft-cmp__spacer { flex: 1 1 auto; }
.ft-cmp__btn { padding: 4px 9px; border-radius: 6px; font-size: 10.5px; color: #9AA0AE; white-space: nowrap; }
.ft-cmp__x { font-style: normal; width: 24px; text-align: center; font-size: 11px; color: #9AA0AE; }

/* ---------- Escenario ---------- */
/* Mas ancho que las imagenes (559x468) a proposito: dejar negro a los lados es
   lo que hace el overlay real, y el object-fit: contain identico en las dos
   tomas es lo que garantiza que la cortinilla corte por el mismo sitio. */
/* max-height ~ al alto nativo de las tomas (468 px): asi se ven a 1:1 en
   escritorio en vez de escalarse y perder definicion. Por debajo de ese
   ancho la relacion manda y las tomas se reducen. */
.ft-cmp__stage { position: relative; aspect-ratio: 16 / 10; max-height: 470px; background: #000; overflow: hidden; }
.ft-cmp__pane { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #000; }
/* width/height al 100% + contain: la caja de las DOS tomas es identica y el
   escalado tambien, que es lo que hace que la cortinilla corte por el mismo
   punto de la imagen. Con max-width las tomas no llenarian el escenario. */
.ft-cmp__pane img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.ft-cmp__pane--b { clip-path: inset(0 0 0 var(--wipe)); }
.ft-cmp__cap {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.58); color: #fff; padding: 3px 9px; border-radius: 999px; font-size: 10px;
}
/* En cortinilla las dos etiquetas caerian una sobre otra: la de "despues" se va
   a la derecha para que cada mitad quede rotulada. */
.ft-cmp__pane--b .ft-cmp__cap { left: auto; right: 10px; }
.ft-cmp__cap i { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; color: #9AA0AE; }
.ft-cmp__pane--b .ft-cmp__cap i { color: #79C8F0; }
.ft-cmp__cap b { font-family: var(--ft-mono); font-weight: 500; }

/* Tirador. La franja blanca marca el corte para que se entienda que se
   arrastra, sin instruccion escrita. */
.ft-cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--wipe); width: 34px; margin-left: -17px; z-index: 3; display: grid; place-items: center; }
.ft-cmp__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 16px; width: 2px; background: rgba(255, 255, 255, 0.85); }
.ft-cmp__grip { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); display: grid; place-items: center; }
.ft-cmp__grip svg { width: 16px; height: 16px; display: block; }

/* ---------- Tira de la serie ---------- */
.ft-cmp__strip { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid #232631; }
.ft-cmp__strip-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6B7280; flex: none; }
.ft-cmp__shots { display: flex; align-items: center; gap: 7px; flex: none; }
.ft-cmp__shot { width: 82px; border: 2px solid transparent; border-radius: 7px; overflow: hidden; background: #05070A; opacity: 0.55; flex: none; }
.ft-cmp__shot.is-a { opacity: 1; border-color: #9AA0AE; }
.ft-cmp__shot.is-b { opacity: 1; border-color: #79C8F0; }
.ft-cmp__shot img { display: block; width: 100%; height: 44px; object-fit: cover; background: #05070A; }
.ft-cmp__shot em { display: block; padding: 2px 5px; background: #16181F; font-family: var(--ft-mono); font-style: normal; font-size: 8.5px; color: #C7CCD6; white-space: nowrap; }
.ft-cmp__eyes { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: none; }
.ft-cmp__eyes-lbl { font-size: 10px; color: #6B7280; }

@media (max-width: 640px) {
  /* Lo primero que sobra en estrecho es el paciente y los rotulos de la barra:
     el escenario y el tirador son el contenido. */
  .ft-cmp__who, .ft-cmp__nav, .ft-cmp__btn, .ft-cmp__x { display: none; }
  .ft-cmp__shot { width: 66px; }
}

/* ===================================================================
   HOJA DE SEGUIMIENTO (Pacientes · 09)
   Reproduce el modal real (.igfs-* de medical_records/css/attention-cards.css):
   atenciones en columnas, lo que se sigue en el tiempo en filas, columna de
   rotulos fija a la izquierda, encabezado de fechas pegado arriba, la columna
   de hoy en caoba y la tendencia dibujada al final de cada renglon numerico.
   =================================================================== */
.ft-fs__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ft-surface); border-bottom: 1px solid var(--ft-line); }
.ft-fs__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--ft-l2); position: relative; flex: none; }
.ft-fs__ic::after { content: ''; position: absolute; left: 11px; top: 9px; width: 12px; height: 15px; border: 1.5px solid var(--ft-ink-soft); border-radius: 2px; }
.ft-fs__ic::before { content: ''; position: absolute; left: 14px; top: 13px; width: 6px; height: 1.5px; background: var(--ft-ink-soft); box-shadow: 0 3px 0 var(--ft-ink-soft), 0 6px 0 var(--ft-ink-soft); z-index: 1; }
.ft-fs__id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ft-fs__id b { font-size: 14px; font-weight: 700; color: var(--ft-ink); }
.ft-fs__id span { font-size: 11.5px; color: var(--ft-ink-soft); }
.ft-fs__print { margin-left: auto; }

/* La "mesa" (L3) alrededor de la hoja: la tabla no va a ras del panel. */
.ft-fs__body { padding: 12px; background: var(--ft-recess); }
.ft-fs__wrap { overflow: auto; border: 1px solid var(--ft-line); border-radius: 11px; background: var(--ft-surface); max-height: 430px; }
.ft-fs { --fs-col: 176px; --fs-lbl: 168px; border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; table-layout: fixed; font-size: 12px; }
.ft-fs th, .ft-fs td { padding: 7px 12px; border-bottom: 1px solid var(--ft-line); vertical-align: middle; text-align: left; background: var(--ft-surface); font-weight: 400; }
.ft-fs td { width: var(--fs-col); min-width: var(--fs-col); max-width: var(--fs-col); }
.ft-fs tbody tr:last-child th, .ft-fs tbody tr:last-child td { border-bottom: 0; }
.ft-fs tr.is-top td, .ft-fs tr.is-top .ft-fs__lbl { vertical-align: top; padding-top: 9px; }

/* Encabezado pegado arriba; columna de rotulos pegada a la izquierda. */
.ft-fs thead th { position: sticky; top: 0; z-index: 2; vertical-align: top; padding-top: 9px; padding-bottom: 9px; width: var(--fs-col); min-width: var(--fs-col); }
.ft-fs .ft-fs__lbl { position: sticky; left: 0; z-index: 1; width: var(--fs-lbl); min-width: var(--fs-lbl); max-width: var(--fs-lbl); padding-left: 14px; }
.ft-fs thead .ft-fs__lbl { z-index: 3; }
.ft-fs .ft-fs__lbl::after { content: ''; position: absolute; top: 0; right: -10px; bottom: 0; width: 10px; pointer-events: none; background: linear-gradient(to right, rgba(21, 23, 29, 0.06), rgba(21, 23, 29, 0)); }
.ft-fs .ft-fs__lbl b { display: block; font-size: 12px; font-weight: 600; color: #2B2E38; line-height: 1.3; }
.ft-fs .ft-fs__lbl i { display: block; margin-top: 1px; font-style: normal; font-size: 10px; color: var(--ft-ink-soft); }

/* Cabecera de columna: chip de fecha + plantilla + quien + estado. */
.ft-fs__col { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ft-fs__date { flex: none; width: 40px; display: flex; flex-direction: column; align-items: center; padding: 4px 0 5px; border-radius: 8px; background: var(--ft-l2); font-style: normal; line-height: 1; }
.ft-fs__date b { font-family: var(--ft-mono); font-size: 15px; font-weight: 600; color: var(--ft-ink); }
.ft-fs__date i { margin-top: 2px; font-style: normal; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-ink-soft); }
.ft-fs__date u { margin-top: 2px; text-decoration: none; font-family: var(--ft-mono); font-size: 8.5px; color: var(--ft-ink-mute); }
.ft-fs__colt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ft-fs__colt > b { font-size: 12px; font-weight: 600; color: var(--ft-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-fs__colt > span { font-size: 10.5px; color: var(--ft-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-fs__st { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 9.5px; font-weight: 600; }
.ft-fs__st i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.ft-fs__st.is-draft { color: var(--ft-warn); }
.ft-fs__st.is-draft i { background: var(--ft-warn); }
.ft-fs__st.is-now { color: var(--ft-caoba); }
.ft-fs__st.is-now i { background: var(--ft-caoba); }

/* La consulta de hoy: misma marca caoba que en el sistema. */
.ft-fs th.is-now, .ft-fs td.is-now { background: color-mix(in srgb, var(--ft-caoba) 4%, var(--ft-surface)); }
.ft-fs th.is-now .ft-fs__date { background: color-mix(in srgb, var(--ft-caoba) 12%, var(--ft-surface)); }
.ft-fs th.is-now .ft-fs__date b, .ft-fs th.is-now .ft-fs__date i, .ft-fs th.is-now .ft-fs__colt > b { color: var(--ft-caoba); }

/* Separador de grupo (Mediciones / Clinica / Exploracion). */
.ft-fs__grp th, .ft-fs__grp td { padding-top: 12px; padding-bottom: 4px; background: var(--ft-surface); border-bottom: 1px solid var(--ft-line); }

.ft-fs td.is-num { font-family: var(--ft-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ft-ink); }
.ft-fs td.is-empty { color: #B8BCC8; }

.ft-fs__trend { width: 210px; min-width: 210px; max-width: 210px; }
.ft-fs__spark { display: inline-flex; align-items: center; gap: 8px; }
.ft-fs__spark svg { width: 86px; height: 20px; flex: none; overflow: visible; }
.ft-fs__spark polyline { fill: none; stroke: var(--ft-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ft-fs__spark circle { fill: var(--ft-accent); }
.ft-fs__spark em { font-family: var(--ft-mono); font-style: normal; font-size: 9.5px; color: var(--ft-ink-soft); white-space: nowrap; }

/* Diagnostico: ojo + nombre + clasificacion, uno por linea. */
.ft-fs__dx { display: block; font-size: 11.5px; line-height: 1.4; font-weight: 600; color: var(--ft-ink); }
.ft-fs__dx + .ft-fs__dx { margin-top: 4px; }
.ft-fs__dx b { font-weight: 700; margin-right: 5px; }
.ft-fs__dx b.is-od { color: var(--ft-accent); }
.ft-fs__dx b.is-oi { color: #1B84D6; }
.ft-fs__dx i { display: block; font-style: normal; margin-top: 1px; font-family: var(--ft-mono); font-size: 9.5px; color: var(--ft-ink-mute); }

.ft-fs__chip { display: inline-block; margin: 0 3px 3px 0; padding: 2px 7px; border-radius: 999px; background: rgba(107, 63, 143, 0.10); color: #6B3F8F; font-size: 10.5px; font-weight: 600; }

.ft-fs__txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.45; color: var(--ft-ink-soft); }
.ft-fs__ln { display: block; font-size: 11px; line-height: 1.45; color: var(--ft-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ft-fs__foot { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--ft-surface); border-top: 1px solid var(--ft-line); font-size: 11px; color: var(--ft-ink-soft); }
.ft-fs__foot em { margin-left: auto; font-style: normal; color: var(--ft-ink-mute); }

@media (max-width: 640px) {
  .ft-fs { --fs-col: 148px; --fs-lbl: 124px; }
  .ft-fs__wrap { max-height: 340px; }
  .ft-fs__foot em { display: none; }
}