/* Páginas públicas armadas en el servidor (templates/publico/: temario, lección, entrevista).
   Se apoya en landing.css: mismas variables, header, botones y footer. Aquí solo lo nuevo. */

.pub-main{ max-width:760px; }

.pub-crumbs{ font-size:13px; color:var(--color-text-muted); padding:22px 0 0; }
.pub-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pub-crumbs li+li::before{ content:"›"; margin-right:6px; color:var(--color-text-muted); }
.pub-crumbs a{ color:var(--color-text-secondary); font-weight:700; }
.pub-crumbs a:hover{ text-decoration:underline; }

.pub-head{ padding:18px 0 22px; }
.pub-head h1{ font-size:clamp(26px,5vw,36px); font-weight:900; line-height:1.15; margin:0 0 8px; }
.pub-head p{ margin:0; color:var(--color-text-secondary); font-size:16px; line-height:1.5; }
.pub-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.pub-chip{ font-size:12.5px; font-weight:800; color:var(--color-progress); background:var(--color-progress-light); border-radius:999px; padding:5px 12px; }

.pub-section-title{ font-size:20px; font-weight:900; margin:34px 0 14px; }

/* Explicación de la lección (concept_html): las mismas reglas que leccion.css, copiadas y
   limitadas a .pub-concept con las variables de la app. Si cambias el aspecto en leccion.css,
   cámbialo también aquí. */
.pub-concept{
  --text:#172033; --muted:#667085; --green-soft:#caffb8; --green-bg:#efffe9; --border:#dbe1ec;
  --code-bg:#172033; --code-text:#e6edf7; --shadow:0 5px 16px rgba(30,50,80,.07);
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,"Roboto Mono","DejaVu Sans Mono",monospace;
  display:block;
}
.pub-concept .concept-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:26px 24px;margin-bottom:16px}
.pub-concept .concept-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#f1ffe9,var(--green-soft));display:grid;place-items:center;font-size:28px;margin-bottom:14px;box-shadow:inset 0 -3px 0 rgba(0,120,40,.08)}
.pub-concept .concept-title{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:10px;color:var(--text)}
.pub-concept .concept-text{font-size:15px;line-height:1.7;color:#475569;margin-bottom:18px}
.pub-concept .concept-text strong{color:var(--text)}
.pub-concept .concept-card code,.pub-concept .mono{font-family:var(--mono)}
.pub-concept .concept-card :not(.code-block)>code{font-size:13px;background:#eef2f7;color:#0b7a36;border-radius:6px;padding:1px 6px}
.pub-concept .concept-formula{font-family:var(--mono);text-align:center;font-size:16px;font-weight:700;color:#007f35;background:var(--green-bg);border:1.5px dashed #9fe3a9;border-radius:14px;padding:14px;margin-bottom:20px}
.pub-concept .code-block{background:var(--code-bg);color:var(--code-text);font-family:var(--mono);font-size:13.5px;line-height:1.65;border-radius:14px;padding:16px 18px;margin-bottom:16px;white-space:pre;overflow-x:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.pub-concept .code-block .str{color:#9be58f}
.pub-concept .legend-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.pub-concept .legend-item{display:flex;gap:12px;align-items:flex-start;background:#f8fafc;border:1px solid #edf1f6;border-radius:12px;padding:10px 12px}
.pub-concept .legend-code{font-family:var(--mono);font-size:12.5px;font-weight:700;color:#007f35;background:var(--green-bg);border:1px solid #c9f2c0;border-radius:8px;padding:4px 8px;white-space:nowrap;flex-shrink:0}
.pub-concept .legend-text{font-size:13.5px;line-height:1.55;color:#475569;padding-top:2px}
.pub-concept .legend-text strong{color:var(--text)}
.pub-concept .type-table{width:100%;border-collapse:collapse;margin-bottom:4px}
.pub-concept .type-table th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:0 10px 10px 0}
.pub-concept .type-table td{padding:10px 10px 10px 0;border-top:1px solid #edf1f6;vertical-align:top}
.pub-concept .type-table .t-name{font-family:var(--mono);font-weight:700;color:#007f35;font-size:13.5px;white-space:nowrap}
.pub-concept .type-table .t-desc{font-size:13px;color:var(--text)}
.pub-concept .type-table .t-example{font-family:var(--mono);font-size:12px;color:#475569;white-space:nowrap}
.pub-concept .concept-card pre{background:var(--code-bg);color:var(--code-text);font-family:var(--mono);padding:14px 16px;border-radius:12px;overflow-x:auto;font-size:13px}
/* concept_html sin tarjeta propia (escrito a mano desde el admin): la plantilla le pone la clase al <article>. */
.pub-concept.concept-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:26px 24px;margin-bottom:16px}
.pub-concept.concept-card,.pub-concept .concept-card{ overflow-x:auto; }
@media (max-width:520px){ .pub-concept .concept-card,.pub-concept.concept-card{padding:20px 16px} .pub-concept .concept-title{font-size:20px} .pub-concept .code-block{font-size:12.5px;padding:14px} }

/* Bloques de código de las preguntas de ejemplo (fuera de la tarjeta de concepto). */
.pub-q .code-block{ background:#172033; color:#e6edf7; font-family:ui-monospace,"Cascadia Code",Menlo,Consolas,monospace; line-height:1.65; border-radius:14px; padding:14px 16px; white-space:pre; overflow-x:auto; }

/* Preguntas de ejemplo: la respuesta se abre con <details>, sin JavaScript. */
.pub-q{ background:#fff; border:1px solid var(--color-border); border-radius:18px; padding:20px 20px 16px; margin-bottom:14px; }
.pub-q-eyebrow{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--color-progress); margin-bottom:6px; }
.pub-q h3{ font-size:16.5px; font-weight:800; margin:0 0 12px; line-height:1.4; }
.pub-q .code-block{ font-size:13px; margin-bottom:12px; }
.pub-q ol{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.pub-q li{ border:2px solid var(--color-border); border-radius:12px; padding:9px 12px; font-size:14.5px; font-weight:700; }
.pub-q li code{ font-family:ui-monospace,Consolas,monospace; font-size:13.5px; }
.pub-q li b{ display:inline-block; width:22px; color:var(--color-text-muted); }
.pub-q details summary{ cursor:pointer; font-weight:800; font-size:14px; color:var(--color-progress); padding:4px 0; list-style:none; }
.pub-q details summary::-webkit-details-marker{ display:none; }
.pub-q details summary::before{ content:"▸ "; }
.pub-q details[open] summary::before{ content:"▾ "; }
.pub-q-answer{ margin-top:8px; background:#effbe8; border:1px solid #bfe9a8; border-radius:12px; padding:10px 12px; font-size:14.5px; line-height:1.5; }
.pub-q-answer strong{ color:#0b6b2e; }

/* Tarjeta para practicar como invitado. */
.pub-cta{ text-align:center; background:var(--color-surface-soft); border-radius:var(--radius-card); padding:30px 22px; margin:30px 0 8px; }
.pub-cta h2{ font-size:22px; font-weight:900; margin:0 0 6px; }
.pub-cta p{ color:var(--color-text-secondary); margin:0 0 18px; font-size:15px; }
.pub-cta small{ display:block; margin-top:12px; color:var(--color-text-muted); font-size:12.5px; }

.pub-pager{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0 48px; }
.pub-pager a{ background:#fff; border:1px solid var(--color-border); border-radius:16px; padding:14px 16px; font-size:14px; font-weight:800; }
.pub-pager a span{ display:block; font-size:12px; font-weight:700; color:var(--color-text-muted); margin-bottom:2px; }
.pub-pager a.next{ text-align:right; grid-column:2; }
.pub-pager a:hover{ border-color:var(--color-progress); }

/* Temario */
.pub-unit{ background:#fff; border:1px solid var(--color-border); border-radius:20px; padding:18px 18px 8px; margin-bottom:14px; }
.pub-unit h2{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:900; margin:0 0 4px; }
.pub-unit > p{ margin:0 0 10px 38px; color:var(--color-text-secondary); font-size:14px; }
.pub-unit ul{ list-style:none; margin:0; padding:0; }
.pub-unit li{ border-top:1px solid var(--color-border); }
.pub-unit li a{ display:flex; justify-content:space-between; gap:12px; padding:12px 4px; font-weight:700; font-size:15px; }
.pub-unit li a::after{ content:"→"; color:var(--color-text-muted); }
.pub-unit li a:hover{ color:var(--color-progress); }
.pub-unit li.locked{ display:flex; justify-content:space-between; padding:12px 4px; color:var(--color-text-muted); font-size:14.5px; font-weight:700; }
.pub-unit li.locked::after{ content:"🔒 con cuenta"; font-size:12.5px; }

.pub-highlight{ display:flex; gap:14px; align-items:center; background:#fff8e6; border:1px solid #f3dca0; border-radius:18px; padding:16px 18px; margin:6px 0 24px; }
.pub-highlight .ico{ font-size:28px; }
.pub-highlight strong{ display:block; font-size:15.5px; }
.pub-highlight span{ color:var(--color-text-secondary); font-size:14px; }
.pub-highlight a{ margin-left:auto; font-weight:800; color:var(--color-progress); white-space:nowrap; }
@media (max-width:520px){ .pub-highlight{ flex-wrap:wrap; } .pub-highlight a{ margin-left:0; } }

.pub-footer-nav{ display:flex; gap:18px; flex-wrap:wrap; }

.pub-blank{ display:inline-block; min-width:48px; border-bottom:2px solid #9be58f; color:#9be58f; }
.pub-head-cta{ margin-top:20px; }
.pub-cta-end{ margin-bottom:48px; }
.pub-practice[aria-busy="true"]{ opacity:.7; pointer-events:none; }
.pub-practice-error{ margin-top:12px; color:var(--color-danger); font-size:13px; font-weight:700; }
.pub-404{ text-align:center; padding-bottom:64px; }
.pub-404 .pub-head{ padding-top:64px; }
.pub-404-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }