/* ═══════════════════════════════════════════════════════════════════════════
   ESTILOS · Autorización por concepto
   Casillas simples, totales visibles, nada recargado.
   ═══════════════════════════════════════════════════════════════════════════ */

.aut-caja { display: flex; flex-direction: column; gap: var(--sp-3); }

.aut-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-2);
}
.aut-encabezado h2 { font-size: var(--fs-lg); margin: 2px 0 4px; }

.aut-totales { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.aut-totales > div { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
.aut-totales span { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.aut-totales strong { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.aut-totales .ok strong { color: var(--green); }
.aut-totales .no strong { color: var(--red); }
.aut-totales .pen strong { color: var(--amber); }

/* ── La tabla de conceptos ─────────────────────────────────────────────── */
.aut-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.aut-tabla input, .aut-tabla select, .aut-tabla textarea { text-transform: none; letter-spacing: 0; font-weight: 400; }
.aut-tabla thead th {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: left;
}
.aut-tabla tbody td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.aut-tabla tbody tr:hover td { background: var(--panel-3); }
.aut-tabla .num, .aut-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

.aut-marca { width: 92px; }
.aut-concepto { color: var(--ink); font-weight: 500; }
.aut-monto { width: 110px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.aut-estado { width: 130px; }

/* La casilla: cuadro de 18px, pero con un área de clic amplia alrededor para que
   se atine fácil, incluso en pantalla táctil. */
.aut-casilla {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  cursor: pointer;
  margin: 0;
  padding: 7px 14px 7px 2px;
  min-height: 32px;
  border-radius: var(--radius);
}
.aut-casilla:hover { background: var(--panel-3); }
.aut-casilla input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--green);
  cursor: pointer;
  margin: 0;
  flex: none;
}
.aut-casilla input:disabled { cursor: default; opacity: .55; }
@media (pointer: coarse) {
  .aut-casilla { min-height: 44px; padding: 12px 18px 12px 4px; }
  .aut-casilla input[type="checkbox"] { width: 22px; height: 22px; }
}

.aut-pill {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}
.aut-pill.ok  { background: var(--green-soft); color: var(--green); border-color: var(--green-mid); }
.aut-pill.no  { background: var(--red-soft);   color: var(--red-dark); border-color: var(--red-mid); }
.aut-pill.pen { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-mid); }

/* ── El pie: cómo lo dijo el cliente ───────────────────────────────────── */
.aut-pie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  align-items: end;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-2);
}
.aut-pie label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.aut-pie input, .aut-pie select {
  height: 32px;
  font-size: var(--fs-base);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.aut-acciones { display: flex; align-items: center; gap: var(--sp-3); grid-column: 1 / -1; }
.aut-acciones .sd-help { margin: 0; }

.aut-historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aut-historial li { font-size: var(--fs-sm); color: var(--muted); padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.aut-historial li:last-child { border-bottom: 0; }
.aut-historial strong { color: var(--ink); }

@media (max-width: 620px) {
  .aut-totales { gap: var(--sp-3); }
  .aut-marca { width: 56px; }
  .aut-estado { width: 104px; }
  .aut-tabla { font-size: var(--fs-sm); }
  .aut-acciones { flex-direction: column; align-items: stretch; }
  .aut-acciones .btn { width: 100%; }
}

/* En el PDF y al imprimir, las casillas se ven como marca. */
@media print {
  .aut-pie, .aut-acciones { display: none !important; }
  .aut-tabla tbody tr:hover td { background: transparent; }
}