/* ============================================================
   ejemplos — casos curados (manual, contrato, informe).
   Se apoya en la hoja de ia-local: mismas variables de papel
   terracota, mismos botones, mismo modo oscuro. Un @import en
   vez de copiar y pegar para que el diseño no se bifurque.
   ============================================================ */
@import url("/assets/ia-local/ia-local.css");

.case-hero { padding-top: 56px; padding-bottom: 8px; }
.case-hero .hero-desc { max-width: 820px; }
.case-hero ul { margin: 14px 0 0 20px; max-width: 820px; color: var(--muted); font-size: 0.95rem; }
.case-hero li + li { margin-top: 6px; }

/* ---------- barra de control ---------- */
.control {
  border: 1px solid var(--hairline);
  background: var(--card);
  padding: 16px 18px;
  margin: 22px 0 10px;
}
.control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.control .field { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--muted); }
.control select, .control input[type="text"], .control input[type="number"] {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hairline); padding: 7px 9px; border-radius: 0;
}
.control-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.load-status { font-size: 0.85rem; color: var(--muted); }
.stat-row { display: flex; justify-content: space-between; gap: 14px; font-size: 0.8rem; border-top: 1px solid var(--hairline-soft); padding: 5px 0; }
.stat-k { color: var(--muted); }
.stat-v { font-variant-numeric: tabular-nums; }
#doc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 22px; margin-top: 10px; }

/* ---------- visor ---------- */
.workspace { margin-top: 18px; }
.pane-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); margin-bottom: 0; }
.pane-tab {
  font: inherit; font-size: 0.85rem; background: transparent; border: 1px solid transparent;
  border-bottom: none; color: var(--muted); padding: 8px 14px; cursor: pointer;
}
.pane-tab[aria-selected="true"] { color: var(--accent); border-color: var(--hairline); background: var(--card); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
  gap: 0;
  align-items: start;
}
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

.doc-shell { border: 1px solid var(--hairline); border-top: none; background: var(--card); min-height: 400px; }
.doc-scroll { height: min(78vh, 900px); overflow: auto; padding: 22px 26px 60px; }
#pdf-host { height: min(78vh, 900px); overflow: auto; padding: 14px; background: var(--paper); }
.pdf-page { margin: 0 auto 16px; box-shadow: 0 1px 0 var(--hairline), 0 6px 18px rgba(0,0,0,.08); width: max-content; }
.pdf-page canvas { display: block; }
.pdf-page-num { font-size: 0.72rem; color: var(--muted); text-align: center; padding: 4px 0 2px; }

.doc-h { font-family: var(--serif); line-height: 1.3; margin: 20px 0 8px; }
h2.doc-h { font-size: 1.3rem; border-bottom: 1px solid var(--hairline-soft); padding-bottom: 4px; }
h3.doc-h { font-size: 1.1rem; }
h4.doc-h { font-size: 1rem; color: var(--muted); }
.doc-text { margin: 0 0 12px; }
.doc-p { font-size: 0.92rem; margin: 0 0 6px; }
.doc-list { margin: 0 0 12px 22px; font-size: 0.92rem; }
.doc-list li { margin: 2px 0; }
.doc-tablewrap { overflow-x: auto; margin: 0 0 16px; }
.doc-table { border-collapse: collapse; font-size: 0.82rem; width: 100%; }
.doc-table th, .doc-table td { border-bottom: 1px solid var(--hairline-soft); padding: 5px 8px; text-align: left; vertical-align: top; }
.doc-table th { font-weight: 600; color: var(--accent); }
.doc-page-chip {
  display: inline-block; margin-left: 8px; font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--hairline-soft);
  padding: 0 5px; vertical-align: 2px; user-select: none;
}
.doc-flash { background: color-mix(in srgb, var(--accent) 14%, transparent); }
mark.doc-mark { background: color-mix(in srgb, var(--accent) 34%, transparent); color: inherit; }

/* ---------- panel lateral ---------- */
.side { border: 1px solid var(--hairline); border-top: none; border-left: none; background: var(--card); display: flex; flex-direction: column; height: min(78vh, 900px); }
@media (max-width: 980px) { .side { border-left: 1px solid var(--hairline); height: auto; } }
.side-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-log { flex: 1; overflow: auto; padding: 16px 16px 8px; min-height: 260px; }
.msg { margin-bottom: 14px; }
.msg-role { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.msg-body { font-size: 0.92rem; white-space: pre-wrap; word-break: break-word; }
.msg-user .msg-body { color: var(--muted); font-style: italic; }
.msg-model { border-left: 2px solid var(--accent); padding-left: 10px; }
.typing::after { content: "▌"; color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.msg-meta { font-size: 0.72rem; color: var(--muted); margin-top: 6px; }
.cite-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; align-items: center; }
.cite-label { font-size: 0.72rem; color: var(--muted); }
.btn-tiny {
  font: inherit; font-size: 0.7rem; padding: 2px 7px; cursor: pointer;
  border: 1px solid var(--hairline); background: transparent; color: var(--ink);
}
.btn-tiny:hover { border-color: var(--accent); color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 16px 0; }
.chip {
  font: inherit; font-size: 0.74rem; padding: 4px 9px; border: 1px solid var(--hairline);
  background: transparent; color: var(--muted); cursor: pointer; text-align: left;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }
.composer { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--hairline-soft); align-items: flex-end; }
.composer textarea { flex: 1; font: inherit; font-size: 0.9rem; padding: 8px; background: var(--paper); color: var(--ink); border: 1px solid var(--hairline); resize: vertical; }

/* ---------- batería ---------- */
.suite-body { padding: 14px 16px; overflow: auto; }
.matrix { border-collapse: collapse; font-size: 0.76rem; width: 100%; }
.matrix th, .matrix td { border-bottom: 1px solid var(--hairline-soft); padding: 5px 6px; text-align: left; }
.matrix th { color: var(--muted); font-weight: 600; }
.matrix-q { min-width: 210px; }
.matrix-link { font: inherit; font-size: 0.76rem; background: none; border: none; color: var(--ink); text-align: left; cursor: pointer; padding: 0; }
.matrix-link:hover { color: var(--accent); }
.matrix-cell { text-align: center; font-weight: 700; width: 3.2em; }
.matrix-cell.ok { color: #1c7a45; }
.matrix-cell.ko { color: var(--accent); cursor: help; }
.matrix-foot, .suite-progress { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
.footnotes { margin: 40px 0 60px; }
.footnotes h3 { font-family: var(--serif); font-size: 1.1rem; margin-bottom: 8px; }
.footnotes ul { margin-left: 20px; font-size: 0.9rem; color: var(--muted); }
.footnotes li + li { margin-top: 6px; }
.kicker { display: inline-block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 60px; }
.case-card { border: 1px solid var(--hairline); background: var(--card); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.case-card h3 { font-family: var(--serif); font-size: 1.05rem; }
.case-card p { font-size: 0.88rem; color: var(--muted); }
.case-card .btn { align-self: flex-start; }
.case-card[data-state="soon"] { opacity: 0.6; }
.case-card .tag { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

/* Borrador de la primera pasada, plegado bajo la respuesta revisada. */
.draft-box {
  font: inherit; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word;
  margin: 8px 0 0; padding: 8px 10px; border-left: 2px solid var(--hairline);
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--muted);
}

/* ---------- montaje genérico frente a curado ---------- */
/* Columna medida con el montaje genérico: se distingue a la vista, no solo en
   el título. Y la burbuja del chat respondida en ese modo, igual. */
.matrix th.naive { color: var(--accent); font-style: italic; }
.msg-naive { border-left-style: dashed; }
.matrix-verdict {
  font-size: 0.86rem; margin-top: 12px; padding: 8px 10px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.mode-how { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
.mode-how summary { cursor: pointer; color: var(--ink); }
.mode-how ul { margin: 8px 0 0 20px; }
.mode-how li + li { margin-top: 4px; }
.case-cta { margin: 0 0 60px; padding: 22px 24px; border: 1px solid var(--hairline); background: var(--card); }
.case-cta .hero-desc { margin-bottom: 4px; }