/* Business Case — expediente de comité
   Documento de lectura, no dashboard. Una sola pieza fuerte: la banda de
   brechas. Todo lo demás, quieto.
   Prefijo bce- (business case expediente): styles.css ya usa .bc-* para el
   panel viejo del kanban y no se quiere pisar nada. */

.bce {
  --tinta: #1b2733;
  --papel: #ffffff;
  --regla: #dce1e6;
  --regla-fuerte: #b4bec7;
  --tenue: #63727f;
  --acento: #24485e;

  --verde: #1c6f47;
  --ambar: #a86a00;
  --rojo: #a92b21;

  --declarado-tinta: #7a5a12;
  --declarado-fondo: #fbf4e2;
  --declarado-borde: #e6d5a8;

  --serif: Georgia, "Iowan Old Style", "Source Serif Pro", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

.bce *, .bce *::before, .bce *::after { box-sizing: border-box; }

/* ---------- Banda de brechas: lo primero que se ve ---------- */

.bce-brechas {
  border-left: 6px solid var(--rojo);
  background: #fdf3f2;
  padding: 1.1rem 1.25rem;
  margin-bottom: 2.25rem;
}
.bce-brechas.esta-completo {
  border-left-color: var(--verde);
  background: #f1f8f4;
}
.bce-brechas h2 {
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.bce-brechas ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.bce-brechas li { margin: .15rem 0; }
.bce-brechas .bce-brecha-bloque { color: var(--tenue); }
.bce-brechas p { margin: 0; color: var(--tenue); }

/* ---------- Carátula ---------- */

.bce-caratula {
  border-top: 2px solid var(--tinta);
  border-bottom: 1px solid var(--regla-fuerte);
  padding: 1.5rem 0 1.25rem;
  margin-bottom: 2rem;
}
.bce-caratula .bce-tipo {
  font-size: .82rem;
  color: var(--tenue);
  margin: 0 0 .4rem;
}
.bce-caratula h1 {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 .5rem;
  letter-spacing: -0.015em;
}
.bce-caratula .bce-ruc { color: var(--tenue); margin: 0 0 1.1rem; }

.bce-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1rem 1.5rem;
}
.bce-datos dt { font-size: .78rem; color: var(--tenue); margin-bottom: .15rem; }
.bce-datos dd { margin: 0; font-weight: 600; }

/* ---------- Semáforos heredados ---------- */

.bce-semaforos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.bce-sem {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  border: 1px solid var(--regla-fuerte);
  border-radius: 2px;
  padding: .3rem .6rem;
  font-size: .85rem;
}
.bce-sem b { font-weight: 650; }
.bce-sem .bce-punto {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--tenue); align-self: center;
}
.bce-sem[data-nivel="verde"] .bce-punto,
.bce-sem[data-nivel="bajo"] .bce-punto,
.bce-sem[data-nivel="completo"] .bce-punto { background: var(--verde); }
.bce-sem[data-nivel="amarillo"] .bce-punto,
.bce-sem[data-nivel="medio"] .bce-punto { background: var(--ambar); }
.bce-sem[data-nivel="rojo"] .bce-punto,
.bce-sem[data-nivel="alto"] .bce-punto,
.bce-sem[data-nivel="incompleto"] .bce-punto { background: var(--rojo); }

/* ---------- Bloques ---------- */

.bce-bloque {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--regla);
}
.bce-bloque:first-of-type { border-top: none; }

.bce-bloque > header h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 .35rem;
}
.bce-origen { font-size: .78rem; color: var(--tenue); }

.bce-declarado {
  display: inline-block;
  margin-top: .5rem;
  padding: .18rem .45rem;
  font-size: .74rem;
  color: var(--declarado-tinta);
  background: var(--declarado-fondo);
  border: 1px solid var(--declarado-borde);
  border-radius: 2px;
}

.bce-nota { font-size: .82rem; color: var(--tenue); margin: .4rem 0 0; }

/* ---------- Campos ---------- */

.bce-campos { margin: 0; }
.bce-campo {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 0 1rem;
  padding: .42rem 0;
  border-bottom: 1px solid var(--regla);
}
.bce-campo:last-child { border-bottom: none; }
.bce-campo dt { color: var(--tenue); }
.bce-campo dd { margin: 0; white-space: pre-line; }
.bce-campo dd.bce-sin-dato { color: #97a3ad; font-style: italic; }

/* ---------- Sujetos de crédito ---------- */

.bce-sujetos { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .9rem; }
.bce-sujetos th {
  text-align: left;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tenue);
  border-bottom: 1px solid var(--regla-fuerte);
  padding: .35rem .5rem .35rem 0;
}
.bce-sujetos td { padding: .45rem .5rem .45rem 0; border-bottom: 1px solid var(--regla); }
.bce-sujetos .bce-rol { color: var(--tenue); }

/* ---------- Documentos ---------- */

.bce-docs { list-style: none; margin: 0; padding: 0; }
.bce-doc {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: .5rem;
  align-items: baseline;
  padding: .42rem 0;
  border-bottom: 1px solid var(--regla);
}
.bce-doc:last-child { border-bottom: none; }
.bce-doc .bce-marca { font-weight: 700; }
.bce-doc[data-recibido="true"] .bce-marca { color: var(--verde); }
.bce-doc[data-recibido="false"] .bce-marca { color: var(--rojo); }
.bce-doc[data-recibido="false"] .bce-doc-nombre { color: var(--rojo); }
.bce-doc .bce-motivo { font-size: .8rem; color: var(--tenue); }
.bce-doc a { color: var(--acento); }

.bce-conteo { font-size: .85rem; color: var(--tenue); margin: 0 0 .6rem; }

/* ---------- Trazabilidad ---------- */

.bce-traza { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bce-traza th {
  text-align: left; font-size: .78rem; font-weight: 600; color: var(--tenue);
  border-bottom: 1px solid var(--regla-fuerte); padding: .35rem .5rem .35rem 0;
}
.bce-traza td { padding: .4rem .5rem .4rem 0; border-bottom: 1px solid var(--regla); }

/* ---------- Acciones y pie ---------- */

.bce-acciones { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.bce-boton {
  font: inherit;
  padding: .5rem .9rem;
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
}
.bce-boton.bce-secundario { background: transparent; color: var(--acento); }
.bce-boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.bce-pie {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--regla);
  font-size: .8rem;
  color: var(--tenue);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .bce-bloque { grid-template-columns: 1fr; gap: .75rem; }
  .bce-campo { grid-template-columns: 1fr; gap: 0; padding: .5rem 0; }
  .bce-campo dt { font-size: .8rem; }
}

/* ---------- Impresión ---------- */

@media print {
  .bce { max-width: none; padding: 0; font-size: 11pt; }
  .bce-acciones { display: none; }
  .bce-bloque { break-inside: avoid; page-break-inside: avoid; }
  .bce-brechas { break-inside: avoid; }
  .bce-caratula { break-after: avoid; }
  .bce a[href]::after { content: ""; }
}

/* ---------- Modo noche ---------- */
/* El componente ya está construido sobre variables locales (--tinta/--papel/--regla/...),
   así que redefinirlas basta para que todo el expediente (carátula, bloques, tablas,
   documentos, trazabilidad) herede una paleta oscura coherente sin tocar cada regla. */
body.night .bce {
  --tinta: #D8E0EC;
  --papel: #1A2534;
  --regla: #2A3849;
  --regla-fuerte: #3B4D63;
  --tenue: #9DB0C6;
  --acento: #7FB0FF;

  --verde: #6EE7B7;
  --ambar: #E5C88F;
  --rojo: #F49B93;

  --declarado-tinta: #E5C88F;
  --declarado-fondo: #2A2410;
  --declarado-borde: #5B4B1A;
}
body.night .bce-brechas { background: #2A1A1E; }
body.night .bce-brechas.esta-completo { background: #16241C; }
body.night .bce-campo dd.bce-sin-dato { color: #6B7C93; }
body.night .bce-boton { color: #0F1620; }
body.night .bce-boton.bce-secundario { color: var(--acento); }