/* Ajustes globales del panel web (CSS plano: compatible con Tailwind CDN)
   Paleta institucional GRUPO CARAL:
   --caral-brown: marrón institucional (marca, navegación, títulos)
   --caral-green: verde principal (acciones, encabezados, acentos)
   --caral-green-dark: verde secundario (hover, foco)
*/
:root {
  --caral-brown: #4C3327;
  --caral-brown-dark: #3a271d;
  --caral-green: #7AB800;
  --caral-green-dark: #58A618;
}

body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
[x-cloak] { display: none !important; }

.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(74, 51, 39, 0.08);
}
table.panel th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}
table.panel td {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: #334155;
  border-top: 1px solid #f1f5f9;
  vertical-align: middle;
}

/* Grilla fija compartida para las tablas financieras del detalle de
   liquidación: Tabla 1 (Órdenes) y Tabla 2 (Descuentos) quedan alineadas
   columna por columna (mismo <colgroup> de 9 columnas). */
table.liq-fin {
  width: 100%;
  table-layout: fixed;
  min-width: 860px;
}
table.liq-fin th,
table.liq-fin td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green { background: #e9f3d4; color: #436d0f; }
.badge-amber { background: #fef9c3; color: #854d0e; }
.badge-slate { background: #f1f5f9; color: #334155; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-brown { background: #efe7e0; color: #4C3327; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid transparent;
}
.btn-primary { background: var(--caral-green); color: #fff; }
.btn-primary:hover { background: var(--caral-green-dark); box-shadow: 0 2px 6px rgba(122, 184, 0, 0.35); }
.btn-secondary { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.btn-secondary:hover { background: #e2e8f0; }
.btn-danger { background: #b91c1c; color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-brand { background: var(--caral-brown); color: #fff; }
.btn-brand:hover { background: var(--caral-brown-dark); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  outline: none;
}
.input:focus { border-color: var(--caral-green-dark); box-shadow: 0 0 0 2px rgba(88, 166, 24, 0.18); }
.label { font-size: 0.75rem; font-weight: 600; color: #475569; margin-bottom: 0.25rem; display: block; }