@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --ground: #E8ECF3;
  --surface: #FFFFFF;
  --surface-2: #DEE4EF;
  --line: #C6CDDC;
  --line-fuerte: #A7B0C3;
  --ink: #1A1A1A;
  --muted: #555E70;
  --accent: #1B2A4A;
  --accent-soft: #D6DEEE;
  --ok: #2E6B4F;
  --ok-soft: #CFE6DA;
  --warn: #A0611F;
  --warn-soft: #F0DEC4;
  --cold: #838A97;
  --cold-soft: #DADEE6;
  --sombra: 0 1px 2px rgba(27, 42, 74, .05);
  --display: 'Libre Baskerville', Baskerville, 'Times New Roman', Times, serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E1116;
    --surface: #1D2330;
    --surface-2: #2A3141;
    --line: #39414F;
    --line-fuerte: #4D5768;
    --ink: #E6E8EC;
    --muted: #A2AAB9;
    --accent: #A9BEE6;
    --accent-soft: #2B3750;
    --ok: #7BC49C;
    --ok-soft: #22392E;
    --warn: #D9A45C;
    --warn-soft: #3B2F1D;
    --cold: #79808D;
    --cold-soft: #2C323F;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --ground: #0E1116;
  --surface: #1D2330;
  --surface-2: #2A3141;
  --line: #39414F;
  --line-fuerte: #4D5768;
  --ink: #E6E8EC;
  --muted: #A2AAB9;
  --accent: #A9BEE6;
  --accent-soft: #2B3750;
  --ok: #7BC49C;
  --ok-soft: #22392E;
  --warn: #D9A45C;
  --warn-soft: #3B2F1D;
  --cold: #79808D;
  --cold-soft: #2C323F;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#raiz { max-width: 1400px; margin: 0 auto; padding: 40px 32px 96px; }

/* ---------- Encabezado ---------- */

.tope { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.kicker {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 8px;
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 33px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--accent);
  margin: 0;
  text-wrap: balance;
}

.tope-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
}
.chip.trabajando { color: var(--accent); border-color: var(--accent); }
.chip.aviso { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.chip .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.aviso-lectura {
  margin: 20px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 3px;
  font-size: 12.5px;
}

/* ---------- Tira de etapas ---------- */

.tira {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin: 28px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.tira-celda { background: var(--surface); padding: 12px 12px 11px; display: flex; flex-direction: column; gap: 3px; }
.tira-celda .n {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--line-fuerte);
}
.tira-celda.viva .n { color: var(--accent); }
.tira-celda .et { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.referencia {
  margin: 12px 2px 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}
.referencia b { font-weight: 500; color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Ficha ---------- */

.fichas { display: flex; flex-direction: column; gap: 18px; margin: 32px 0 0; }

.ficha {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--sombra);
  padding: 22px 24px 20px;
}

.ficha-tope { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ficha-tope > div { flex: 1 1 auto; min-width: 0; }

.ficha-nombre {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.25;
  color: var(--accent);
  border: 0;
  background: transparent;
  padding: 2px 4px;
  margin: -2px -4px;
  width: 100%;
  border-radius: 2px;
}

.pastilla {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 26px 5px 10px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background-color: var(--surface-2);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 11px top 50%, right 7px top 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex: none;
}
.pastilla.e-contactado, .pastilla.e-info { color: var(--muted); background-color: var(--surface-2); }
.pastilla.e-sesion, .pastilla.e-propuesta { color: var(--accent); background-color: var(--accent-soft); }
.pastilla.e-cierre { color: var(--ok); background-color: var(--ok-soft); }
.pastilla.e-descartado { color: var(--cold); background-color: var(--cold-soft); }

.origen { font-size: 11px; color: var(--muted); margin: 6px 0 0; }
.origen span { font-family: var(--mono); }

/* ---------- Rejillas de datos ---------- */

.rejilla {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px 28px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

.bloque { display: flex; flex-direction: column; gap: 9px; }

.bloque-titulo {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 1px;
}

.dato { display: grid; grid-template-columns: 108px 1fr; align-items: baseline; gap: 10px; }
.dato > .etiqueta { font-size: 12.5px; color: var(--muted); }
.dato-flex { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dato-flex .campo { flex: 1 1 auto; }
.dato-flex .boton { flex: none; }

.campo {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 2px 3px;
  margin: 0 -3px;
  width: 100%;
  min-width: 0;
  border-radius: 2px;
}
.campo::placeholder { color: var(--cold); font-style: italic; }
.campo:hover:not(:disabled) { border-bottom-color: var(--line-fuerte); }
.campo:focus { outline: none; border-bottom-color: var(--accent); background: var(--accent-soft); }
.campo:disabled { color: var(--ink); opacity: 1; cursor: default; }
.campo.mono { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.campo.num { font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }

a.campo-liga { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line-fuerte); font-family: var(--mono); font-size: 12.5px; }
a.campo-liga:hover { border-bottom-color: var(--accent); }

/* ---------- Próxima acción ---------- */

.accion {
  margin: 18px 0 0;
  padding: 13px 15px;
  background: var(--surface-2);
  border-radius: 3px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 16px;
  align-items: center;
}
.accion.vencida { background: var(--warn-soft); }
.accion .bloque-titulo { grid-column: 1 / -1; }
.accion .campo:focus { background: var(--surface); }

.fecha-caja { display: flex; align-items: center; gap: 8px; }
.fecha-caja input {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-fuerte);
  border-radius: 3px;
  padding: 4px 7px;
  color-scheme: light;
}
.fecha-caja .etiqueta { font-size: 11.5px; color: var(--muted); }
.fecha-caja .marca { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fecha-caja input { color-scheme: dark; } }
:root[data-theme="dark"] .fecha-caja input { color-scheme: dark; }

/* ---------- Bitácora ---------- */

.bitacora { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }

.entradas { display: flex; flex-direction: column; gap: 9px; margin: 10px 0 0; }
.entrada { display: grid; grid-template-columns: 128px 1fr auto; gap: 14px; align-items: baseline; font-size: 13.5px; }
.entrada .sello { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.entrada .texto { color: var(--ink); }
.vacio { font-size: 12.5px; color: var(--cold); font-style: italic; margin: 10px 0 0; }

.nota-nueva { display: flex; gap: 8px; margin: 14px 0 0; }
.nota-nueva input {
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-fuerte);
  border-radius: 3px;
  padding: 7px 10px;
}
.nota-nueva input:focus { outline: none; border-color: var(--accent); }

/* ---------- Botones ---------- */

.boton {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line-fuerte);
  border-radius: 3px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.boton:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.boton:disabled { color: var(--cold); cursor: default; }
.boton.plano { border-color: transparent; background: transparent; color: var(--muted); padding: 4px 6px; font-size: 11px; }
.boton.plano:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.boton.peligro { color: var(--warn); }
.boton.peligro:hover:not(:disabled) { border-color: var(--warn); background: var(--warn-soft); }

.pie-ficha { display: flex; justify-content: flex-end; gap: 6px; margin: 14px 0 0; }

.pie { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 26px 0 0; flex-wrap: wrap; }
.pie small { color: var(--muted); font-size: 12.5px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 720px) {
  #raiz { padding: 28px 16px 72px; }
  .tira { grid-template-columns: repeat(3, 1fr); }
  .rejilla { grid-template-columns: 1fr; }
  .accion { grid-template-columns: 1fr; }
  .entrada { grid-template-columns: 1fr; gap: 2px; }
  .entrada .sello { grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Acceso ---------- */

.acceso-marco {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.acceso {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--sombra);
  padding: 30px 30px 26px;
}

.acceso h1 { font-size: 24px; margin: 0 0 4px; }
.acceso .kicker { margin-bottom: 10px; }
.acceso p.guia { font-size: 12.5px; color: var(--muted); margin: 0 0 20px; line-height: 1.55; }
.acceso p.guia b { font-family: var(--mono); font-weight: 500; color: var(--ink); font-size: 12px; }

.acceso label {
  display: block;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 6px;
}

.acceso input {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-fuerte);
  border-radius: 3px;
  padding: 9px 11px;
}
.acceso input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.acceso input.codigo {
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: .34em;
  text-align: center;
  padding: 11px 11px 11px 20px;
}

.acceso .boton { width: 100%; margin: 16px 0 0; padding: 10px 14px; font-size: 13px; }
.acceso .boton.plano { width: auto; margin: 12px 0 0; }
.acceso .error { margin: 14px 0 0; font-size: 12.5px; color: var(--warn); line-height: 1.5; }
.acceso .fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ---------- Sesión ---------- */

.sesion { display: flex; align-items: center; gap: 8px; }
.sesion .quien { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.cargando { padding: 80px 24px; text-align: center; color: var(--muted); font-size: 13px; }

#raiz.sin-marco { max-width: none; padding: 0; }

/* ==================== Rediseño: indicadores + tabla ==================== */

.indicadores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 26px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.ind {
  background: var(--surface);
  padding: 16px 18px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-align: left;
  border: 0;
  font: inherit;
  color: inherit;
}
button.ind { cursor: pointer; }
button.ind:hover { background: var(--accent-soft); }

.ind .et { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.ind .n {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.ind .n.chico { font-family: var(--sans); font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.ind .n.vacio { color: var(--line-fuerte); }
.ind .sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ind .abrir { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }

.monto-panel {
  margin: 1px 0 0;
  padding: 15px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.monto-panel .cifra {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.monto-panel .formula { font-size: 11px; color: var(--muted); line-height: 1.5; }
.monto-panel .desglose { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 0; }
.monto-panel .renglon { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; }
.monto-panel .renglon .m { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.monto-panel .renglon.falta { color: var(--muted); font-style: italic; }

/* ---------- Tabla ---------- */

.tabla-caja {
  margin: 26px 0 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--sombra);
  overflow-x: auto;
}

table.tabla { width: 100%; border-collapse: collapse; min-width: 1000px; }
.tabla thead { background: var(--surface-2); }

.tabla thead th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-fuerte);
  white-space: nowrap;
}
.tabla thead th.num { text-align: right; }

.tabla tbody td { padding: 15px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla tbody tr.fila:last-of-type td { border-bottom: 0; }
.tabla tbody tr.fila.abierta td { border-bottom-color: transparent; background: var(--surface-2); }
.tabla tbody tr.fila:hover td { background: var(--surface-2); }

.celda-nombre { display: flex; align-items: center; gap: 9px; }
.chevron {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  width: 15px; height: 15px; flex: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.chevron svg { width: 9px; height: 9px; transition: transform .15s ease; }
tr.fila.abierta .chevron svg { transform: rotate(90deg); }
.chevron:hover { color: var(--accent); }

.nombre-boton {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.nombre-boton:hover { text-decoration: underline; text-underline-offset: 3px; }
.nombre-boton.sinnombre { font-family: var(--sans); font-size: 13px; font-style: italic; color: var(--cold); }

.td-num { text-align: right; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.td-num .nd { color: var(--cold); font-size: 12px; }

.interaccion { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.interaccion .cuando { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.interaccion .nunca { color: var(--cold); font-style: italic; font-size: 12px; }
.alerta-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }

.historial-boton {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  padding: 3px 7px; margin: -3px -7px; border-radius: 3px; text-align: left;
}
.historial-boton:hover { color: var(--accent); background: var(--accent-soft); }
.historial-boton .cuenta { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Fila desplegada ---------- */

tr.detalle > td { padding: 0 14px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
tr.detalle .panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px 28px;
  padding: 4px 0 0;
}
tr.detalle .ancho { grid-column: 1 / -1; }
tr.detalle .accion { background: var(--surface); }
tr.detalle .bitacora { border-top-color: var(--line-fuerte); }
tr.detalle .nota-nueva input { background: var(--surface); }

.monto-linea {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin: 2px 0 0;
}
.monto-linea .valor { font-family: var(--mono); font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.monto-linea .marca-est { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.monto-linea .marca-cap { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }

@media (max-width: 720px) {
  .indicadores { grid-template-columns: repeat(2, 1fr); }
  tr.detalle .panel { grid-template-columns: 1fr; }
}

/* ---------- Etapas del boceto ---------- */

.pastilla.e-sin_contacto,
.pastilla.e-descartado { color: var(--cold); background-color: var(--cold-soft); }
.pastilla.e-contactado,
.pastilla.e-solicitud_enviada { color: var(--muted); background-color: var(--surface-2); }
.pastilla.e-contesto,
.pastilla.e-nomina_recibida,
.pastilla.e-propuesta { color: var(--accent); background-color: var(--accent-soft); }
.pastilla.e-cierre { color: var(--ok); background-color: var(--ok-soft); }

.tabla .pastilla { font-size: 9.5px; padding: 4px 22px 4px 8px; background-position: right 9px top 50%, right 5px top 50%; }
.tabla tbody tr.fila:hover .pastilla { border-color: currentColor; }
.dato-flex .pista { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Columna: siguiente paso ---------- */

.paso { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; min-width: 0; }
.paso .que { color: var(--ink); line-height: 1.35; }
.paso .meta { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.paso .cuando { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paso .quien {
  font-size: 11px; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 3px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.paso.vencido .cuando { color: var(--warn); font-weight: 500; }
.paso .nada { color: var(--cold); font-style: italic; }
.tabla tbody tr.fila:hover .paso .quien { background: var(--surface); }

/* el panel desplegado usa tres columnas: la proxima accion ya no es de ancho completo */
tr.detalle .accion { grid-template-columns: 1fr; margin: 0; align-self: start; align-content: start; }
tr.detalle .accion .fecha-caja { flex-wrap: wrap; }

/* ==================== Fila expandida: tarjetas ==================== */

tr.detalle > td {
  padding: 0 0 20px;
  background: var(--surface-2);
  border-bottom: 2px solid var(--line-fuerte);
}

.expandido { display: flex; flex-direction: column; gap: 16px; padding: 6px 18px 0; }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px 18px;
  min-width: 0;
}

.tarjeta-titulo {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}

.campos { display: flex; flex-direction: column; gap: 13px; }

.campo-fila { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo-fila > .etiqueta {
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* dentro de las tarjetas el campo se ve como campo, no como texto suelto */
.tarjeta .campo {
  border-bottom: 1px solid var(--line);
  padding: 3px 4px;
  margin: 0 -4px;
}
.tarjeta .campo:hover:not(:disabled) { border-bottom-color: var(--line-fuerte); }
.tarjeta .campo:focus { border-bottom-color: var(--accent); background: var(--accent-soft); }

.tarjeta .dato-flex { align-items: center; gap: 10px; }
.tarjeta .dato-flex .campo { flex: 1 1 auto; }

/* el monto, destacado dentro de su tarjeta */
.monto-caja {
  margin: 3px 0 0;
  padding: 11px 13px;
  background: var(--accent-soft);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.monto-caja .et { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.monto-caja .valor {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.monto-caja .de { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* la tarjeta de la próxima acción avisa cuando ya venció */
.tarjeta.vencida { border-color: var(--warn); }
.tarjeta.vencida .tarjeta-titulo { color: var(--warn); border-bottom-color: var(--warn); }
.aviso-vencida {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--warn); font-weight: 600;
}

.fecha-sola {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 3px 4px;
  margin: 0 -4px;
  width: 100%;
  color-scheme: light;
}
.fecha-sola:focus { outline: none; border-bottom-color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fecha-sola { color-scheme: dark; } }
:root[data-theme="dark"] .fecha-sola { color-scheme: dark; }

/* ---------- Historial dentro de la fila expandida ---------- */

.tarjeta.historial { padding-bottom: 14px; }
.tarjeta.historial .entradas { display: flex; flex-direction: column; gap: 0; margin: 0; }
.tarjeta.historial .entrada {
  grid-template-columns: 140px 1fr auto;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.tarjeta.historial .entrada:last-child { border-bottom: 0; }
.tarjeta.historial .vacio { margin: 0; }
.tarjeta.historial .nota-nueva { margin: 14px 0 0; }
.tarjeta.historial .nota-nueva input { background: var(--ground); }
.tarjeta.historial .nota-nueva input:focus { background: var(--surface); }

.expandido-pie {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 2px 2px 0;
}

@media (max-width: 1100px) {
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tarjetas { grid-template-columns: 1fr; }
  .expandido { padding: 6px 12px 0; }
  .tarjeta.historial .entrada { grid-template-columns: 1fr; gap: 3px; }
}
.tarjetas > .columna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- Pendientes (4.2) ----------
   Lo primero de la página. Vencidos arriba; el plazo va a la izquierda porque es lo que
   decide el orden y lo que se lee primero. */

.pendientes {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--sombra);
  margin: 0 0 24px;
  overflow: hidden;
}

.pendientes-tope {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.pendientes-tope h2 {
  font-family: var(--display); font-size: 17px; font-weight: 400; margin: 0; letter-spacing: -.01em;
}
.pendientes-tope .cuenta {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.pendientes-tope .cuenta.alto { color: var(--warn); font-weight: 600; }
.pendientes .vacio { margin: 0; padding: 16px 18px 18px; color: var(--muted); font-size: 13.5px; }

.lista-pendientes { list-style: none; margin: 0; padding: 0; }

.pendiente {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
}
.pendiente:last-child { border-bottom: 0; }
.pendiente .plazo {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pendiente.vencido { background: var(--warn-soft); }
.pendiente.vencido .plazo { color: var(--warn); font-weight: 500; }

.pendiente .cuerpo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.pendiente .empresa {
  font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.pendiente .empresa:hover { color: var(--accent); text-decoration: underline; }
.pendiente .clase {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.pendiente.t-borrador .clase, .pendiente.t-compromiso .clase { color: var(--warn); border-color: var(--warn); }
.pendiente.t-avance .clase { color: var(--accent); border-color: var(--accent); }
.pendiente .que { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.pendiente .detalle { font-size: 12px; color: var(--muted); }
.pendiente .acciones { display: flex; gap: 6px; align-items: center; white-space: nowrap; }

.aviso-expediente {
  margin: 0 0 16px; padding: 10px 14px; font-size: 13px;
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid var(--warn); border-radius: 8px;
}

/* ---------- Etapa sostenida o no (4.1) ---------- */

.etapa-celda { display: flex; align-items: center; gap: 6px; }
.sustento { font-size: 12px; line-height: 1; cursor: help; }
.sustento.bien { color: var(--ok); }
.sustento.falta { color: var(--warn); }
.sustento.mano { color: var(--cold); }

/* ---------- Tarjeta del expediente (4.1 y 4.3) ---------- */

.tarjeta.expediente { grid-column: 1 / -1; margin-top: 16px; }
.sustento-linea { margin: 0 0 10px; font-size: 13.5px; }
.sustento-linea.bien { color: var(--ink); }
.sustento-linea.falta { color: var(--warn); }
.sustento-linea.neutra { color: var(--muted); }
.sustento-linea a { color: var(--accent); }

.avance {
  border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: 8px; padding: 12px 14px; margin: 0 0 12px;
}
.avance p { margin: 0 0 10px; font-size: 13.5px; }
.avance-pie { display: flex; gap: 8px; flex-wrap: wrap; }

.hechos { display: flex; flex-direction: column; }
.hecho {
  display: grid;
  grid-template-columns: 170px 70px minmax(0, 1fr) 90px auto;
  align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.hecho:last-child { border-bottom: 0; }
.hecho .que { font-weight: 500; }
.hecho .cuando { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.hecho .de { color: var(--muted); overflow-wrap: anywhere; }
.hecho .cuantos { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

@media (max-width: 900px) {
  .pendiente { grid-template-columns: 1fr; gap: 6px; }
  .pendiente .acciones { justify-content: flex-start; }
  .hecho { grid-template-columns: 1fr; gap: 2px; }
}