/* ==========================================================================
   04-agentes.css : laminas 09 y 10

   Lo unico que no cubria components.css: el tablero con agentes trabajando en
   paralelo, la lista de reglas de diseno y la rafaga de proyectos.
   ========================================================================== */

/* Tinte del rechazo. Va en variables porque las usa una animacion, y asi el
   tema oscuro cambia el tono sin tener que duplicar los fotogramas. */
:root {
  --tb-rechazo:   rgba(207, 34, 41, 0.10);
  --tb-rechazo-2: rgba(207, 34, 41, 0.20);
}

:root[data-theme="dark"] {
  --tb-rechazo:   rgba(248, 81, 73, 0.16);
  --tb-rechazo-2: rgba(248, 81, 73, 0.26);
}

/* ── El tablero de la lamina 09 ──────────────────────────────────────────
   Es lo unico que hay en el cuerpo de la lamina, asi que manda: crece hasta
   ocupar todo el alto disponible en vez de dejar un tercio suelto debajo.
   Las tres tarjetas que antes flotaban aparte ahora son la anotacion que
   lleva cada columna, pegada a lo que explica. */
.tablero {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px 20px;
  box-shadow: var(--card-shadow);
  position: relative;
}

.tb-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.tb-nom { font-size: 19px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }

/* La cifra es evidencia, no un rotulo de widget: va al color de acento y a un
   tamano que se lee desde el fondo del salon. */
.tb-num {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 650;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.tb-cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-content: start;
}

.tb-col { display: flex; flex-direction: column; gap: 12px; }

/* Nombre de la columna y, debajo, la anotacion de lo que esta pasando en ella */
.tb-hd {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 10px;
  margin-bottom: 1px;
  border-bottom: 1px solid var(--line);
}

.tb-h {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.tb-nota {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--text);
}

.tb-nota::before {
  content: "";
  flex: none;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* Las historias en curso dicen quien las esta atendiendo. Sin eso el tablero es
   un dibujo de columnas. Con eso se ve que son tres agentes distintos
   trabajando a la vez sobre el mismo proyecto, que es el argumento de la
   lamina. Las hechas van sin nombre, para no gastar palabras en un dato que
   ya no informa. */
.tb-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--text);
}

.tb-card b { font-weight: 650; color: inherit; margin-right: auto; }

.tb-card i {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

/* Un color por agente, el mismo en todas las columnas */
.tb-card.ag1 { border-left-color: var(--accent);    color: var(--text); }
.tb-card.ag1 i { color: var(--accent); }
.tb-card.ag2 { border-left-color: var(--gold);      color: var(--text); }
.tb-card.ag2 i { color: var(--gold); }
.tb-card.ag3 { border-left-color: var(--accent-2);  color: var(--text); }
.tb-card.ag3 i { color: var(--accent-2); }

/* Las hechas ya no se apagan con opacidad: gris claro sobre gris es lo primero
   que lava el videobeam. Se distinguen por el borde verde y el visto. */
.tb-card.ok { border-left-color: var(--ok); color: var(--text-dim); }

.tb-card.ok::after {
  content: "";
  flex: none;
  width: 11px;
  height: 6px;
  margin-bottom: 4px;
  border: 2px solid var(--ok);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

/* ── La secuencia del choque ─────────────────────────────────────────────
   Tres tiempos, una sola pasada y estado final estable:

   0,75 a 1,25 s   tres agentes toman historias distintas, uno tras otro
   2,40 s          entra una cuarta con un nombre que ya esta en uso
   3,30 s          las dos T-043 se marcan en rojo, que es la colision
   3,90 s          el tablero tacha la repetida
   4,20 s          queda el aviso, y ahi se queda

   Nada corre en bucle y nada termina invisible: el estado base de cada
   elemento es el estado final, y las animaciones llevan fill "both", de modo
   que antes de su turno estan ocultas y despues quedan fijas. En impresion y
   con movimiento reducido se ve directamente el final. */
@keyframes tomar {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

.slide.is-active .tb-card.ent { animation: tomar 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide.is-active .tb-card.e1  { animation-delay: 0.75s; }
.slide.is-active .tb-card.e2  { animation-delay: 1.00s; }

/* La tercera ademas acusa el golpe cuando llega la repetida, y vuelve a lo
   que estaba: el tablero sigue corriendo. */
.slide.is-active .tb-card.e3 {
  animation: tomar 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.25s both,
             alerta 1.3s ease-in-out 3.3s both;
}

@keyframes alerta {
  0%, 100% { box-shadow: none; }
  25%, 72% { box-shadow: 0 0 0 2px var(--danger); }
}

/* La cuarta historia entra con el nombre de la tercera. Su estado de reposo
   es el de rechazada, que es como queda la lamina al final. */
.tb-card.dup {
  margin-left: 12px;
  border-color: var(--danger);
  border-left-color: var(--danger);
  background: var(--tb-rechazo);
  color: var(--danger);
}

.tb-card.dup i { color: inherit; }

.slide.is-active .tb-card.dup { animation: colar 2.6s cubic-bezier(0.4, 0, 0.2, 1) 2.4s both; }

@keyframes colar {
  0% {
    opacity: 0;
    transform: translate3d(-16px, 0, 0);
    border-color: var(--line);
    border-left-color: var(--accent-2);
    background: var(--surface);
    color: var(--text);
  }
  22% {
    opacity: 1;
    transform: none;
    border-color: var(--line);
    border-left-color: var(--accent-2);
    background: var(--surface);
    color: var(--text);
  }
  40% {
    border-color: var(--danger);
    border-left-color: var(--danger);
    background: var(--tb-rechazo-2);
    color: var(--danger);
  }
  100% {
    opacity: 1;
    transform: none;
    border-color: var(--danger);
    border-left-color: var(--danger);
    background: var(--tb-rechazo);
    color: var(--danger);
  }
}

/* El tachado del tablero sobre la historia repetida */
.tb-card.dup::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: var(--danger);
  transform-origin: left center;
}

.slide.is-active .tb-card.dup::after { animation: tachar 0.45s ease both; animation-delay: 3.9s; }

@keyframes tachar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* El aviso ya no vive en una esquina ni se apaga al cerrar el bucle: cuelga de
   la historia que rechazo y se queda visible el resto de la lamina. */
.tb-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--danger);
}

.tb-aviso::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

.slide.is-active .tb-aviso { animation: surgir 0.45s ease 4.2s both; }

@keyframes surgir {
  from { opacity: 0; transform: translate3d(0, -4px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── Las tres reglas del archivo digital, lamina 10 ──────────────────────── */
.reglas { list-style: none; margin-top: 8px; }

.reglas li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 7px;
}

/* Un candado dibujado con dos pseudoelementos, sin iconos externos */
.reglas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 8px;
  border: 1.6px solid var(--accent);
  border-radius: 2px;
}

.reglas li::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 1px;
  width: 6px;
  height: 6px;
  border: 1.6px solid var(--accent);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

/* ── La rafaga de proyectos ──────────────────────────────────────────────
   Entran uno tras otro, rapido. La velocidad es el mensaje: que sean muchos es
   justamente lo que se esta demostrando. Cada renglon lleva una sola palabra,
   asi que va mas grande, y el numero de orden lo dibuja el CSS en vez de
   gastar cinco palabras del presupuesto. */
.rafaga { display: flex; flex-direction: column; gap: 11px; justify-content: center; }

.rafaga .rf {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  opacity: 0;
}

.rafaga .rf::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1.6px solid var(--accent);
  border-radius: 2px;
}

.slide.is-active .rafaga .rf { animation: rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.slide.is-active .rafaga .rf:nth-child(1) { animation-delay: 0.60s; }
.slide.is-active .rafaga .rf:nth-child(2) { animation-delay: 0.78s; }
.slide.is-active .rafaga .rf:nth-child(3) { animation-delay: 0.96s; }
.slide.is-active .rafaga .rf:nth-child(4) { animation-delay: 1.14s; }
.slide.is-active .rafaga .rf:nth-child(5) { animation-delay: 1.32s; }

/* ── La columna que gana, en la tabla comparativa ────────────────────────── */
table.t td.hi-cell {
  color: var(--text);
  font-weight: 650;
  background: rgba(9, 105, 218, 0.06);
}

:root[data-theme="dark"] table.t td.hi-cell { background: rgba(88, 166, 255, 0.08); }

/* ── Sin movimiento, todo se ve igual de completo ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .slide.is-active .tb-card.ent,
  .slide.is-active .tb-card.e1,
  .slide.is-active .tb-card.e2,
  .slide.is-active .tb-card.e3,
  .slide.is-active .tb-card.dup,
  .slide.is-active .tb-card.dup::after,
  .slide.is-active .tb-aviso,
  .slide.is-active .rafaga .rf {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── La cara de GitHub Projects ──────────────────────────────────────────
   Iconos de Primer Octicons, el sistema de iconos de GitHub, con sus colores
   de estado: issue abierto en verde, cerrado en morado, rechazo en rojo. El
   punto de cada columna es el mismo codigo de color que usa Projects para
   Todo, In progress y Done. */
.tb-ico { width: 20px; height: 20px; fill: var(--text-dim); flex: none; }
.tb-iss { width: 18px; height: 18px; flex: none; fill: currentColor; }
.tb-iss.abierto { fill: #1A7F37; }
.tb-iss.cerrado { fill: #8250DF; }
:root[data-theme="dark"] .tb-iss.abierto { fill: #3FB950; }
:root[data-theme="dark"] .tb-iss.cerrado { fill: #A371F7; }
.tb-cop { width: 17px; height: 17px; fill: currentColor; flex: none; }

.tb-est { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid; flex: none; }
.tb-est.todo  { border-color: #1A7F37; background: rgba(26, 127, 55, 0.14); }
.tb-est.curso { border-color: #BF8700; background: rgba(191, 135, 0, 0.16); }
.tb-est.hecho { border-color: #8250DF; background: rgba(130, 80, 223, 0.14); }

/* Las hechas se distinguen por el icono morado de cerrado, que ya dice
   "terminado" en el idioma de GitHub. El visto dibujado de antes sobra. */
.tb-card.ok::after { display: none; }
.tb-card.ok { border-left-color: #8250DF; }
:root[data-theme="dark"] .tb-card.ok { border-left-color: #A371F7; }

/* ── La frase ─────────────────────────────────────────────────────────────
   Bajo el tablero, la frase aprobada para esta parte. En lugar de la fuente
   suelta que habia antes. Entra al final, cuando el choque ya ocurrio. */
.tb-frase {
  flex: none;
  margin-top: 20px;
  padding-left: 18px;
  border-left: 4px solid var(--accent);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════════════
   10 y 11, la antigua 10 dividida en dos el 25 de septiembre por la noche.
   Las reglas .reglas y .rafaga de arriba quedan sin uso y no se borran.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 10 Lo que automatice para estudiar ──────────────────────────────── */
.au-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 22px; flex: 1; min-height: 0; }

.au {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.au.lit { border: 2px solid var(--accent); }

.au-img { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0D1117; }
.au-img img, .au-img video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.au figcaption {
  white-space: nowrap;
  flex: none;
  padding: 12px 16px 14px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
  border-top: 1px solid var(--line);
}

.au figcaption b { font-weight: 700; }

/* Cada pieza entra una detras de otra, al ritmo en que se nombran */
@keyframes auEntra { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); } to { opacity: 1; transform: none; } }
.slide.is-active .au { animation: auEntra 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide.is-active .au:nth-child(1) { animation-delay: 0.3s; }
.slide.is-active .au:nth-child(2) { animation-delay: 0.9s; }
.slide.is-active .au:nth-child(3) { animation-delay: 1.5s; }
.slide.is-active .au:nth-child(4) { animation-delay: 2.1s; }
.slide.is-active .au:nth-child(5) { animation-delay: 2.7s; }
.slide.is-active .au:nth-child(6) { animation-delay: 3.3s; }

/* Un paneo lento dentro de cada captura, para que no se queden muertas */
@keyframes auPaneo { from { transform: scale(1.0); } to { transform: scale(1.08); } }
.slide.is-active .au-img img { animation: auPaneo 12s ease-out 0.5s both; transform-origin: top center; }

/* ── 11 Un proyecto de 2022 y uno de 2026 ──────────────────────────────── */
.compara { gap: 16px; justify-content: flex-start; }
.cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.cm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

.cm.ahora { border: 2px solid var(--accent); }
.cm-img { height: 262px; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.cm-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

.cm h3 { margin: 2px 0 0; font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--text); }

.cm-num { display: flex; justify-content: space-between; gap: 12px; }
.cm-num span { font-size: 18px; color: var(--text); }
.cm-num b { display: block; font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.cm.antes .cm-num b { color: var(--text-dim); }
.cm.ahora .cm-num b { color: var(--accent); }

.cm-archivo {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: 12px;
}

.cm-archivo img { height: 50px; width: 84px; object-fit: cover; object-position: center 22%; border-radius: 6px; }
.cm-archivo b { font-size: 21px; font-weight: 700; color: var(--text); margin-right: auto; }
.cm-archivo span { font-size: 18px; font-weight: 600; color: var(--text); padding: 6px 12px; border-radius: 999px; background: var(--on-bg, rgba(26, 127, 55, 0.08)); border: 1px solid var(--line); }

@keyframes cmEntra { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.slide.is-active .cm.antes { animation: cmEntra 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
.slide.is-active .cm.ahora { animation: cmEntra 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both; }
.slide.is-active .cm-archivo { animation: cmEntra 0.5s cubic-bezier(0.22, 1, 0.36, 1) 3.2s both; }

@media (prefers-reduced-motion: reduce) {
  .slide.is-active .au, .slide.is-active .au-img img, .slide.is-active .cm, .slide.is-active .cm-archivo { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media print {
  .au, .au-img img, .cm, .cm-archivo { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* El bot ocupa la tercera columna entera, de arriba abajo. El video es
   vertical, asi que se muestra entero y centrado sobre el color del chat. */
.au-grid { grid-template-columns: 1fr 1fr 0.86fr; }
.au.bot { grid-column: 3; grid-row: 1 / span 2; }
.au.bot .au-img { background: #F472B6; }
.au.bot .au-img video { object-fit: contain; object-position: center top; background: #FFFFFF; }
.slide.is-active .au.bot { animation-delay: 0.6s; }

/* Con el tablero funcionando (tablero.js le pone la clase vivo), el choque
   lo anima el script en su paso del ciclo. Las animaciones de CSS de la
   version estatica no aplican ahi. */
.tablero.vivo .tb-card.dup, .tablero.vivo .tb-card.dup::after, .tablero.vivo .tb-aviso { animation: none !important; opacity: 1; }
.tablero.vivo .tb-col { position: relative; }
/* Sin el destello rojo de la version estatica: el choque ahora es un paso
   del ciclo, no un aviso sobre la tarjeta de copilot-3. */
.slide.is-active .tablero.vivo .tb-card.e3 { animation: tomar 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.25s both; }