/* Slide «read»: demostración que rota entre cinco tipos de contenido (PDF, Word, imagen, audio y Excel) y MUESTRA cómo DalIA extrae cada uno.
   Cada panel tiene el origen dibujado a la izquierda (.src) y, a la derecha (.out), un registro paso a paso (.log) que al final cede su lugar a la
   ficha (.fields). El color de cada tipo es el mismo de los íconos de «Tipos de contenido» de la slide de fuentes.
   js/demos/read.js anima el ejemplo: añade la clase is-live a la demostración y, en su momento, la clase on a cada elemento con data-at (aparece) o
   data-mark (se marca). Por eso el estado BASE de esta hoja (sin is-live) es el FINAL de cada ejemplo, que es lo que se ve sin JavaScript o con
   «reducir movimiento»; las reglas que empiezan por .is-live describen el estado de PARTIDA y las que terminan en .on, el de LLEGADA. */
.read-demo { --len: 12000ms; }

/* Pestañas: un ícono de color, el nombre y una barra de progreso que se llena mientras el ejemplo se reproduce */
.read-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }   /* wrap solo para pantallas muy angostas */
.read-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: 700 0.78rem "Plus Jakarta Sans", sans-serif;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.read-tab:hover { border-color: var(--tc); }
.read-tab:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
.read-tab.is-active { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, var(--bg)); }
.read-tab--pdf   { --tc: #e5484d; }
.read-tab--word  { --tc: #2b6cd1; }
.read-tab--image { --tc: #f59e0b; }
.read-tab--audio { --tc: #e0568a; }
.read-tab--excel { --tc: #1f9d55; }

.rt-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: var(--tc);
  color: #fff;
  font: 800 0.52rem "Plus Jakarta Sans", sans-serif;
}
.rt-icon svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rt-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--tc); }
.read-tab.is-active .rt-bar { animation: read-progress var(--len, 12s) linear forwards; }
@keyframes read-progress { to { width: 100%; } }

/* Escenario: los cinco paneles ocupan el mismo lugar (la altura es la del más alto) y solo el activo se ve */
.read-stage { display: grid; }
.read-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
}
.read-panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.read-panel:not(.is-active) * { animation-play-state: paused; }
.read-panel--pdf   { --tc: #e5484d; }
.read-panel--word  { --tc: #2b6cd1; }
.read-panel--image { --tc: #f59e0b; }
.read-panel--audio { --tc: #e0568a; }
.read-panel--excel { --tc: #1f9d55; }

/* Franja con el método y una frase, en el color de cada tipo */
.read-how {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0 0 12px;
  padding: 7px 12px;
  border-left: 3px solid var(--tc);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--tc) 9%, transparent);
  font-size: 0.82rem;
  line-height: 1.4;
}
.rh-method { color: color-mix(in srgb, var(--tc) 80%, var(--ink)); font-weight: 800; }
.rh-text { color: var(--muted); }

.read-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 16px; }

/* Origen: el contenido tal como llega, y lo que DalIA va encontrando en él */
.src { position: relative; min-height: 300px; --tc: var(--accent); }
.src--pdf   { --tc: #e5484d; }
.src--word  { --tc: #2b6cd1; }
.src--image { --tc: #f59e0b; }
.src--audio { --tc: #e0568a; }
.src--excel { --tc: #1f9d55; }
.src > .doc, .src > .photo, .src > .audio, .src > .excel { height: 100%; }
.src-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  border-radius: 6px;
  background: var(--tc);
  color: #fff;
  font: 800 0.62rem "Plus Jakarta Sans", sans-serif;
  letter-spacing: 0.04em;
  padding: 3px 7px;
}

/* Salida: el registro y la ficha ocupan el mismo lugar; sin JavaScript solo se ve la ficha */
.out { display: grid; align-content: start; }
.out > * { grid-area: 1 / 1; }
.log { display: none; }

/* ---------- PDF y Word: la hoja, la fotografía que se detecta y el escaneado al que se le aplica OCR ---------- */
.doc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-sizing: border-box;
  padding: 36px 14px 12px;
  background: #fff;
  color: #1b2333;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.doc-text i { display: block; height: 7px; margin: 7px 0; border-radius: 4px; background: #ffe066; transition: background 0.4s; }   /* marcador amarillo: lo que ya se leyó */
.doc-text i.m { width: 82%; }
.doc-text i.s { width: 58%; }
.doc .w-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.doc .w-head b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #2b6cd1; color: #fff; font: 800 0.7rem "Plus Jakarta Sans", sans-serif; }
.doc .w-head .w-title { flex: 1; height: 10px; margin: 0; background: #9db6e6; }

.doc-photo, .doc-scan { position: relative; flex: 1 1 0; min-height: 74px; border-radius: 7px; overflow: hidden; transition: filter 0.5s; }
.doc-photo svg { display: block; width: 100%; height: 100%; }
/* Esquinas de encuadre: «fotografía detectada» */
.br { position: absolute; width: 13px; height: 13px; border: 0 solid #f59e0b; }
.br-tl { top: 5px; left: 5px; border-width: 2px 0 0 2px; }
.br-tr { top: 5px; right: 5px; border-width: 2px 2px 0 0; }
.br-bl { bottom: 5px; left: 5px; border-width: 0 0 2px 2px; }
.br-br { bottom: 5px; right: 5px; border-width: 0 2px 2px 0; }
.doc-tag {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tg);
  color: #fff;
  font: 800 0.56rem "Plus Jakarta Sans", sans-serif;
  letter-spacing: 0.03em;
}
.doc-photo .doc-tag { top: 8px; left: 20px; right: auto; }
.doc-tag--photo { --tg: #f59e0b; }
.doc-tag--ocr { --tg: #0ea5b7; }

/* Documento escaneado: papel envejecido, torcido, sobre el cristal del escáner; el OCR lo recorre y el texto se aclara */
.doc-scan { display: grid; place-items: center; padding: 7px; background: #d3d6dc; }
.sheet-scan {
  width: 86%;
  box-sizing: border-box;
  padding: 6px 10px 7px;
  background: #ece8dc;
  border: 1px solid #cdc7b4;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transform: rotate(-1.4deg);
  color: #3b3a36;
  font: 700 0.6rem/1.3 "Plus Jakarta Sans", sans-serif;
  transition: filter 1s;
}
.sheet-scan b { display: block; font-size: 0.62rem; letter-spacing: 0.03em; }
.sheet-scan i { display: block; width: 72%; height: 5px; margin: 5px 0; border-radius: 3px; background: #bcb7a6; }
.sheet-scan span { display: block; color: #6b685e; font-size: 0.58rem; }
.sheet-scan em { display: block; margin-top: 3px; font-style: normal; font-weight: 800; font-size: 0.6rem; }
.ocr-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #0ea5b7; box-shadow: 0 0 10px 2px rgba(14, 165, 183, 0.6); opacity: 0; }

/* Barrido: una franja de luz que baja sobre la fotografía una vez */
.scan { position: absolute; left: 0; right: 0; top: -36px; height: 36px; opacity: 0; background: linear-gradient(transparent, rgba(255, 255, 255, 0.5), transparent); }
@keyframes scan-move { 0% { top: -36px; } 100% { top: 100%; } }
@keyframes ocr-sweep { 0% { left: 0; opacity: 1; } 100% { left: calc(100% - 3px); opacity: 0; } }

/* ---------- Imagen: fotografía de una escena; DalIA reconoce los objetos y los marca, uno a uno, con su etiqueta ---------- */
.photo { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.photo > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.photo .det text { font: 800 7.5px "Plus Jakarta Sans", sans-serif; fill: #fff; }
.photo .det > rect:first-child { animation: detect-pulse 2s ease-in-out infinite; }
@keyframes detect-pulse { 0%, 100% { stroke-opacity: 0.55; } 50% { stroke-opacity: 1; } }

/* ---------- Audio: un carril por interlocutor, una cabeza lectora que avanza y la onda de sonido ---------- */
.audio {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  padding: 40px 14px 12px;
  border-radius: 10px;
  background: #1b2333;
  color: #e8ecf5;
  box-shadow: var(--shadow);
}
.lanes { position: relative; display: grid; gap: 8px; }
.lane { display: flex; align-items: center; gap: 8px; }
.lane > b { flex: none; width: 58px; font: 800 0.56rem "Plus Jakarta Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.lane--a > b { color: #f08fb3; }
.lane--b > b { color: #8fb4ff; }
.track { position: relative; flex: 1; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.rd-seg { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--sc); transition: opacity 0.35s; }
.lane--a .rd-seg { --sc: #e0568a; }
.lane--b .rd-seg { --sc: #2b6cd1; }
.head-track { position: absolute; top: -5px; bottom: -5px; left: 66px; right: 0; pointer-events: none; }
.playhead { display: none; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.75); }
@keyframes ph-move { to { left: 100%; } }
.wave { display: flex; align-items: center; gap: 2px; height: 56px; }
.wave i {
  flex: 1;
  height: calc(var(--h) * 1%);
  border-radius: 3px;
  background: linear-gradient(#e0568a, #f08fb3);
  animation: wave 1.1s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -90ms);
}
@keyframes wave { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.audio-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.play { position: relative; width: 26px; height: 26px; border-radius: 50%; background: #e0568a; }
.play::after { content: ""; position: absolute; left: 10px; top: 7px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.audio-time { font: 700 0.8rem "Plus Jakarta Sans", sans-serif; color: #9aa8c4; }

/* ---------- Excel: tres tablas que se leen, columnas que las unen y líneas hacia los contenidos relacionados ---------- */
.excel { box-sizing: border-box; padding: 36px 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.excel svg { display: block; width: 100%; height: 100%; font-family: "Plus Jakarta Sans", sans-serif; }
.tb-name { fill: #1f9d55; font-size: 8px; font-weight: 800; text-anchor: end; }
.tb-bg { fill: #fff; stroke: #cfd6e4; stroke-width: 0.8; }
.tb-head { fill: #1f9d55; }
.tb-h { fill: #fff; font-size: 7.5px; font-weight: 800; }
.tb-c { fill: #1b2333; font-size: 7.5px; font-weight: 600; }
.tb-grid { fill: none; stroke: #e3e8f2; stroke-width: 0.8; }
.rd-key { fill: rgba(14, 165, 183, 0.13); stroke: #0ea5b7; stroke-width: 1.2; transition: opacity 0.4s; }
.rl path { fill: none; stroke: #0ea5b7; stroke-width: 1.6; stroke-linecap: round; }
.rl circle { fill: #0ea5b7; }
@keyframes rl-draw { to { stroke-dashoffset: 0; } }
.rowhl { fill: rgba(245, 158, 11, 0.25); stroke: #f59e0b; stroke-width: 1; transition: opacity 0.4s; }
.trunk, .branch { fill: none; stroke: #1f9d55; stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.85; }
.rc-bg { fill: #fff; stroke: #cfd6e4; stroke-width: 0.8; }
.rc-b { fill: #fff; font-size: 7px; font-weight: 800; text-anchor: middle; }

/* ---------- Registro: lo que DalIA va extrayendo, paso a paso ---------- */
.log { margin: 0; padding: 0; list-style: none; gap: 7px; align-content: start; }
.rd-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; }
.rd-step-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--c) 42%, transparent); background: color-mix(in srgb, var(--c) 14%, var(--bg)); }
.rd-step-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; margin: 0; font-size: 0.82rem; line-height: 1.25; }
.rd-step-head b { color: color-mix(in srgb, var(--c) 75%, var(--ink)); font-weight: 800; }
.rd-step-head span { color: var(--muted); font-size: 0.8rem; }
.rd-step-out { margin: 3px 0 0; padding: 4px 9px; color: var(--ink); border-left: 3px solid var(--c); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--c) 8%, var(--bg)); font-size: 0.8rem; line-height: 1.4; }
.rd-step-out.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--c); animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.rd-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.rd-chip { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, var(--bg)); color: var(--ink); font-size: 0.74rem; font-weight: 700; }
.rd-chip b { margin: 0 6px 0 -6px; padding: 1px 7px; border-radius: 999px; background: var(--c); color: #fff; font: 800 0.52rem "Plus Jakarta Sans", sans-serif; letter-spacing: 0.03em; }
.rd-step-lines { display: grid; gap: 3px; margin: 3px 0 0; padding: 0; list-style: none; }
.rd-step-lines li { padding: 3px 9px; border-left: 3px solid var(--c); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--c) 8%, var(--bg)); font-size: 0.76rem; font-weight: 700; }
.talk { display: grid; gap: 4px; margin-top: 3px; }
.turn { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 8px; margin: 0; padding: 4px 9px; border-radius: 8px; background: var(--bg2); color: var(--ink); font-size: 0.78rem; line-height: 1.3; }
.turn i { color: var(--muted); font-size: 0.7rem; font-style: normal; font-variant-numeric: tabular-nums; }
.turn b { font: 800 0.6rem "Plus Jakarta Sans", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.turn--a b { color: #d9487f; }
.turn--b b { color: #2b6cd1; }

/* ---------- Ficha: los campos entran de uno en uno, como si DalIA los fuera llenando ---------- */
.fields { display: grid; gap: 8px; margin: 0; align-content: start; }
.field {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dashed var(--line);
  padding: 6px 0;
  font-size: 0.92rem;
}
.field dt { color: var(--muted); }
.field dd { margin: 0; font-weight: 700; text-align: right; }
@keyframes field-in { from { opacity: 0; transform: translateY(6px); } }
.tag {
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--accent-soft);
  color: var(--accent);
}
/* El sentimiento va en semáforo: positivo en verde, negativo en rojo y neutro en el color de acento */
.tag--pos { background: color-mix(in srgb, #1f9d55 16%, transparent); color: color-mix(in srgb, #1f9d55 75%, var(--ink)); }
.tag--neg { background: color-mix(in srgb, #e5484d 16%, transparent); color: color-mix(in srgb, #e5484d 75%, var(--ink)); }

/* ========== Con la demostración en marcha (js/demos/read.js añade is-live): estado de PARTIDA y de LLEGADA ========== */
.is-live .log { display: grid; }
.is-live .src [data-at], .is-live .log [data-at] { opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; }
.is-live .log [data-at] { transform: translateY(6px); }
.is-live .src [data-at].on, .is-live .log [data-at].on { opacity: 1; transform: none; }

/* Hoja: el marcador amarillo aparece línea a línea; la fotografía y el escaneado están apagados hasta que se detectan */
.is-live .doc-text i { background: #d9dee8; }
.is-live .doc-text i.on { background: #ffe066; }
.is-live .doc-photo, .is-live .doc-scan { filter: grayscale(0.9) opacity(0.5); }
.is-live .doc-photo.on, .is-live .doc-scan.on { filter: none; }
.is-live .br, .is-live .doc-tag { opacity: 0; transition: opacity 0.35s 0.15s, transform 0.4s 0.15s; }
.is-live .br-tl, .is-live .br-bl { transform: translateX(7px); }
.is-live .br-tr, .is-live .br-br { transform: translateX(-7px); }
.is-live .doc-tag { transform: translateY(-4px); }
.is-live .on > .br, .is-live .on > .doc-tag { opacity: 1; transform: none; }
.is-live .doc-photo.on .scan, .is-live .photo .scan.on { opacity: 1; animation: scan-move 1.5s ease-in-out forwards; }
.is-live .sheet-scan { filter: blur(1.3px); }
.is-live .doc-scan.on .sheet-scan { filter: none; }
.is-live .doc-scan.on .ocr-bar { animation: ocr-sweep 1.5s ease-in-out forwards; }

/* Audio: el tramo de quien habla se enciende cuando la cabeza lectora llega; la onda se mueve solo mientras suena */
.is-live .rd-seg { opacity: 0.18; }
.is-live .rd-seg.on { opacity: 1; }
.is-live .playhead { display: block; opacity: 0; }
.is-live .playhead.on { opacity: 1; animation: ph-move var(--span) linear forwards; }
.is-live .wave i { opacity: 0.3; animation: none; transform: scaleY(0.3); transition: opacity 0.4s; }
.is-live .wave.on i { opacity: 1; animation: wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -90ms); }

/* Excel: las columnas que unen las tablas se resaltan y se enlazan con una línea que se dibuja */
.is-live .rd-key, .is-live .rowhl { opacity: 0; }
.is-live .rd-key.on, .is-live .rowhl.on { opacity: 1; }
.is-live .rl path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-live .rl.on path { animation: rl-draw 0.9s ease-out forwards; }
.is-live .rl circle { opacity: 0; transition: opacity 0.3s 0.5s; }
.is-live .rl.on circle { opacity: 1; }

/* Al terminar la extracción el registro se retira y entra la ficha */
.is-live .fields { opacity: 0; visibility: hidden; }
.is-live .read-panel[data-phase="card"] .log { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.is-live .read-panel[data-phase="card"] .fields { opacity: 1; visibility: visible; transition: opacity 0.3s 0.2s; }
.is-live .read-panel[data-phase="card"] .field { animation: field-in 0.45s both; animation-delay: calc(var(--n) * 70ms + 250ms); }

/* Ventanas angostas (hasta 1200 px): la columna del registro es más estrecha y el texto se envuelve más; letras y espacios algo menores para que la tarjeta no crezca */
@media (min-width: 861px) and (max-width: 1200px) {
  .read-grid { gap: 12px; }
  .log { gap: 5px; }
  .rd-step { grid-template-columns: 24px minmax(0, 1fr); gap: 7px; }
  .rd-step-ico { width: 24px; height: 24px; border-radius: 8px; }
  .rd-step-ico svg { width: 14px; height: 14px; }
  .rd-step-head { font-size: 0.76rem; }
  .rd-step-head span { font-size: 0.72rem; }
  .rd-step-out { font-size: 0.72rem; line-height: 1.32; padding: 3px 8px; }
  .rd-chip { font-size: 0.68rem; padding: 1px 8px; }
  .rd-step-lines li { font-size: 0.68rem; padding: 2px 8px; }
  .turn { gap: 6px; padding: 3px 8px; font-size: 0.7rem; }
  .turn b { font-size: 0.54rem; }
}
@media (max-width: 860px) { .read-grid { grid-template-columns: 1fr; } .src { min-height: 300px; } }

@media (prefers-reduced-motion: reduce) {
  .rt-bar { display: none; }
  .read-panel { transition: none; }
  .wave i, .photo .det > rect:first-child { animation: none; }
}