:root {
  --bg: #060a13;
  --panel: rgba(13, 20, 36, .86);
  --panel-solid: #0d1424;
  --line: #1f2b45;
  --line-hi: #2c3b5e;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --cyan: #22d3ee;
  --violet: #a78bfa;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --blue: #60a5fa;
  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
code, pre { font-family: var(--mono); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- Fondo: degradado + red de nodos (se apaga en la pantalla de idioma) ---------- */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(34, 211, 238, .10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(167, 139, 250, .10), transparent 70%),
    linear-gradient(#060a13, #070d1a);
  transition: opacity 1.2s ease;
}
.net { position: fixed; inset: 0; pointer-events: none; transition: opacity 1.2s ease; }
.is-dark body::before, .is-dark .net { opacity: 0; }

/* ---------- Layout ---------- */
#app {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 4.5rem 1.25rem 6.5rem;
}
.screen { width: 100%; max-width: 680px; min-width: 0; text-align: center; }
.screen.enter { animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(8px); box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.panel.screen { padding: 1.5rem 1.25rem; }

/* ---------- Banderas ---------- */
#screen-lang { max-width: none; }
.flags { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); list-style: none; margin: 0; padding: 0; }
.flags li { animation: rise .6s ease both; }
.flags li:nth-child(2) { animation-delay: .12s; }
.flags li:nth-child(3) { animation-delay: .24s; }
.flag {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  width: clamp(104px, 24vw, 190px); aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 2px #ffffff14, 0 8px 24px #0009;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.flag svg { display: block; width: 100%; height: 100%; }
.flag.is-suggested { animation: glow 2.6s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 2px #ffffff14, 0 8px 24px #0009; }
  50% { box-shadow: 0 0 0 2px #22d3ee55, 0 0 26px #22d3ee44; }
}
.flags:hover .flag:not(:hover) { opacity: .45; }
.flag:hover, .flag:focus-visible {
  transform: translateY(-6px) scale(1.05); animation: none;
  box-shadow: 0 0 0 2px var(--cyan), 0 0 34px #22d3ee66;
}

/* ---------- Insignias de método HTTP ---------- */
.method {
  display: inline-block; padding: .12rem .5rem; border-radius: 6px;
  font: 700 .72rem/1.4 var(--mono); letter-spacing: .06em;
}
.method.get  { color: var(--blue);  background: rgba(96, 165, 250, .14); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .4); }
.method.post { color: var(--green); background: rgba(52, 211, 153, .14); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .4); }
.method.ok   { color: var(--green); background: rgba(52, 211, 153, .2);  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .55); }

.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }

/* ---------- Pantalla de inicio ---------- */
.eyebrow { margin: 0 0 .75rem; color: var(--cyan); font: 600 .78rem var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.eyebrow::before { content: "// "; color: var(--muted); }
.title-name {
  margin: 0; font-size: clamp(2.3rem, 9vw, 4.2rem); line-height: 1.05; font-weight: 800; letter-spacing: -.025em;
  background: linear-gradient(90deg, var(--cyan), var(--violet) 60%, var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle { margin: .9rem 0 .6rem; color: var(--muted); font: 500 1rem var(--mono); }
.api-status { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 2rem; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 999px; font: .75rem var(--mono); color: var(--muted); background: rgba(13, 20, 36, .6); }
.api-status[data-state="connecting"] .dot { background: var(--amber); animation: none; }
.api-status[data-state="offline"] .dot { background: var(--muted); animation: none; }

/* Lista de endpoints (menú y selector de zonas) */
.endpoints { display: flex; flex-direction: column; gap: .6rem; width: min(560px, 100%); margin: 0 auto; text-align: left; }
.endpoint {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(13, 20, 36, .72); backdrop-filter: blur(6px);
  color: var(--text); font: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.endpoint code { color: var(--cyan); font-weight: 600; }
.endpoint .desc { color: var(--text); font-size: .95rem; }
.endpoint .arrow { color: var(--muted); transition: transform .15s, color .15s; }
.endpoint:hover, .endpoint:focus-visible { border-color: var(--cyan); background: rgba(13, 26, 46, .9); box-shadow: 0 0 24px rgba(34, 211, 238, .14); transform: translateY(-1px); }
.endpoint:hover .arrow, .endpoint:focus-visible .arrow { transform: translateX(4px); color: var(--cyan); }
.screen-heading { margin: 0 0 1.25rem; font-size: clamp(1.15rem, 4vw, 1.5rem); font-weight: 700; }
.screen-heading code { color: var(--cyan); font-size: .85em; margin-right: .4rem; }
#screen-hub .screen-heading { text-align: center; }
#screen-hub .endpoints { width: 100%; margin-bottom: 1.25rem; }

.link-btn { background: none; border: 0; color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; padding: .5rem; }
.link-btn:hover, .link-btn:focus-visible { color: var(--cyan); }

/* ---------- Petición de "me gusta" ---------- */
.like-card {
  display: flex; gap: .9rem; align-items: flex-start; width: min(560px, 100%); margin: 1.75rem auto 0; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(13, 20, 36, .72); backdrop-filter: blur(6px); text-align: left;
}
/* Avatar con expresiones. Las imágenes miden lo mismo de ancho y distinto de alto (se recortan por abajo),
   así que se alinean arriba y el contenedor toma la proporción de la más baja. */
.avatar-photo {
  position: relative; flex: none; width: 112px; aspect-ratio: 145 / 131; overflow: hidden;
  border: 1px solid var(--line-hi); border-radius: 12px; background: #b9bdc0;
  box-shadow: 0 0 22px rgba(34, 211, 238, .14);
}
.avatar-photo img { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; }
.avatar-photo img.on { opacity: 1; }
.avatar-sm { width: 64px; border-radius: 10px; box-shadow: none; }
.like-main { flex: 1; min-width: 0; }
.like-text { margin: 0 0 .7rem; font-size: .95rem; }
.like-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
.btn-post {
  display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .8rem .4rem .45rem;
  border: 1px solid rgba(52, 211, 153, .5); border-radius: 8px; background: rgba(52, 211, 153, .08);
  color: var(--text); font: 600 .9rem var(--sans); cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s;
}
.btn-post:hover:not(:disabled), .btn-post:focus-visible { background: rgba(52, 211, 153, .18); box-shadow: 0 0 18px rgba(52, 211, 153, .25); }
.btn-post:active:not(:disabled) { transform: translateY(1px); }
.btn-post:disabled { cursor: default; }
.btn-post.is-liked { background: rgba(52, 211, 153, .2); border-color: var(--green); }
.like-icon { display: inline-flex; }
.like-icon svg { display: block; width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-post.is-liked .like-icon svg { fill: var(--green); stroke: var(--green); }
.like-count { color: var(--muted); font: .8rem var(--mono); }
.like-response { margin: .8rem 0 0; padding: .6rem .8rem; border-radius: 8px; background: rgba(2, 6, 23, .7); border: 1px solid var(--line); font-size: .78rem; line-height: 1.5; overflow-x: auto; }

/* ---------- Contador de visitas (abajo a la izquierda) ---------- */
.visit-pill {
  position: fixed; z-index: 10; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem;
  border: 1px solid var(--line-hi); border-radius: 999px; background: rgba(13, 20, 36, .88); backdrop-filter: blur(6px);
  font: .78rem var(--mono); box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.visit-pill code { color: var(--muted); }
.visit-pill strong { color: var(--text); }
.is-dark .visit-pill { display: none; }

/* ---------- Selector de idioma ---------- */
.lang-btn {
  position: fixed; top: max(1rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left)); z-index: 5;
  width: 48px; height: 32px; padding: 0; border: 1px solid var(--line-hi); border-radius: 6px; overflow: hidden;
  background: var(--panel-solid); cursor: pointer; transition: transform .12s, border-color .15s;
}
.lang-btn svg { display: block; width: 100%; height: 100%; }
.lang-btn:hover, .lang-btn:focus-visible { border-color: var(--cyan); transform: translateY(-1px); }

/* ---------- Botones genéricos ---------- */
.btn {
  display: inline-block; padding: .4rem .8rem; border: 1px solid var(--line-hi); border-radius: 8px;
  background: rgba(255, 255, 255, .04); color: var(--text); font: 600 .82rem var(--mono); text-decoration: none; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.btn:hover:not(:disabled), .btn:focus-visible { border-color: var(--cyan); background: rgba(34, 211, 238, .08); }
.btn:disabled { opacity: .35; cursor: default; }
.btn-mini { padding: .12rem .55rem; font-size: .72rem; min-width: 3.1rem; }
.btn-lg { padding: .7rem 1.3rem; font-size: .95rem; }
.btn-next { background: var(--cyan); border-color: var(--cyan); color: #03161d; }
.btn-next:hover:not(:disabled), .btn-next:focus-visible { background: #67e8f9; border-color: #67e8f9; }
.btn-next.is-ready { animation: nudge .9s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* ---------- Enlace a LinkedIn (abajo a la derecha) ---------- */
.cv-widget { position: fixed; z-index: 10; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.cv-fab {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.05rem; text-decoration: none;
  border: 1px solid var(--cyan); border-radius: 999px; background: rgba(13, 20, 36, .92); color: var(--cyan);
  font: 700 .85rem var(--mono); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: background .15s, color .6s, border-color .6s, box-shadow .15s, transform .15s;
}
.cv-fab:hover, .cv-fab:focus-visible { background: var(--cyan); color: #03161d; box-shadow: 0 0 22px rgba(34, 211, 238, .4); transform: translateY(-1px); }
.is-dark .cv-fab:not(:hover):not(:focus-visible) { background: #000; border-color: #2a2a2a; color: #5c5c5c; box-shadow: none; }
a.endpoint { text-decoration: none; }
.noscript { position: fixed; inset: auto 0 1rem 0; text-align: center; }
.noscript a { color: var(--cyan); }

/* ---------- Visor de respuesta (zona suelta y recorrido) ---------- */
.zone { max-width: 760px; display: flex; flex-direction: column; max-height: calc(100svh - 11rem); }
.zone .screen-heading { text-align: center; }
.viewer { display: flex; flex-direction: column; min-height: 0; overflow: hidden; text-align: left; }
.zone .viewer { flex: 1; }
.req-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: rgba(2, 6, 23, .45); }
.req-path { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .82rem; color: var(--text); }
.status { display: inline-flex; align-items: center; gap: .4rem; color: var(--green); font: 700 .75rem var(--mono); }
.status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }
.size { color: var(--muted); font: .75rem var(--mono); }
.tabs { display: flex; gap: .25rem; padding: .4rem .75rem 0; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: .45rem .9rem; color: var(--muted); font: 600 .82rem var(--mono); cursor: pointer; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--cyan); border-bottom-color: var(--cyan); }
.viewer-body { flex: 1; min-height: 6rem; overflow: auto; padding: 1.1rem 1.2rem; scrollbar-color: var(--line-hi) transparent; }
.viewer-body:focus-visible { outline-offset: -3px; }
.viewer-body p { margin: 0 0 .9rem; }
.viewer-body strong { color: var(--cyan); font-weight: 700; }
.viewer-body h3 { margin: 0; font-size: 1.02rem; }

pre.json { margin: 0; font-size: .82rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.j-key { color: #7dd3fc; } .j-str { color: #86efac; } .j-num { color: #c4b5fd; } .j-lit { color: var(--amber); }

/* Vista "bonita" de cada zona */
.entry { position: relative; margin: 0 0 1.3rem; padding: .15rem 0 .15rem 1rem; border-left: 2px solid var(--cyan); }
.entry:last-child { margin-bottom: 0; }
.entry-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; justify-content: space-between; }
.tag { display: inline-block; padding: .1rem .55rem; border-radius: 6px; background: rgba(167, 139, 250, .14); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .4); color: #c4b5fd; font: 700 .72rem var(--mono); white-space: nowrap; }
.entry-sub { margin: .15rem 0 0; color: var(--muted); font: .85rem var(--mono); }
.bullets { margin: .8rem 0 0; padding-left: 1.15rem; }
.bullets li { margin-bottom: .5rem; }
.bullets li::marker { color: var(--cyan); }

.skill-group { margin-bottom: 1.3rem; }
.skill-group h3 { margin-bottom: .55rem; color: var(--muted); font: 600 .75rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border: 1px solid var(--line-hi); border-radius: 8px; background: rgba(255, 255, 255, .03); font: 600 .82rem var(--mono); }
.chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--g, var(--cyan)); box-shadow: 0 0 8px var(--g, var(--cyan)); }
.skill-group:nth-child(2) { --g: var(--violet); }
.skill-group:nth-child(3) { --g: var(--green); }

.lang-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.lang-list li { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; border: 1px solid var(--line-hi); border-radius: 10px; background: rgba(255, 255, 255, .03); }
.lang-flag { flex: none; width: 36px; height: 24px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px #ffffff22; }
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-name { flex: 1; font-weight: 600; }

.zone-contact { text-align: center; }
.contact-place { color: var(--muted); font: .9rem var(--mono); }
.contact-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.25rem 0 .6rem; }
.btn-get { border-color: rgba(96, 165, 250, .5); background: rgba(96, 165, 250, .08); }
.btn-get:hover, .btn-get:focus-visible { background: rgba(96, 165, 250, .18); box-shadow: 0 0 18px rgba(96, 165, 250, .25); }
.li-icon { width: 1.05rem; height: 1.05rem; color: var(--blue); }
.contact-cta .btn-post { font-size: .95rem; padding: .6rem 1rem .6rem .55rem; text-decoration: none; }
.contact-mail { color: var(--muted); font: .82rem var(--mono); word-break: break-all; }

/* Formulario "Déjame un mensaje" */
.msg-box { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed var(--line-hi); text-align: left; }
.msg-title { margin: 0 0 .2rem; font-size: 1.02rem; }
.msg-lead { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.msg-form { display: flex; flex-direction: column; gap: .85rem; }
.msg-field { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); font: 600 .76rem var(--mono); letter-spacing: .04em; }
.msg-field input, .msg-field textarea {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--line-hi); border-radius: 8px;
  background: rgba(2, 6, 23, .7); color: var(--text); font: 400 .92rem var(--sans);
  transition: border-color .15s, box-shadow .15s;
}
.msg-field textarea { min-height: 6.5rem; resize: vertical; }
.msg-field input:focus, .msg-field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
.msg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.viewer-body .msg-form .msg-privacy { margin: 0; color: var(--muted); font: .74rem var(--mono); }
.msg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
.msg-actions .btn-post { font-size: .92rem; }
.msg-status { font: .8rem var(--mono); }
.msg-status.is-error { color: var(--red); }
.msg-done { margin: 1rem 0 .4rem; padding: .7rem .9rem; border: 1px solid rgba(52, 211, 153, .5); border-radius: 8px; background: rgba(52, 211, 153, .08); color: var(--green); font-weight: 600; }
.msg-response { margin-top: .6rem; }

/* Diagrama de integración: Salesforce ⇄ REST API ⇄ sistemas externos */
.flow { margin: 0 0 1.4rem; padding: 1rem .75rem .6rem; border: 1px dashed var(--line-hi); border-radius: 12px; background: rgba(2, 6, 23, .4); }
.flow svg { display: block; width: 100%; height: auto; }
.flow figcaption { margin-top: .4rem; text-align: center; color: var(--muted); font: .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.f-node { fill: rgba(13, 20, 36, .95); stroke-width: 1.5; }
.f-label { fill: var(--text); font: 700 12px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.f-line { stroke-width: 1.5; fill: none; stroke-dasharray: 5 5; animation: flow 1s linear infinite; }
.f-line.back { animation-direction: reverse; opacity: .65; }
.f-head { stroke: none; }
@keyframes flow { to { stroke-dashoffset: -10; } }

.zone-nav { display: flex; justify-content: center; margin-top: 1rem; }

/* ---------- Recorrido: visor + terminal ---------- */
.tour { max-width: 880px; height: calc(100svh - 11rem); min-height: 26rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; text-align: left; }
.tour .viewer { flex: 0 1 auto; }
.tour .viewer .viewer-body { min-height: 5rem; }

.terminal { flex: none; border: 1px solid var(--line-hi); border-radius: 12px; background: rgba(3, 7, 18, .94); box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(34, 211, 238, .06); overflow: hidden; cursor: pointer; }
.term-bar { display: flex; align-items: center; gap: .75rem; padding: .55rem .85rem; border-bottom: 1px solid var(--line); background: rgba(13, 20, 36, .8); }
.lights { display: inline-flex; gap: .35rem; }
.lights i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--red); }
.lights i:nth-child(2) { background: var(--amber); }
.lights i:nth-child(3) { background: var(--green); }
.term-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: .75rem var(--mono); }
.dlg-tools { display: flex; align-items: center; gap: .6rem; }
.dlg-step { color: var(--muted); font: .75rem var(--mono); }
.term-body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av req" "av text";
  column-gap: 1rem; padding: 1rem 1.15rem .4rem; font-family: var(--mono);
}
.term-body .avatar-photo { grid-area: av; align-self: start; }
.term-body .term-req { grid-area: req; }
.term-body .dlg-text { grid-area: text; }
.term-req { margin: 0 0 .55rem; color: var(--muted); font-size: .76rem; }
.term-req .ok { color: var(--green); font-weight: 700; white-space: nowrap; }
.term-req .method { margin-right: .3rem; }
.dlg-text { margin: 0; min-height: 4.9em; font-size: .98rem; line-height: 1.6; color: var(--text); }
.dlg-text::before { content: "$ "; color: var(--green); font-weight: 700; }
.dlg-text .rest { visibility: hidden; } /* reserva el hueco para que la caja no salte al escribir */
.cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: var(--green); animation: caret 1s steps(1) infinite; }
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.dlg-foot { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem .9rem; }
.dlg-foot .btn-next { margin-left: auto; }

@media (max-width: 640px) {
  .endpoint { grid-template-columns: auto 1fr auto; }
  .endpoint .desc { grid-column: 1 / -1; order: 3; }
  .endpoint .arrow { grid-column: 3; grid-row: 1; }
  .like-card { padding: .85rem; gap: .7rem; }
  .avatar-sm { width: 52px; }
  .tour { gap: .7rem; }
  /* En móvil el avatar queda junto a la línea de la petición y el texto ocupa todo el ancho debajo */
  .term-body { grid-template-areas: "av req" "text text"; align-items: center; column-gap: .75rem; row-gap: .6rem; padding: .8rem .9rem .3rem; }
  .term-body .avatar-photo { width: 72px; }
  .term-body .term-req { margin: 0; }
  .dlg-text { font-size: .88rem; min-height: 6.4em; }
  .dlg-foot { gap: .35rem; flex-wrap: wrap; padding: .4rem .8rem .8rem; }
  .dlg-foot .btn { padding: .3rem .55rem; font-size: .75rem; }
  .dlg-foot .link-btn { padding: .25rem; font-size: .75rem; }
  .viewer-body { padding: .9rem; }
  .req-bar { padding: .6rem .8rem; gap: .4rem .55rem; }
  .req-path { font-size: .76rem; }
  .size { display: none; } /* en pantallas estrechas se prioriza que la ruta quepa entera */
  .flow { padding: .7rem .4rem .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}