/* =========================================================
   PIEZAS SUELTAS DE INTERFAZ — botones, spinner, avisos flotantes
   RUTH.il

   POR QUÉ EXISTE
   --------------
   Estas reglas vivían en components/panel/panel.css, junto con la
   maquetación de las pantallas de panel. El problema es que panel.css
   trae ADEMÁS su propia paleta: redefine --magenta, --gold, --danger e
   --info para su contexto.

   Cuando la pantalla del trámite necesitó un botón y un spinner, se le
   cargó panel.css entera y se llevó por delante la paleta de esa
   pantalla. Medido: --magenta pasaba de #C42A8E a #FF80C0 solo ahí.

   Sacando las piezas, quien necesita un botón carga un botón, no un
   sistema de color entero.
   ========================================================= */

.btn {
  font-family: inherit; font-size: .82rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px; cursor: pointer;
  background: transparent;                 /* si no, el <button> hereda el gris del navegador */
  border: 1px solid transparent; text-decoration: none;
  transition: filter .15s, transform .1s;
}.btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }.btn-principal { background: var(--accent); color: var(--bg); }.btn-suave { background: transparent; color: var(--text-2); border-color: var(--border-strong); }.btn-suave:hover { background: var(--bg-3); color: var(--text-1); }/* ---------- ESTADOS DE LA VISTA ---------- */
.vista-estado { text-align: center; padding: 60px 24px; color: var(--text-3); }.vista-estado i { font-size: 2.6rem; display: block; margin-bottom: 12px; opacity: .55; }.vista-estado p { margin: 0 0 6px; font-size: .95rem; }.vista-estado .detalle { font-size: .82rem; opacity: .85; }.vista-estado .btn { margin-top: 18px; }.spinner {
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 2.5px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: girar .7s linear infinite;
}/* ---------- AVISOS ---------- */
.toast-zona {
  position: fixed; right: 20px; bottom: 20px; z-index: 2000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
}.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px; font-size: .85rem;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow); animation: entrar .2s ease-out;
}.toast i { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }.toast.ok i { color: var(--ok); }.toast.error i { color: var(--danger); }.toast.info i { color: var(--accent); }.toast.warning i { color: var(--warn); }.toast span { flex: 1; }.toast button {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-3); font-size: 1.15rem; line-height: 1;
}.toast button:hover { color: var(--text-1); }.spinner-mini { width: 15px; height: 15px; border-width: 2px; margin: 0; flex-shrink: 0; }