/**
 * Botones de aplicación alineados con admin/users/profile.html:
 * texto / fondo transparente, hover suave (azul, neutro o rojo).
 */

.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 0.25rem;
    border-width: 0;
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.app-btn:disabled,
.app-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.app-btn:focus-visible {
    outline: 2px solid rgb(59 130 246);
    outline-offset: 2px;
}

.dark .app-btn:focus-visible {
    outline-color: rgb(96 165 250);
}

.app-btn--primary {
    color: rgb(29 78 216);
}

.dark .app-btn--primary {
    color: rgb(96 165 250);
}

.app-btn--primary:hover:not(:disabled) {
    background-color: rgb(219 234 254);
}

.dark .app-btn--primary:hover:not(:disabled) {
    background-color: rgba(59, 130, 246, 0.2);
    color: rgb(147 197 253);
}

.app-btn--neutral {
    color: rgb(55 65 81);
}

.dark .app-btn--neutral {
    color: rgb(209 213 219);
}

.app-btn--neutral:hover:not(:disabled) {
    background-color: rgb(243 244 246);
}

.dark .app-btn--neutral:hover:not(:disabled) {
    background-color: rgb(31 41 55);
}

/** Consulta / ver datos: cian–teal, no el azul primario de acciones. */
.app-btn--info {
    color: rgb(15 118 110);
}

.dark .app-btn--info {
    color: rgb(45 212 191);
}

.app-btn--info:hover:not(:disabled) {
    background-color: rgb(204 251 241);
    color: rgb(13 148 136);
}

.dark .app-btn--info:hover:not(:disabled) {
    background-color: rgba(45, 212, 191, 0.22);
    color: rgb(204 251 241);
}

.app-btn--danger {
    color: rgb(185 28 28);
}

.dark .app-btn--danger {
    color: rgb(248 113 113);
}

.app-btn--danger:hover:not(:disabled) {
    background-color: rgb(254 226 226);
}

.dark .app-btn--danger:hover:not(:disabled) {
    background-color: rgba(239, 68, 68, 0.2);
}

.app-btn--link {
    color: rgb(29 78 216);
}

.dark .app-btn--link {
    color: rgb(96 165 250);
}

.app-btn--link:hover:not(:disabled) {
    background-color: rgb(219 234 254);
}

.dark .app-btn--link:hover:not(:disabled) {
    background-color: rgba(59, 130, 246, 0.2);
}

.app-btn--sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.app-btn--md {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.app-btn .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
}

.app-btn--md .material-symbols-outlined {
    font-size: 1.125rem;
}

.app-btn--center {
    justify-content: center;
    text-align: center;
}

/**
 * Sobre fondos tintados (p. ej. enlaces «seleccionar todos»): texto claro.
 */
.app-btn--contrast {
    color: rgb(255 255 255);
}

.app-btn--contrast:hover:not(:disabled) {
    background-color: rgba(255 255 255, 0.15);
}

.dark .app-btn--contrast:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Ejecutar: fondo transparente como antes; texto oscuro y hover neutro en claro; en oscuro como .app-btn--contrast. */
#changelist-actions button.changelist-action-submit[type="submit"] {
    background-color: transparent;
    color: rgb(55 65 81);
}

#changelist-actions button.changelist-action-submit[type="submit"]:hover:not(:disabled) {
    background-color: rgb(243 244 246);
    color: rgb(17 24 39);
}

.dark #changelist-actions button.changelist-action-submit[type="submit"] {
    background-color: transparent;
    color: rgb(255 255 255);
}

.dark #changelist-actions button.changelist-action-submit[type="submit"]:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.12);
    color: rgb(255 255 255);
}

/* Ocultar Ejecutar: .app-btn fuerza display:inline-flex y gana a la utilidad Tailwind .hidden. */
#changelist-actions button.changelist-action-submit[type="submit"].is-changelist-run-hidden {
    display: none !important;
}

/* Barra de acciones: ancho fijo tipo w-72 para que no crezca al elegir opción larga (el texto trunca en el custom select). */
#changelist-actions .changelist-action-control {
    flex: 0 0 auto;
}

#changelist-actions select[name="action"],
#changelist-actions select#id_action {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    min-width: 0;
    flex-grow: 0 !important;
    color: rgb(17 24 39);
    background-color: #ffffff;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
}

#changelist-actions #id_action-custom-button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#changelist-actions #id_action-custom-wrapper {
    max-width: 100%;
    width: 100%;
}

.dark #changelist-actions select[name="action"],
.dark #changelist-actions select#id_action {
    color: rgb(243 244 246);
    background-color: rgb(31 41 55);
    border-color: rgb(75 85 99);
}

/* Unfold: .actions.selected asume barra tintada y fuerza texto claro; aquí el fondo es claro/oscuro explícito. */
#changelist-actions.actions .action-counter,
#changelist-actions.actions.selected .action-counter {
    color: rgb(17 24 39);
}

.dark #changelist-actions.actions .action-counter,
.dark #changelist-actions.actions.selected .action-counter {
    color: rgb(243 244 246);
}

#changelist-actions.actions.selected {
    color: rgb(17 24 39);
}

.dark #changelist-actions.actions.selected {
    color: rgb(243 244 246);
}

/* Export CSV/XLS y Filtros: sin sombra ni borde en reposo (sólo hover del .app-btn--neutral). */
#export-buttons-container .app-btn,
#changelist .changelist-form-container .flex.flex-wrap.items-center.gap-2 > a.app-btn,
#changelist .changelist-form-container .flex.items-center.gap-2 > a.app-btn {
    box-shadow: none;
    border: 0;
}

/* Márgenes y caja de #changelist-actions: clases Tailwind en admin/actions.html */