/* Dónde Jugar Listings — Shared button system.
 *
 * Single source of truth for every .djl-btn* and the board card "Ver detalles"
 * button. Loaded (handle: djl-buttons) after djl-tokens on every front-end
 * page, so updating a button here updates it everywhere — no more per-page
 * copies drifting apart.
 *
 * Selectors are scoped to button / a so they outrank hello-elementor's
 * [type=button] rule (same specificity, loads later). Underlines are killed
 * with !important: the theme sets `a, .page-content a { text-decoration:
 * underline }` at a specificity we'd otherwise tie-and-lose against inside
 * containers we don't control (e.g. the single-listing detail actions).
 */

button.djl-btn,
a.djl-btn {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	border-radius: var(--djl-btn-radius);
	border: var(--djl-btn-border) solid transparent;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	background-color: transparent;
	color: var(--djl-text);
}

/* Branded hover for plain .djl-btn (no color variant) — e.g. Editar, Archivar,
 * Reactivar, Quitar. Without this the theme injects its own (pink) hover.
 * Variant hovers below load later and win for --primary/--ghost/--danger/etc. */
button.djl-btn:hover,
button.djl-btn:focus,
a.djl-btn:hover,
a.djl-btn:focus {
	color: var(--djl-btn-outline-color);
	border-color: var(--djl-btn-outline-color);
	background-color: transparent;
}

/* Filled (background) buttons — all share one style. */
button.djl-btn--primary,
a.djl-btn--primary {
	background: var(--djl-btn-fill-bg);
	border-color: var(--djl-btn-fill-bg);
	color: var(--djl-btn-fill-text);
}

button.djl-btn--primary:hover,
button.djl-btn--primary:focus,
a.djl-btn--primary:hover,
a.djl-btn--primary:focus {
	background: var(--djl-btn-fill-bg-hover);
	border-color: var(--djl-btn-fill-bg-hover);
	color: var(--djl-btn-fill-text);
}

/* Outline buttons — all share one style + color token. */
button.djl-btn--ghost,
a.djl-btn--ghost {
	background: transparent;
	color: var(--djl-btn-outline-color);
	border-color: var(--djl-btn-outline-color);
}

button.djl-btn--ghost:hover,
button.djl-btn--ghost:focus,
a.djl-btn--ghost:hover,
a.djl-btn--ghost:focus {
	background: var(--djl-btn-outline-color);
	color: #fff;
}

/* WhatsApp — brand green, fixed. */
button.djl-btn--whatsapp,
a.djl-btn--whatsapp {
	background: var(--djl-btn-whatsapp);
	border-color: var(--djl-btn-whatsapp);
	color: #fff;
}

button.djl-btn--whatsapp:hover,
button.djl-btn--whatsapp:focus,
a.djl-btn--whatsapp:hover,
a.djl-btn--whatsapp:focus {
	background: var(--djl-btn-whatsapp-hover);
	border-color: var(--djl-btn-whatsapp-hover);
	color: #fff;
}

/* Danger (delete) — outline red. The destructive cue is kept on purpose. */
button.djl-btn--danger,
a.djl-btn--danger {
	background: transparent;
	color: var(--djl-btn-danger);
	border: var(--djl-btn-border) solid var(--djl-btn-danger-border);
}

button.djl-btn--danger:hover,
button.djl-btn--danger:focus,
a.djl-btn--danger:hover,
a.djl-btn--danger:focus {
	background: var(--djl-btn-danger) !important;
	border-color: var(--djl-btn-danger) !important;
	color: #fff !important;
}

/* Size modifier. */
button.djl-btn--small,
a.djl-btn--small {
	padding: 0.3rem 0.6rem;
	font-size: 0.8rem;
	border-radius: 4px;
}

button.djl-btn[disabled],
a.djl-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* The board card "Ver detalles" button is an outline button too — it shares
 * the same color/border tokens, but keeps its full-width centered block
 * layout (the card footer relies on it). */
.djl-bcard__btn {
	display: block;
	text-align: center;
	padding: 0.45rem 0.75rem;
	border: var(--djl-btn-border) solid var(--djl-btn-outline-color);
	border-radius: var(--djl-btn-radius);
	color: var(--djl-btn-outline-color);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.djl-bcard__btn:hover,
.djl-bcard__btn:focus {
	background: var(--djl-btn-outline-color);
	color: #fff;
}

/* Kill the theme underline on every button link, in any container. */
a.djl-btn,
a.djl-btn:visited,
a.djl-btn:hover,
a.djl-btn:focus,
a.djl-bcard__btn,
a.djl-bcard__btn:visited,
a.djl-bcard__btn:hover,
a.djl-bcard__btn:focus {
	text-decoration: none !important;
}