/* Práctica (#practica). Ventana de producto a todo el ancho: «Antes, a mano» (pasos que se tachan) y el método
   en vertical, unido por un riel: lo pides tú (verde) → lo hace la IA (rojo) → lo revisa una persona (verde).
   Fondo: lo pone base.css (data-tone="surface-2", la única sección en #161A2A). Todos los selectores empiezan por #practica.
   El contenido empieza en la misma vertical que el logo y el resto de secciones. */

#practica {
  --pr-max: var(--max);
  --pr-pad: 32px;           /* margen interior de la ventana */
  --pr-rail: 56px;          /* sangría del método para el riel */
  --pr-node: 28px;          /* distancia del nodo al texto */
  --pr-gap: 28px;           /* separación entre tramos */
  --pr-human-line: rgba(125, 219, 140, 0.4);
}

#practica .pr-wrap { max-width: var(--pr-max); margin-inline: auto; }

/* ---------- Cabecera: titular a la izquierda, tareas a la derecha ---------- */
#practica .pr-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: clamp(28px, 4vw, 48px); }
#practica .pr-head-text { display: grid; gap: clamp(12px, 1.6vw, 20px); }
#practica .pr-team { color: var(--human); }

#practica .pr-tabs { position: relative; min-width: 0; }
#practica .pr-tablist { display: flex; flex-direction: column; }
#practica .pr-tab {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 58px; padding: 12px 4px 12px 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.012em;
  text-align: left; color: var(--text-3);
  transition: color 0.25s var(--ease-out), transform 0.16s var(--ease-out);
}
#practica .pr-tab:last-child { border-bottom: 1px solid var(--line); }
#practica .pr-tab:active { transform: scale(0.97); }
#practica .pr-tab[aria-selected="true"] { color: var(--text); }
#practica .pr-tab svg {
  flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}
#practica .pr-tab[aria-selected="true"] svg { opacity: 1; transform: none; color: var(--human); }
#practica .pr-tabs-ink {
  position: absolute; top: 0; left: 0; width: 2px; height: 0; border-radius: 2px;
  background: var(--human); pointer-events: none;
}

@media (min-width: 1024px) {
  #practica .pr-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; }
}

/* ---------- Ventana ---------- */
#practica .pr-window {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 48px 96px -56px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(7, 8, 15, 0.6);
  overflow: hidden;
}

/* Barra superior */
#practica .pr-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 4px 14px 4px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
#practica .pr-bar-title { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 0.875rem; color: var(--text-3); }
#practica .pr-bar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#practica .pr-bar-text b { font-weight: 500; color: var(--text); }
#practica .pr-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--human);
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
#practica .pr-dot.is-busy { background: var(--ai); box-shadow: 0 0 0 4px var(--ai-soft); }
#practica .pr-replay { flex: none; gap: 8px; padding: 0 8px; font-size: 0.875rem; color: var(--text-2); text-decoration: none; }
#practica .pr-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease-out); }

/* Cuerpo: «Antes» (3/12) + método (9/12) */
#practica .pr-body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  #practica .pr-body { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
}

/* ---------- Antes, a mano ---------- */
#practica .pr-before { background: rgba(7, 8, 15, 0.38); }
#practica .pr-before-toggle { display: none; }
#practica .pr-before-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; font-size: 0.875rem; font-weight: 500; color: var(--text-2);
}
#practica .pr-before-count { color: var(--text-3); font-weight: 400; }
#practica .pr-steps { display: grid; }
#practica .pr-step {
  padding-block: 11px; border-bottom: 1px solid var(--line-soft);
  font-size: 0.9375rem; line-height: 1.45;
}
#practica .pr-step:last-child { border-bottom: 0; }
/* El tachado es rojo: ese paso ya lo hace la IA. Con una instrucción floja vuelve a hacerse a mano. */
#practica .pr-step-text {
  color: var(--text-3);
  background: linear-gradient(rgba(239, 58, 29, 0.9), rgba(239, 58, 29, 0.9)) 0 58% / 100% 1.5px no-repeat;
}
#practica [data-steps="manual"] .pr-step-text { color: var(--text-2); background-size: 0% 1.5px; }
#practica .pr-now { margin-top: 18px; font-size: 0.875rem; line-height: 1.45; color: var(--text-2); }
#practica .pr-now b { font-weight: 700; color: var(--human); }
#practica [data-steps="manual"] .pr-now b { color: var(--error); }

@media (min-width: 1024px) {
  #practica .pr-before { display: flex; flex-direction: column; padding: 26px 24px 30px; border-right: 1px solid var(--line); }
  #practica .pr-before-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; }
  /* «Ahora» abajo, a la altura del sello: cierra la columna con lo que queda del trabajo */
  #practica .pr-now { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
}

/* ---------- El método, unido por un riel ---------- */
#practica .pr-flow {
  display: grid; gap: var(--pr-gap); align-content: start;
  padding: 24px var(--pr-pad) 30px var(--pr-rail);
  min-width: 0;
}
#practica .pr-stage { position: relative; min-width: 0; }
/* Tramo del riel: del nodo de este tramo al del siguiente. */
#practica .pr-stage:not(:last-child)::before {
  content: ""; position: absolute;
  left: calc(var(--pr-node) * -1 + 5px); top: 20px; bottom: calc((var(--pr-gap) + 20px) * -1);
  width: 1px; background: var(--line-2);
}
#practica .pr-stage-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
#practica .pr-stage-label {
  position: relative; display: flex; align-items: center; min-height: 40px;
  font-size: 0.875rem; font-weight: 500; color: var(--text);
}
#practica .pr-node {
  position: absolute; left: calc(var(--pr-node) * -1); top: 50%;
  width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  box-shadow: 0 0 0 4px var(--surface);
}
#practica .pr-node-human { background: var(--human); }
#practica .pr-node-ai { background: var(--ai); }

/* Interruptor Floja / Bien hecha */
#practica .pr-switch {
  position: relative; display: inline-flex; padding: 3px; border-radius: 999px;
  background: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2);
}
#practica .pr-switch button {
  position: relative; z-index: 1; flex: 1 1 0;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; color: var(--text-3); white-space: nowrap;
  transition: color 0.25s var(--ease-out), transform 0.16s var(--ease-out);
}
#practica .pr-switch button:active { transform: scale(0.97); }
#practica .pr-switch button[aria-checked="true"] { color: var(--text); }
#practica .pr-switch-ink {
  position: absolute; top: 3px; left: 0; width: 0; height: calc(100% - 6px); border-radius: 999px;
  background: var(--surface-3); pointer-events: none;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
#practica [data-mode="buena"] .pr-switch-ink { background: var(--human-soft); box-shadow: inset 0 0 0 1px var(--pr-human-line); }
#practica [data-mode="buena"] .pr-switch button[aria-checked="true"] { color: var(--human); }

/* Burbuja de la instrucción: borde verde porque la escribe una persona */
#practica .pr-bubble {
  margin-top: 10px; padding: 16px 20px;
  border-radius: 16px;
  background: rgba(125, 219, 140, 0.045);
  box-shadow: inset 0 0 0 1px var(--human);
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
#practica [data-mode="floja"] .pr-bubble { background: rgba(238, 240, 247, 0.02); box-shadow: inset 0 0 0 1px var(--line-2); }
#practica .pr-prompt { display: grid; gap: 4px; }
#practica .pr-piece {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 16px;
  margin-inline: -10px; padding: 6px 10px; border-radius: 10px;
  font-size: 1.0625rem; line-height: 1.55; color: var(--text);
  transition: background-color 0.25s var(--ease-out);
}
#practica .pr-piece-label {
  padding-top: 3px; font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--text-2);
  -webkit-user-select: none; user-select: none;
  transition: color 0.25s var(--ease-out);
}
#practica .pr-piece-text {
  min-width: 0; overflow-wrap: break-word;
  text-decoration: underline; text-decoration-color: var(--pr-human-line);
  text-decoration-thickness: 1px; text-underline-offset: 6px;
}
#practica .pr-piece.is-lit { background: var(--human-soft); }
#practica .pr-piece.is-lit .pr-piece-label { color: var(--human); }
#practica .pr-piece.is-lit .pr-piece-text { text-decoration-color: var(--human); }
#practica .pr-piece .caret-human { visibility: hidden; }
/* Floja: una línea en gris, sin piezas ni subrayado */
#practica .pr-piece-floja { grid-template-columns: minmax(0, 1fr); color: var(--text-2); }
#practica .pr-piece-floja .pr-piece-text { text-decoration: none; }

#practica .pr-bubble-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(125, 219, 140, 0.18);
}
#practica .pr-copy-msg { margin-right: auto; font-size: var(--fs-small); color: var(--text-2); }
#practica .pr-copy-msg:empty { display: none; }
#practica .pr-copy svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#practica .pr-copy .pr-copy-done { display: none; }
#practica .pr-copy.is-done { color: var(--human); box-shadow: inset 0 0 0 1px var(--human); }
#practica .pr-copy.is-done .pr-copy-icon { display: none; }
#practica .pr-copy.is-done .pr-copy-done { display: block; }

/* Resultado: borde rojo porque lo escribe la IA */
#practica .pr-result {
  position: relative;
  margin-top: 6px; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--ai);
  transition: border-color 0.3s var(--ease-out);
}
#practica .pr-result-head { display: flex; align-items: center; min-height: 32px; margin-bottom: 4px; }
#practica .pr-result-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; }
#practica .pr-lines li { padding-block: 8px; border-bottom: 1px solid var(--line-soft); font-size: 1rem; line-height: 1.5; }
#practica .pr-lines li:last-child { border-bottom: 0; }
#practica .pr-generic {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px;
  background: rgba(255, 138, 156, 0.1); color: var(--error);
  font-size: 0.8125rem; font-weight: 700;
}
#practica [data-mode="floja"] .pr-result { border-left-color: rgba(239, 58, 29, 0.35); }
#practica [data-mode="floja"] .pr-lines li { color: var(--text-2); }

/* Sello de revisión */
#practica .pr-stamp {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 8px 14px; border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px var(--human); color: var(--human);
  font-size: 0.875rem; font-weight: 700; line-height: 1.3;
  transform: rotate(-1.5deg); transform-origin: 50% 50%;
}
#practica .pr-stamp svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#practica [data-mode="floja"] .pr-stamp { box-shadow: inset 0 0 0 1.5px var(--error); color: var(--error); }

/* Pie de la ventana */
#practica .pr-learn {
  padding: 16px var(--pr-pad);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.9375rem; line-height: 1.5; color: var(--text-2);
}
#practica .pr-learn b { font-weight: 700; color: var(--text); }

/* Bajo la ventana */
#practica .pr-after { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(24px, 3vw, 36px); }
#practica .pr-after-note { font-size: 0.9375rem; color: var(--text-2); }
#practica .pr-after-note span { color: var(--text); }

/* ---------- Solo con ratón ---------- */
@media (hover: hover) and (pointer: fine) {
  #practica .pr-tab:hover { color: var(--text-2); }
  #practica .pr-tab[aria-selected="true"]:hover { color: var(--text); }
  #practica .pr-tab:not([aria-selected="true"]):hover svg { opacity: 0.5; transform: none; }
  #practica .pr-replay:hover { color: var(--text); }
  #practica .pr-replay:hover svg { transform: rotate(-200deg); }
  #practica .pr-switch button:not([aria-checked="true"]):hover { color: var(--text-2); }
  #practica [data-mode="buena"] .pr-piece { cursor: pointer; }
  #practica [data-mode="buena"] .pr-piece:hover { background: rgba(125, 219, 140, 0.08); }
  #practica [data-mode="buena"] .pr-piece:hover .pr-piece-label { color: var(--human); }
  #practica .pr-copy.is-done:hover { box-shadow: inset 0 0 0 1px var(--human); }
}

/* ---------- Tableta y móvil ---------- */
@media (max-width: 1023px) {
  /* Tareas como chips */
  #practica .pr-tablist { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  #practica .pr-tab {
    flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
    font-family: var(--font-text); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; white-space: nowrap;
    color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2);
    transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.16s var(--ease-out);
  }
  #practica .pr-tab:last-child { border-bottom: 0; }
  #practica .pr-tab[aria-selected="true"] { background: var(--text); color: var(--ink); box-shadow: none; }
  #practica .pr-tab svg, #practica .pr-tabs-ink { display: none; }

  /* «Antes» plegado en una línea */
  #practica .pr-before { border-bottom: 1px solid var(--line); }
  #practica .pr-before-head { display: none; }
  #practica .pr-before-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 52px; padding: 0 20px;
    font-size: 0.9375rem; font-weight: 500; color: var(--text-2); text-align: left;
    transition: color 0.25s var(--ease-out);
  }
  #practica .pr-before-toggle:active { transform: scale(0.97); }
  /* La ventana recorta lo que sale de ella: el anillo de foco va por dentro. */
  #practica .pr-before-toggle:focus-visible { outline-offset: -3px; }
  #practica .pr-before-toggle svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); }
  #practica .pr-before-toggle[aria-expanded="true"] { color: var(--text); }
  #practica .pr-before-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  #practica .pr-before-panel { display: none; padding: 0 20px 18px; }
  #practica .pr-before.is-open .pr-before-panel { display: block; }
  #practica .pr-now { margin-top: 12px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #practica .pr-head { margin-bottom: 32px; }
}

/* En móvil, la barra de la ventana enseña solo la tarea («Resumir una reunión»), que es lo que importa. */
@media (max-width: 599px) {
  #practica .pr-bar-pre { display: none; }
}

@media (max-width: 767px) {
  #practica {
    --pr-pad: 16px;
    --pr-rail: 40px;
    --pr-node: 24px;
    --pr-gap: 24px;
  }
  #practica .pr-head { gap: 20px; }
  #practica .pr-tablist { flex-wrap: nowrap; }
  #practica .pr-bar { padding: 2px 4px 2px 16px; }
  #practica .pr-before-toggle { padding: 0 16px; }
  #practica .pr-before-panel { padding: 0 16px 16px; }
  #practica .pr-flow { padding-top: 16px; padding-bottom: 24px; }

  /* Interruptor a todo el ancho */
  #practica .pr-ask .pr-stage-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 4px; }
  #practica .pr-switch { display: flex; width: 100%; }

  #practica .pr-bubble { padding: 12px 14px; }
  #practica .pr-piece { grid-template-columns: minmax(0, 1fr); gap: 0; margin-inline: -6px; padding: 6px; font-size: 0.9375rem; line-height: 1.5; }
  #practica .pr-piece-label { padding-top: 0; }
  #practica .pr-piece-text { text-underline-offset: 5px; }
  #practica .pr-bubble-foot { display: grid; justify-content: stretch; }
  #practica .pr-copy { width: 100%; }
  #practica .pr-copy-msg { margin-right: 0; }

  #practica .pr-result { padding-left: 14px; }
  #practica .pr-result-title { font-size: 1.125rem; }
  #practica .pr-lines li { font-size: 0.9375rem; }
  #practica .pr-check .pr-stage-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: start; gap: 6px; }
  #practica .pr-stamp { font-size: 0.8125rem; }

  #practica .pr-learn { padding: 14px 16px; font-size: 0.875rem; }
  #practica .pr-after { display: grid; gap: 14px; }
  #practica .pr-after .btn { width: 100%; }
}

/* Polvo de la respuesta (practica.js): encima del texto y sin coger clics. */
#practica .pr-dust { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); pointer-events: none; z-index: 2; }