/* ===========================================================================
   public/css/buttons.css
   Botones base y los de la maquina de estados de aprobacion del Jefe.

   Parte 5 de 12 de la hoja de estilos. El orden de carga IMPORTA:
   se enlazan en este mismo orden desde index.html y dashboard.html.
   =========================================================================== */
/* ===== 9. BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition-smooth);
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary  { background: var(--clr-blue);  color: var(--clr-white); border-color: var(--clr-blue);  }
.btn-primary:hover:not(:disabled)  { background: var(--clr-blue-strong); box-shadow: var(--glow-primary); }

.btn-success  { background: var(--clr-green); color: var(--clr-white); border-color: var(--clr-green); }
.btn-success:hover:not(:disabled)  { background: var(--clr-green-strong); box-shadow: var(--glow-success); }

.btn-danger   { background: var(--clr-red);   color: var(--clr-white); border-color: var(--clr-red);   }
.btn-danger:hover:not(:disabled)   { background: var(--clr-red-strong); box-shadow: var(--glow-danger); }

.btn-warning  { background: var(--clr-amber); color: var(--clr-black); border-color: var(--clr-amber); }

.btn-ghost    { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }

.btn-icon     { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: .3rem; border-radius: var(--radius-sm); font-size: 1rem; line-height: 1; }
.btn-icon:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Descargar Excel. Estaba escrito como estilo inline IDÉNTICO en
   proformaTemplate.js y timelineView.js — el mismo botón, dos copias, con el
   verde en hexadecimal. Ver --clr-excel en tokens.css para por qué este verde
   no es el de la paleta. */
.btn-excel {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--clr-excel);
  color: var(--clr-white);
  border: 1px solid var(--clr-excel-strong);
}
.btn-excel:hover:not(:disabled) { background: var(--clr-excel-strong); }

.btn-full  { width: 100%; }
.btn-sm    { padding: .3rem .65rem; font-size: .8rem; }
.btn-lg    { padding: .65rem 1.4rem; font-size: 1rem; }

/* El «+» redondo que abre el alta rápida al lado de un <select> (origen de
   cliente, marca de un ítem). Vivía como estilo inline de nueve propiedades
   copiado en dos archivos, con dos tamaños distintos y el verde a mano.
   Usa --clr-green, el verde de «alta» del resto de la aplicación: el que tenía
   era otro verde sin más razón que la de haberse escrito aparte. */
.btn-add-inline {
  flex-shrink: 0;
  width: 28px; height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--clr-green);
  color: var(--clr-white);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.btn-add-inline:hover:not(:disabled) { background: var(--clr-green-strong); }

/* Dentro de una fila de la tabla de ítems, donde el alto lo manda el renglón. */
.btn-add-inline-sm { width: 22px; height: 22px; }

.btn-loading .btn-label { opacity: 0; }
.btn-loading .btn-spinner { display: inline-block !important; }

/* ===== 24. JEFE — APPROVAL STATE MACHINE BUTTONS ===== */
.approval-actions {
  margin-top: 1.5rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.approval-actions-title {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.approval-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

.approval-actions-grid .btn-success {
  grid-column: 1 / -1; /* Approve spans full width to make it prominent */
  padding: .65rem 1rem;
  font-size: .95rem;
}

/* Ocupa el ancho completo de la grilla de acciones. Existe porque el botón de
   confirmar venta lo pedía con style="grid-column:1/-1" a mano: la regla de
   arriba ya lo hacía para los .btn-success, pero ése es .btn-primary. */
.approval-actions-grid .btn-fila-entera { grid-column: 1 / -1; }

/* "Hold" state button */
.btn-hold {
  background: rgba(99,102,241,.15);
  color: var(--clr-indigo-soft);
  border-color: rgba(99,102,241,.4);
  font-weight: 600;
}

.btn-hold:hover:not(:disabled) {
  background: rgba(99,102,241,.25);
  transform: translateY(-1px);
}

/* =============================================================================
   La llave del jefe — reapertura de una venta cerrada.

   Va SEPARADO de la grilla de acciones a propósito. Es una excepción, no un
   paso más del flujo: si fuera un botón cualquiera al lado de "Archivar", con
   el tiempo se usaría como uno cualquiera. El borde ámbar, el título propio y
   el texto que avisa que queda registrado son parte de la función, no adorno.
   ========================================================================== */
.llave-jefe {
  margin-top: 1rem;
  border: 1px solid var(--clr-amber);
  border-left-width: 4px;
  background: rgba(245,158,11,.07);
}

.llave-jefe-title {
  color: var(--clr-amber-soft);
  margin-bottom: .5rem;
}

.llave-jefe-text {
  color: var(--text-secondary);
  margin-bottom: .9rem;
  line-height: 1.5;
}

.llave-jefe-btn {
  background: var(--clr-amber);
  color: #1a1207;              /* contraste sobre ámbar; no es un token de tema */
  border: 1px solid var(--clr-amber);
  font-weight: 700;
}

.llave-jefe-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}