/* ============================================================
   Nomopolis — sistema de botones
   Se carga al final de cada pantalla para unificar .btn-primary,
   .mini-btn (+ .primary / .danger / .ghost), .pill-btn y el botón
   nativo de los campos de archivo. Sólo usa los tokens de marca
   (--accent, --surface, --critical…), así que respeta el modo
   oscuro sin reglas extra.
   ============================================================ */

.btn-primary,
.mini-btn,
.pill-btn {
  font-family: inherit;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
              box-shadow .16s ease, transform .1s ease, filter .16s ease;
}

/* ---------- Botón principal (formularios) ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 84%, #000);
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .005em;
  box-shadow: 0 1px 2px rgba(33, 28, 43, .16), 0 8px 16px -12px var(--accent);
  cursor: pointer;
}
.btn-primary:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(33, 28, 43, .16), 0 12px 20px -12px var(--accent);
}
.btn-primary:active {
  filter: brightness(.96);
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(33, 28, 43, .2);
}
.btn-primary:disabled {
  opacity: .55;
  filter: none;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- Botón compacto (acciones en tarjetas y formularios) ---------- */
.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .005em;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(33, 28, 43, .05);
  cursor: pointer;
}
.mini-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border));
  box-shadow: 0 2px 6px -3px rgba(33, 28, 43, .22);
}
.mini-btn:active { transform: scale(.98); box-shadow: none; }
.mini-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.mini-btn:disabled:hover { background: var(--surface); border-color: var(--surface-border); }

/* Acción principal dentro de una tarjeta o formulario */
.mini-btn.primary {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  color: var(--accent-ink);
  border-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 84%, #000);
  padding: 8px 16px;
  box-shadow: 0 1px 2px rgba(33, 28, 43, .16), 0 6px 12px -9px var(--accent);
}
.mini-btn.primary:hover {
  background-color: var(--accent);
  color: var(--accent-ink);
  filter: brightness(1.07);
  box-shadow: 0 2px 4px rgba(33, 28, 43, .16), 0 10px 16px -8px var(--accent);
}
.mini-btn.primary:disabled:hover { background-color: var(--accent); filter: none; border-color: var(--accent); }

/* Acción destructiva: contorno discreto, relleno suave al pasar el cursor */
.mini-btn.danger {
  color: var(--critical);
  border-color: var(--surface-border);
  border-color: color-mix(in srgb, var(--critical) 30%, var(--surface-border));
}
.mini-btn.danger:hover {
  background: var(--critical-soft);
  border-color: var(--critical);
  border-color: color-mix(in srgb, var(--critical) 55%, var(--surface-border));
}
.mini-btn.danger:disabled:hover { background: var(--surface); }

.mini-btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-muted);
}
.mini-btn.ghost:hover { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* Pestañas hechas con .mini-btn (aria-pressed) */
.mini-btn[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 4px 10px -6px var(--accent);
}
.mini-btn[aria-pressed="true"]:hover { filter: brightness(1.06); background-color: var(--accent); }
.mini-btn.active-reaction { background-color: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Filtros / pestañas en píldora ---------- */
.pill-btn {
  box-shadow: 0 1px 1px rgba(33, 28, 43, .04);
}
.pill-btn:hover {
  border-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border));
  color: var(--accent);
}
.pill-btn:active { transform: scale(.97); }
.pill-btn[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 12px -8px var(--accent);
}
.pill-btn[aria-pressed="true"]:hover { color: var(--accent-ink); filter: brightness(1.06); }

/* ---------- Enlaces con apariencia de botón de texto ---------- */
.link-btn { transition: color .15s ease, opacity .15s ease; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Estado de carga ---------- */
.btn-primary .spinner,
.mini-btn .spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 2px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: .85;
  animation: nmp-btn-spin .7s linear infinite;
}
@keyframes nmp-btn-spin { to { transform: rotate(360deg); } }

/* ---------- Botón nativo de los campos de archivo ---------- */
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 13px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border));
}

/* Casillas y radios con el color de marca */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- Foco visible y accesibilidad ---------- */
.btn-primary:focus-visible,
.mini-btn:focus-visible,
.pill-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Táctil: áreas de toque más cómodas */
@media (pointer: coarse), (max-width: 900px) {
  .mini-btn { padding: 9px 14px; min-height: 38px; }
  .mini-btn.primary { padding: 10px 18px; }
  .pill-btn { padding: 9px 15px; }
  .btn-primary { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .mini-btn, .pill-btn { transition: none; }
  .btn-primary:hover, .btn-primary:active, .mini-btn:active, .pill-btn:active { transform: none; }
  .btn-primary .spinner, .mini-btn .spinner { animation-duration: 1.6s; }
}