/* ============================================
   Taller de IA (/en/ai-workshop/)
   Sobre el sistema de diseño de style.css.
   Sin fuentes externas: misma tipografía del sitio.
   ============================================ */

/* ---------- Miga de pan ---------- */
.taller-miga { background: var(--azul-950); padding: .7rem 0; font-size: .85rem; color: #7e93b5; }
.taller-miga a { color: #b9c9e3; text-decoration: none; }
.taller-miga a:hover { color: var(--cian-400); }
.taller-miga b { color: var(--blanco); }
.taller-miga span { opacity: .4; margin: 0 .35rem; }

/* ---------- Cabecera sobre fondo oscuro ---------- */
.taller-hero { padding: 3.5rem 0 4rem; }
.taller-hero .aiw-wrap { max-width: 860px; margin: 0 auto; }
.taller-hero .aiw-eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cian-400);
  background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.3);
  border-radius: 999px; padding: .35rem 1rem; margin-bottom: 1.2rem;
}
.taller-hero .aiw-headline { color: var(--blanco); margin: 0 0 .8rem; }
.taller-hero .aiw-byline { color: #9db3d4; font-size: .95rem; margin: 0 0 1.6rem; }
.taller-hero .aiw-byline b { color: var(--blanco); }
.taller-hero .aiw-lede, .taller-hero p { color: #cfdcef; font-size: 1.1rem; }
.taller-hero .aiw-lede b, .taller-hero p b { color: var(--blanco); }

.taller-hero .aiw-highlights {
  list-style: none; padding: 0; margin: 2.2rem 0 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.taller-hero .aiw-highlights li {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radio); padding: 1.2rem; font-size: .93rem; color: #b9c9e3;
  backdrop-filter: blur(4px);
}
.taller-hero .aiw-highlights li b {
  display: block; color: var(--blanco); font-size: 1.05rem; margin-bottom: .4rem;
}
.taller-hero .aiw-highlights li::before {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--azul-500), var(--cian-400)); margin-bottom: .8rem;
}

/* ---------- Cuerpo del guion ---------- */
.taller-guion .aiw-wrap { max-width: 860px; margin: 0 auto; }
.aiw-class-script { margin: 0; }
.aiw-script-head h2 { margin-bottom: .4rem; }
.aiw-script-head::before {
  content: ""; display: block; width: 56px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--azul-600), var(--cian-400)); margin-bottom: 1.2rem;
}
.aiw-script-sub { color: var(--gris-500); font-size: 1rem; }

/* ---------- Tablas ---------- */
.aiw-scroll-x { overflow-x: auto; margin: 1.4rem 0 2rem; border-radius: var(--radio); box-shadow: var(--sombra); }
table.aiw-grid { width: 100%; border-collapse: collapse; background: var(--blanco); font-size: .95rem; min-width: 560px; }
table.aiw-grid caption {
  text-align: left; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul-600); font-weight: 800; margin-bottom: .6rem;
}
table.aiw-grid th {
  background: var(--azul-950); color: var(--blanco); font-weight: 700;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .85rem .95rem; text-align: left;
}
table.aiw-grid td { padding: .8rem .95rem; border-bottom: 1px solid var(--gris-200); vertical-align: top; }
table.aiw-grid tr:nth-child(even) td { background: #fafbfd; }
table.aiw-grid tr:last-child td { border-bottom: 0; }
table.aiw-grid td b { color: var(--azul-950); }
table.aiw-grid a { color: var(--azul-600); font-weight: 600; text-decoration: none; }
table.aiw-grid a:hover { text-decoration: underline; }

/* ---------- Tres movimientos de prompting ---------- */
.aiw-moves { display: grid; gap: 1.1rem; margin: 1.6rem 0 2.5rem; }
.aiw-move {
  background: var(--blanco); border: 1px solid var(--gris-200); border-left: 4px solid var(--azul-600);
  border-radius: var(--radio); padding: 1.3rem 1.4rem; box-shadow: var(--sombra);
}
.aiw-move:nth-child(3) { border-left-color: var(--cian-400); }
.aiw-move:nth-child(4) { border-left-color: var(--verde-400); }
.aiw-move b { color: var(--azul-950); }
.aiw-move ul { margin: .8rem 0 0; padding-left: 1.1rem; }
.aiw-move li { font-size: .92rem; color: var(--gris-500); margin-bottom: .45rem; }

/* ---------- Pestañas de los días ---------- */
.aiw-tabs { display: flex; gap: .6rem; margin: 2.5rem 0 1.6rem; flex-wrap: wrap; }
.aiw-tab-btn {
  font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  border: 2px solid var(--gris-200); background: var(--blanco); color: var(--gris-500);
  padding: .7rem 1.4rem; border-radius: 999px; transition: .18s;
}
.aiw-tab-btn:hover { border-color: var(--azul-600); color: var(--azul-600); transform: translateY(-1px); }
.aiw-tab-btn[aria-selected="true"] {
  background: linear-gradient(135deg, var(--azul-800), var(--azul-600));
  border-color: transparent; color: var(--blanco); box-shadow: 0 6px 18px rgba(37,99,235,.28);
}
.aiw-day2 .aiw-tab-btn[aria-selected="true"] { background: linear-gradient(135deg, #0e7490, var(--cian-400)); }

.aiw-day1, .aiw-day2 {
  background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio);
  padding: 1.8rem; box-shadow: var(--sombra); position: relative; overflow: hidden;
}
.aiw-day1::before, .aiw-day2::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--azul-600), var(--cian-400));
}
.aiw-day2::before { background: linear-gradient(90deg, #0e7490, var(--verde-400)); }
.aiw-day-title h3 { margin-bottom: .2rem; }
.aiw-day-total { color: var(--gris-500); font-size: .95rem; margin-top: 0; }

/* ---------- Cronograma ---------- */
.aiw-timeline { list-style: none; padding: 0; margin: 0; counter-reset: hito; }
.aiw-timeline > li {
  border-left: 2px solid var(--gris-200); padding: 0 0 2rem 1.6rem; position: relative;
}
.aiw-timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.aiw-timeline > li::before {
  content: ""; position: absolute; left: -8px; top: .3rem; width: 14px; height: 14px;
  border-radius: 50%; background: var(--azul-600); border: 3px solid var(--blanco);
  box-shadow: 0 0 0 2px var(--azul-600);
}
.aiw-day2 .aiw-timeline > li::before { background: #0e7490; box-shadow: 0 0 0 2px #0e7490; }
.aiw-t-time {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--azul-600); margin-bottom: .25rem;
}
.aiw-day2 .aiw-t-time { color: #0e7490; }
.aiw-t-title { display: block; font-size: 1.2rem; font-weight: 800; color: var(--azul-950); line-height: 1.25; margin-bottom: .6rem; }
.aiw-t-desc { font-size: .99rem; margin: 0 0 .9rem; }
.aiw-bio-list, .aiw-steps { padding-left: 1.2rem; margin: .7rem 0 1.1rem; }
.aiw-bio-list li, .aiw-steps li { font-size: .95rem; color: var(--gris-500); margin-bottom: .55rem; }
.aiw-steps li b, .aiw-bio-list li b { color: var(--azul-950); }

/* ---------- Prompts con botón de copiar ---------- */
.aiw-prompt {
  position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .87rem; line-height: 1.6; color: #e8eefb;
  background: linear-gradient(160deg, #0f2240, #0a1628);
  border: 1px solid rgba(34,211,238,.22); border-left: 4px solid var(--cian-400);
  border-radius: 10px; padding: 1rem 4.6rem 1rem 1.1rem; margin: 0 0 1rem; white-space: pre-wrap;
}
.aiw-copiar {
  position: absolute; top: .6rem; right: .6rem; font: inherit; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  background: rgba(34,211,238,.14); color: var(--cian-400);
  border: 1px solid rgba(34,211,238,.35); border-radius: 999px; padding: .25rem .7rem; transition: .15s;
}
.aiw-copiar:hover { background: var(--cian-400); color: var(--azul-950); }
.aiw-copiar.ok { background: var(--verde-400); border-color: var(--verde-400); color: var(--azul-950); }

.aiw-deliver {
  font-size: .92rem; font-weight: 700; color: #047857;
  background: rgba(52,211,153,.12); border-radius: 8px; padding: .6rem .9rem; margin: 0 0 1rem;
}
.aiw-deliver::before { content: "✓ "; }

.aiw-chip, .aiw-lang-flag {
  display: inline-block; font-size: .73rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; background: var(--gris-100); color: var(--gris-500);
  border: 1px solid var(--gris-200); padding: .22rem .7rem; border-radius: 999px; margin: 0 .4rem .35rem 0;
}
.aiw-it { background: rgba(37,99,235,.1); color: var(--azul-600); border-color: rgba(37,99,235,.25); }
.aiw-dot { color: var(--gris-200); }
.aiw-rule { border: 0; border-top: 1px solid var(--gris-200); margin: 2.5rem 0; }
.aiw-bonus-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------- Cierre ---------- */
.aiw-cta {
  background: linear-gradient(135deg, var(--azul-900), var(--azul-950));
  color: var(--blanco); border-radius: var(--radio); padding: 2.2rem; box-shadow: var(--sombra);
}
.aiw-cta h3 { color: var(--blanco); }
.aiw-cta p { color: #b9c9e3; }
.aiw-cta a { color: var(--cian-400); }
.aiw-meta { color: var(--gris-500); font-size: .9rem; margin: 1.6rem 0 0; }

/* ---------- Progreso ---------- */
.aiw-progreso {
  margin: 0 0 1.6rem; padding: 1rem 1.2rem; border: 1px solid var(--gris-200);
  border-radius: var(--radio); background: linear-gradient(135deg, #f8fafc, var(--blanco));
}
.aiw-progreso--lleno { border-color: var(--verde-400); background: rgba(52,211,153,.08); }
.aiw-progreso-txt { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--gris-500); margin-bottom: .7rem; }
.aiw-progreso-txt b { color: var(--azul-950); font-size: 1.05rem; }
.aiw-reset {
  font: inherit; margin-left: auto; background: none; border: 1px solid var(--gris-200);
  border-radius: 999px; padding: .22rem .8rem; font-size: .8rem; color: var(--gris-500); cursor: pointer;
}
.aiw-reset:hover { border-color: var(--azul-600); color: var(--azul-600); }
.aiw-barra { height: 8px; border-radius: 999px; background: var(--gris-200); overflow: hidden; }
.aiw-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--azul-600), var(--cian-400)); transition: width .3s ease; }
.aiw-progreso--lleno .aiw-barra i { background: var(--verde-400); }

.aiw-chk { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.aiw-chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.aiw-chk-box {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: .15rem; border: 2px solid var(--gris-200);
  border-radius: 6px; background: var(--blanco); position: relative; transition: .15s;
}
.aiw-chk:hover .aiw-chk-box { border-color: var(--azul-600); }
.aiw-chk input:focus-visible + .aiw-chk-box { outline: 2px solid var(--azul-600); outline-offset: 2px; }
.aiw-chk input:checked + .aiw-chk-box { background: var(--verde-400); border-color: var(--verde-400); }
.aiw-chk input:checked + .aiw-chk-box::after {
  content: ""; position: absolute; left: 7px; top: 2px; width: 5px; height: 11px;
  border: solid var(--blanco); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.aiw-chk-txt { display: block; }
.aiw-chk input:checked ~ .aiw-chk-txt .aiw-t-title { text-decoration: line-through; opacity: .5; }

/* ---------- Reseña ---------- */
.aiw-review {
  background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio);
  padding: 2.2rem; margin-top: 2rem; text-align: center; box-shadow: var(--sombra);
  border-top: 4px solid #f59e0b;
}
.aiw-review h3 { margin-bottom: .6rem; }
.aiw-review p { color: var(--gris-500); max-width: 52ch; margin: 0 auto 1.4rem; }
.aiw-review-pie { font-size: .85rem; margin-top: 1.2rem !important; margin-bottom: 0 !important; }
.aiw-estrellas { font-size: 1.6rem; letter-spacing: .18em; color: #f59e0b; margin-bottom: .7rem; }

@media (max-width: 700px) {
  .aiw-cta, .aiw-day1, .aiw-day2, .aiw-review { padding: 1.3rem; }
  .aiw-timeline > li { padding-left: 1.2rem; }
  .aiw-prompt { padding-right: 1.1rem; padding-top: 2.6rem; }
  .aiw-copiar { top: .5rem; left: .7rem; right: auto; }
}
@media print { .aiw-progreso, .aiw-chk-box, .aiw-tabs, .aiw-copiar { display: none } }

/* ---------- Panel "Before we start" ---------- */
.aiw-day0 {
  background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio);
  padding: 1.8rem; box-shadow: var(--sombra); position: relative; overflow: hidden;
}
.aiw-day0::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--gris-500), var(--azul-600));
}
.aiw-day0 .aiw-tab-btn[aria-selected="true"] { background: var(--azul-950); }
.aiw-intro-bloque {
  border-left: 3px solid var(--gris-200); padding: 0 0 1.5rem 1.4rem; margin-bottom: .5rem;
}
.aiw-intro-bloque:last-of-type { padding-bottom: 1rem; }
.aiw-intro-bloque .aiw-t-time { color: var(--gris-500); }
.aiw-day0 .aiw-moves { margin-top: 1.6rem; }
.aiw-day0 .aiw-moves h4 {
  font-size: 1.15rem; color: var(--azul-950); margin: 0 0 .3rem;
  padding-top: 1.4rem; border-top: 1px solid var(--gris-200);
}

/* ---------- Herramientas por tarea ---------- */
.aiw-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 0 0 1rem; padding: .55rem .8rem;
  background: var(--gris-100); border-radius: 999px; width: fit-content; max-width: 100%;
}
.aiw-tools-et {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-500); margin-right: .2rem;
}
.aiw-tool {
  display: inline-block; font-size: .82rem; font-weight: 700; text-decoration: none;
  background: var(--blanco); color: var(--azul-600); border: 1px solid var(--gris-200);
  border-radius: 999px; padding: .2rem .75rem; transition: .15s;
}
a.aiw-tool:hover { background: var(--azul-600); border-color: var(--azul-600); color: var(--blanco); }
a.aiw-tool::after { content: " ↗"; font-size: .75em; opacity: .6; }
.aiw-day2 .aiw-tool { color: #0e7490; }
.aiw-day2 a.aiw-tool:hover { background: #0e7490; border-color: #0e7490; color: var(--blanco); }

/* ---------- Apéndice de herramientas ---------- */
.aiw-apendice {
  margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--gris-200);
}
.aiw-apendice h3 { margin-bottom: .3rem; }