/* ════════════════════════════════════════════════════════════════════
   INVRIVERA — Tokens de marca

   Punto único de verdad de la paleta. Para cambiar el color de acento
   del panel completo, se editan las tres variables de --inv-accent.

   Nota: los PDF (dompdf) y las plantillas de correo NO usan estas
   variables — ninguno de los dos motores soporta custom properties de
   forma confiable. Ahí los colores van literales a propósito.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Acento: azul corporativo (blue-700) ── */
  --inv-accent: #1d4ed8;
  --inv-accent-hover: #1e40af;   /* blue-800 */
  --inv-accent-rgb: 29, 78, 216; /* para rgba(var(--inv-accent-rgb), .12) */

  --inv-accent-light: #60a5fa;   /* blue-400 — realces suaves */
  --inv-accent-border: #bfdbfe;  /* blue-200 — bordes en hover */
  --inv-accent-soft: #eff6ff;    /* blue-50  — fondos de chip/ícono */

  /* ── Superficies ── */
  --inv-bg: #f1f5f9;             /* slate-100 — fondo de página */
  --inv-surface: #ffffff;
  --inv-surface-muted: #f8fafc;  /* slate-50 — inputs, filas alternas */
  --inv-border: #e2e8f0;         /* slate-200 */
  --inv-border-strong: #cbd5e1;  /* slate-300 */

  /* ── Texto ── */
  --inv-ink: #0f172a;            /* slate-900 — títulos */
  --inv-ink-soft: #475569;       /* slate-600 — cuerpo */
  --inv-muted: #94a3b8;          /* slate-400 — secundario */
  --inv-faint: #cbd5e1;          /* slate-300 — placeholders */

  /* ── Estados ── */
  --inv-success: #059669;        /* emerald-600 */
  --inv-danger: #dc2626;         /* red-600 */
  --inv-danger-border: #fecaca;  /* red-200 */
  --inv-warning: #f59e0b;        /* amber-500 */
  --inv-info: #0284c7;           /* sky-600 */

  /* ── Forma ── */
  --inv-radius: 8px;
  --inv-radius-lg: 12px;
  --inv-ring: 0 0 0 3px rgba(var(--inv-accent-rgb), 0.15);
}

/* ════════════════════════════════════════════════════════════════════
   BOTONES — componente <x-button>

   Tamaño base cómodo: sin variante "sm". Se usa em en el padding para
   que el botón acompañe al tamaño de fuente heredado.
   ════════════════════════════════════════════════════════════════════ */

.inv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--inv-radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease;
}

.inv-btn:focus-visible {
  outline: none;
  box-shadow: var(--inv-ring);
}

.inv-btn i,
.inv-btn svg {
  width: 1em;
  height: 1em;
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1;
}

.inv-btn[disabled],
.inv-btn.is-disabled {
  opacity: .55;
  pointer-events: none;
}

/* Variantes */
.inv-btn-primary {
  background: var(--inv-accent);
  color: #fff;
}
.inv-btn-primary:hover {
  background: var(--inv-accent-hover);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--inv-accent-rgb), .30);
}

.inv-btn-secondary {
  background: transparent;
  color: var(--inv-ink-soft);
  border-color: var(--inv-border);
}
.inv-btn-secondary:hover {
  background: var(--inv-surface-muted);
  border-color: var(--inv-border-strong);
  color: var(--inv-ink);
}

.inv-btn-danger {
  background: transparent;
  color: var(--inv-danger);
  border-color: var(--inv-danger-border);
}
.inv-btn-danger:hover {
  background: #fef2f2;
  border-color: var(--inv-danger);
  color: #b91c1c;
}

.inv-btn-success {
  background: var(--inv-success);
  color: #fff;
}
.inv-btn-success:hover {
  background: #047857;
  color: #fff;
  box-shadow: 0 4px 14px rgba(5, 150, 105, .30);
}

/* Modificadores de ancho */
.inv-btn-block { width: 100%; }

/* ════════════════════════════════════════════════════════════════════
   OVERRIDES DEL TEMPLATE

   Soft UI trae su propio "primary" magenta (#cb0c9f) en las utilidades
   de Bootstrap. La app usa esas clases en 86 lugares, asi que en vez de
   editar el CSS del template (que es vendor) se redefinen aca.
   ════════════════════════════════════════════════════════════════════ */

.bg-gradient-primary {
  background-image: linear-gradient(310deg, var(--inv-accent-hover), var(--inv-accent)) !important;
}

.text-primary { color: var(--inv-accent) !important; }

.btn-primary,
.btn.bg-gradient-primary {
  background-image: linear-gradient(310deg, var(--inv-accent-hover), var(--inv-accent)) !important;
  border-color: transparent !important;
}
.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  box-shadow: 0 4px 14px rgba(var(--inv-accent-rgb), .35) !important;
}

.btn-outline-primary {
  color: var(--inv-accent) !important;
  border-color: var(--inv-accent) !important;
}
.btn-outline-primary:hover {
  background-color: var(--inv-accent) !important;
  color: #fff !important;
}

/* Foco de formularios de Bootstrap */
.form-control:focus,
.form-select:focus {
  border-color: var(--inv-accent) !important;
  box-shadow: var(--inv-ring) !important;
}

/* Switches e inputs marcados */
.form-check-input:checked {
  background-color: var(--inv-accent) !important;
  border-color: var(--inv-accent) !important;
}
.form-check-input:focus {
  border-color: var(--inv-accent) !important;
  box-shadow: var(--inv-ring) !important;
}

a { color: var(--inv-accent); }
a:hover { color: var(--inv-accent-hover); }

/* ════════════════════════════════════════════════════════════════════
   TAMAÑO DE BOTONES

   El panel no usa tamaño "sm": todos los botones comparten una medida
   cómoda. Se neutraliza .btn-sm desde acá en vez de editarlo en las 19
   vistas que lo traían del template.

   Se excluyen los botones-ícono de las tablas (.btn-link), que son
   controles compactos de fila y no botones de acción.
   ════════════════════════════════════════════════════════════════════ */

.btn.btn-sm:not(.btn-link),
.btn:not(.btn-link):not(.btn-icon-only) {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--inv-radius);
  line-height: 1.25;
}

/* Los botones del panel propio comparten la misma medida. */
.duzel-btn-primary-solid,
.duzel-btn-outline {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--inv-radius);
  line-height: 1.25;
}

.duzel-btn-primary-solid:focus-visible,
.duzel-btn-outline:focus-visible {
  outline: none;
  box-shadow: var(--inv-ring);
}

/* Botón-ícono de fila: compacto a propósito, sin el padding de acción. */
.btn.btn-link {
  padding: 4px 6px;
  font-size: 14px;
  border-radius: 6px;
  color: var(--inv-ink-soft);
}
.btn.btn-link:hover {
  background: var(--inv-accent-soft);
  color: var(--inv-accent);
}
.btn.btn-link.text-danger:hover {
  background: #fef2f2;
  color: var(--inv-danger) !important;
}

@media (max-width: 575.98px) {
  .inv-btn { padding: 10px 16px; }
}