/*
 * Botones SAEFY (CORE-004)
 * Paleta y radios globales para Bootstrap 3. Se carga después de fmk.css.
 * Cada variante define sus colores en variables; las reglas de estado son
 * compartidas. Se usa :where() para no subir la especificidad y dejar que las
 * reglas propias de cada pantalla (p. ej. ".switch-component .btn-default") sigan ganando.
 */

/* ---------- Radios ---------- */
.btn,
.btn-md,
.btn-lg,
.btn-group-lg > .btn { --btn-radius: 8px; }
.btn-sm,
.btn-group-sm > .btn { --btn-radius: 6px; }
.btn-xs,
.btn-group-xs > .btn { --btn-radius: 5px; }
/* Pegado a un campo: mismo radio que el input */
.input-group-btn > .btn { --btn-radius: 4px; }

.btn,
.btn-sm, .btn-xs, .btn-lg,
.btn-group-sm > .btn,
.btn-group-xs > .btn,
.btn-group-lg > .btn {
    border-radius: var(--btn-radius);
}
.btn-round,
.btn-round.btn-sm,
.btn-round.btn-xs,
.btn-round.btn-lg { border-radius: 30px; }

/* Grupos generados con <template x-for> (FormMake fmk-switch): el primer botón
   no es :first-child, así que Bootstrap le quita las esquinas izquierdas.
   La regla de Bootstrap pesa 0,5,0 (cada :not() suma), de ahí el .btn repetido. */
.btn-group > template:first-child + .btn.btn.btn:not(.dropdown-toggle) {
    border-top-left-radius: var(--btn-radius);
    border-bottom-left-radius: var(--btn-radius);
}

/* ---------- Paleta por variante ---------- */
/* btn-white va primero: FormMake combina "btn-white active btn-primary" y debe ganar el color. */
.btn-white {
    --btn-bg: #ffffff;       --btn-bd: #cbd5e1; --btn-fg: #334155;
    --btn-bg-h: #f8fafc;     --btn-bd-h: #cbd5e1; --btn-fg-h: #0f172a;
    --btn-bg-a: #f1f5f9;     --btn-bd-a: #94a3b8;
}
.btn-default {
    --btn-bg: #f1f5f9;       --btn-bd: #cbd5e1; --btn-fg: #475569;
    --btn-bg-h: #e2e8f0;     --btn-bd-h: #cbd5e1; --btn-fg-h: #1e293b;
    --btn-bg-a: #cbd5e1;     --btn-bd-a: #94a3b8;
}
.btn-primary {
    --btn-bg: #2563eb;       --btn-bd: #2563eb; --btn-fg: #ffffff;
    --btn-bg-h: #1d4ed8;     --btn-bd-h: #1d4ed8; --btn-fg-h: #ffffff;
    --btn-bg-a: #1e40af;     --btn-bd-a: #1e40af;
}
.btn-success {
    --btn-bg: #047857;       --btn-bd: #047857; --btn-fg: #ffffff;
    --btn-bg-h: #065f46;     --btn-bd-h: #065f46; --btn-fg-h: #ffffff;
    --btn-bg-a: #064e3b;     --btn-bd-a: #064e3b;
}
.btn-info {
    --btn-bg: #0369a1;       --btn-bd: #0369a1; --btn-fg: #ffffff;
    --btn-bg-h: #075985;     --btn-bd-h: #075985; --btn-fg-h: #ffffff;
    --btn-bg-a: #0c4a6e;     --btn-bd-a: #0c4a6e;
}
.btn-warning {
    --btn-bg: #fbbf24;       --btn-bd: #fbbf24; --btn-fg: #0f172a;
    --btn-bg-h: #f59e0b;     --btn-bd-h: #f59e0b; --btn-fg-h: #0f172a;
    --btn-bg-a: #d97706;     --btn-bd-a: #d97706;
}
.btn-danger {
    --btn-bg: #be123c;       --btn-bd: #be123c; --btn-fg: #ffffff;
    --btn-bg-h: #9f1239;     --btn-bd-h: #9f1239; --btn-fg-h: #ffffff;
    --btn-bg-a: #881337;     --btn-bd-a: #881337;
}

/* ---------- Estados compartidos ---------- */
.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger) {
    background-color: var(--btn-bg);
    background-image: none;
    border-color: var(--btn-bd);
    color: var(--btn-fg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is(:hover, :focus, .focus) {
    background-color: var(--btn-bg-h);
    border-color: var(--btn-bd-h);
    color: var(--btn-fg-h);
}
.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is(:active, .active),
.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is(:active, .active):is(:hover, :focus, .focus),
.open > .dropdown-toggle.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger),
.open > .dropdown-toggle.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is(:hover, :focus, .focus) {
    background-color: var(--btn-bg-a);
    border-color: var(--btn-bd-a);
    color: var(--btn-fg-h);
}

/* Disabled: conserva el color de su variante; hover/focus no lo cambian. */
.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is(.disabled, [disabled]),
.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is(.disabled, [disabled]):is(:hover, :focus, .focus, :active, .active),
fieldset[disabled] .btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger),
fieldset[disabled] .btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger):is(:hover, :focus, .focus, :active, .active) {
    background-color: var(--btn-bg);
    border-color: var(--btn-bd);
    color: var(--btn-fg);
}
/* Un activo deshabilitado (p. ej. estatus seleccionado en solo lectura) se sigue viendo seleccionado. */
.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger).active:is(.disabled, [disabled]),
.btn:where(.btn-white, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger).active:is(.disabled, [disabled]):is(:hover, :focus) {
    background-color: var(--btn-bg-a);
    border-color: var(--btn-bd-a);
    color: var(--btn-fg-h);
}
/* ---------- Foco y presionado ---------- */
/* bootstrap-reset.css quita la sombra de btn-white con !important */
.btn.btn-white { box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important; }

/* style.css pone opacity .6 y sombra gris al presionar; se usa el tono "active". */
.btn:active,
.btn.active {
    opacity: 1;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12) !important;
}

/* Sin contorno punteado al hacer clic; anillo solo con teclado. */
.btn:focus,
.btn.focus,
.btn:active:focus,
.btn.active:focus,
.btn:active.focus,
.btn.active.focus {
    outline: 0;
}
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .35) !important;
}

/* ---------- Disabled (al final para ganar sobre :active/.active y btn-white) ---------- */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: .55;
    box-shadow: none !important;
}