/* ============================================================
   Carbon Design System — Buttons
   Sin border-radius, sin sombras decorativas, sin transforms
   Referencia: https://carbondesignsystem.com/components/button/
   ============================================================ */

/* ── Base ── */
.btn {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;             /* body-short-01 */
    font-weight: 400;
    line-height: 1.28572;
    letter-spacing: 0.16px;
    padding: 0.875rem 4rem 0.875rem 1rem;  /* Carbon button padding */
    border: none;
    border-radius: 0 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    text-decoration: none;
    position: relative;
    min-height: 3rem;               /* Carbon button height */
    transition: background-color 70ms cubic-bezier(0,0,0.38,0.9),
                box-shadow 70ms cubic-bezier(0,0,0.38,0.9),
                border-color 70ms cubic-bezier(0,0,0.38,0.9),
                outline 70ms cubic-bezier(0,0,0.38,0.9);
    outline: none;
    -webkit-appearance: none;
    vertical-align: top;
    width: auto;
}

/* Carbon usa padding compacto para botones sm */
.btn-sm {
    min-height: 2rem;
    padding: 0.375rem 3rem 0.375rem 0.75rem !important;
    font-size: 0.875rem;
    border-radius: 0 !important;
}
.btn-lg {
    min-height: 4rem;
    padding: 1rem 4rem 1rem 1.25rem !important;
    font-size: 1rem;
    border-radius: 0 !important;
}

/* ── Primary ── */
.btn-primary {
    background-color: var(--carbon-blue) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--carbon-blue-hover) !important;
    box-shadow: none !important;
    transform: none !important;
}
.btn-primary:active:not(:disabled) {
    background-color: var(--carbon-blue-active) !important;
    transform: none !important;
}
.btn-primary:focus {
    box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px var(--carbon-blue) !important;
    outline: none !important;
}
.btn-primary:disabled {
    background-color: var(--carbon-ui-03) !important;
    color: var(--carbon-text-03) !important;
    cursor: not-allowed;
}

/* ── Secondary ── */
.btn-secondary {
    background-color: var(--carbon-ui-05) !important;  /* Carbon secondary = $gray-80 */
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.btn-secondary:hover:not(:disabled) {
    background-color: #4c4c4c !important;
    transform: none !important;
}
.btn-secondary:active:not(:disabled) {
    background-color: #6f6f6f !important;
}
.btn-secondary:focus {
    box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 2px var(--carbon-ui-05) !important;
    outline: none !important;
}

/* ── Tertiary (Outline Primary equivalente) ── */
.btn-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--carbon-blue) !important;
    color: var(--carbon-blue) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.btn-outline-primary:hover:not(:disabled) {
    background-color: var(--carbon-blue-subtle) !important;
    color: var(--carbon-blue-hover) !important;
    transform: none !important;
}
.btn-outline-primary:focus {
    box-shadow: inset 0 0 0 2px var(--carbon-blue) !important;
    outline: none !important;
}

/* ── Ghost (Outline Secondary equivalente) ── */
.btn-outline-secondary {
    background-color: transparent !important;
    border: 1px solid var(--carbon-ui-04) !important;
    color: var(--carbon-text-02) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--carbon-hover-ui) !important;
    transform: none !important;
}

/* ── Success ── */
.btn-success {
    background-color: var(--carbon-green) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.btn-success:hover:not(:disabled) {
    background-color: #0e6027 !important;
    transform: none !important;
}
.btn-success:active:not(:disabled) { background-color: #044317 !important; }

/* ── Warning ── */
.btn-warning {
    background-color: var(--carbon-yellow) !important;
    border: none !important;
    color: var(--carbon-text-01) !important;
    box-shadow: none !important;
}
.btn-warning:hover:not(:disabled) {
    background-color: #d2a106 !important;
    transform: none !important;
}

/* ── Danger ── */
.btn-danger {
    background-color: var(--carbon-red) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.btn-danger:hover:not(:disabled) {
    background-color: #b81922 !important;
    transform: none !important;
}

/* ── Info / Teal ── */
.btn-info {
    background-color: var(--carbon-teal) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.btn-info:hover:not(:disabled) {
    background-color: #006460 !important;
    transform: none !important;
}

/* ── Focus global ── */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
    box-shadow: inset 0 0 0 2px var(--carbon-blue) !important;
    outline: none !important;
}

/* ── Pagination — Carbon style ── */
.pagination {
    gap: 0;
    border: 1px solid var(--carbon-separator);
    display: inline-flex;
}
.page-link {
    border-radius: 0 !important;
    border: none !important;
    border-right: 1px solid var(--carbon-separator) !important;
    color: var(--carbon-text-01) !important;
    background-color: var(--carbon-bg-2) !important;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    transition: background-color 70ms ease;
}
.page-link:hover {
    background-color: var(--carbon-hover-ui) !important;
    box-shadow: none;
}
.page-item.active .page-link {
    background-color: var(--carbon-blue) !important;
    border-color: var(--carbon-blue) !important;
    color: #ffffff !important;
    box-shadow: none;
}
.page-item.disabled .page-link {
    color: var(--carbon-text-03) !important;
    background-color: var(--carbon-ui-01) !important;
    cursor: not-allowed;
}
.page-item:last-child .page-link {
    border-right: none !important;
}

/* ============================================================
   Botones de acción en tablas — compactos, solo icono
   Patrón: btn btn-sm btn-outline-* / btn-success / btn-danger
   ============================================================ */

/* Reset del padding base para btn-sm en tablas */
td .btn.btn-sm,
th .btn.btn-sm {
    min-height: 2rem;
    height: 2rem;
    width: 2rem;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    border-radius: 2px !important;
    gap: 0;
    flex-shrink: 0;
}

/* Ver — ghost con borde sutil */
td .btn.btn-sm.btn-outline-secondary,
th .btn.btn-sm.btn-outline-secondary {
    background-color: transparent !important;
    border: 1px solid var(--carbon-ui-04) !important;
    color: var(--carbon-text-02) !important;
    box-shadow: none !important;
}
td .btn.btn-sm.btn-outline-secondary:hover,
th .btn.btn-sm.btn-outline-secondary:hover {
    background-color: var(--carbon-hover-ui) !important;
    border-color: var(--carbon-ui-05) !important;
    color: var(--carbon-text-01) !important;
}

/* Editar — outline azul */
td .btn.btn-sm.btn-outline-primary,
th .btn.btn-sm.btn-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--carbon-blue) !important;
    color: var(--carbon-blue) !important;
    box-shadow: none !important;
}
td .btn.btn-sm.btn-outline-primary:hover,
th .btn.btn-sm.btn-outline-primary:hover {
    background-color: var(--carbon-blue-subtle) !important;
    color: var(--carbon-blue-hover) !important;
}

/* Aprobar / Confirmar — verde relleno */
td .btn.btn-sm.btn-success,
th .btn.btn-sm.btn-success {
    background-color: var(--carbon-green) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
td .btn.btn-sm.btn-success:hover,
th .btn.btn-sm.btn-success:hover {
    background-color: #0e6027 !important;
}

/* Eliminar / Anular — rojo outline */
td .btn.btn-sm.btn-outline-danger,
th .btn.btn-sm.btn-outline-danger {
    background-color: transparent !important;
    border: 1px solid var(--carbon-red) !important;
    color: var(--carbon-red) !important;
    box-shadow: none !important;
}
td .btn.btn-sm.btn-outline-danger:hover,
th .btn.btn-sm.btn-outline-danger:hover {
    background-color: var(--carbon-red-light) !important;
    color: var(--carbon-red) !important;
}

/* Eliminar relleno (btn-danger directo) */
td .btn.btn-sm.btn-danger,
th .btn.btn-sm.btn-danger {
    background-color: var(--carbon-red) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
td .btn.btn-sm.btn-danger:hover,
th .btn.btn-sm.btn-danger:hover {
    background-color: #b81922 !important;
}

/* Warning / Especial */
td .btn.btn-sm.btn-warning,
th .btn.btn-sm.btn-warning {
    background-color: var(--carbon-yellow) !important;
    border: none !important;
    color: var(--carbon-text-01) !important;
    box-shadow: none !important;
}
td .btn.btn-sm.btn-warning:hover,
th .btn.btn-sm.btn-warning:hover {
    background-color: #d2a106 !important;
}

/* Agrupar botones de acción — gap consistente */
td .btn.btn-sm + .btn.btn-sm {
    margin-left: 4px;
}