/* Informe de Coloqui · documento editorial (pantalla e impresión A4) */
.inf { position: fixed; inset: 0; z-index: 90; background: #eef3f1; display: flex; flex-direction: column; height: 100dvh; animation: fundido .25s ease; }
.inf[hidden] { display: none; }
body.inf-abierto { overflow: hidden; }
.inf-cab { flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.inf-cab-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; }
.inf-cab-t strong { font-size: 1rem; }
.inf-cab-t span { font-size: .78rem; color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inf-cab-acc { display: flex; gap: 8px; }
.inf-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; }
.inf-indice { padding: 32px 0 32px 24px; overflow-y: auto; }
.inf-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: ii -1; }
.inf-indice li { counter-increment: ii; }
.inf-indice a { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; color: var(--mid); text-decoration: none; font-size: .86rem; font-weight: 600; border-left: 2px solid transparent; }
.inf-indice a::before { content: counter(ii, decimal-leading-zero); font-size: .7rem; font-variant-numeric: tabular-nums; color: #8a9a95; }
.inf-indice li:first-child a::before { content: '·'; }
.inf-indice a:hover { background: #fff; color: var(--ink); }
.inf-indice a.activo { color: var(--ink); background: #fff; border-left-color: var(--mint); }
.inf-scroll { overflow-y: auto; padding: 32px 24px 64px; scroll-behavior: smooth; }
.inf-scroll:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--mint); }

/* ---------- El documento (hoja) ---------- */
.inf-doc { --ink: #09100e; --mid: #516860; --line: #dde8e4; --mint: #12E3BC; --mint-dim: #0DC4A2; --mint-txt: #0b7d68; --mint-bg: #f0fdf9;
  max-width: 794px; margin: 0 auto; background: #fff; color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.6;
  box-shadow: 0 1px 2px rgba(9,16,14,.06), 0 16px 48px rgba(9,16,14,.08); border-radius: 4px; padding: 0 72px 56px; font-variant-numeric: tabular-nums; hyphens: manual; }
.inf-doc p, .inf-doc li, .inf-doc dd { orphans: 3; widows: 3; text-wrap: pretty; }
.inf-sec { padding-top: 48px; }
.inf-label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mint-txt); }
.inf-label::before { content: ''; width: 20px; height: 2px; background: var(--mint); }
.inf-label span { font-variant-numeric: tabular-nums; color: var(--mid); }
.inf-doc h2 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -.025em; font-weight: 800; margin: 0 0 24px; max-width: 32ch; break-after: avoid; }
.inf-doc h3 { font-size: 1rem; font-weight: 800; margin: 0 0 4px; break-after: avoid; }
.inf-doc strong { font-weight: 700; }
.inf-doc em { font-style: italic; }
.inf-doc a { color: var(--mint-txt); text-underline-offset: 3px; }

/* Portada */
.inf-portada { position: relative; padding: 64px 0 40px; min-height: 620px; display: flex; flex-direction: column; overflow: hidden; }
.inf-franja { position: absolute; top: 0; right: -72px; width: 300px; height: 300px; background: var(--mint); border-radius: 0 0 0 100%; opacity: .95; }
.inf-logo { width: 96px; height: auto; position: relative; margin-bottom: 72px; }
.inf-ceja { font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--mint-txt); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.inf-ceja::before { content: ''; width: 20px; height: 2px; background: var(--mint); }
.inf-portada h1 { font-size: 3.2rem; line-height: 1.02; letter-spacing: -.04em; font-weight: 800; margin: 0 0 12px; max-width: 13ch; }
.inf-lema { font-size: 1.2rem; font-style: italic; color: var(--mid); margin: 0 0 40px; max-width: 34ch; }
.inf-equipo { display: flex; align-items: center; gap: 16px; margin: 0 0 32px; }
.inf-equipo img { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; object-position: top; background: var(--mint-bg); }
.inf-equipo span { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); }
.inf-equipo strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.inf-meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 40px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.inf-meta dt { font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); }
.inf-meta dd { margin: 2px 0 0; font-weight: 600; font-size: .92rem; }
.inf-gen { margin: auto 0 0; padding-top: 40px; display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--mid); }
.inf-coloqui { flex: none; }

/* Resumen ejecutivo */
.inf-ejecutivo { padding: 24px 28px 28px; margin-top: 8px; background: var(--mint-bg); border-left: 3px solid var(--mint); border-radius: 0 16px 16px 0; break-inside: avoid; }
.inf-ej-txt { font-size: 1.05rem; line-height: 1.55; margin: 0 0 24px; max-width: 62ch; }
.inf-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.inf-cifras div { border-top: 1px solid #bfe9de; padding-top: 8px; }
.inf-cifras b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.inf-cifras small { font-size: 1rem; color: var(--mid); font-weight: 600; }
.inf-cifras span { font-size: .78rem; color: var(--mid); }

/* El reto */
.inf-datos { margin: 0; display: grid; gap: 16px; }
.inf-dato { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); break-inside: avoid; }
.inf-dato dt { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); padding-top: 4px; }
.inf-dato dd { margin: 0; max-width: 62ch; }

/* Estrategia */
.inf-zona { border-left: 3px solid var(--zc); padding: 4px 0 4px 20px; margin: 0 0 24px; break-inside: avoid; }
.inf-zona p { margin: 0 0 8px; max-width: 64ch; }
.inf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.inf-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 2px 10px 2px 2px; border: 1px solid var(--line); border-radius: 50px; background: #fff; }
.inf-chips b { min-width: 22px; height: 22px; padding: 0 4px; border-radius: 50px; background: color-mix(in srgb, var(--zc) 35%, #fff); display: grid; place-items: center; font-size: .7rem; font-weight: 800; }

/* Diagrama */
.inf-lead { color: var(--mid); margin: -8px 0 24px; max-width: 64ch; }
.inf-diagrama { margin: 0; break-inside: avoid; }
.inf-diagrama svg { display: block; width: 100%; height: auto; }
.inf-leyenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: .74rem; color: var(--mid); }
.inf-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.inf-leyenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.inf-leyenda i.punteado { border: 1.5px dashed #8a9a95; }

/* Tarjetas numeradas */
.inf-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.inf-tarjetas li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--mint); border-radius: 0 14px 14px 0; break-inside: avoid; }
.inf-tarjetas.m li { border-left-color: #E8A23B; }
.inf-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .86rem; background: var(--mint); }
.inf-tarjetas.m .inf-n { background: #fbe3bd; color: #6b4300; }
.inf-tarjetas li > div > strong { display: block; font-size: 1rem; line-height: 1.4; }
.inf-tarjetas p { margin: 4px 0 0; color: #2c3d37; font-size: .92rem; max-width: 62ch; }
.inf-vacio { color: var(--mid); font-style: italic; }

/* Tecnologías */
.inf-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; line-height: 1.45; break-inside: avoid; }
.inf-tabla thead th { text-align: left; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); padding: 0 12px 8px 0; border-bottom: 2px solid var(--ink); }
.inf-tabla td, .inf-tabla tbody th { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.inf-tabla tbody tr:nth-child(even) { background: #f7fbf9; }
.inf-tabla tbody th { font-weight: 600; width: 26%; }
.inf-tabla tbody th small { display: block; font-weight: 500; color: var(--mid); font-size: .74rem; margin-top: 2px; }
.inf-tabla tr { break-inside: avoid; }
.inf-sub { margin-top: 32px !important; }
.inf-lista { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.inf-lista li { position: relative; padding-left: 22px; max-width: 64ch; }
.inf-lista li::before { content: '→'; position: absolute; left: 0; color: var(--mint-dim); font-weight: 700; }
.inf-aviso { margin: 24px 0 0; font-size: .78rem; color: var(--mid); font-style: italic; border-top: 1px solid var(--line); padding-top: 8px; max-width: 70ch; }

/* Próximos pasos y cierre */
.inf-pasos { list-style: none; margin: 0; padding: 0; counter-reset: ps; display: grid; gap: 16px; }
.inf-pasos li { counter-increment: ps; position: relative; padding-left: 48px; max-width: 62ch; break-inside: avoid; }
.inf-pasos li::before { content: counter(ps); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--mint); display: grid; place-items: center; font-weight: 800; font-size: .86rem; }
.inf-cierre { display: flex; gap: 16px; align-items: flex-start; margin: 40px 0 0; padding: 20px 24px; background: var(--mint-bg); border-radius: 16px; break-inside: avoid; }
.inf-cierre p { margin: 0; font-style: italic; max-width: 60ch; }
.inf-skool { margin: 32px 0 0; font-size: .9rem; }
.inf-pie { margin: 40px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--mid); }

@media screen and (max-width: 860px) {
  .inf-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .inf-indice { padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fff; overflow-x: auto; scrollbar-width: none; }
  .inf-indice ol { display: flex; gap: 4px; }
  .inf-indice a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; border-radius: 8px; padding: 6px 10px; }
  .inf-indice a.activo { border-bottom-color: var(--mint); }
  .inf-scroll { padding: 12px 8px 40px; }
  .inf-doc { padding: 0 20px 40px; font-size: 14.5px; }
  .inf-cab { padding: 8px 10px; gap: 8px; }
  .inf-cab .btn span { display: none; }
  .inf-cab .btn { width: 44px; padding: 0; justify-content: center; }
  .inf-portada { min-height: 0; padding-top: 32px; }
  .inf-franja { width: 160px; height: 160px; right: -20px; }
  .inf-logo { width: 72px; margin-bottom: 40px; }
  .inf-portada h1 { font-size: 2.2rem; }
  .inf-meta { grid-template-columns: 1fr; }
  .inf-dato { grid-template-columns: 1fr; gap: 4px; }
  .inf-cifras b { font-size: 1.5rem; }
  .inf-ejecutivo { padding: 20px; }
  .inf-diagrama { overflow-x: auto; }
  .inf-diagrama svg { min-width: 680px; }
  .inf-tabla, .inf-tabla tbody, .inf-tabla tr, .inf-tabla td, .inf-tabla tbody th { display: block; width: auto; }
  .inf-tabla thead { display: none; }
  .inf-tabla tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .inf-tabla td, .inf-tabla tbody th { border: 0; padding: 2px 0; }
  .inf-tabla td:nth-of-type(1)::before { content: 'En la nube: '; font-weight: 700; }
  .inf-tabla td:nth-of-type(2)::before { content: 'Abierta o local: '; font-weight: 700; }
  .inf-tabla td:nth-of-type(3)::before { content: 'Para qué: '; font-weight: 700; }
}

/* ---------- Impresión A4 ---------- */
@media print {
  @page inf { size: A4; margin: 20mm 20mm 22mm;
    @top-right { content: "ColoquIALab"; font: 800 8pt 'Plus Jakarta Sans', sans-serif; color: #0DC4A2; letter-spacing: .1em; }
    @bottom-left { content: "Informe de Coloqui"; font: 500 8pt 'Plus Jakarta Sans', sans-serif; color: #516860; }
    @bottom-right { content: counter(page); font: 700 8pt 'Plus Jakarta Sans', sans-serif; color: #516860; } }
  @page infportada { size: A4; margin: 0; }
  @page infhoriz { size: A4 landscape; margin: 16mm 18mm 18mm;
    @top-right { content: "ColoquIALab"; font: 800 8pt 'Plus Jakarta Sans', sans-serif; color: #0DC4A2; letter-spacing: .1em; }
    @bottom-right { content: counter(page); font: 700 8pt 'Plus Jakarta Sans', sans-serif; color: #516860; } }
  .impresion.imp-informe { font-size: 10.5pt; }
  .imp-informe .inf-doc { page: inf; max-width: none; box-shadow: none; border-radius: 0; padding: 0; font-size: 10.5pt; line-height: 1.5; }
  .imp-informe .inf-doc + .inf-doc { break-before: page; }
  .imp-informe .inf-portada { page: infportada; height: 290mm; margin-top: 0 !important; overflow: hidden; min-height: 0; padding: 26mm 22mm 22mm; box-sizing: border-box; }
  .imp-informe .inf-franja { right: 0; width: 92mm; height: 92mm; }
  .imp-informe .inf-portada h1 { font-size: 40pt; }
  .imp-informe .inf-logo { width: 30mm; margin-bottom: 40mm; }
  .imp-informe .inf-sec { padding-top: 0; margin-top: 10mm; }
  .imp-informe .inf-ejecutivo { margin-top: 0; padding: 7mm 8mm; }
  .imp-informe .inf-sec-diagrama { page: infhoriz; break-before: page; break-after: page; margin-top: 0; }
  .imp-informe #inf-fortalezas, .imp-informe #inf-tecnologias { break-before: page; margin-top: 0; }
  .imp-informe .inf-lead { max-width: none; }
  .imp-informe .inf-gen { position: absolute; left: 22mm; right: 22mm; bottom: 18mm; margin: 0; padding: 0; }
  .imp-informe #inf-pasos { break-inside: avoid; }
  .imp-informe .inf-portada .inf-coloqui { width: 36px; height: 36px; }
  .imp-informe .inf-doc h2 { font-size: 17pt; margin-bottom: 5mm; }
  .imp-informe .inf-doc h3 { font-size: 11pt; }
  .imp-informe .inf-label { font-size: 7pt; }
  .imp-informe .inf-tabla { font-size: 9pt; }
  .imp-informe .inf-chips li { font-size: 8pt; }
  .imp-informe .inf-cifras b { font-size: 20pt; }
  .imp-informe a { color: #0b7d68; text-decoration: none; }
  .imp-informe .inf-diagrama svg { max-height: 138mm; width: 100%; }
  .imp-informe * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.inf-notas { border-left: 3px solid var(--line); padding-left: 20px; }
.inf-notas p { margin: 0 0 8px; max-width: 64ch; }